DESIGNMAP

まったくのゼロからフロントエンドエンジニアを目指すための独学方法 vol.3 - DOM/JavaScriptの言語仕様/ECMAScript6/Node.js/Babel/Browserify

記事公開日:2016年09月22日

frontend-engineer-2016

この記事は前回からの続きです。

DOM操作で定番のUIをつくってみよう

DOM操作というとjQueryを使うと短いコードで実装ができる。とはいえいきなりjQueryを使ってしまうとコードがショートカットになりすぎてしまって逆に分かりにくい部分がある。

確かな力が身につくJavaScript「超」入門』(狩野 祐東, 2015)は本の終盤近くまでjQueryを使わないでプレーンなJavaScriptだけでDOM操作をする入門書である。終盤手前でjQueryを学び「開閉ナビゲーション」「ドロップダウンメニュー」「Ajax」などの定番のUIサンプルをつくり、一番最後にInstagramと連携するサンプルを作る構成になっている。工夫された構成でおすすめしたい。

jQuery本では『作りながら学ぶjQueryデザインの教科書』(狩野 祐東, 2014)、『コアjQuery+プラグイン/jQuery UI 開発実践技法』(Bear Bibeault / Yehuda Katz, 2011)をおすすめしたい。作りながら学ぶjQueryデザインの教科書は「モーダルウィンドウ」「ウィンドウ上端で固定するナビゲーション」などの定番UIをjQueryで作っていく。『コアjQuery+プラグイン/jQuery UI 開発実践技法』は基礎から中級までをカバーした密度の高い本である。

jQueryでいろいろなUIを作るのは楽しい。いろいろなサンプルをつくってがんがんコードを書いて欲しい。自作のjQueryのプラグインを書いたらGitHubで公開しておこう。

JavaScriptの言語仕様を勉強しよう

データ型、オブジェクト、function、プロトタイプ継承、クロージャなどJavaScriptのコアの仕様部分を勉強していこう。JavaScriptは独特な仕様が多く、他の言語経験者でも驚く仕様にみちている。『パーフェクトJavaScript』(井上 誠一郎/土江 拓郎/浜辺 将太, 2011)のPart2、『開眼! JavaScript』(Cody Lindley, 2013)、『 JavaScript Ninjaの極意』(John Resig / Bear Bibeault, 2013)をおすすめしたい。

『パーフェクトJavaScript』のPart2部分は何度も繰り返して読んだ。解説のスタイルがおもしろく分かりやすい。JavaScript独特のイディオムまでフォローしているのがありがたい。『開眼! JavaScript』はコンパクトに仕様がまとまっている。『JavaScript Ninjaの極意』はjQueryの作者であるJohn Resigが書いた本で基礎から上級までをカバーした本である。

さらに『オブジェクト指向JavaScriptの原則』(Nicholas C. Zakas, 2014)も読んでおきたい。コンパクトにECMASCript5の仕様を学ぶことができる。図解が豊富でわかりやすい。本書をECMAScript6を学ぶ直前に読んでくと、ECMAScript6の導入がスムーズである。

ECMAScript6の言語仕様を学ぼう

2015年に策定が完了したECMAScript6で大きく機能が追加された。過去一度はボツになったclass構文も盛り込まれている。またブロックスコープ、Iterator、Arrow Functions、モジュールなどが盛り込まれ、一気に本格的な言語になったという印象だ。

最近のJavaScriptのコードを読んでいると、ECMAScript6で書かれたコードも多くみるようになってきた。いまのJavaScript開発ではECMAScript6を積極的に使い、後述するBabelで変換するのが標準になっている。

書籍は『Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers』(Nicholas C. Zakas, 2016)を通読しておきたい。細かい部分までしっかりまとまっている。これは正直翻訳版が欲しい本だが、翻訳を待っているわけにはいかない。英語のドキュメントを読む場面はフロンドエンドの勉強では避けられない。

2016年以降は毎年ECMAScriptはリリースされ、現在、ECMAScript7がリリースされている。今後は一定の安定したペースで新仕様が追加されていく予定だ。

Node.jsでファイル操作の基礎を学ぶ

Node.jsの登場はフロントエンドの世界が大きく変わった契機になった。次々とNode.js製の開発ツールがどんどん生まれていく。

Node.jsはWebブラウザではなく、サーバー側で動作するJavaScriptである。ファイル操作ができるのが大きい。Webサーバーや開発ツールをつくることができる。まずは勉強用にNode.jsの標準モジュールを使ってWebサーバーをつくってみよう。Webサーバーを自分でつくる経験は根本的なWeb技術の理解にもつながる。

モジュールとはプログラムを機能別に分割したファイルである。ライブラリとほぼ同じ意味である。例えば、ファイル操作をする場合は、fsというモジュールを読み込む。ディレクトリ作成、ファイル作成、読み込み、保存などができる。

Node.jsで特筆すべきなのはモジュールという仕組みである。jQueryを使うときに、複数のscriptタグをつかって複数のファイルを読み込む。読み込む順番も重要だ。そのときに名前が衝突しないように、コードをfunctionでくるんで即実行するような奇妙な書き方をした。

Node.jsはモジュールを読み込むときは名前の衝突がおきないで、複数の依存しあうモジュールを管理する仕組みがある。

さらにNode.jsにはNode Package Manager(NPM)というパッケージシステムがある。パッケージとはモジュールや開発ツールを配布する仕組みである。現在はNode.jsをインストールをすると同時にNPMが使えるようになっている。現在、フロンドエンドの開発ツールの多くがNPMを通して配布されていて、npmコマンドでインストールすることがほとんどである。この後に学ぶBabel、Browserify、Gulp等はすべてNode.jsでつくられたツールで、npmコマンドでインストールしていく。ここでVol2でUNIXコマンドをやっておいた経験が活きてくる。

Babelを使っていこう

Babelとは仕様策定中のJavaScriptの機能で、Webブラウザでまだサポートされていない機能を、変換して動くようにできるトランスパイラである。トランスパイラとはプログラムを変換するツールである。BabelはNode.jsでつくられている。CUIツールでbabelコマンドを使っていく。

JavaScriptはECMA Internationalという団体で仕様が決められる。仕様が策定されると、Webブラウザ側がその仕様を実装することになっている。とはいうもののWebブラウザによっては、実装が遅れてしまうこともある。Babelをつかうことで、Webブラウザの実装を待つことなく、策定中、策定完了したばかりの仕様のコードを書くことができる。

Browserifyをさわってみよう

BrowserifyもNode.jsでつくられたツールで、CUIツールでbrowserifyコマンドを使っていく。もともとはNode.jsのモジュール機能をWebブラウザでも使用できるようにつくられた。モジュール間の依存関係を解決しながら1枚のファイルに結合をすることができる。

WebブラウザのJavaScriptでは従来scriptタグをつかって複数のファイルを読み込んでいた。この場合、ファイルの依存関係があり、読み込む順番が重要になる。近年ではページの中のコンポーネント別にJavaScriptファイルを分ける開発がふえている。ファイル数が増えてくると、依存関係は複雑になっている。

Browserifyをつかえば、自動で正しい順番で複数のモジュールやライブラリを読み込んで、最終的に1枚のJavaScriptファイルにまとめることができる。HTMLは1枚のJavaScriptファイルだけを読み込むだけである。まとめることで、HTTPリクエエストの回数を抑えることもできる。

ECMAScript6でようやくJavaScriptにモジュールという仕組みが正式に策定された。最近のJavaScriptでは開発中はECMAScript6のモジュールの構文で書き、Babelを使いBrowserifyで実行できるモジュールの構文に変換し、Browserifyで1枚のファイルをまとめるという流れが多い。まとめたファイルは、「bundle.js」というファイル名をつけるのが慣例である。

BabelもBrowserifyも技術が過度的なフロンドエンド開発で果たす役割は大きい。いずれもNode.jsでファイル操作のしっかり基礎を学んでおくのが習得のポイントだ。

次回に続きます。

まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム 目次

↑このページの上に戻る