プログラムは書けるけどWebフロントエンドは難しそう…
「そんなあなたのための一冊です」という帯を見てまさにワイ向けや！と思ってJS界隈の情報収集に読んだ本。
著者はヤフー→Paneo→起業してウォンタ社CEOと渡り歩きながらスマホアプリ開発をしてきた松田承一氏。自身もフロントエンド開発を始めた折に情報の渦、移り変わりの速さ、敷居の高さ、たくさんの疑問に出会い同じ立場の人向けに書いたとのことです。2016年8月刊行。78ページと気軽に読めます。
第1章：Webフロントエンド開発が歩んできた道
最初にJavaScriptが歩んできた歴史の変遷がまとめてあってためになります。出だしから90年台後半のブラウザのNetscape Navigator、「ネスケ」が出てきて懐かしくなります。(インターネット老人会か！) JSが誕生したのは1995年、実はPythonよりも新しく、奇しくもJava, PHP, Rubyと同じ年なんですねえ。
その後圧倒的だったFlashの流行によるJS停滞、その後の2005年のAjax登場やGoogleマップ登場による復権、jQueryやprototype.jsなどのライブラリの登場、2009年のNode.js登場によるサーバーサイドJavaScriptの新概念、2011年頃からのモダンなフレームワークの登場(Backbone.jsが出てきます)。
そして双方向データバインディングによるデータと画面側Viewの自動的な結びつけ、フレームワークとしてはAngular.js/Knockout.js/Vue.jsを紹介、仮想DOMの話があって本書の題材のReact.js登場…と続きます。複数コンポーネントを組み合わせた大規模アプリケーション用のアーキテクチャとしてFluxアーキテクチャの図が出てきます。(第2章でReduxも出てきます)
Single Page Applicationの本質を語り、最後にはWebフロントエンドには様々な課題があり、それらを解決するために様々なライブラリやフレームワークが生まれた、別に課題がない小規模なものならjQueryのままでも十分だ…とはっきり書いてあるのはよいですね。
この1章は短いですが過去の歴史がまとまっており、これから踏み出す人にはとても役立ちます。あと余談ですがJavaScriptの正式名称というか標準仕様、ECMAScriptは「エクマスクリプト」と読むんですね。(ずっとイーシーエムエースクリプトと脳内/声に出しても読んでた...汗)
第2章：TODOアプリを開発してみよう
では実際に作ってみよう…ということで、Reactの解説記事や本で超ヒンシュツの定番題材、必殺のToDoアプリになります。テキストボックスに入れて[追加]ボタンでリストで表示されるシンプルなUIですね。完成版はGitHubにもあります。
環境
- JavaScript開発で必須、約束のNode.jsをまず入れる。
- JSのパッケージ管理ツール、npmがこれで入るので
npm initコマンドでプロジェクトフォルダにpackage.json作成。 npm install --save expressコマンドで、JSでWebサーバーを立てられるWebアプリケーションフレームワークのデファクト、Expressを入れる。- Expressを動かすためのapp.jsを実装、
node app.jsコマンドでポート3000で動かす。 ToDoアプリのJSコードはES2015(ES6)で書くので、ES2015までのブラウザ用にはBabelで変換。npmで入れる。 - クライアント側で複数の.jsファイルがあると依存関係の管理が大変なので1つにまとめる。これもパッケージングツールを使うので、BrowserifyとWebpackを紹介。
- 一般的な開発ではES2015準拠でJavaScriptで開発→Babelで古いJavaScript対応に変換→BrowserifyかWebpackで依存を解決して1ファイルにまとめたjsに変換→これが最終的なアプリケーションに使われる、という流れ。
(この流れ図で「コンパイル」とありますが「トランスコンパイル」と書いたほうが良いような) - しかしこれも面倒だよね、ということで本書では、Browserifyを拡張するプラグインのBabelifyを使う方法を採用。1コマンドで可能に。これもnpmで入れる。
ReduxとReact.jsについて学ぶ
大規模アプリケーション用の状態管理の、Fluxアーキテクチャから派生したフレームワーク(ライブラリ?)、Reduxがここで登場します。ActionCreatorやStore、Reducerが並ぶネット記事やQiitaによく図が出てくるあれですね。これの説明とReactのコンポーネント作成例。
そして本書ではReduxをnpm install --save reduxで導入して開発が続きます。
TODOアプリ実装
- Viewの雛形実装。最初はReactが入っていない素のHTMLから、index.htmlとして画面を作成。
- ActionCreatorの実装。actions/index.js に、アプリ内の操作一覧を列挙。無名関数が代入されたconstな定数をexportする形式。Viewにも暫定実装を入れる。
- Reducerの実装。reducers/index.js に書く。StoreからActionと現在Stateが渡ってきたら新しいStateを返却する。ひとつのToDoの分岐処理の関数、複数のToDo処理をまとめた関数、表示状態処理の関数の3つをそれぞれ関数リテラルで定数に代入、最後にRedux側のcombineReducers()でまとめて公開。
- Viewの本格実装。npm でreact, react-domを入れ、Redux側との連携をスムーズにするreact-reduxも入れる。components/Todo.js, TodoList.js, Links.js としてReactのコンポーネントを実装。
- react-reduxを使ったReactとReduxを繋ぐ部分を実装。containers/AddTodo.jsとしてReactコンポーネントを実装、イベントが発生したらStoreに渡す処理。containers/VisibleTodoList.jsとして関数リテラルで繋ぐ処理を実装。containers/FilterLink.js としてフィルタ処理を実装。
- Viewのcomponent/Footer.js にもこのフィルタにリンクする処理を記述。
- Viewのcomponent/App.js としてViewのエントリポイント、トップ要素のAppコンポーネントを実装。中が子コンポーネントになる。
- 最後にアプリケーション全体のエントリポイント、index.jsとindex.htmlを修正。最初にReduxが提供する関数でStoreを準備、react-reduxが提供するProviderコンポーネントの引数に渡し、中に上記アプリ側のAppコンポーネントが入る形。
という流れでToDoアプリを作っていきます。単一のReactコンポーネントで中にTodoを持って動く1画面のアプリケーション例ならすぐ理解できるのですが、本書の構成だと最初からReduxをバリバリ使い、途中からreact-reduxも入ってきて初見だとかなり難しいな…と思いました。
やはりこの状態管理ライブラリのRedux周りが、Reactを学ぶ上での学習曲線の壁が急に高くなるところなのでしょうね。2017年〜のネットの記事を見ると、Reduxよりもより改良されたMobXというライブラリも時々名が上がっています。
第3章：これからのフロントエンド開発
ES2015の後のES2016も出ているし、最新のECMAScriptを追っておくとよいよ、Virtual DOMも書籍などでより深く学べるよ、コミュニティや勉強会もいいよ、そしてスマホ需要の高まりの中でネイティブアプリでなくWebアプリでも大体同等のことができるようになっており、PWA(Progressive Web Apps)としてWebフロントエンドが注目されているよ、Web界隈の人もスキルを学んでいこう！という話。
まとめ：フロントエンド界隈の入り口を手軽に学べる本
Reactの入門書ではなくフロントエンド全般の入門でフレームワークの題材にReactを採っている、という体裁の本ですが、どんなものかイメージを掴むにはよいのではないでしょうか。npmや環境周りは簡単に流しているところもあるのでJavaScript自体を学んでいる人には厳しそうですが、プログラム経験のある人には雰囲気はつかめると思います。
Kindle専用、お値段も540円、78ページなので手軽に読めます。僕もコードの細部を除くと1時間ぐらいで読み終わりました。
ネガティブでアレな話題ですが、そういえば投げ銭Webサービス「Osushi」が法的なアレとか金を扱うアレとかアプリ全体のあまりにガバガバな脆弱性なアレで2018/2/1にサービス開始から7時間で炎上・停止という伝説級の偉業がネットのIT界隈で一時期話題になりました。2018/3/8頃に本物のお寿司が贈れるスマホ専用のまともなサービスになって復活したそうです。
本書の著者の松田承一さんはこの運営元のウォンタ株式会社のCEOなんですね。この本はふつうに良い本なのにこんなこともあるんだなあと、逆にへえーと思いました。ソースコードがふつうに見えてしまう脆弱性もあったそうですがサーバはNode.jsのExpress、実装はTypeScriptだったようです。なんというか、Webフロントエンドは異世界だなと。
