「フロントエンドの知識地図」を読む
泡沫京水サーバとしてのNode.js
サーバサイドのプログラムを利用して、クライアントからのリクエストに対し、動的に計算処理の結果やDBの問い合わせの結果を返すことができるようになる
このようなサーバの役割をNode.jsで実現できる
Node.jsの機能をフルに活かしてチャットアプリやゲームをWeb上に構築することも可能。
泡沫京水クライアントとサーバ側のコードの違い
どちらもECMAScriptの仕様に基づいて動作する
だから基本的にブラウザ側もNode.js上でも基本的に同じ
とはいえ違うこともある
- ブラウザにはDOMの概念がある
- Node.js側にはDOMの概念がない
- だからNode.js側でDOMを扱うことができない
泡沫京水開発言語の変換・バンドル・ビルド
開発現場ではJavaScriptのフレームワークを利用することも少なくないが、これらはたいがい独自記法であり、そのままではブラウザが解釈してくれん。
また、近年のフロントエンド開発においては、高度化するWeb開発に対応していくため、今までの言語を拡張したものが生まれてきた
これらもそのままではブラウザで機能しないため、ブラウザが解釈できるものに変換する必要がある。
また、コードの堅牢性向上や効率化のため、コードを複数のモジュールに分割して開発するアプローチがある。
npmというパッケージマネージャによってモジュールをインストールでき、それを一元管理できる。
これらのモジュールの仕組みを利用する際、どれがどれに依存しているコードなのかという関係を整理しつつ統合する必要があり、その処理を行うものをバンドラー、処理自体をバンドルという
実際のところ、拡張言語を元々の言語への変換とバンドルはとある過程で同時に行われる
最終的な公開用コードを出力するためにバンドルするときに不要なコードの削除や、コードの最適化を行ったりすることでファイルサイズを小さくする。この作業をビルドという。これもバンドラーがやる
泡沫京水このあたりの知識のあとにViteというものの話が本に入ってる。
あと、Git/GitHubも入ってた
泡沫京水Prettier
コード整形ツール
Jest
コードのテストを行うツール
このあたりもざっくり。
まあBiomeとかPlaywhightが出てきてるし
泡沫京水HTMLの標準仕様の話
ここらへんはHTML Living Standardのことを調べるといいと思っているため、HTML解体新書という本をおすすめします。
泡沫京水ブラウザ特有のCSSの話
先進的な機能を持つCSSの機能を持つブラウザがどんどん出てきたりしているが、実際ユーザはそのようなブラウザを必ず使ってるわけじゃない。
そのため、-web-kit-というベンダープレフィックスをつけて利用させるのが一般的だった。
現在はほとんどのブラウザでそれが不要。
また、ブラウザ間の相互運用性を改善するためのInterop
に取り組んでいるベンダーが多く、ブラウザの進化の足並みはそろいつつある。
Web標準の話
ブラウザはWeb標準という仕様に合わせて互換性を持つように開発されてる、しかし、それに策定された内容のサポート状況はそれぞれによってまちまち
そのため完全に同一の表示にはならない
また、ブラウザのVersion間でもサポート状況が異なる。
そのため、時間や予算の制約から、一部のブラウザを対応範囲から外して開発することがある。(EdgeとかChromeとか、Firefoxは含めるけど、それ以外は対応しないとかそういう)
これは、その対応しないブラウザを使ってるユーザを切り捨てる選択になるため、ビジネス的な意味を持つこともある
また、段階的にサポート範囲を決める方法として
- プログレッシブエンハンスメント
古い環境や機能が制限された環境を前提として開発し、新しいブラウザに対して段階的にリッチな機能やコンテンツを提供するやり方
古いブラウザに対しても機能やコンテンツを十分に提供でき、多くのユーザの利用を保証できる - グレースフルグラデーション
最新のブラウザを基準として開発、古いブラウザに対して、何らかの方法で基本的な機能やコンテンツを提供する考え方
泡沫京水互換性を考えるために活用するサイト
- Can I use
ブラウザの互換性を調べるときに使う - Statcounter Global Stats
世界中のWebサイトのアクセス情報の集計データを公開しているサイト -
MDN Web Docs (絶対見てくれ）
Web開発者向けドキュメント。Tutorialもおいてあるため学習もしやすい
泡沫京水