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

最近業務でPHPとそのフレームワークのLaravel、そしてVue.jsを使っている為、
同じく最近ドはまりしているタワーディフェンスゲーのアークナイツと組み合わせて何か作れないかと思い、
公開求人シミュレータを作成して公開してみました。
その知見をまとめていきます。

システムのイメージ

業務で使っていたのが、LaravelをAPIにして、
Vueからaxiosを使ってAPIを叩き、データを貰って画面を動かしていくというものだったので、
今回はそれをベースに作成。
キャラクターとタグを一覧表示して、
タグをクリックすることで、そのタグに対応するキャラクターに絞り込みを行うというシンプルなもの。

あらかじめアークナイツのキャラクターデータと公開求人に使われるタグデータのcsvデータを作ってpublic配下に置いておき、
Laravelでそれらを読み込んで使いやすい形に加工、Vueで受け取ってゴリゴリ動かすことにしました。
(本当はDB作って、検索するところはクエリ作ってDB叩こうと思ってましたが、
途中で規模が小さいしcsvで読み込んで全部vue側でやってもいいのでは？と思ったのでcsvでやってます。
ロジック部分がズタボロになったので無理せずDB作ればよかったかも)

自分はbootstrapはタグに直接スタイルをぶち込んでいくせいで、
微調整が面倒なことになるのでそこまで好きではないですが、
今回は小規模なことと自分自身にデザインスキルがないため、
ページのレイアウトはbootstrapコンポーネント＋微調整をsassで行っています。

実際に出来上がったのが以下のページ。(画像クリックで遷移します。)

URLを見て頂くとわかると思いますがサブドメイン化しています。
サブディレクトリ化しようと思いましたが。
Laravelの中にWordPressはやっている人がいるものの、その逆が見当たらず、
結局今の自分ではPHPやLaravel、WordPressではさっぱりで断念。

環境設定

まずは環境設定。とりあえずLaravelはPHPのフレームワークなので、
PHP, composer, Laravelを順番にインストール。
インストールや細かいコマンドは以下のサイトを参考に打ち込みました。
PHP, composer
Laravel→Vue

とりあえず以下のコマンド叩いてlaravelの初期ページが出るようになればOK

laravel new;
composer install;
php artisan key:generate
php artisan serve

ハマった所

自分はWindows環境でインストールしているのですが、
コマンドプロンプトが苦手でCygwinで色々操作しようとしておりました。
npm等のコマンドは特に問題なかったのですが、
主にcomposer、laravelコマンドをCygwinから叩くと上手くいかないケースがあるようです。
(Mac使いたい・・・)

後々ハマるポイントも「Windowsでやってるから」が原因だったので、
そもそもPHPはWindowsでの開発は非推奨なのかもしれません。
(Macほしい)

Laravel側の実装

続いてLaravel側の実装。
実際はLaravelとVueの開通→Laravelの実装なので順番が前後してしまいますが、
一つずつにまとめた方が分かりやすそうだったのでこちらから。

LaravelにはAPIの役割を果たしていただくため、
routes/配下のapi.phpを修正し、それに対応するControllerクラスを作成していきます。

この辺は個人差や宗教がありそうですが、自分は以下のコマンドでクラスを生成しました。

php artisan make:controller CharaController
php artisan make:controller TagController

Javaの時はeclipseから作成してしまってましたが、コマンドでクラス生成というのもあるんですね。便利。

今回は「キャラクターの情報をまとめたcsv」と「タグ情報をまとめたcsv」を読み込んで、
扱いやすい形に加工して返す処理を作ります。

実際のコードはgitHubにあげています。
gitHub
が、READMEもまともに作ってない上に、全部書き終えてからgitに乗せたせいで、
初期状態から何処をどう変えたのか分かりにくい！！！
(しかもDBでやろうとしていた時のごみがいくつか残っている！)
そのうち修正します。(やらないフラグ)
app/Http/Controllers配下とroutes/api.phpだけで動くと思います、多分。

ハマりポイント

原因から書くと、「windowsだから」なのですが、
csv読み込み時にカンマ区切りをしない時があるという問題が起きました。
原因は以下。
csv読み込み時にカンマの処理がおかしい
どうやら、windowsではutf-8がまともに扱えないためそういう問題が起きるとのことで、
仕方ないのでテスト環境ではcsvのキャラクター名を日本語ではなくA,B…に仮置きして実装。
本番環境にUPするときに日本語に修正しました。
個人の開発だから出来る荒業ですね。
業務ではぶっつけ本番データいれまーすは中々厳しい所が多いと思うので、
解答者の方のやり方を試すのが良いと思います。

ただ、参考サイトの質問者の方のコメントを見て、
csv形式にするのではなく、1ラインずつ読み込んでsplit(PHPではexplodeっていうらしいですね)するでも良かったのか？
と思ったりしました。
いつか試す。(ためさないフラグ)

まとめ

長くなったので今回はここまで。
Vue.js、最初は知らない用語やら馴染みのない挙動で混乱して「何これ嫌い・・・」となってましたが、
慣れてくると「何これ好き・・・」ってなります。
何よりJavaでずっと遷移するページに慣れていたので、SPAの挙動の速さに感動します。

次回はVue側の実装についてと、Xserverに乗せるまで。

参考サイト

環境設定
Laravel, Vue, axios 最速入門
csv読み込み時にカンマの処理がおかしい