フレームワーク
大枠が決まっていて、実装者が則ることになるフローのようなものをフレームワークと分類する
( が、正直いろいろな形で紹介されているしまだほぼコードを見ていないので、極めて曖昧... )
React
🤔 ぶっちゃけると名前を聞いたのすら超最近
- Facebook とコミュニティに開発されている UI 構築のための JavaScript ライブラリ[1][2][3]
- Vue.js と比較して、次のような特徴がある
-
create-react-appコマンドを使う、追加の機能はプラグインを用いる - ロジック部分が関数的
- TypeScript との相性が良い
- ルータや永続化などのライブラリは自分で選択して持ってくる
- JSX で HTML と JS をまとめて書く形が主流
-
- React18 が近々出るらしいけど、いろいろ新概念が出そうなので一旦除外 ( もう限界... )
😗 UI 構築のライブラリね、Next.js の説明を見ても React は CSR という理解でいいのかな
Vue.js
🤔 名前くらいは聞いたことある
- UI 構築のための JavaScript フレームワーク
- React と比較して、次のような特徴がある
-
vue-cliコマンドのオプションが豊富 - ルータや永続化などのライブラリが公式サポートされている
- Single File Component という １ファイルに HTML と JS を分離して書く形が主流
-
- Vue3 というので TypeScript 相性とロジック実装が改善される見込みらしい
😗 同じようなものかと思っていたけど、React と Vue.js は調べてみると印象が結構違う
AngularJS
🤔 7 年くらい前にチュートリアルだけやったよーな
- Google とコミュニティに開発されている JavaScript 製の Web フレームワーク
- MVC / MVVM アーキテクチャを提供する
- MEAN という全部を JavaScript / JSON で実現しようと言う構成があり、それの一部
- MongoDB ( DB )
- Express.js ( Web フレームワーク )
- Node.js ( サーバサイドアプリケーション )
- AngularJS ( ブラウザ上の MVC フレームワーク )
😗 Angular の 1 と言われたりするやつの方っぽい
Angular
🤔 AngularJS とは違うのか？
- Google とコミュニティに開発されている TypeScript の Web フレームワーク
- AngularJS の開発チームが作り直した、実質別のフレームワーク
😗 Angular の 2 と言われたりするやつの方、JS という単語が取れてるのは進化なのね
Next.js
🤔 フロアで聞こえる N のやつ 1
- Vercel とコミュニティに開発される Node.js 上の React ベースフレームワーク
- React で行う CSR を拡張し SSR, SSG, ISR を行うことが可能になる
😗 技術選定中ではないので、今はこれくらいで...
Nuxt.js
🤔 フロアで聞こえる N のやつ 2、しばらくタイポだと思ってた
- Next.js に影響を受けた Vue.js ベースの Web アプリフレームワーク
- ブラウザでもサーバでも同一の単一 Vue.js ファイルコンポーネントを使える
- Next.js と同じく SSR や SSG を行うことができる
😗 技術選定中ではないので、今はこれくらいで...
Remix
🤔 勉強している真っ最中に話題になった、正直勘弁して欲しい
- React ベースの Web フレームワーク
- 2021/11 月末にリリースされたばかり
- 次のような流れで SSG や ISR の機能はなく、SSR + SPA を行う
- SSG を CDN で配信する方針が一般化したが、SNS などは SSG では対応しきれない
- ISR が生まれたが複雑さやラグなどの問題がなくなりはしない
- SSR でもエッジコンピューティングや詳細なキャッシュコントロールで性能出せるはず
😗 なんかぐるぐるして一周した感... 今まとめて整理できて運が良かった
ライブラリ
部品集であり、実装者が作るフローに組み込めるようなものをライブラリと分類する
( が、正直いろいろな形で紹介されているしまだほぼコードを見ていないので、極めて曖昧... )
Redux
🤔 職場でよく聞こえる謎の単語
- 状態管理のための JavaScript ライブラリ
- React や Angular で使われる
- Flux の影響を受けている
- 純粋な JavaScript で実装されており、Vanila JS や jQuery でも使える
- React 専用の API が用意された react-redux も存在する
😗 状態管理のライブラリね、Reduce と Flux を合わせたような単語だな？
Vuex
🤔 察するに V な Redux
- Vue.js のための状態管理パターンとライブラリ
😗 察するに V な Redux、今はここまで
ちょっとまとめ
ぶっちゃけキリがないので今は手元のメモにあったよく聞こえるこの 2 つだけ
ライブラリなんだということがわかっただけでも今は十分
まとめ
何も知らない状態で React, Redux, Remix とか聞こえてくるのは精神的に辛かった
依存や前提の関係がわかるだけでだいぶ楽になる
これ以上はコード書かないと進まないな