（サーバサイドエンジニアのための）モダンフロントエンド入門

現代のフロントエンドは、フロントエンドから距離のある人にとっては混乱に満ち満ちた近寄りがたい存在に映ります。かくいう自分がそうでした。サーバサイドのコードはそれなりに書けたし、アーキテクチャパターンや関数型プログラミングなどのトピックにキャッチアップして習熟できてもいました。

ではフロントエンドはどうかというと… 苦手意識が強かった。フロントエンドなのになんでnode.js要るのかよくわからないし、双方向データバインディング？フレームワークはどれがいいの… など、容易に混乱をきたします。

この記事は転職を機にフロントエンドに入門するまでの学習記録を書いたものです。

入門！これだけ読んどけ！的な、教科書というよりも個人の学習記録ではありますが、なんとか仕事できるようになってきたので一つのサンプルとしてご参考いただけるかと思います。

0. 前提条件

この記事のスタイルについて

この記事は、フロントエンド開発のキャッチアップにあたり入り口となるトピックに広く触れていくスタイルをとります。そのため、一つひとつの説明は薄くなってしまいますが、もしトピックに興味が湧いたら個別に調べてみてもらえたらと思います。

html/cssの知識

ウェブ開発に関わるなら、html/cssからはやはり逃れられません…

こういうフレームワークがあるとか、こういう勉強するといい、といった話の前提にはhtml/cssが簡単にでも読み書きできることがあります。

1. 現代フロントエンドに入門しよう。でもその前に…

サーバサイドの開発と比較すると、フロントエンドは技術的な要素以外にUIデザイン、ウェブデザインといったウェブ制作の知識も持っていたほうがキャッチアップが速いです。

ウェブUIにありがちなボタンやナビゲーション、ヘッダやフッタといった基礎知識を抑えておくと何を書いていくべきなのか、どういった役割なのかの理解が早くなります。

UIデザインを学ぶ

UIデザインを学ぶといってもいきなりきれいなUIを作れるようになる必要もないし、またすぐになるのは（もちろん）難しいです。あくまでフロントエンド開発ができるようになることを到達地点とするので、開発をすすめるのに持っておきたい知識の習得を狙って進めます。

幸い、入門レベルに良書がたくさんあります。いくつか選んで一通り読めばそれで十分です。

書籍

ノンデザイナーズ・デザインブック

例えばサーバサイドのコードを書くとき、すべてをmainに打ち込むことはせず、だいたいこういうコードはControllerだなとか、ドメイン固有型にしようかなとか、そういったお作法というか典型パターンがあります。デザインにおけるそれを短く、例付きで説明してくれていて、まずはこれを読んだほうがいいです。すべてのデザインは原則に則っていますし、実務でUIを作る際に納得感・違和感を持ちながら（自分で考えながら）実装にあたれる、その入口となります。

有名な書籍ですし、こちらはおすすめしたいです。

はじめてのUIデザイン

無料でダウンロードできて本当にありがたかった一冊でした。こちらも、ウェブUI頻出のパターンを短く説明してくれ、普段触っていたウェブサービスの骨格がちょっとだけ理解できます。

腕試し程度に読んでから、理解度や興味に応じて他の書籍をあたるのも良いです。

UIデザインの教科書

「はじめのUIデザイン」だけでも十分ではありますが、こちらはさらにしっかり説明がついています。いきなりこちらから読んでも困難なく読めると思います。デバイスの物理的な制約やインタラクションなど、自ら開発者としてUIを作るときに知っておくとよい知識までトピックが網羅されていました。

マイクロインタラクション ―UI/UXデザインの神が宿る細部

タイトルのとおり、大局的なデザイン指針の話ではなくトリガーやユーザへのフィードバックといった、タイトルの通り”マイクロなインタラクション”を説明した書籍です。

体験の良さは、全体の指針と同じくらいインタラクションの積み重ねでも決まるといった趣旨のもので、少しフロントエンドに慣れてからのほうが気づきがあるかもしれません。

バリデーションやモーダル、アラートといった入力や操作に対する一般的なインタラクションをさらっておくのに有用です。

2. 現代フロントエンドに足を踏み入れる

それではいよいよ、現代フロントエンドに触れていきたいと思います。

JavaScript、html/cssの基礎

Vue.jsなどのUIフレームワークは、UIを構築するための強力なフレームワークですが、フレームワークを使う場合下地になる技術には大なり小なり理解があることが望ましいです。このへんはサーバサイドでSpringだけ理解しようとしても限界がある、という話に似ています。

まずはJavaScriptの進化からです。

現代のJavaScript

古来からあるJavaScriptの問題点に関する解説はどこかで目にしたことがあるかもしれません。問題点はあれど、JavaScriptは見違えるほどに成長しています。評判の悪かったプロトタイプベースオブジェクト指向からクラスベースのシンタックスに、そしてコールバック地獄への回答としてasync/await。

特に、JavaScriptの共通規格であるECMAScriptのエディションである es6 から、他のモダンな言語仕様にも近いシンタックスが多数追加されました。主要なものには

  • let, constによる変数宣言
  • アロー関数
  • for/of ループ
  • Promise

Promiseによる非同期ラップ、アロー関数などは処理を簡潔・簡便にするのに非常によく使うものですし、1度はチェックしておきたいです。

当時入った機能をおさらいするのに便利なリポジトリです。

GitHub - lukehoban/es6features: Overview of ECMAScript 6 features

TypeScript

感度の高い方であれば、フロントエンド開発に関わらずとも動向をチェックされているかもしれませんが、改めて触れておきます。

TypeScriptはJavaScriptのスーパーセットで、AltJSと呼ばれる言語でもあります。変数やメソッドシグネチャにおいて型の宣言を行うことができ、JavaScriptで大規模な開発を行う際に生じやすい課題への解決策としてとても注目されている言語です。トランスパイルするとJavaScriptになるのでJavaScriptで作ったツールともしっかり互換性があります。

ReactやVue.jsはTypeScriptで書き、jsにトランスパイルしてバンドルを吐くといったツールチェーンが整備されており、できるならはじめからTypeScriptで実装したいですね。

npm(node.js)に親しんでおく

Vue.jsやReactといったUIフレームワークはもちろん、ユーティリティライブラリ、開発支援ツール、そしてTypeScriptといったありとあらゆるパッケージが https://www.npmjs.com/ で公開されています。開発環境を構築する際やテストを実施する際にnpmを用いることになるので、npmには親しんでおきたいです。

とはいえ、パッケージマネージャであることに変わりはないのでGradleやComposer、gemといったサーバサイドでもお馴染みのそれと使用感に大きな差はなく、馴染みやすいものであります。

html/cssの性質を理解する

html/cssとしてレンダリングが処理されるのでhtml/cssからは逃れられません。htmlもcssも、仕様書原文を読みに行かずとも、ふんわりでも振る舞いを理解しておきたいです。

もし、html/cssのシンタックス、プロパティや画面の基本的な作り方に不安があるなら、より基礎的な書籍でのキャッチアップも有効です。

たとえば、こちらの書籍は初歩的な事項からよくまとまっており読みやすかった記憶があります。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

cssにもいくつかの設計手法があり、シンタックスに加えてどのようにスタイルを構造化して管理するのか学ぶことで、実務で不安が減ります。cssの設計では、例えば以下のような書籍が参考になります。少し古めですが、今も有効な概念・テクニックが多いです。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

動くものを作ろう

テーマを決めてなにかを作ってみることはサーバサイドもフロントエンドも定番の学習方法です。

作るテーマを決めるのに少し苦労するかもしれませんが、最初は「ログインできるメモ帳」や「TODO管理アプリ」といった、よくあるテーマを選ぶとよいと思います。

そういったアプリは定番の振る舞い（CRUD）を網羅でき、かつ作っていくUIコンポーネントはボタンやカード、文字インプットなど定番のものをたくさん書いていけるので初期の学習に向いていました。

フレームワークの使い方すら知らない状態でなにかを作るのは困難なので、書籍やコンテンツに頼りたいところです。サーバサイドと比べると、決定的・確実な情報源が少ない印象で、最新の書籍を見つけるのが難しいことがあります（Vue.js/Nuxt.jsはそうでした）。そのため、udemyを活用すると良いです。入門向けコンテンツは一式揃っているし、フレームワークだけでなくFirebaseも使ってくれたりするので最新（？）の情報に一通り触れることができます。

Online Courses - Learn Anything, On Your Schedule | Udemy

フロントエンド開発の歴史、経緯も知っておく

ふとした瞬間に、Vue.jsは使えるようなってきたけど、なぜ今これが流行っているのか、疑問に思うこともあるかもしれません。

Vue.jsやReactは多機能かつ高性能なUIフレームワークですが、少し前まではAngularやjQuery（まだ全然使われているか…）などとシェアを分け合ってました。

技術の進化が早く、言い換えるとそれだけ非常に多くの試行錯誤が繰り返されてもいる領域なので、どのような思考・試行過程を経て現在に至るのか、周辺の知識なども理解できると良いです。

フレームワークを使う上で有用な概念をいくつか取り上げます。

命令的UI、宣言的UI

命令的UIと宣言的UIという考え方があります。命令的UIは操作の手順を明示的に指示するようなUIです。例えば、jQueryのようなライブラリでDOMを直接操作する場合が該当します。

例えば、jQueryを使ってToDoリストを作ろうとするとこのようになります:

$(function() {
  var $newTodoInput = $('#new-todo');
  var $todoList = $('#todo-list');
  
  $('form').on('submit', function(event) {
    event.preventDefault();
    
    var $newTodo = $('<li>').text($newTodoInput.val());
    var $deleteButton = $('<button>').text('Delete');
    
    $newTodo.append($deleteButton);
    $todoList.append($newTodo);
    
    $newTodoInput.val('');
  });
  
  $todoList.on('click', 'button', function() {
    $(this).parent().remove();
  });
});

htmlのDOM要素を手続き的に記述しています。ここでは省いてしまっていますが、jsからhtmlを触ってDOMを構成することになります。

一方、宣言的UIはUIの状態を宣言することで、内部的にDOM操作を行ってくれます。Vue.jsやReact.jsが代表的な宣言的UIのフレームワークです。同じようにVue.jsのサンプルコードも示してみます:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue ToDo List</title>
  </head>
  <body>
    <div id="app">
      <h1>Vue ToDo List</h1>
      <todo-form v-on:add-todo="addTodo"></todo-form>
      <todo-list v-bind:todos="todos" v-on:delete-todo="deleteTodo"></todo-list>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

todo-form コンポーネントは、ここでは記述を割愛してしまっていますが、ここで述べたいのはjQueryを使った場合と比較してhtmlの構造が「宣言的」の記述されている、という点です。

はじめ、私はどちらでもいいんじゃないの？とかjQueryどこにいった？などとと思っていましたが宣言的UI（もう少し言えば宣言型プログラミング）は明確に見逃せないメリットがあります:

  1. 手続きから生成されるDOMの構造をひと目に把握しづらい = 変更容易ではない
  2. 手続きにより変数やDOMが更新されてほしくない = イミュータブルであってほしい
  3. ビューとロジックをコンポーネントとして切り出せ、大規模なウェブアプリにも堪えうるアーキテクチャにできる

htmlのタグにclassを仕込んだりイベントハンドラを仕込んだりするわけですが、宣言的な記述のほうが明らかにロジック・ビューのメンテナンスが容易であることが想像できます（見た目通りに動くので）。

また、現代のウェブアプリケーションに求められる機能が多機能高品質化しています。サーバサイドで仕事しているとクラスやパッケージを分割して責務を分けたくなりますが、フロントエンドでもそのような分割・責務凝集性向上がほしくなります。宣言的UIはその性質上パーツにわけてビューとロジックをカプセル化しやすい or できるようになっているため、アプリケーションの規模が大きくなってもスケールさせやすいです。しっかりプロダクトをチームで作っていくようなケースにおいては、もうなくてはならない概念・アーキテクチャと言えます。

経緯も踏まえたモダンフロントエンドについては、いくつか優れた記事などありますのでぜひこちらもご参照ください。

なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

[FECF2019] 歴史から学ぶ現代のフロントエンド #fec_fukuoka #fec_fukuoka_b

コンポーネント指向

Vue.jsはコンポーネント指向のUIフレームワークです。公式ドキュメントの「はじめに」を読むと、次のようにあります。

標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。

はじめに | Vue.js

またVue.jsをベースにしたNuxt.jsのドキュメントには、コンポーネントは再利用可能なパーツであると述べられています。

Most components are reusable pieces of the user interface, like buttons and menus.

Views · Get Started with Nuxt

コンポーネントには、ボタンやリストなどの小さなUIパーツから、フォームやメニューバーなどの大きなUIパーツまで、あらゆるUI要素を含むことができます。

ボタンやリンク、ナビゲーションといったどの画面でもよく使うパーツを振るまいとともにコンポーネント化できるため再利用性が高まり、アプリケーションが大きくなってもメンテナビリティを維持しやすくなります。

Atomic Designの考え方

Atomic Designとは、UIを構成する最小単位である「原子」から始め、それらを組み合わせて「分子」、「有機体」、「ページ」などの階層的な構造を作り上げるデザインシステムの考え方です。

こちらはUIデザインの手法の一つです。

フロントエンド開発においても、Atomic Designの考え方を取り入れることで、コンポーネントベースの開発がしやすくなります。

さきほど、Vue.jsはコンポーネント指向のUIフレームワークだと述べました。画面をコンポーネントに分解する際、どのような粒度で分解するかを検討することになりますが、その際Atomic Designの考え方を知っていると（1観点だけど）判断しやすくなります。コンポーネントのフレームワークを使う場合Atomic Designを採用するとはかぎらないが、知っていると役に立つことが多いと思います。

”atomic design” で調べると「やめた」などのサジェストが出てくるように、実装にそのまま持ち込むと辛さが出てくるようですが、全く無意味ということもないです。

より詳しい階層ごとの説明は、以下のような解説記事に譲ります。

アトミックデザインとは？5つのコンポーネントから作るUIデザイン手法

3. おわりに

フロントエンドの開発には、必要な前提知識が多いですよね。私自身、チームの会話についていったり実務にあたったりするのに苦労したので、学習の範囲に絶望するかもしれません。

物事が複雑なことには変わりはないものの、やはりhtml/css/JavaScriptに収斂するので、困ったらhtml/css/JavaScriptの方面から捉え直してみると、困りごとが減ったりデバッグが捗るかもしれません。

本記事が、これからフロントエンドに入門しようとする方の学習パスとしてご参考いただければ幸いです。