JavaScript周りの情報整理メモ
JavaScript周りの情報整理メモ
最初に
用語メモ
ライブラリは既存技術の機能を使って複数の処理にまとめたもの、フレームワークは利用することで新しい技術を使えるようになるイメージ
APIとは、JavaScript関連で聞く場合は”仕様”を指します。他言語でAPIと表現する場合にはREST APIを指すことが多いと思うので混乱しないように注意です。
フロントエンドの学習で便利なサイト
JavaScriptとTypeScriptのドキュメントとレポジトリ集 作成中、JS/TSのドキュメントや参考になるレポジトリをとりまとめたもの
ライブラリ & フレームワーク
- JQuery
javascriptのライブラリ
- Next.js
ReactベースのフルスタックWebアプリケーションフレームワーク。Reactはクライアントサイドのみをサポートするが、Next.jsはサーバーサイドもサポートする。
- Nust.js
ナクスト・ジェイエスと読む。Vue.jsがベースになっているJavaScriptフレームワーク。Vue.jsをより使いやすくする機能を持っている。Vue.jsで記述して、サーバーサイドレンダリングができる。ルーティングもしてくれる。
- Vue.js
MVCモデルのView層を扱うフレームワーク。コンポーネント構築のためのフレームワークで、Vueで出来ることはReactに似ています。
- Vanilla JS
何のライブラリもフレームワークも使わないでJSを書くことをいう。語源はアイスクリームの標準的な風味であるバニラ味からきている。querySelectorの登場によってJQuery使わなくてもいいだろうという風潮が生まれて、最速最軽量なJavascript実装というVanillaJSという考え方が生まれた。
- Node.js
サーバーサイドのjavascript実行環境。npmと呼ばれるパッケージ管理システムを同梱。http通信だけではなく、TCPやUDP通信も可能。
- React
- Angular
- Express
Node.jsで動作するサーバーサイドアプリケーションを開発するためのフレームワーク。
- Laravel
PHPで記述されたWebフレームワーク。Ruby on Rails、Python Djangoと並んで三大フレームワーク。
- Vite
豊富な拡張機能を提供する開発サーバー
パッケージ管理
- npm
Node.jsに同梱されているパッケージ管理システム。
- yarn
Node.jsで動作するパッケージ管理システム。npmで使用していたプロジェクト設定ファイル(package.json)がそのまま使える。npmよりインストールが早く、セキュリティが高い。バージョン管理も優れていて、yarn.lockというファイルが作成されて、インストールされたプログラム/パッケージだけではなく、依存しているプログラム/パッケージについてもバージョンが明確に書き込まれている。別環境で実行する場合であってもそれらのバージョンの整合性が保たれるため、バージョン不一致でプロジェクトが動かなくなるこをと防ぐ。
レンダリングについて
- SPA
シングルページアプリケーションの略。URLが変わらずにページ遷移が行われるようなアプリケーションをイメージすると良い。
- SSR
サーバサイドレンダリングにより画面を作成する。要するに、要求されたURLからプログラムがHTMLコンテンツを作成してクライアントに返すよってことです。Node.jsによってJavaScriptでもそれが実現できるようになりました（従来はHTMLとセットでクライアントに渡す形で、クライアント側で動かすことしかできませんでした）、
サーバーサイドレンダリングは、サーバー側のリソース(CPUとかメモリとか)を使うので運用コストが増えます。しかし、クライアント側の動作が早くなるメリットがあります。
クライアントサイドレンダリングは、サーバー側のリソース使用を減らすことができるので運用コストを減らすことができます。しかし、クライアント側のリソースを多く使うことになるので、UXを落とす可能性があります。