elmという単語を(少なくとも私の周りでは)よく聞くようになり、今までフロントエンドを敬遠していた人までもがelmを初めて楽しい！という声が上がるのはelmを推し続けてきた身からはとても嬉しいものです。しかし、一方でelmを学ぶ初期の段階でRoutingやモジュール分割(elm-spa-example)に手を出してしまいelmはSPA(Single Page WebAapplication)が難しい、情報が少ないと嘆く人たちを少なくない人たち見てSPAに関する記事を書くと思い立ちました。・・・が残念ながらこの記事ではelmにおけるSPAの手法は一切説明しません。この記事では私がブラウザアプリケーションにおける要件と技術選定の基準を載せようと思います。そして、この記事の最後に到達してしまった方には、elmにおける「みなさんが思う」SPAをする手法を説明する記事へのリンクを残そうと思います。
1枚の静的ページ
ランディングページ(LP)などの美しい・かっこいいデザインの何の動きもない、もしくはほんの少し動きがあるページです。こんなページではelmはおろか、JavaScriptも極力使わないと思います。ロジックがないのですもの。
複数の静的ページ
ポートフォリオによく見られる昔ながらのホームページスタイルです。リンクによって繋がれた複数の「見た目」。「Home」「Works」「About」などのページでしょうか？ 確かにリンクによって遷移するリロードをSPAによってかっこよく見せたいのかもしれません。ただ、一度見たページはキャッシュされローディングにそこまでのストレスはユーザは感じないのかもしれません。GitHub Pagesでは以下の構成にするだけで要件を満たせてしまいます。
- docs
- index.html
- works.html
- about.html
もしや頑張るべきなのはマークアップやスタイリングで、elmではないのかもしれません・・・。
1つの動的なページ
これはサーバからHTML, JavaScript, CSSが読み込まれた あとは、それ以上リソースがブラウザのリロードによって読み込まれない 動きが求められるページです。定義どおりの「SPA」になります。イメージとしてはWEBアプリケーションよりもネイティブのアプリケーションの体験に近いものがあると思います。例えばペイントツールはいろんなボタンを押すことで機能が切り替わったり、見た目が変わったりします。描いた絵が保存され続けたり、昔の絵を引っ張ってきたりは、どちらかと言うとローカルストレージやFirebase・DBにお仕事になります。どうでしょう？ 「ブラウザ」の「進む」や「戻る」をペイントツールで使いたいでしょうか？(Undo, Redo機能ではありません) このとき、ほぼライブラリの仕様のみで解決するのであれば、JavaScript, 場合によっては TypeScriptを選択します。しかし、複雑なビジネスロジックやデータ構造を活用する事例であれば、間違いなくelmを選択するでしょう。しかし、Routing機能やモジュール分割は極力避けます。 なぜなら複雑ですから・・・。(elmに限らず)
複数のエントリーポイントを持つ1つの動的なページ
「画面の見た目が切り替わること」の要件ではありません。あるコンテンツに対して一度にアクセスしたい。これはつまり、URLを直打ちしてもEmailからリンクで飛んできても、いつどんなときでもある状態を返したい時、このときはSPAをしっかり設計する必要があります。例えば、ホテルに予約をすることが出来るサービスで自分の泊まる宿の説明ページにアクセスするのに、ホームから会員ページを辿って、予約一覧に飛び、宿の詳細に飛んでやっと見れる。そんな体験よりは、予約完了EmailやLINEなどのリンクから一発で飛びたいですよね？ そんな従来のWebページの体験をリロード無しで届けたい。そんなあなたには、elmでのSPAのやり方をご紹介しましょう！