フロントエンドがどういう仕組みで動いているのか知る
ここではブログの雛形がどういう仕組みで動いているのか、フロントエンドの観点から学びます。
一般に、Webページはどのようにして私たちのもとに届いているのでしょうか？
サーバとクライアント
ここでは、「サーバ」「クライアント」の二つの概念を元に説明します。
サーバとは、雛形でいうところの npm run dev で立ち上げたフロントエンドサーバです。サーバは一般に、ネットワークを通じたなんらかのリクエストを受け取りレスポンスを返すプログラムを動かしたものです。プログラムを動かしたものをプロセスと言います。サーバは、実態としてはひとつまたは複数のプロセスが動いていて、リクエストがネットワークを通じて飛んでくるのを待っている状態になります。
クライアントは、雛形でいうところのあなたのブラウザを指します。ブラウザから http://localhost:8080/ にアクセスして画面を見たと思います。この、ブラウザにURLを打ち込んだ後の処理で、ブラウザからフロントエンドサーバに向けてリクエストが飛んでいます。フロントエンドサーバはリクエストを待ち受けていますから、リクエストがやってきたらそのリクエストの内容に応じてレスポンスを返します。ここでは、htmlファイルというテキストファイルや、JavaScriptが書かれていたり、CSSが書かれているファイルをサーバが返し、クライアントであるブラウザ側で見ることになります。
TypeScript
TypeScriptはJavaScriptに変換される言語のひとつです。AltJSのひとつという言い方をされることもあります。他のAltJSにはElm, Reasonなどがあります。
特徴として、漸近的な静的型つけがなされていることがあげられます。通常の使い方をしていれば、JavaScriptに変換するタイミングでコードを書く人がミスをしていたらコンパイルエラーという形で指摘をしてくれます。
The TypeScript Handbook が参考になると思います。私はこのHandbookを通しで読んだことはないので、もし興味があればぜひ輪読をしましょう。お声掛けください。
React
フロントエンドはHTML, JavaScript, CSSから構成されます。しかし、プロジェクトが大きくなるにつれて以下の問題が発生しました。
- 機能が増えると、共通化を行い部品を使いまわしたい。しかし、UIの共通化は難しい
- データを元に描画を決定したい。具体的には、関数
fにデータを渡したf(data)が描画結果(HTMLの一部分とjsとcss)を返して欲しい。
これらの課題を解決するためにFacebook(当時、現Meta)が作ったフロントエンド向けライブラリがReactです。Reactは上の課題を解決し、jsxという形でHTMLをJavaScriptの中で書くことができます。jsxはJavaScript版で、tsxはTypeScript版です。blogの雛形では、以下のようにtsxという形でデータ主導でコードを書くことができます。
const HelloWorld: React.FC = () => {
// ...省略...
return (
<>
<h1 className="hello">Hello World!!</h1>{" "}
{articles && articles.map(item => <div key={item.ID}>Author: {item.Author} / Content: {item.Content}</div>)}
</>
);
};
教材は Reactチュートリアル1：犬画像ギャラリーを作ろう が良い気がしますが、これも私はまだ通して読めてないので興味があれば一緒に輪読しましょう。
以上でフロントエンドの仕組みは終わりです。次は具体的なコードを眺めていきましょう。
確認テスト
- サーバとクライアントの概念が自分なりに説明できる
- TypeScriptとJavaScriptの関係が自分なりに説明できる
- Reactについてなんとなく分かった