目次

はじめに

本書の進めかた・使いかた
Node環境と動作について
リポジトリとサポートについて
表記関係について
免責事項
底本について

第1章 まずは準備から

1.1 package.jsonファイルの作成
1.2 ディレクトリー構成について
1.3 EditorConfigを導入する

第2章 JavaScriptを動かす

2.1 Babel
2.2 webpack

第3章 JavaScriptのためのパワフルなツール

3.1 ESLint
3.2 Prettier
3.3 Flow

第4章 Reactをはじめる

4.1 Reactをブラウザーで表示させるための準備
4.2 最初で最後のReactコンポーネント

第5章 CSSを適用する

5.1 webpackの設定
5.2 CSSファイルの作成
5.3 StyleLint
5.4 PostCSS

第6章 ReactとCSSの連携

6.1 CSSをコンポーネントに適用する
6.2 CSSModules

第7章 爆速でテストを書く

7.1 Jestで始めるユニットテスト
7.2 コンポーネントはスナップショットテストで
7.3 コードカバレッジを見る

第8章 プロダクションコードの生成

8.1 webpackの設定を分離する
8.2 CSSをminifyする

あとがき

Special Thanks

著者紹介

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

Node環境と動作について

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

 ・Node v10.9.0

 ・npm v6.4.1

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

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

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

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

表記関係について

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

免責事項

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

底本について

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

1. https://reactjs.org/

2. https://vuejs.org/

3. あるコードを、同等の別のコードに変換すること。ここではReactで書かれたコードを(ブラウザーが解釈できる)JavaScriptのコードに変換することを指します

4. https://babeljs.io/

5. https://webpack.js.org/

6. 2018年9月時点

第1章 まずは準備から

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

1.1 package.jsonファイルの作成

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

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

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

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

試し読みはここまでです。
この続きは、製品版でお楽しみください。