Laravel+Vue.js入門してアークナイツ公開求人シミュレータ作ってみた話②

Laravel+Vue.js入門してアークナイツ公開求人シミュレータ作ってみた話②

前回の記事「Laravel+Vue.js入門してアークナイツ公開求人シミュレータ作ってみた話①」の続きです。
今回はVue側の実装とそれをサーバーに乗せるまで、そしてハマりポイントについての話。

bladeにVueのコンポーネントを埋め込む

順番が前後しますが、Vueの実装の前にlaravelのbladeからVueのコンポーネントを呼び出す方法から。
以下の記事を参考にしました。というかほぼこれの通りにやって、名前だけ変えてます。
LaravelからVue.jsを使う最短レシピ

ハマったポイント

{{ mix(‘js/app.js’) }}
の記述の向き先が分からず、VueやLaravelのディレクトリ構成もまともに調べずに作ってしまったため、
最初コンポーネント等読み込まれなかった。
基本的にresources配下を読み込みに行くらしい。
publicに吐き出していることしか知らなかったので、そっちに直でコンポーネントを置くというあほなことをしていました。
(resourcesにおいて、npm run でコンパイルしてpublic/jsのapp.jsに吐き出すみたいな感じなんですね。)

ただ、ハマったおかげでディレクトリ構成を調べられたので、
csvや画像等はpublic配下にディレクトリ切って置いておくのがよさそうと言うのが分かりました。
(間違ってたらすみません。)

Vueの実装

今回はキャラクターを並べるコンポーネント(SimulateBody)と、タグを並べるコンポーネント(TagList)、
そしてその二つを繋げる親コンポーネント(SimulatorComponent)で三つ作りました。
名前が酷いのでせめてキャラクターの方はCaractorListにすればよかったと思ってます。

しっかりしたアプリだと、ボタンパーツだけでコンポーネント区切ったりしているみたいですね。
大きいプロジェクト程パーツごとに機能を分けた方が良いと思うので、
次回からはその辺も意識して開発してみたいです。

今回は小規模な個人開発だから色々雑でセーフ!(言い訳)

親コンポーネントでLaravelで作ったAPIを叩いてデータを持ち、
それをpropsを使って子コンポーネントに分配。
TagListの方でクリックされたタグをMapに入れ、
それをwatchを使って監視して、SimulateBodyの中身を入れ替えていくという作りになっています。

反省点としては、
調べた限り親へのデータの受け渡しは$emitというのを使うべきっぽいことと、
あまり子コンポーネントに色々機能を持たせない作りの方が一般的っぽいこと。
今回は子要素にあたる部分でキャラクターの表示・非表示のメソッドをゴリゴリ書いてしまったので、
多分あまり良くない書き方になってしまったのかなと思います。

ハマりポイント

上で書いた通り、親子間のデータの受け渡しが良く分からずハマるというほどではないですが、
ちゃんと動くまでに時間ががかかりました。
ちゃんと公式ドキュメントにも書いてあるのですが、
何故か親にdataで入れて、子でpropsすれば貰えると思い込んでいて、
コンポーネントを呼ぶときに :arg=”arg” を入れないといけないことに気が付くのに時間がかかりました。

Xserverに完成したものを乗せるまで

こうしてゴリゴリ作ったものをいよいよ公開。
最初は適当にwordpressのコンテンツ配下にディレクトリ切ってそこでgit cloneすればいいのでは?と考えてましたが流石に甘かった。
静的なページであれば、どうやらwp-content配下にディレクトリを切って、index.htmlを置いて色々やると出来るみたいなのですが、
laravelを乗せる方法は自分のレベルでは分からず、また調べた範囲でも見つからず・・・。

なんとか出来ないか調べた結果、以下のサイト様の方法に行きつきました。
XSERVER上にWordPressとLaravelを共存させてサブドメインで公開する。

このサイトの方法を真似するだけでサブドメインで公開することが出来ました。

振り返って感想とか知見とか色々

これまで仕事では色々開発してきましたが、
自分で0から作って完成させたのは実は初めてなので、色々と勉強になりました。

特にgitは最初の環境構築が済んだらすぐinitしないと駄目ですね。
折角色々悪戦苦闘したのに、そのcommitの記録を残していないのはやってしまった!という感じです。
Vueも中々面白いですが知識が足りてないところが多そう(特にコンポーネントとデータの受け渡しまわり)
なので、もっと大きめの何かを作るときは意識して作ってみたいです。
(今回はvueのライブラリとかもあんまり使わなかったので、その辺も手を出してみたい。)

そして感動したのはページの評価
以下はlighthouseの評価ですが、
色々修正が容易なためSEO100点はもちろんなのですが、パフォーマンスの評価が凄い・・・。
100点ではないですが、今まで仕事で作った色々はファイルが重かったりでここまで爆速には出来なかったので嬉しいです。
画像が多い作りなので、chromeではlazy loadをプラグイン無しで実装出来るようになったのも大きいかもしれないです。
(詳しくはこちら→https://www.suzukikenichi.com/blog/wordpress-is-planning-to-support-native-lazy-loading/)
lighthouse

まとめ

というわけで、アークナイツ公開求人シミュレータを作ってみた日記を書いてみました。
PHPはちょっとWindowsで開発すると大変な点がまだまだありそう(後比較の罠が多そう?)なのが気になりますが、
Vueは思った以上に便利だし学習コストも低くて楽しいです。
制作期間は会社帰りに元気ある時に1時間+休日元気な時数時間で、正確なかかった時間は分かりませんが、
どっちもやったことある人なら1日、自分のような初学者(※ただし他の言語での開発経験あり)でも1週間かからず作れると思います。
後は細かいWikiの情報をスクレイピングして加工したりするのに1日くらいですかね。
(この辺は問題あるかもなので、問題あればすぐにサイトは削除します。)

実際に公開しているページは以下のリンクと画像から。
酷いコードになってしまいましたが、Gitも一緒に載せてあります。

アークナイツ公開求人シミュレータ
arksimu