Inertiaを試してみたかったので、テーマを決めて試作してみた。
テーマはassociation。 会。
以前に広島市薬剤師会のホームページを構築したので、そのときの内容を参考にして構築。
サイトは素のPHPで構築してある。データはエクセルで作られたものをVBAでXMLに変換して使用する仕様。
（広島市薬剤師会）
今回はフレームワークとしてLaravelを使用。Inertia版。
PHPはデータをJSONでフロントに返す。フロントはVue.js。
PHPの便利なヘルパー関数が使えないなどの不便はあるが、面白さが勝つ。
会として必要なものとして、
ニュース、
研修会、
スケジュール、
会員情報、
リンク集
を用意。
TopPageに全て集中。
それぞれの項目はタイトルだけ表示しており、クリックで開閉する。（SPA）
tailwindで、とりあえずのレスポンシブ対応をしている。
ブラウザでのエミュレートでは問題なくても、スマホの実機だと不具合が起きる現象もあった。
折角のVus.jsなのでJSONファイルを直接操作してみることもためしてみた。
コンテンツとして漢方処方とその構成生薬リストを掲載。
以前からあるXMLデータをJSONに変換したものを、サーバー側でPHPで取得してVueでフロント表示。
構成生薬をクリックすると、その生薬を含む漢方処方に絞って表示する。
生薬は順次クリックすることで、絞り込んでいける仕様。
PHP+XMLでも問題なく動作しているが、PHPだとクリックするたびに、サーバーで処理をしてHTMLをフロントに返すことになる。
今回の仕様はクリックされても、一旦取得した漢方処方データに変わりはないので、フロント側だけで処理することになる。
速度が劇的に早くなるということはないが、使用感は確かに軽い。
JRAのデータでも同じように行ってみた。
データの大きさにより読込に時間がかかるが、使用感は軽い。
といっても、キャッシュが効くので実際には差は出ない。
ログインしないと見れない例として、生薬リストを置いた。
普通のリスト。
Login Mail:info@itsagent.net Password1
管理画面は特別なログインアカウントのみに提供される。
サンプル画像。
Vueはサーバー側でも動作するjavascriptということだけど、Inertiaではそんなことは関係なく、PHPから返ってきたJSONをjavascriptで表示するということなので、VueやREACTでなくてもよいのではないかと思った。
ただ、フロント側を構築していて、Vueルーターやaxiosとかajaxとか何も考慮せずに、単純に書くだけで良いので、難しいことがわからなくても容易に構築できると感じた。
正直、javascriptについては同期非同期をはじめ、ほとんど知識がないが、なんか構築できた。
参考資料の多さを考えると、bladeが使えるLiveWireの方が良いかもしれない。
しかし、SPA風に動かすようにLiveWireを使うのには、それなりに習得が必要。
それならば、Inertiaの方がシンプルでわかりやすいと感じた。
