はじめに

　近年のフロントエンド環境の発展はめざましく、新たな時代の到来を予感させました。たとえば、React¹やVue.js²に代表されるようなフレームワークは、仮想DOMという新たな概念を提供しました。これらのフレームワークを採用することで、より設計しやすく、かつ最適化されたWebアプリケーションを作ることができるようになりました（しかも、これまでよりも速く！）。しかし、これほど魅力的で強力な武器が登場したにもかかわらず、いまだ多くのWebアプリケーションがこれらのフレームワークを使わずに、必死にDOMを動かしています。なぜでしょうか？

　この問題の原因の1つは、フロントエンドにおける環境構築の複雑化にあります。たとえばReactをフレームワークとして使おうとした時、多くの人がまずトランスパイル³というプロセスにぶつかります。

　トランスパイルはBabel⁴というツールで行いますが、複数のJavaScriptファイルを1つにまとめたり、開発コードとプロダクションコードをそれぞれ出力したりしようとすると、Babelだけでは力不足です。

　そこで、こうした複雑なファイル生成を解決するツールとして、webpack⁵があります。では、このwebpackを使うために何をすればよいかというと……（中略）……といった具合に、ただReactを使うためだけに、多くのツールを学ぶ必要がでてくるのです。

　本書は、現在の複雑化したフロントエンドの環境構築に焦点を当て、1からフロントエンド環境の構築方法を解説していきます。したがって、本書の対象読者は次のような疑問や不安を持っている方です。

　・モダンなJavaScriptを書きたいが、そもそも環境構築についてよくわかっていない

　・Babelやwebpackの設定方法がイマイチわかっていない

　・ESLint, Flow, Jestなどを導入したいがどうすればよいかわからない

　本書はこれらの疑問を解消し、最初から自分でフロントエンド環境を構築できるようになるためのお手伝いをします。少しでもあなたの負担を軽減できれば幸いです。

本書の進めかた・使いかた

　本書は1からフロントエンド環境の構築を行っていきますが、本書での環境構築が答え（＝ベスト・プラクティス）ではないことに注意してください。実際に環境を構築するにあたって、本書で紹介しているツールが必要なかったり、あるいは代替のツールを使いたい場面もあると思います。

　ただし、まだフロントエンド環境の構築に慣れていない方は、本書を1章から順番に通読して、まず環境構築に慣れることをオススメします。

Node環境と動作について

　本書ではフロントエンドの環境構築を、次のNode（npm）バージョンで行っています。

　・Node v10.9.0

　・npm v6.4.1

　また、本書で解説するツールは執筆時点⁶での最新バージョンを採用しています。しかし、フロントエンド界隈は非常に開発スピードが速いため、これらのバージョンはすぐに変わる可能性があります。もし、本書のとおりに書いても動作しない（エラーが発生する）場合は、公式のドキュメントなどを閲覧してください。メジャーバージョンが変わった場合は、マイグレーションガイドなどを用意してくれることも多いので、参考になるでしょう。最新バージョンに追従し続けるのは大変ですが、それだけすばらしいアプリケーションを生み出せるはずです！

リポジトリとサポートについて

　本書に掲載されたコードと正誤表などの情報は、次のURLで公開しています。

　https://github.com/polyxx/nekomimi-frontend

表記関係について

　本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

　本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

底本について

　本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています

第1章　まずは準備から

　本章では、まず環境構築を始める前に、プロダクト全体のディレクトリー構成やpackage.jsonの初期設定について解説します。

1.1　package.jsonファイルの作成

　さっそくプロダクトを作っていきましょう。お好きなディレクトリーに移動したら（今回はnekomimi-frontendとしました）、npm¹またはYarn²コマンドを使って、package.jsonファイルを作成します³。対話形式で設定項目について聞かれますが、特に入力する必要はありません。

$ mkdir nekomimi-frontend && cd nekomimi-frontend
$ yarn init // または npm init

　作成されたpackage.jsonファイルは次のリスト1.1のようになります⁴。

リスト1.1: package.jsonの中身

 1: {
 2:   "name": "nekomimi-frontend",
 3:   "version": "1.0.0",
 4:   "main": "index.js",
 5:   "license": "MIT"
 6: }

Yarnってなに？

　JavaScriptのプロダクトを作る際には、一般的にnpmと呼ばれるパッケージマネージャーが利用されますが、最近ではnpm互換であるYarnが人気を博しています。本書では、基本的にYarnの利用をオススメしています。

npmとどこが違うのか

　Yarnではパッケージをインストールした際に、yarn.lockというファイルが自動的に生成されます⁵。yarn.lockファイルは簡単に説明すると、インストールしたパッケージのバージョンを記録したファイルです。yarn.lockがあることで、どの端末でインストールしてもまったく同じバージョン構成でインストールが行われます。これは、たとえばCIなどを利用してテストやビルドを行う際に役立ちます。

目次