Help us understand the problem. What is going on with this article?

最近のJavaScriptの開発と環境の基本を1からReactサーバサイドレンダリングまで1ステップずつ体得する

More than 3 years have passed since last update.

キーワード: JavaScript, Babel, Webpack, Koa, React

最近(たぶん)のJavaScriptの開発と環境の基本を1からReactサーバサイドレンダリングまで1ステップずつ体得するための殴り書きロードマップです。
人それぞれJavaScript界隈を敬遠してきた理由はあると思います。私は半年ほど前にちょっと触ってみるかと思い立って野良記事を参考に環境構築していたところ、当然のように書かれていたimport/export文が動かないところからBabel->Gulp->Webpackと次々にアイテムが現れてに一度手を引きました。
今回改めて思い立って再チャレンジし、概念とツールが一緒くたになった日本語の与太記事に辟易としながら、ひとつずつ整理して試しましたので、その際のメモの共有です。なぐり書きではありますが、出来合いのツールで済ませるテキトーなチュートリアルにうんざりしている人に概念をひとつずつステップを踏んで抑えていくための一助になれば幸いです。

対象

  • スクリプト言語のプログラムが書ける
  • Webの仕組みは理解している
  • CUIが使える
  • 5年前のJavaScriptなら分かる
  • ReactとかGulpとか聞いたことある気がする
  • ドキュメントとStackOverflowが読める

0からじゃなくて1からです。PHPとかRailsやるけどnode以降のJavaScriptは眺めてきただけみたいな置いてけぼりエンジニアを想定しています。というか私が追っかけた流れをまとめ直したものです。

ステップ

  1. Nodeの環境を構築する
  2. Node流モジュールで分割JavaScriptプログラムを書くる
  3. ES2015流モジュールで分割JavaScriptプログラムを書いて実行する
  4. Expressか素のNodeで簡単なWebプログラムを書く
  5. クライアントサイドJavaScriptを分割して書いてサーバーサイドでバンドルする
  6. Koa2でWebプログラムを書きなおして更に今時JavaScriptに慣れる
  7. UIをクライアントサイドReactで書き上げる
  8. 仕上げにReactのサーバサイドレンダリングをする
  9. 周辺のことを色々抑える

詳細メモ

Nodeの環境を構築する

  • バージョン管理ツールの導入します。
    • 同等のものは色々あるけど悩むならnodebrewでも入れておけばいい
    • 最近はnというのがが流行ってるぽいけど一文字の時点でやめたほうがいいたぶん絶対
    • Windowsだったらnodistというのを入れる
    • ポイント: nodebrew installよりnodebrew install-binaryで入れたほうが時間が短い
  • nodebrewからnodeをインストールしてnodeコマンドとnpmコマンドが使えるようにします。
    • nodeコマンドは処理系。ファイル名を引けば実行する、何も引かなかればREPLが走る
    • npmはパッケージ(ライブラリ)管理ツール。gembundlereasy_installpipと近い

Node流モジュールで分割JavaScriptプログラムを書く

やること

  • requiremodule.exportsを使って、node (ファイル名)以外の特別な作業の要らない分割プログラムを書いて実行します。
  • npmを利用して何かライブラリを入れてnode流パッケージマネジメントも体得します。
    • 導入したライブラリをrequire関数を通じて利用する
    • package.jsonnode_modulesと言ったファイル構成とnpmの--save--save-devオプションを理解する
  • 旧JavaScriptやプログラミングに慣れていれば、nodejsを試してみた系の記事を参考にすごく簡単なのを試して見るくらいで問題ないです。
    • Class構文とかアロー関数とかはそのままで使えるはずなので試してみてみても良い

抑えること

  • nodeの使い方
  • npmコマンドかライブラリを入れてnode流パッケージマネジメントも体得します。
    • 導入したライブラリをrequire関数を通じて利用する
    • package.jsonnode_modulesと言ったファイル構成とnpmの--save--save-devオプションを理解する
  • 旧JavaScriptやプログラミングに慣れていれば、nodejsを試してみた系の記事を参考にすごく簡単なのを試して見るくらいで問題ないです。
    • Class構文とかアロー関数とかはそのままで使えるはずなので試してみてみても良い

ES2015流モジュールで分割JavaScriptプログラムを書いて実行する

やること

  • まずは悲運にもモジュール化手法が乱立してしまったJavaScriptの境遇に思いを馳せます。
  • ついでに仕様だけが先走るJavaScriptに思いを馳せます。
    • ES6(ES2015),ES2016,ES.next,stage,...あたりについて策定やサポート状況をググる
    • Node.jsやio.jsの紆余曲折も余談としては面白いかも
  • 純正node.jsでは実行できないことを理解しつつimportexportを利用した分割プログラムを書きます。
  • babelというトランスパイラを利用して、純正node.jsで実行できるJavaScript(のモジュール記法)に変換します。
    • babelは、純正node.js(あるいはブラウザのJSエンジン)で実行できない未来のJSを今実行できるJSに変換するツール
    • npm install --save-dev babel-cliで導入、./node_modules/.bin/自動化babel HOGE --out-dir FUGAで変換
      • 変換用のpresetが必要なのでそれもinstallすること。
      • 単一ファイルにも出力可能(--out-fileオプション)だがここでははファイル構成を保って変換
      • 変換後のファイルはなんとなく読めるのでざっと目を通すと良い
        • importrequireに変換されているのを実感する(それだけじゃない)
    • コードの変換(トランスパイル)に際してsource mapという概念も現れるので抑えておく
    • babel-registerとかbabel-nodeとかあるけどお前にはまだ早い
  • 変換してしまえばnode (変換後のエントリポイント)で動くはずです。試してみましょう。

抑えること

  • モジュールの現状の理解
  • トランスパイラbabelの役割: トランスパイラは未来のJSだけでなく、AltJS(TypeScript)やReactJSXも今の記法に変換してくれます。

Expressか素のNodeで簡単なWebプログラムを書く

やること

  • ググれば沢山出てくるそれを参考にして、CSS付きHello Worldを表示できる程度になぞります。
    • babelやgulpやgruntやbrowserifyやwebpackやreactを使う入門記事は害悪
    • nodeコマンドだけで実行できる範囲に収める
  • Reactのサーバーサイドレンダリングをするのでその下地です。

抑えること

  • サーバーサイドJavaScriptの基本

クライアントサイドJavaScriptを分割して書いてサーバーサイドでバンドルする

やること

  • クライアントサイドJavaScriptの存在がJavaScriptのモジュール分割を一層ややこしくしていることに思いを馳せます。
  • クライアントサイドで走らせたいJavaScript(HelloWorld程度でよい)をES2015流モジュールで書き、Babelで変換を噛ませます。
    • node_modules/.bin/babel clientscripts -d compiledclientscriptsとか
  • コンパイル済の分割コードをWebpackを利用して一つに纏めます。
    • npm install --save-dev webpack
    • node_modules/.bin/webpack compiledclientscripts/main.js ./client.jsとか
  • できた単一ファイルを先ほどのWebサーバを通してクライアントサイドで読込&実行できることを確認します。

抑えること

  • クライアントサイドJavaScriptでのモジュールのバンドリングの必要性
  • モジュールバンドラとしてのWebpackの利用方法、Webpack以外のモジュールバンドラの存在
  • Babelの役割とWebpackの役割の違いを整理する(ちゃんとロードマップに従っていれば自明のはず)
    • 実は今回はBabelのトランスパイルは不要だった
      • サーバー側のモジュール依存解決(実行時に参照)はNodeが行うので、Nodeが扱えるようにBabelがトランスパイルする
      • クライアント側のモジュール依存解決(実行前にバンドル)はWebpackが行うので、Webpackが扱える形式であれば問題ない
        • WebpackはES2015 Moduleのままで扱える: es6-loader
    • ブラウザが直接処理できない最新の記法文法やreactのJSXはBabelで変換してからバンドルする必要がある
      • 今回はこの後Reactをやることを想定して一応Babelを噛ませた

Koa2でWebプログラムを書きなおして更に今時JavaScriptに慣れる

やること

  • Koa.jsのバージョン2の使い方をググりながら、アクセスするとHelloWorldと返すWebプログラムを書きます。
    • generatorやasync/awaitといった記法を用いる
    • とりあえずfunction (ctx) { ctx.body='Hello World'; }すればよい
      • middlewareとか今回は別にいい
    • 情報量は少ないので無理しなくても良い
  • babelコマンドで変換という手順を踏んでから、nodeで実行する
    • 最先端JS記法をバリバリ使いまくるので、トランスパイルが必須
    • いちいちコンパイルするのが怠くなったら楽をする方法を学ぶ
      • babel-nodebabel-register: 実行時に自動でコンパイルしてくれる
      • クライアントサイドは関係ないのでwebpackやbrowserifyでBabelが〜〜みたいな情報は無視すること

抑えること

  • import/exportだけでなく最先端記法でもBabelが必要で、それぞれに応じたbabel-presetがある
  • babelは事前コンパイルしなくても実行時に解決できる

UIをクライアントサイドReactで書き上げる

やること

  • Koa.jsで静的なファイル配信できるようにします。
  • Koa.jsの裏側は一旦忘れて、HTMLとクライアントJSを配信しながらReactのチュートリアルをやります。
    • クライアントJSのReactコードはJSXで分割して書いてBabelコンパイル+Webpackバンドルを行う
    • 余力があればReduxに手を出してもよい

抑えること

仕上げにReactのサーバサイドレンダリング(SSR)をする

やること

その他の周辺のことを色々

  • ファイル変更時のの自動な再コンパイル/サーバリロード/クライアントリロード
    • node-dev, Babel/Webpackのwatchオプション, LiveReload, BrowserSync, Webpack Hot Module Replacement等
  • タスクランナー(gulp, grunt)
  • ESLint
  • mochaなどのテストツール

まとめ

ちょっと前まではAltJS/JSライブラリの戦国時代、Bower、グルグル系タスクランナー等、JavaScript開発をするにあたって無数の辟易要因がありましたが、一通り落ち着いたように思います。改めて整理してみても不揃いな実行環境モジュールシステムの乱立とバンドリング問題フロントエンドUIの高度化ぐらいに的が絞られていて、しかもどれもデファクト候補の仕組みができつつあって、だいぶ見通しが良い感じです。この他の気になることを最後に「その他周辺のこと」としてまとめてみましたが、JSに限らずどの言語にも存在する一般的なWeb開発の課題しか残りませんでした。
これからのJavaScript開発が楽しくなりそうです。Webの未来は明るい。

tkynd
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away