WASMまとめ
WebAssemblyとは
バイナリコードをブラウザで動かせるようにしたもの。
JavaScriptは動的型付けのインタプリタ言語ということで、実行速度の遅さが課題となっている。
その課題を解決するため、2013年頃にasm.jsというサブセットが生まれたが、
ファイルサイズが大きくなってしまうことなどの問題があった。
その代替案として生まれたのがWebAssembly(wasm)である。
wasmはファイルサイズがasm.jsと比べて小さくなっている。
使用できる言語一覧
github.com
DOMの処理やFetchAPI、WebAudioなどのAPIも使用できる。
しかしwasmは、jsをすべて置き換えようというものではなく、高速化したい部分をwasmで記述し、
jsと併用することを想定されている。
いろいろなTool
Binaryen
stdweb
wasm-bindgen周り
wasm-bindgen
js-sys
web-sys
wasm-pack
バイナリ表現とテキスト表現関連のツール群
- wabt
IoTでwasm
IoTデバイスでwasmを使用するという動きもある。
様々な言語がwasmへコンパイルできるようになっている。そのため、特定の言語に縛られることが無くなる。
wasmランタイ厶
Wasmer
WAMR
Lucet
Wasmtime
IoT × wasmについて
liux120.github.io
名前が似ていて混乱するやつら(実際に混乱した)
wasm
WebAssembly
wat
WebAssembly Text Format(バイナリ表現のwasmをテキスト表現にしたもの。wasmのテキスト表現は.watや.wastが使われる。)
wast
watと同じ (昔の呼び方？コードの形式が違うらしい。)
wabt
WebAssembly Binary Toolkit (バイナリ表現とテキスト表現関連のツール群。)
wasi
WebAssembly System Interface (安全にOSやホストシステムの機能を呼び出そうという仕様
詳しくはStandardizing WASI: A system interface to run WebAssembly outside the web - Mozilla Hacks - the Web developer blog)
WAMR
WebAssembly Micro Runtime (組み込みデバイスを目的としたランタイム)
Next.jsのメモ
Next.jsのメモ(自分用)
・ 静的ルーティング(pagesディレクトリ)
・ 動的ルーティング(file name[id].tsx)
・ クライアントサイドルーティング(<Link>)
クライアントサイドでナビゲーションを行っているため、ブラウザ全体でリロードすること無く、遷移が行われる。
本番環境では<Link>コンポーネントが表示されると、バックグラウンドでリンク先のページのコードをプリフェッチしてくれる。
・ CSS-in-JS
・ プリレンダリング(SSR, SSG)
SSRについて
- アクセス時にサーバー側でHTMLを生成
- リクエストごとに生成される
SSG
- ビルド時にHTMLを生成
- 事前にビルドされる
- CDNを利用するため、SSRより高速
更新頻度が高いページ(SNS等)はSSR、そうでない場合はSSG
ページごとに選択可能
可能な限りSSGを利用すべき
・ 拡張性が高い
・ ホットリロードをサポート
・ コード分割
リクエストしたページのコードだけを読み込み、ほかはバックグラウンドでプリフェッチを行う
・ Dynamic Routers
- [id].tsx
・ SSG getStaticProps
- 開発環境では毎回のリクエストごとに実行される
- 本番環境ではビルド時にのみ実行される
- サーバーサイドでのみ実行される
・ SSG getStaticPaths
- Dynamic Routesを使用する際にも静的なファイルを生成するためのAPI
- 開発環境では毎回のリクエストごとに実行される
- 本番環境ではビルド時にのみ実行される
- サーバーサイドでのみ実行される
・ SSR getServerSideProps
- リクエスト時に実行される
- サーバーサイドでのみ実行される
・ CSR SWR
- データフェッチ用のReactフック
- クライアント側でフェッチする際にはこれを使う
今後追加
はじめてのぶろぐ
初投稿
フロントエンドを勉強中の学生がやったことを綴っていく。
勉強とは関係ないことも書くかも✏
🍀やってること
主にフロントエンド、時々バックエンド。
Vueが好き。
