ネイティブJavaScriptによるDOM操作の概要と各種基本操作

jQueryを使用せずに、ネイティブなJavaScriptのみでDOM操作を行う場合に、抑えておきたい基本的なことと、DOMの基本操作についてまとめました。

JavaScript互換性の要！Symbol（シンボル）について

シンボル（Symbol）はES2015から利用可能になった新しいプリミティブデータ型で、テキストではないユニークなキーを表します。シンボルはその必要性や使いどころがイマイチ分かりづらいので少し掘り下げて調べてみました。

【Chrome】参照型変数を console.log/dir した時の挙動が怪しい

普段当たり前のように使っている console.log や console.dir ですが、Chromeデベロッパーツールで参照型変数を console.log/dir した時の挙動が少し怪しいと感じたので調べてみました。単純化したコード例を元に「何が怪しいのか」を説明します。

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

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

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

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

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

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

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

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

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

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

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

Babel(6to5)をWindows10で使う

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

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

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