フロントエンド・ SPA 研修

フロントエンド・ SPA 研修

このドキュメントは何か

GMO ペパボ株式会社エンジニア・デザイナー向けフロントエンド・ SPA (Single Page Application) 講習のドキュメントです。エンジニア・デザイナーがモダンなフロントエンド開発について入門するための教材として書いてありますが、いかんせん著者がエンジニアなのでエンジニアリングについてある程度わかっていることを前提に書いてしまっています。（特にデザイナーで）ここわかりにくかったとかあったら Pull Request して改善してください。お願いします。

この研修プログラムを一巡することで、エンジニアはすでに作っているであろう Rails Tutorial の Micropost アプリから SPA (Single Page Application) バージョンを作り、モダンなフロントエンド開発として以下のような内容を学ぶことができます。

  • ECMAScript とは何か、JavaScript とは何が違うか、modern JavaScript をどう実装するか
  • JavaScript のモジュールシステム
  • モジュールシステムの補完としての JavaScript ビルドツール (e.g. Webpack, Parcel)
  • Node, フロントエンドライブラリ管理システム NPM の簡単な使い方
  • React の初歩的な使い方（なぜあなたの jQuery プロジェクトが破綻するのか、あるいは Virtual DOM とは何か）
  • 非同期、コールバック、 Promise, async/await
  • SPA とは何か（JavaScript による URL ハンドリング、pushState/popState）
  • フロントエンドプロジェクトのデプロイ（マネクラ、Heroku）
  • フロントエンドのテストについて

Rails Tutorial をやっていなくても大丈夫（だと思う）。このリポジトリが Rails Tutorial を一通り終わらせているものとなっているので、ここから git clone して使ってもらっても大丈夫です。とはいえ、この研修では一部 Ruby と Rails の知識が必要とされるので、Rails Tutorial を先にやっておくことを推奨します。

Rails Tutorial が 14 章で終了なので、この研修教材ではその続きという意味も含めて 15 章スタートになっています。

大前提

さて、まず研修を始めるにあたって前提として知っておいてほしいことがあります。2019 年（これを書いた年）現在でもたまに言われていることとして、「フロントエンド開発は流行り廃りが激しい」という言説がありますが、これはかなり誇張された言説です。5, 6 年前であればそうだったかもしれませんが、現在では主流となり数年は廃れないであろう技術がある程度確定しており、それを導入する分には流行り廃りに影響されないと言えます。要素技術にせよメジャーアップデートはありますが、Rails のメジャーアップデートとそんなに変わらないぐらいの労力で追随できます。逆に言えば Rails ぐらいには放っておくと劣化します。

ではなぜそういう状況においてもなお「流行り廃りが激しい」という言説がまかり通っているのか。それは以下のような要因が働いています。

  • そもそも昔の JavaScript の言語仕様が貧弱でバグを作り込みやすい（現時点で対策がある）
  • ブラウザごとに実装がまちまちであり、一部のブラウザが JavaScript 標準の API に対応していなかった（最近はマシ、一応対策はある）
  • JavaScript に関する古いブログ記事や小技記事が大量に存在し、それを理解せずに参照・コピペしてしまう
  • 「僕の考える最強のフロントエンド開発環境セットアップ」がインターネット上に多く、各ツールをなぜ・どのように使うのかが説明されない

それが何かを理解していない状態でインターネットで拾ってきたコードをコピペするのが一番危険です。公式のドキュメント（それも使っているツールのバージョンに合致しているもの）一次情報に当たること、万が一動かないということがあった場合そのツールのコード、GitHub issue, Pull Request に当たること。これらが重要です。これはエンジニアリングにおける良い習慣のひとつなので、しっかりと意識してください。

Web 上の参照できる資料

  • JavaScriptの入門書 #jsprimer
    • モダンフロントエンド開発において、 JavaScript と呼ばれているものはおおよそ ECMAScript 20xx を指しています（なぜそうなっているかは後述）。JavaScript/ECMAScript 20xx の言語仕様や各種 API に困った時はこのサイトを見てください。
  • ドキュメントオブジェクトモデル (DOM) - Web API
    • JavaScript には言語仕様や各種型、 API とは別にブラウザに表示されるページを操作したり、ブラウザ固有の機能を動作させる DOM API が存在します。
  • Node.js Documentation
    • Node.js （雑に言うとコマンドラインから JavaScript が動かせるもの）にも固有の API が存在します。バージョンに対応した一次ドキュメントを参照してください。
  • Can I use…
    • あるブラウザのあるバージョンが最新の言語仕様や機能に対応しているかを調べられます。
  • React Docs
    • React の使い方について困ったときはまず公式ドキュメントを調べてみましょう。
  • Vue.js ガイド
    • Vue のドキュメントは公式の翻訳が一番充実しているので、これを調べることをお勧めします。

それでは、Rails Tutorial をさらに先へと進めていきましょう。