概要
SPA(Single Page Application)という技術があることを知り、フロントエンドフレームワークを触ってみるいい機会になるのでないかと思い、Vue.js/Blazor/Reactをまとめて触ってみた。
SPAのルータのページ切り替えを見て従来のiframeや生のJavaScriptとできることがどのように違うのかということも疑問に思ったので同じようなこちらでも同じような感じで実装を試みた。
作ったSPAの仕様
- 上部にメニューバー
- Home/Counter/Todoの独立したWebアプリをコンポーネントとして所持。
- Home
- 別のコンポーネントを読み込んで文字を表示するだけなアプリ。
- Counter
- Blazorの実行サンプルに付いてきたカウンターアプリ。
- Todo
- Vue.jsミニハンズオン（TODOリスト作成）を8割位実装したTodoアプリ。
- Home
成果物
Vue.js | Blazor | React | iframe | Vanilla-JS
ソースとか(GitHub)
感じたメリット・デメリット
SPA全体
メリット
- 本来サーバーサイドで受け持っていたような大幅なhtmlの書き換えが簡単にできる。
- htmlを分割して部品化できる。
- 単一htmlとしてシームレスにページ切り替えられる。
デメリット
- フレームワークありきな存在であること。
- 読み込み時に時間がかかりがち。
- サーバーありきな存在なので気軽に公開しにくい。
Vue.js
メリット
- 本来のhtmlに近い書き方でhtmlを複数ファイルに分割できる(.vue)。
- 変数をフォームとバインド(同期)できる。
- v-for\v-ifでタグをループできる。
- CSSをコンポーネントに閉じ込めることができる。
- vue-cliがあれこれ揃えてくれるのでセットアップが簡単。
- 地味にラップされてるWebStorage。
デメリット
- ルーターの設定が少し煩雑。
- exportするオブジェクトの構成が少し煩雑。
Blazor
メリット
- C#だけでほぼ完結して処理を書くことができる。
- 本来のhtmlに近い書き方でhtmlを複数ファイルに分割できる(.razor)。
- 変数をフォームとバインド(同期)できる。
- @for\@ifでタグをループできる。
- ルーターの設定が容易。
- イベントハンドラの呼び出しが素直。
- 他のコンポーネントを呼びだすためのimportが不要。
デメリット
- まだリリース前。
- ページを開いた時の読み込みが遅い。
- @がゲシュタルト崩壊する。
- DOM由来のAPIを扱うのが面倒。
- 変数バインドと@onchangeを同時に使うことができない。
- CSSに対するサポートがない。
- ライフサイクルが少し心もとない?
React
メリット
- あくまでもJavaScriptが主体となっている。
デメリット
- htmlじゃないhtml。
- htmlとして書くとJSXの形式が直感的じゃない。
- フォームと変数のバインドに癖がある。
- stateの更新が手間。
- 必要なプラグインは基本的物でも各自そろえる必要がある。
- CSSの扱いに癖がある(スコープ化するのも手間っぽい)。
- 専用のループ構文は存在しない。
iframe
メリット
- フレームワークが不要(htmlとJavaScriptの知識だけで良い)。
- いにしえの枯れた技術。
- 適当なホームページスペースに上げても動く。
デメリット
- そもそも、SPAではない。
- htmlが独立しておりそれぞれの連携が面倒。
- URLが項目ごとに変わらない。
- 各フレームのサイズ調整が困難。
- フォームと変数のバインドとかはない。
生JavaScript
メリット
- あるかな?
デメリット
- 生成した要素の状態管理が絶望的。
- 再レンダリングが困難
まとめ
触り始めたばかりの素人の感覚としてはReactよりもVue.jsが触りやすいもののように思えた。
アニメーションを付けたりする段階まで行くとまた印象が変わってくるのかもしれない。
Blazorはwasmというものの可能性を感じるものだと感じた。
また、全体的な構成がVue.jsと似ており、触りやすいような印象を受けた。
ちなみにAngularは触ろうとしたけど面倒くさくなって投げた(情報量少なくないですか…?)