メインコンテンツまでスキップ

Front

フロントでの設計思想を記述する。

フロントの各設計について(Jamについても)

Frontで使えるやつ

画像からfaviconを作ってくれる favicon一式必要なため生成ツール紹介

JAMStack(JavaScript/APIs/Markup)

事前にデータを埋め込んだ静的HTMLとJavaScriptをベースに、完全に分離したサービスやシステムのAPIを通じて動的コンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。 ※nuxtのgenerate

JAMStackの env KEYについて

参考URL

各レンダリング

SSG(静的サイトジェネレーター)

SSGはプリレンダリング。 静的ファイルのみなのでNetlifyやVercel、GitHub Pagesなどが良い。 JAMStackと言われれるアプリケーションはSSGに当たる。 環境に関しては、Node.js環境を必要としません。 その代わり設計によってはクライアント側に大きな負荷をかけやすい&動的コンテンツの実装は難しい(できないことはない)ので、優れた設計が必要です。 CDNと相性が良いので、ホスティング先のリージョンは気にしなくて良いでしょう。 VercelのCDNは、強力に見えますが、Netlifyの扱いやすさを加味するとどちらも良い選択肢でしょう。

メリットとしては、 高速(CDN配信) セキュア(サーバを管理しない) でしょうか。

storeはどこに保存されている?

Vuexのストアは最終的にどこにデータを保存しているのでしょうか?ローカルのメモリですか?ブラウザのクッキーですか? ↓ 明示的に保存しなければ変数に入っているだけですので、ブラウザがページ遷移したりリロードしたタイミングでリセットされます。 ↓

物理的には、CPUかGPUかRAMかSSDかHDDかSDカードか。。。どれもあり得ます。それはOSやJavascript engine が決める事です。OSには仮想メモリという機能があり、RAMの中身を一時的にSSDやSDカードに待避する事があります。通常はRAMですが、計算をする瞬間にはCPU内のレジスタに読まれたり、読まれなかったりします。 明示的にコードを書かなければGPUに値を保存する事はほぼありませんが、コードを見ないとなんとも。 どこに保存されているとしても、その寿命は Javascript エンジンが管理しており、通常はブラウザの画面遷移時に全て消えます。 ただし、Vue router のようなものを使っている場合、一見ページ遷移に見えてブラウザセッションは継続する場合があり、そのようなケースではグローバル変数は値を維持しています。