Zenn
👻

JavaScript周りの情報整理メモ

2024/10/06に公開
JavaScript
TypeScript
framework
library
tech

JavaScript周りの情報整理メモ

最初に

用語メモ

  • ライブラリは既存技術の機能を使って複数の処理にまとめたもの、フレームワークは利用することで新しい技術を使えるようになるイメージ
  • APIとは、JavaScript関連で聞く場合は”仕様”を指します。他言語でAPIと表現する場合にはREST APIを指すことが多いと思うので混乱しないように注意です。

フロントエンドの学習で便利なサイト

ライブラリ & フレームワーク

- 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を落とす可能性があります。

Discussion