もっこりJavaScript(JavaScript Tips)

ウィンドウリサイズ完了時に一度だけ関数を実行する

2016年10月08日

カテゴリー:

ウィンドウをリサイズさせた時に何か処理をしたい事はよくあると思いますが、単純にwindow.onresizeイベントにイベントハンドラを設定するだけだと、リサイズ中に何度もハンドラが実行されてしまいます。
今回はリサイズ完了時に一度だけハンドラを実行するための、ちょっとしたテクニックを紹介します。

JavaScriptにおけるモジュールとimport/exportの使い方

2016年09月30日

カテゴリー:

ES2015でついにモジュール化が標準仕様としてサポートされるようになりました。ブラウザへの実装はまだしばらく先のことになりそうですが、モジュールバンドラを利用すれば今からでも使うことができます。
今回はJavaScriptにおけるモジュールについての概要と、ES2015登場前までのモジュール化の手法(コーディングパターン、CommonJS/AMDなど)、ES2015のimport/exportを利用したモジュールの使い方をまとめました。

var, let, constの使い分けについて

2016年08月10日

カテゴリー:

ES2015から変数宣言にlet/constが使えるようになりました。実際のところ、var/let/constをどのように使い分ければ良いのか、そのベストプラクティスを調査&まとめました。

「…」←これ、ただの省略記号かと思ってました。(Spread operatorのお話)

2016年02月15日

カテゴリー:

最近のJSサンプルコードで見かけた三点リーダ「…」。
ただの省略記号かと思ったら、「Spread operator」というES2015で追加された新しい演算子らしいのでちょっと調べてみました。

ES2015(ES6)新構文:アロー関数(Arrow function)

2016年02月08日

カテゴリー:

ES2015(ES6)から新たに使えるようになった「アロー関数」について、基本構文や従来の無名関数との違いを少し掘り下げてまとめてみました。

アロー関数は、特にthisキーワードの扱いに注意が必要ですが、正しく使えばよりスマートにコードを書くことが出来るようになると思います。

Babel(6to5)をWindows10で使う

2015年10月29日

カテゴリー:

ES2015(ES6)をES5に変換するトランスパイラの1つ「Babel」をWindowsで使えるようにするためのセットアップ方法、およびBabelの基本的なコマンドの紹介です。

ES2015(ES6):次世代JavaScriptはもう実戦投入出来るか?

2015年10月16日

カテゴリー:

次世代JavaScriptとして長らく策定中であったES2015(ES6)ですが、2015年6月にようやく言語仕様が正式公開されました。フロントエンジニアにとってES2015の学習は必修科目ではあると思うのですが、どうせなら実戦投入を見据えて仕事を兼ねて学んでいきたいところです。しかしその場合は当然ながらブラウザの対応状況を考慮しなければなりません。
今回はそういったことを考慮した上で「ES2015はもう実戦投入出来るか?」という点に絞ってまとめてみました。

関数を理解すればクロージャは難しくない!

2015年08月31日

カテゴリー:

JavaScriptでは関数をマスターすることが何より重要です。関数が理解できればクロージャの不思議な挙動もごく当たり前のこととして理解できるはずです。
本エントリではクロージャの本質について、関数の特性という視点からまとめてみました。

複数の外部JSファイルを読み込む時の実行順序について

2014年10月14日

カテゴリー:

HTML内に複数の外部JSファイルを読み込む際、これらのJSファイル間に依存関係があるとコードが実行される順序が重要になりますが、これらはちゃんとHTMLファイル内に記述された順序でスクリプトは実行されるのでしょうか?

今回はこういった「複数の外部JSファイルの実行順序」という点について検証を交えながら少し掘り下げてまとめてみました。

即時関数のメリットと主な用途

2014年08月21日

カテゴリー:

即時関数は、名前を持たない関数をその場で実行しているに過ぎないため、本質的には通常の名前付き関数と同じです。そのため、「即時関数を使わなければ実現できない処理」といったものはあり得ません。それらは即時関数でなくとも通常の名前付き関数で処理することは可能です。

しかし即時関数は名前を持たないため、現在のスコープを汚染せずに新しいスコープを作成することができます。このことが通常の名前付き関数との違いであり、即時関数ならではの用途を生み出します。

1 / 512345