Web開発フロントエンドツールをわからないなりに整理する

Tools
by ICOOON MONO

Web開発のフロントエンドはとにかく移り変わりの早い世界です。

なかなか勉強が追いついていないのが現状ですが、自分の理解の助けとするため簡単にフロントエンドで流行っている技術やツールを整理してみます。

Node.jsとnpm

「Node.js」はJavaScriptの実行環境、「npm」はNode.jsのパッケージ管理システムです。いま流行りのフロントエンド開発ツールのほとんどはnpmで配布されているので、これらがないと始まりません。

ビルドツール(webpackやbrowserify)

簡単にいえばモジュール化して分割した複数のJavaScriptファイルをブラウザでも利用できるように結合してくれるツールです。

webpackはloaderと呼ばれる拡張機能を使用することにより、HTMLやCSS、画像などもJavaScriptのコードに埋め込むことができます。

webpackはプラグインも豊富なのでgulp等のタスクランナー的な機能までカバーできます。

タスクランナー

様々なプラグインを利用して開発をサポートしてくれるツール。ちょっと前までgulpが人気だったと思いますが、最近gulp離れが起こっている?

[意訳]私がGulpとGruntを手放した理由 – Qiita

webpackやnpm-scriptsを使って済ませるのが流行りなんでしょうか。個人的にはgulpが非常に簡単なので、しばらくはgulpのお世話になるつもりです。

新世代のJavaScriptに対応するツール(babelとeslint)

「babel」は最新のJavaScript(ES6とかES2015と言われているもの)をレガシーなJavaScriptに変換してくれるツール、「eslint」は新しいJavaScriptの仕様に沿ってJavaScriptを精査してくれるバリデータです。ともに単体でも使えますが、先述のwebpackやgulpなどと合わせて使う方が便利です。

altJSの一部の面々(CoffeeScriptなど)はES2015の登場で役目を終えつつあると考えていいんでしょうか。

CSSメタ言語

たぶん今でもSassが人気? bootstrapもv4でLessからSassに鞍替えしたらしいので。最近聞く「Stylus」はさらに後発のCSSメタ言語です。Sassはruby発ですがStylusはNode.js発らしいので、こちらが主流になっていく可能性もあるかもしれません。

bower

少し古いネットの記事などを漁るとよく出てくる「bower」はフロントエンドのライブラリを管理するためのもの? 使ったことがないのであまりわかりません。最近はnpm一本で間に合うことも多いみたいなので無理に使う必要はないようです。

JavaScriptフレームワーク

React+ReduxとかAngularとかVueとかBackboneとか、開発規模や好みなどによっていろいろ使われているようです。最近はReact+Reduxが人気らしい? このあたりは日本語のまとまった情報が少ないのが辛いです。

Web Componetsの動向次第でさらなる波乱を呼ぶかもしれず、どこに注力しても先の確信が持てない恐ろしい世界です。

まとめ

いろいろなツールがあって戸惑ってしまいますが、整理してみるとありがたみがわかります。ただしJavaScriptフレームワークはやはり鬼門。フロントエンドの勉強には覚悟をもって臨みましょう。

コメント