# フロントエンド Overview

# はじめに

このOverviewではWebサービスにおけるフロントエンドとして、主にWebブラウザ上でHTMLとJavaScriptで動作するアプリケーションについて歴史や最近の状況を紹介します。昨今ではユーザインタフェースとしてスマホアプリなども多いですが、残念ながらここでは取り扱いません。

またフロントエンドアプリケーションの基礎として、簡単なDOM操作についても紹介します。簡単なコードを書いてもらいますが、全て手元のテキストファイルとブラウザで動作するため、Dockerなどの環境構築は不要です。

# 簡単な歴史

# Webブラウザ

フロントエンドアプリケーションとWebブラウザは切っても切り離せない環境にあります。 JavaScriptの大本はNetscapeというブラウザに実装された「LiveScript」という仕組みで、動的にHTMLを操作するためのものでした。その後各ブラウザが同じような仕組みとしてJavaScriptの実装を進めましたが、当初は標準仕様などなく、各ブラウザで挙動がバラバラでした。そのバラバラな挙動を解決するために爆発的に流行ったのがjQueryというライブラリです。

ブラウザの歴史について詳しくはこちらの資料を見てみてください。

ブラウザ史の紹介

# AjaxとSPA

JavaScriptは最初の頃、HTMLを操作してちょっとした動きをつけるために使われていました。その状況を一変させたのがGoogleMapやGmailの登場です。これらのツールはAjaxと呼ばれる非同期通信でページをリロードしなくても表示されているデータを更新してみせました。

画面をリロードせずにデータを更新し表示を次々に切り替えることができるようになると、ブラウザ上でまるでデスクトップツールのような体験を実装することができるようになります。これがいわゆる「Webアプリケーション」の始まりなのかもしれません。

JavaScriptによる画面の更新はページ切り替えに比べて高速なため、そのうちページの切り替えも全てJavaScriptで実装した方がユーザ体験が良くなります。こうして全てのページを1枚のHTMLとJavaScriptで実装したアプリケーションをSPA(single page application)と呼び、積極的に開発されるようになりました。

# SPAフレームワークの流行

SPAはユーザ体験がいいのですが、全てのページ遷移と画面の書き換え、データ取得をJavaScriptとHTMLで実装する必要があり、非常に複雑になります。そこでその実装を助けるために数々のSPAフレームワークが開発され、現在に至るまでWebアプリケーション開発の中心分野となっています。

有名どころは以下の３大と呼ばれるフレームワークでしょうか。

Angular (angular.js)
React
Vue

一時期は次々と新しいフレームワークやツールが開発されカオスの様相を呈していたのですが、最近は落ち着きつつあります。感覚としては

大規模な開発はReact+α
小規模開発はVueやsvelteなどの軽量フレームワーク
パッケージ管理はnpm or yarn
webpackなどのバンドラーツールは直接導入せず、フレームワーク側で用意されるビルドツールを利用する

といったところでしょうか。もちろんツールの選定基準は要求やチームの状況、開発者の好みによって異なるため、上記は一般的な傾向の話です。

# その他のツールなど

# SSR

SPAはほぼ何も書かれていないHTMLをJavaScriptで動的に書き換えることで実現します。しかしGoogle検索のための情報を集めているクローラーはJavaScriptを実行しないため、SPAで作られたサイトはSEO的に不利とされています。

そこでサーバサイドでnode.jsを動かし、その上である程度ページをレンダリングしてからブラウザに返すというSSR(server side rendering)という手法が行われています。 VueやReactなどにはSSR用のライブラリが存在しており、SSRでの生成と表示後の動的な書き換えそれぞれをスムーズに実装できるようになっています。

SSRはSEO対策だけでなく、初期読み込み時の何も表示されない時間を減らすなど、ユーザ体験向上にも有効です。一方でSEO対策がほぼ不要で初期読み込みよりも利用中の挙動を優先するWebサービスの管理画面では、これまで通りSPAが有効です。

# wasm

最近ではC言語やRust, Goなどで書かれたプログラムをバイナリファイルにコンパイルし、それをブラウザ上で動作させるwasmという仕組みが存在します。 JavaScriptのコードはどうしてもパフォーマンスに限界がありますが、wasmの場合はほぼネイティブコンパイルされたプログラムと同じようなパフォーマンスで動作させることができます。問題になったBitcoinのマイニングプログラムや機械学習系など、CPUパワーが必要な場合に利用されます。

# JavaScript体験

今回はjQueryを利用し、DOMを書き換える体験をしてみましょう。

DOMとjQuery