コンパイラかく語りき

import { Fun } from 'programming'

JavaScript

jQuery脱却の第一歩 doc-readyをつかってみる

クライアントのJSを書くとき、DOMのロードを待つ必要がある時があります。そんなとき、jQueryなら、以下のように書きますね。 $(document).ready(function() { // your code comes here... }) ただ、JSの小さなモジュールを作るためにいちいちjQueryを使うの…

Promiseチェーンの中で条件を満たすまで同じ処理を繰り返す(リトライ処理)

Promiseチェーンの中で、特定の条件を満たすまで同じ処理を繰り返したい場合があります。 例: データロード処理 そんな場合のコードサンプルです。 コード こちら。 const retryPromise = (func, delay) => { const retry = (resolve, reject) => func() .th…

今さら始めるJavaScript Promiseの基礎の基礎

最近ようやくPromiseを触り始めました。わりと雰囲気で使ってしまっているので、ここらで自分のために整理を…。 ただ、基本的な例がすでに複雑というか、初心者にとってはムズい気がするので、超噛み砕いてみました。 Promise - MDN 最小構成 Promiseオブジ…

最小構成で始めるRollup.js

最小構成で始めるRollup.js Rollup.jsについては、既に素晴らしい記事があります。 Rollupがちょうどいい感じ しかし、初心者がRollupを使い、なおかつJSのモジュールシステムに馴染みがないとすると、もっとシンプルな構成が望ましいかなと思い、この記事を…

React, Express, Webpack, Relay, GraphQLでつくるSPA

アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…

【JavaScript】Array.prototype.sliceとArray.prototype.spliceの違い

Arrayの標準メソッドにはsliceとspliceがあります。紛らわしいですよね。しかも挙動まで似ています。 ちょっと自分の中で違いを忘れてきてしまっていたのでメモ。 Array.prototype.slice 配列の一部をコピーします。 gist1ab3b38c61b8413eae2b4981cfc614c7 d…

【JavaScript】配列の中からペアではない単一要素を見つけるにはXOR(排他演算子)が便利

プログラミングの問題を解いていて、ベストプラクティスを発見したのでメモ。 問題 奇数個の要素を持ったInt型の配列Aが与えられる。その中からペアにはならない単一の要素を見つける。 例 A[0] = 9, A[1] = 3, A[2] = 9, A[3] = 3, A[4] = 9, A[5] = 7, A[6…

Qiitaの"俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか"をやってみる

非同期周りにまだ慣れてない感じがあったので、素振りです。 こちらの記事をただただ写経しました。 qiita.com 書いたコードはこちらに。 github.com Promiseにまだまだ慣れていないなと感じたので、改めて噛み砕いてQiitaに投稿しました。 qiita.com

webpackはどのように動いているのか(1)

ずっとWebpackのソースコードを読んだり、仕組みを知りたかったのですが、時間がなくてやれずにいました。 今日からはWebpackの仕組みについて、ちょっとずつ探っていこうと思います。何度かに分けて書きますが、記事が溜まってきたらQiitaにでもまとめます…

npmパッケージ「array-flatten」

npmのパッケージを触ってみるシリーズ。 chuckwebtips.hatenablog.com chuckwebtips.hatenablog.com array-flattenとは 配列を平坦化してくれるパッケージです。 詳しくは後述の例を参照ください。 github.com インストール $ npm install array-flatten 使…

webpack上でglobを使う

webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されてい…

SourceMapとは何なのか

JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。 Json形式で記述されています。 なぜSourc…

JavaScriptでユーザーの位置情報を取得する

JavaScriptでユーザーの位置情報を取得する方法について調べた。 syncer.jp www.htmq.com 意外とカンタンにできるっぽい。 しかも、W3Cが策定に関わっているので、安心仕様。 書いたコードがこちら。 gistdbc84ee9993fca1615ff このコードを読み込んでブラウ…

JavaScriptで競技プログラミングを解く際のテンプレをつくった

これの続きです。 chuckwebtips.hatenablog.com JavaScriptで競技プログラミングを解く際の、ある程度のテンプレを作成しました。 ※ 筆者はまだ競技プログラミングを2回しか受験していません。今後テンプレには手が加えられる可能性があります。 こちらです…

JavaScriptで数値ソートする場合

JavaScriptで配列の内容をソートするとき、sort関数を使います。 ただし、sort関数はデフォルトで文字列比較を行ってしまうんですね。 数値比較をするには、引数に比較関数を渡してあげる必要があるんですね。 すっかり忘れていました。 サンプルコード gist…

配列よりもオブジェクトを使う局面があると学ぶ

競技プログラミングで初めて制限時間に引っかかりました。 対処法を考えているうちに、データ構造について1つ学びがあったのでメモします。 ちなみに、重くなった原因はユニーク判定の仕方でした。 最初に書いたコードがこちら。 gist9b15f1b88ba817838fc7 …

ダブリのある冗長な条件分岐はマッピングできると気づいた

例えば、以下のような2重のswitchがあるとします。 gist2f786f89069acd1edce1 まず、主語が何であるかによって分岐します。次に、時間帯によって分岐して、行動をalertします。 そんな2重の条件分岐があるとします。 でも、これってマッピングできるなあと…

【JavaScript】文字列としての数値を加算する関数を書いた。

今回は独自に作成した加算関数を紹介します。 これの続きです。 chuckwebtips.hatenablog.com 加算関数をつくる目的 JavaScriptのルールでは、'5' + '10'は'510'となります。 見た目的には数値なのに、クオーテーションで囲まれているために、文字列の結合が…

JavaScriptで「'6000' - ('40' + '10') * '50'」の答え分かります??

競技プログラミングで3分ほどハマった。検証が楽しくてさらに10分ほどハマった。 '6000' - ('40' + '10') * '50' の結果です。 パット見で分かりますか??? ' ' は文字列を表します。 ふつうに数値として計算したら、3500ですよね。 ところが答えは -19…

【JavaScript】splitとjoinで不純物探知

stringクラスのsplitとarrayクラスのjoinを使えば、不純物探知ができるよねというお話。 以下のコードを例に取ります。 gist2676ae0c57f3323742be 最初にhelloがたくさん並んだ文字列があります。一見、すべてhelloに見えますね。 次に、split('hello').join…

JavaScriptのsplitを自分で書くとこうなる

車輪の再発明です。 区切り文字列を配列にしたいとします。 それをいちいちfor文で走査して配列化してしまいました。でも、splitを使えば一瞬だよねというお話。 例えば、以下の変換をしたいとき、 var str = 'abc de fg'; var ary = ['abc', 'de', 'fg']; i…

JavaScriptで処理時間を計測してみよう!

最近はじめてconsoloe.time()を知りました。 この関数を使うと、JavaScriptの処理時間を計測できるようです。 使い方 以下のように使います。 gista72712964611fe8743f7 使ってみる まずは空の状態で使ってみます。nodeで実行するとこのとおり。 処理がない…

【関数型プログラミング】underscore.jsを使って高階関数を書いた

こちらの続きみたいな感じ。 chuckwebtips.hatenablog.com 続きにしては文量多い。「JavaScriptで学ぶ関数型プログラミング」の第4章をひたすら写経しました。 ので、ブログに残します。 所感 高階関数自体はそこまで難しくない。複雑でなければ。 いや、複…

君はもうJavaScriptの標準入出力を体験したか!?

僕は先日はじめて体験しました(遅い) 自分ができるようになったのを良いことに、自慢気に書いていこうと思います。JavaScriptの標準入出力について。 標準入出力って?? Web系の人にはピンと来ないかもしれませんね。 ターミナル(コマンドライン)上での…

JSファイル内でJSファイルを読み込む方法

小ネタです。 JSファイル内でJSファイルを読み込む。今までやったことなかったので、メモしときます。 今まで いままではHTMLで読み込んでました。 こんな感じですね。 これから requireという関数?を使えばよいらしいです。 こんな感じです。 同じディレク…

【関数型プログラミング】JavaScriptの高階関数を書いてみる

いまこちらの本を読んでいます。 JavaScriptで学ぶ関数型プログラミング。 まだ半分しか読んでいませんが、ちょっとメモしておきます。 今回は高階関数について。 JavaScriptには高階関数というものがあります。 書籍によると、その定義は 関数を引数にとる …

ここらでJSONについておさらいしておく(coffee使用)

chuckです。 JSONってあるじゃないですか。僕、仕事で2回くらいしか使ったことないんですよね。 いまさらですが、軽くおさらいしておこうと思います。 参考にするのは、「JSON 入門」でヒットしたこの記事。 www.webopixel.net JSONとは まあデータ形式の一…

JavaScriptでさくっと高階関数をつくる

JavaScriptでつくる高階関数のうち、もっともシンプルなものを作成します。 gist507dd0644a06cc368c6a splatという関数は、引数に関数を受け取って、戻り値として関数を返します。 この時点ではまだあまり恩恵を感じませんが、これは立派な高階関数です。 と…

【HTML】画像を動画っぽく表現してみる

chuckです。 オシャレなサイトを発見しました。こちらです。 www.startup50.jp こちらのTOPページの背景画像が動いている(ように見える)んですよね。 面白いなーと思ったので、自分なりに再現してみます。

【JavaScript】Arrayクラスのデフォルト関数を使い倒す

どうも!chuckです。今回はJavaScriptの配列についての復習です。 JavaScriptの配列はそもそも、Arrayオブジェクトというグローバルオブジェクトを指します。 配列を定義するということは、このArrayオブジェクトのインスタンスを作るということです。 実際…

JavaScriptのセミコロン自動挿入について調べた

どうも!chuckです。 JavaScriptでは文末のセミコロンを省略できます。それはなぜかと言うと、勝手にセミコロンを自動挿入して補ってくれるためです。 ただ、最近コーディングしていて気づいたんですが、時々セミコロンを挿入してくれないんですよね。シンタ…

自作JavaScriptプラグイン改修 ~即時関数をつかってグローバル汚染を防ぐ~

どうも!chuckです。 JSのプラグインを開発しましたので、改修します。 chuckwebtips.hatenablog.com github.com

JavasScriptのクロージャについておさらい

JavaScriptのクロージャについて、おさらいします。 developer.mozilla.org

JavaScriptのレキシカル変数について

どうも!chuckです。 JavaScript中級者に向けて、今日も勉強していきますよー! chuckwebtips.hatenablog.com 今回学ぶのは、レキシカル変数について。クロージャはそこそこ分かったのですが、レキシカル変数についてはわかっていなかったようです。 なので…

JSプラグインを作り始めました

どうも!chuckです。 こちらでも書きましたが、JavaScriptのプラグインを作り始めました。 chuckwebtips.hatenablog.com まだまだ作り途中ですが、制作過程などを記録しておこうと思います。

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~void, call, apply~

どうも!chuckです。 引き続きUnderscore.jsのコードを読んでいきます。 chuckwebtips.hatenablog.com ちなみに、現在100行まで読んだようです。ただし全部で1600行あるので先は長いですね…。

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~アンダースコアをグローバルオブジェクトとしてセットする~

どうも!chuckです。 Underscore.jsを読んでいきます。 chuckwebtips.hatenablog.com

データ型の変換がすぐ分かる!JavaScriptプラグインを自作しました

どうも!chuckです。 前々からやりたかったのですが、ついにJavaScriptプラグインを自作しました。なので記録します。と言ってもすごくカンタンなプラグインですがw

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~コンストラクタを利用してthisの値を操作する~

どうも、chuckです。引き続き、Underscore.jsを読んでいきます。 JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~プロトタイプとプロパティ~ - コンパイラかく語りきchuckwebtips.hatenablog.com

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~プロトタイプとプロパティ~

どうも!chuckです。 引き続きUnderscore.jsを読み解いていきます。 前回の記事 <a href="http://chuckwebtips.hatenablog.com/entry/2015/08/27/070000" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015/08/27/070000">JSライブラリ「…

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~グローバルオブジェクトのセット~

どうも!chuckです! ついに、今日からライブラリリーディングを始めます! ライブラリリーディングとは 文字通り、プログラミングのライブラリを読むことです。JavaScriptで書かれたライブラリを読むことで、JavaScriptへの理解を深めることが目的です。 な…

Underscore.jsを学ぶ part.7

どうも!chuckです。 引き続きUnderscore.jsについて勉強していきます。 Underscore.jsを学ぶ part.1 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.6

どうも!chuckです。 引き続き、Underscore.jsについて学んでいきます。 Underscore.jsを学ぶ part.3 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.5

どうも!chuckです。 引き続きUnderscore.jsの勉強をしていきます。 Underscore.jsを学ぶ part.3 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.4

どうも!chuckです。 引き続きUnderscore.jsの勉強をしていきます。 Underscore.jsを学ぶ part.3 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.3

どうも!chuckです 引き続きUnderscore.jsについて勉強していきます。 Underscore.jsを学ぶ part.2 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.2

どうも!chuckです。 前回に引き続き、underscore.jsについて勉強していきます。 Underscore.jsを学ぶ part.1 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.1

どうも!chuckです。AngularJS, React.jsと学んできたので、次はUnderscore.jsについて勉強していきます。 参考にしたサイト様↓ JavaScript - 遅すぎたUnderscore.js入門 - 全体像 - Qiitaqiita.com

JavaScriptはシングルスレッドだとようやく知ったのでメモ

どうも!chuckです。 前回、JavaScriptのスキル判定をしたところ、初心者以上中級者未満だったことが判明しました。 <a href="http://chuckwebtips.hatena…

JavaScriptの業務スキル判定表に挑んでみた

以前ブクマしたこちらの記事。 <a href="http://d.hatena.ne.jp/language_and_engineering/20100111/p1" data-mce-href="http://d.hatena.ne.jp/language_and_engineering/20100111/p1"&amp…