皆さんがどうかは知りませんが、しがないエンジニアであるところの私は2017年に生きているので、そろそろフロントエンド業界の皆様が纏めたであろう甘い汁をすすろうかと思います。

実行環境

何はともあれ実行環境を入れなければ始まりません。Nodejsなるものを入れます。

最新版はv8.1.4のようなのでこれを入れました。Nodejsのリリースサイクルとして、偶数は安定版(LTS)、奇数は開発版というものが使われてきたようなので、v8.1.4でも問題ないでしょう。ですが、前述したNodejsのサイトを見るとv6.11.1が安定版と記載されています。

偶数奇数パターンはなくなったように見えますが、現状は「なくなるかもしれない」というフワッとした状況のようです。よく分かりませんね。

私はクライアントマシンの環境構築にはanyenvを使っているので、これを利用してndenvをインストールしました。

$ anyenv install ndenv
$ exec $SHELL -l

パッケージマネージャ

NodejsもRubyやPythonと同じようにモジュールパッケージ機構を持ちます。Node Package Managerでそのままnpmです。同名のパッケージマネージメントコマンド npm が長く使われてきたのですが、近年高速に動作するnpm(パッケージマネージサイトのほうです)クライアントとしてFacebookがyarnを公開しました。npmコマンドとほぼ同等の機能が使える上に高速であるということなので、今回はこちらを使います。

前述の通りndenvを利用しているので、一緒にyarnもインストールするプラグインをインストールしました。

github.com

ndenv install をする前にこのプラグインを導入しておくと便利です。

$ ndenv install v8.1.4

モジュール群のPATH

yarnコマンドを使ってモジュールをインストールすると、そのディレクトリにnode_modulesというディレクトリが生成され、そのディレクトリにモジュール群の本体がインストールされます。

プロジェクト毎に利用したいモジュールのバージョンを変更したいなど、様々な要件があると思うので、この辺はよしなに実行します。が、一々相対パスで実行するのは面倒ですね。

という訳で私は以下のような設定を.zshrcに書きました。

export PATH=$PATH:./node_modules/.bin

こう書くと各コマンド群がそのまま使えて便利です。

ちなみに、yarn global addとすると、端末のグローバル領域（プロジェクトに依らず、システム全体で共有されているモジュール置き場）にインストールされます。私はグローバル領域にはインストールしていませんが、もしそこにモジュールなどをインストールしているのであれば、以下のように書くべきでしょう。

export PATH=./node_modules/.bin:$PATH

PATHは上から探索するので、先に書いた方が優先されます。上記のように書くことで、各プロジェクト用の node_modulesを先に探索するようになります。便利ですね。

タスクランナー

タスクランナーというと耳覚えがない気がしますが、プログラムの更新を検知し、自動でwebサーバを再起動してくれるやつです。

古くはgulpやgruntとかいうのがありましたが、最近はwebpackを使うのがイケているようです。

正確にはタスクランナーの役割をするのはwebpack-dev-serverというモジュールがやるのですが、デプロイの際にwebpackを利用する関係から、configを統一できるwebpack（とwebpack-dev-server）が便利に使われています。

先ほどインストールした yarn を使ってインストールします。 --dev を付けると自動的に開発環境用の依存関係(devDependencies)に入れてくれます。便利ですね。

$ yarn add --dev webpack webpack-dev-server

設定は webpack.config.js というファイルに書きます。ここでもJavaScriptファイルを書くのかと閉口してしまう気がしますが、これから沢山書くので気にせず書きましょう。

$ cat webpack.config.js
module.exports = {
  entry: {
    javascript: "./src/app.js",
  },
  output: {
    path: __dirname + "/build",
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

sourceディレクトリや出力先ディレクトリなどはよしなに設定してください。loaderに何か書いてありますがこれは後述します。

そしてよしなに設定を書いた後に

$ webpack-dev-server

とコマンドを打つと実行されます。これを実行したまま、別のウィンドウなどでソースコードを編集し保存すると自動で変更を検知してくれて大変便利です。

他にも、webpack-dev-serverでリロードしたら自動でブラウザをリロードしてくれるだとか、確認をすぐに行えるようになる設定やらモジュールやらもあるようです。

Lintツール

言語仕様の全てが完璧に頭に入っているなら不要ですが、私はそうではないのでLintツールを導入します。

JSLintという完全にそれっぽい物がありますがフェイクで、JSHintとかいう名前衝突避けしましたみたいな名前の物もフェイクで、現在の正解はESLintのようです。

$ yarn add --dev eslint

JavaScript他は言語仕様として書き方が決まっていないらしいので(よく調べてないので決まっていたらごめんなさい)、色んな団体が自分のLintルールを公開しています。よく分からないのですが、Airbnbが公開している物が良いとされているようなので、こちらを使いましょう。

$ yarn add --dev eslint-config-airbnb

このように書くと適用されるそうです。

$ cat .eslintrc
{
  "extends": "airbnb"
}

ちなみにこのパッケージ名にもなっているESはECMA Scriptの略だそうです。よく分かりませんが新しそうな風格を見せているので使っておきましょう。

トランスパイラ

長くなってきましたがようやく最後です。

ESLintを使って新しい標準に準拠したコードを書く訳ですが、残念ながら世の中のブラウザは新しい標準を完全に動かせている訳ではないらしいです。というわけで、同じ機能を実現する古い標準を満たしたコード（動作は同じものです）に変換する必要がある訳です。悲しいですね。

というわけで登場するのがトランスパイラという概念です。Babelというものを使います。

本来はbabelコマンドを使ってファイルを変換するのですが、これを一々手作業でやるのは面倒なのでwebpackさんに登場してもらいます。先ほど掲載したwebpack.config.jsには以下のような記載がありました。

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],

これは*.jsというファイルに対してはbabel-loaderというものを使うような設定です。

babelに関しては実際に使うところまで行かなかったので細かいところは省略します。

終わりに

というわけで入門しようとしてみました。登場人物が多すぎるし、ここまでやってやっと実装環境が完成です。

よく聞くReactとかVueとかAngularとかはこの後に登場する概念です。しんどいですね。

ちなみにこのように入門したかったのですが、導入しようと思っていた案件毎消滅してしまいました。悲しいですね。

というわけで実践まではいきませんでしたがとりあえずやった事のメモとしておきます。完全に使っている訳ではないので、もし何か間違いなどありましたらご指摘ください。

それでは2018年のフロント業界が成熟した頃にまた会いましょう。

なぜにぽえむ

2017年版フロントエンド入門しようとした（してません）