Laravel + inertia + vue 環境でshadcn-vueを使う
公式ドキュメントに記載のshadcn-vueを Laravel で使ってみました。アトミックデザインでいうところのAtomsとMoleculesの部品をソースで提供してもらえるようなイメージだと思いました。
VueやReactのコンポーネント開発ではまず部品を作り始めることになると思います。AtomsやMoleculesの部分って使い回すと開発速度が上がるようですが最初から作るとなると相応に開発工数がかかります。そんな現場を見てきたことがあります。使い回す事を考えるとpropsだったり色々考えないとならないし意外と面倒で、お手本みたいのがあればいいなと思っていました。一つの解決方法がshadcn-vueのように感じました。
shadcn-vueはプロジェクトで必要とするコンポーネントを個別に指定してインストール形式です。今回は、テーブルコンポーネントとページネーションコンポーネント、フォームコンポーネントを試してみました。過去記事でLaravel + inertia + vue 環境を構築してCRUDを実装しました。そのソースに対して上記のコンポーネントを組み込んでみました。
フォームコンポーネント
データの登録や編集の画面にある入力項目をバリデーションしたりサーバーに送信するためのコンポーネントで、フィールドやラベルなどのコンポーネントがインスールされます。手順は公式ドキュメントの通りに行いました。
結論としてはクライアントサイドでバリデーションを１から作る必要がなく、ライブラリの使い方さえ分かっていれば統一した記述で比較的簡単に実装できるので便利だと思いました。
ちなみに、スターターキットをインストールした時点でバージョン等が利用を想定したものでない状態が起きているようで --legacy-peer-deps オプションを指定してインストールしたので、引き続きそのオプションを指定してインストールしています。スターターキット時点の問題はおそらくないだろうと想定しているというのもありますが動作させたいのが目的なので解決してないです。
実装した差分をgitHubにあげているので参考にしてください。
vee-validateとZod
バリデーションは公式ドキュメントに記載があるように、 vee-validate と Zod というライブラリを利用します。そのライブラリのドキュメントの基本的な部分を確認して利用するのに時間が取られてしまいました。あれこれ試行錯誤して結果的にshadcn-vueのドキュメントの通りに実装すれば素直に動作してくれました。
これらのライブラリを使うことで、クライアントサイドでバリデーションを実装すると、開発工数の削減やライブラリを使わず個別に実装した場合に発生する人為的なエラーを回避出来る可能性があると思います。
バリデーションはサーバーサイドかクライアントサイドか
もともとサーバーサイドでフォームリクエストバリデーションを使って実装済みでした。クライアントサイドで同じ条件のバリデーションを実装したのでサーバーサイドのバリデーションエラーを発生させることが出来なくなりましたのでサーバーサイドのバリデーションエラーを表示させる箇所はなくなっています。
今までの経験上、バリデーションはサーバーサイドとクライアントサイドの両方で実装します。クライアントサイドのバリデーションだけだと、クライアント画面を使わずに直接サーバーサイドにアクセスされた場合に不都合だからです。とはいえ、フレームワークによって直接サーバーサイドへのアクセスは防がれてはいますが突破されないとも限らないです。
クライアントサイドでの必須項目チェックなどはサーバーサイドに問い合わせなくともチェックしてくれることでユーザーの入力時のストレスは少なくなることもメリットです。
ただし、サーバーサイドでしかチェックできないエラーもあるのでそのときは対応が必要です。例えばユーザーを登録するときに同じユーザーがいるかどうかをチェックするなどです。
ページネーションコンポーネント
公式ドキュメントの通りにコピペでページネーションが表示されるのは確認出来ました。しかしLaravelのページネーション機能とinertiaの <Link コンポーネントをどのように組み合わせるかを考える必要があるのではないかと悩んでしまいました。ページネーションをインストールしたときの各部品そのものに実装しないとならないんじゃないかと思ったのですがシンプルに一覧を表示させるコンポーネントに実装したページネーションに手を加えるだけで済みました。
根本的にはVueの v-slot のことをよく理解してなかったのが原因で公式ドキュメントで v-slot に付いて調べ直して解決しました。
実装した差分をgitHubにあげているので参考にしてください。
テーブルコンポーネント
これは今回一番簡単に実装出来ました。何もしなくてもきれいに表示してくれます。
実装した差分をgitHubにあげているので参考にしてください。
最後に
Laravel + inertia + vue + shadcn-vueを使ってみた感想は、あまり工数をかけないでWEBアプリケーションが作成出来るように思いました。
LaravelとVue、その他関連のライブラリの使い方を事前に把握する必要がありますが、一通りの知見がある技術者がいれば、新規にプロジェクトへ参入した人に基礎的な使い方を伝えることでスムーズにプロジェクトに参加出来ると思います。さらに公式のドキュメントも豊富なので自主学習等でキャッチアップ可能です。
フレームワークやライブラリによってプログラム量も減り相対的にエラーも減っていくことも期待できます。
独自実装のフレームワークなどを使ったりする場合そのソースを読み込んで理解する手間は多くの工数がかかる上に別のプロジェクトでの汎用性も乏しく、有効的な時間の使い方にならないと感じた経験をしたことがあります。今回利用したライブラリが幅広く利用されるかは分からないけれど、新しいライブラリが生まれても使い方が似ていたりコンセプトが似ていれば過去の経験は活かせると思います。
失敗談としてプロジェクトがスタートしてからフレームワークやライブラリを選定したりするとタスクのスケジュールが見通せなくなり工数が肥大したことがあります。事前に使えるようになった道具を用意しておいて開発をスタートさせたほうが望ましいです。仕事をしていてそんな時間を作ってくれる職場だと幸せなんだろうなと思いました。
