😸
フロントエンド周りの知識を学ぶ
はじめに
こんにちは、きよまるです。
普段はインフラ(オンプレ、クラウド)をメインに設計、開発、運用をしていますが、ここ最近はアプリケーションのレンダリング周り(SPA,SSRなど)と考慮してサーバ設計をすることが増えてきました。
インフラで動作するアプリケーションのうち主にフロントエンドの知識が皆無なので調べはじめましたが、○○.jsみたいなのが多くて何が何だかわからない。
実行環境、ライブラリ、フレームワーク、ヘッドレスクライアントなど様々で何から理解すればいいのかわからないので、まずはJavaScriptの歴史を見てどのような発展を遂げてきて生まれたプロダクトなのかをJavaScriptの誕生から追っていくことにしました。
JavaScripの歴史を振り返る
この記事では学んだことについて記載していきます。
情報整理
標準化団体
W3C
- World Wide Web Consortium
- Web技術の標準化団体
ECMA
- JavaScriptなど規格の標準化団体。ECMAScript
- ES2020(ECMAScript 11th Edision)などのように表現される
エンジン類
WebKit
- ブラウザのレンダリングエンジンでオープンソース
- 様々なブラウザで使われている。元々はappleが作った
- KHTMLからフォーク
V8
- C++で書かれたGoogleが作ったjavascriptエンジン
- chromeやnode.jsで使われている
レンダリング関連
JamStack
JamStack(SPA,SSR,SSG,ISR)の良いまとめ
WebGL
- 3Dグラフィックスや2DグラフィックスをレンダリングするためのJavaScriptAPI
実行環境
node.js
- 非同期型のイベント駆動のJavaScript環境でV8エンジンを使っている
- サーバサイドでJavaScriptを使えるのが特徴
deno
- node.jsに置き換わるものとして開発中
- nodeの反対でdenoとのこと
WebAssembly(Wasm)
- ブラウザからアセンブリを動作させるための技術
- C言語とかうごく
- Chromeなどで使える
- 速度向上が目的
ライブラリ
Jquery
- JavaScriptのライブラリ
- HTMLドキュメントのトラバースと操作、イベント処理、アニメーション、Ajaxが簡単になる
React.js
- javascriptのライブラリ
- UIに特化している
フレームワーク
Vue.js
- AngularJSの好きなところを抽出して作ったwebアプリケーションフレームワーク
Nuxt.js
- Vue.jsをベースとしたwebアプリケーションフレームワーク
- ブラウザでもサーバでも同一のVue.jsシングルファイルコンポーネントを利用してWeb画面を作成することができる
- SPAやSSR作れる
Next.js
- React.jsベースのフレームワーク
- SSRやSPA、TypeScriptをサポートしている
Angular
- TypeScriptベースのフレームワーク
- SPAが作りやすいのが特徴
- Angular.jsとは別物
ブラウザ
PhantomJS(開発終了)
- JSで作られたヘッドレスクライアント
ツール群
Webpack
- assetをまとめるためのツール
- 複数のjsとかを一つのjsにしたりできる
Babel.js
- JavaScriptのコンパイラ
- 新しいJavaScriptに対応していないブラウザのための、新しいJavaScriptの書き方を古い書き方にコンパイルする
- Node.jsで作られている
esbuild
- ビルドツール、爆速
- node.js製。コード自体はGolangで並列処理している
その他
TypeScript
- JavaScriptを拡張して作られた言語。Microsoftが開発
- TypeScriptをコンパイルしてJavaScriptにする
- 型定義ができる
GraphQL
- フロントエンドで機能するクエリ言語。meta社が開発
- APIに問い合わせするときにデータの取得形状を指定できる
- 型や必要なkeyのみを指定できたりする
- API側が改修できないときなどにフロントの使いやすいように指定できる
メモ
ブラウザのレンダリング
JavaScriptの実行の仕組み
全体の流れ
実際に全体の動きをステップ毎に追えるサイト
コールスタックと実行コンテキスト
WebAPIs
マイクロタスクとタスクの実行の流れ
イベントループ
JavaScriptの非同期処理の歴史
XMLHttpRequest：コールバック地獄
↓
Promise：thenでつなぐようになってネストは深くならなくなった ※XMLHTTPRequestとは別仕様と。
↓
async/await:↑のsyntax sugerになる。↑をわかりやすくしたもの
XMLHttpRequest Promise
感想
ふわっとしていますが現在はこのような理解です。
- Next.jsやNuxt.jsの一番の特徴はSSRができること
- SSRの場合はサーバ側実行環境はNode.js
参考サイト
- https://www.ecma-international.org/
- https://ja.wikipedia.org/wiki/ECMAScript
- https://www.w3.org/
- https://webkit.org/
- https://developer.mozilla.org/ja/docs/Web/API/WebGL_API
- https://webpack.js.org/
- https://babeljs.io/
- https://graphql.org/
- https://cloudsmith.co.jp/blog/2022/05/2082240.html
- https://nodejs.org/ja/docs/
- https://v8.dev/
- https://nextjs.org/
- https://nuxtjs.org/
- https://medium.com/tensorflow/introducing-tensorflow-js-machine-learning-in-javascript-bf3eab376db
- https://ja.wikipedia.org/wiki/Node.js
- https://jquery.com/
- https://nodejs.org/ja/docs/
- https://circleci.com/ja/blog/introduction-to-graphql/
- https://kuroco.app/ja/docs/about/jamstack-architecture/
- https://qiita.com/iz_me/items/cf62c60c49fe4f5df4f1
もらったアドバイス
SPA関連技術で以下もホットですね（なんて分類するんだろ・・・）
phoenix liveview
rails hotwire
laravel livewire
Discussion