こんにちは！中田です！

先日、弊社では社員旅行へ行ってきたわけですが、しおりを紙でなくwebで作ろう！ということとなり、コーディングの担当させていただきました。

普段の業務ではあまり取り扱わないような技術だったため、ブログとして紹介をさせていただきます！

しおりの見た目

いきなりですが出来上がったしおりを見ていただきたく。

画質が粗いですが、こんなページとなりました！

しおりの概要

しおりは以下の条件に基づいて作成しました。

• ・モバイルファースト
• ・ワクワク感を出す
• ・リアルタイムの現地天気予報を表示
• ・社員のグループによっては出発日が異なるため、スケジュールが違う
• ・ページの表示スピードを高速にしたい
• ・ベーシック認証による限定閲覧

この条件からどのような技術が適切なのかを考えてみました。

ワクワク感を出す

デザイン自体はすでにワクワク感漂っているのですが、適度にインタラクティブなアニメーションを取り入れるともっとワクワクするよねっていうことで、cssアニメーションとIntersectionObserverの監視トリガーを入れたらよりいいよねって感じで、デザイナーと挙動の確認をしました。

リアルタイムの現地天気予報を表示

無料の天気apiから情報を引っ張ってきて、天気のステータスによってお天気アイコンを切り替えるのと、現在の日時（new Date().getTime()）を取得して、現在、翌日、翌々日の天気を表示させるって感じで。

社員のグループによっては出発日が異なるため、スケジュールが違う

ボタンの切り替えによって社員グループのページ切り替えができる仕様。スケジュールが違うとはいえどもデザインの体裁は一緒のため、要素の出しわけをcssで行うのはナンセンス。この仕様ならSPAだな。とりあえずReactで作ろう！となりました。

ページの表示スピードを高速にしたい

ServiceWorkerを設定して、初回読み込み以外はキャッシュで表示させて高速化を図って、ついでにWebアプリ化にしてしまえ！ということで余力があればPWAを使用することになりました。

ベーシック認証による限定閲覧

普段、.htaccessを触る機会がないのですが限定的に閲覧するとなるとベーシック認証だな！となり、テストアップ直前に調べておけばいいや。と思い、後回し。

開発環境（ざっくり）

上記の概要を踏まえた上で実績があまりないのですが、Reactで開発することにしました。

Reactの環境構築は巷では割とスタンダードになりつつあるViteを採用しました。個人的にViteが登場するまでReactで一番大変なのって環境構築なのでは？って思うぐらい面倒なのです。jsをバンドルするためのWebpackの設定、ESLintの設定、TypeScriptの設定、postcssの設定やら何やら…etc…

そんな面倒なことをコマンド一発でReactセットをインスコ（もちろんそれぞれ細い設定はしないといけませんが）してくれるのがVite！！そして何よりViteはビルド処理が高速＆ホットリロードがデフォでついている。

おまけにViteにはPWAのプラグインがあり、楽にPWA化できてしまうという。。

迷わず利用させていただきました！

設定ファイルは以下の感じ

以上、今回はざっくり概要を書かせていただきました（ざっくり過ぎてすみません）！！

次回はがっつり技術よりの話を詳細に書かせていただきます！次回お楽しみに！！！