すでに開始しているフロントエンドの開発に加わる場合、まず文法ぐらいが分かって入れば開発に入ることができるでしょう。 しかし、立ち上げる場合は最低1人は環境構築ができるメンバーが必要になります。 本章以降はその最低1人を育てるための内容になります。
近年ではJavaScriptは変換をしてデプロイするのが当たり前になってきている話は紹介しました。 フロントエンド用途の場合、規模が大きくなってきているため数多くのツールのサポートが必要になってきています。
コンパイラ
TypeScriptで書かれたコードをJavaScriptに変換するのがコンパイラです。基本的にはTypeScript純正のものを使うことになるでしょう。 一部のBabelを前提としたシステムではBableプラグインが使われることがあります。これは型定義部分を除外するだけで、変換はBabel本体で行います。 ネイティブコードにしてからWebAssemblyに変換するAssemblyScriptというものもあったりします。
- TypeScript
- @babel/plugin-transform-typescript
- AssemblyScript
テスティングフレームワーク
ソフトウェアを、入力と出力を持つ小さい単位に分けて、一つずつ検証するために使います。ブラウザの画面の操作をエミュレートし、結果が正しくなるかを検証するend-to-endテストもあります。
- Jest
- Ava
- Mocha
- Jasmine
静的チェックツール
近年のプログラミング言語は、他の言語の良いところを積極的に取り入れたりして機能拡張を積極的に行なっています。それにより、古い書き方と、より良い書き方のいくつかの選択肢がある場合があります。間違いやすい古い書き方をしている箇所を見つけて、警告を出すのが静的チェックツールです。TSLintが今まで多く使われていましたが、Microsoftが、TSLintでは構造的にパフォーマンスが出しにくいとのことで、ESLintをバックアップしていくという発表しました。そのため、選択肢としては現在はこれ一択です。
- eslint
コードフォーマッター
JavaScriptの世界では、以前は静的チェックツールの1機能として行われることが多かったのですが、最近では、役割を分けて別のツールとなっています。
- Prettier
- TypeScript Formatter
- gts
タスクランナー
ソフトウェア開発ではたくさんのツールを組み合わせる必要がありますが、その組み合わせを定義したり、効率よく実行するのがタスクランナーです。色々なツールがでてきましたが、現在は実行自体はnpmで行い、変更があったファイルだけを効率よくビルドするのはバンドラー側で行うと、役割分担が変わってきています。 npm scriptsは標準機能ですが、少し機能が弱いため、
npm-run-allを組み合わせて少し強化して使うことがあります。 本ドキュメントでもそのようにします。- npm scripts
- gulp
- grunt
バンドラー
コンパイラが変換したファイルを最終的に結合したり、動的ロードを有効にするのがバンドラーです。次のようなものがあります。 なお、ライブラリなど、バンドラーは行わず、コンパイラだけ実行した状態で配布することもできます。
- webpack
- parcel
- rollup
- Browserify
さらに規模が大きくなり、ビルドしてリロードして起動、というステップに時間がかかるようになってくると、ビルドサーバーを前面にたてて開発にかかる待ち時間を減らすことも当たり前のように行われます。。
.. todo:: あとで、開発サーバーとかもろもろについて語る