こんにちは。あとむです。

先日4ヶ月かけて実装したボードゲーム研修システムをリリースすることができました。

今回は初めてVue.jsを使ったシステム開発になったのですが、反省することが山ほどあるので書きたいと思います。

プロジェクト概要

• Laravel ・Vue.js・Bootstrapで実装
• インフラからアプリまで実装に関わるところは全て担当
• ボードゲームの処理はLaravel EchoとPusherで双方向通信を用いて実装
• デプロイ先はAmazon LightSail
• Vue.jsは主にボードゲーム画面で使用し、それ以外の部分は基本的にLaravel・JQueryで実装
• ボードゲームのデザインと何となくの全体デザインをもらって、残りは全て自分で実装

今回は何と初めてのVue.jsでの開発でした！

Vue.jsについてはチュートリアルに手をつけた程度の経験しかないのですが、ありがたいことに今回の案件の全てを任せてもらえました。

こういった感じで新しい技術を仕事を通して身につけていけると、一個人としてみた時にとても効率が良く成長していけると思うので、とてもよかったです。

、、、まあ無事リリースできたから言えることなのですが

実装している時は気が気でなかった

実装している時は「本当にこのシステムを完全させることができるのか」と気が気でなかったです。

もちろん最初に全体の開発スケジュールをひいて、そのスケジュールに沿って進めていってはいたのですが、スケジュールをたてる段階では僕自身に知識がなさすぎて当然まともなスケジュールを立てることができるはずもなく、、、途中で何度もスケジュールの立て直しをするハメになりました。

まあ当初はVue.jsもLaravel EchoやPusherも全く何のことか分からない状態でしたしね、、、よくそんな状態でできますって言ったな私。

とはいえ何とかリリースできたのでこれくらい知らない技術ばかりの案件でも何とかなる
ということが分かりました。

まあ後半にテストしてくれる人がヘルプで入ってくれたり納期が１ヶ月伸びたりとだいぶ周りの人のサポートはあり迷惑をかけてしまったのですが、得られるものはとても大きかったので、今後も同じような案件があった時は積極的に手を挙げて行こうと思います！

BootstrapをSassとして使いました。

今までBootstrapは一応本体を読み込んで入るが結局pt-3とかのpadding・marginに関する部分しか使っていませんでした。

しかし今回はUIが大枠しか決まっていない状態で渡されたため色々と自由に書ける感じだったので、前々からやってみたかった「Bootstrapを自分好みにカスタマイズして使う」ということを実践してみたのですが、めちゃめちゃ早くHTML/CSSを書くことができて最高でした。

ここでいうカスタマイズというのはSassの変数を修正することです。

LaravelにBootstrapを入れた場合は/reasource/sass/_variables.scssに更新したい変数をいれてnpm run devするだけで反映されるので結構簡単にメンテナンス性高くカスタマイズすることができて、素晴らしかったです。

さすがはBootstrapさん。今後もUIを自分で実装する場合は是非つかっていきたいですね。

Bitnamiって何ぞ？？

今回はテスト環境も本番環境もAmazon Lightsailだったのですが、Lightsailではosにdebian、そしてbitnamiというものが使われておりました。

正直いつもとは全く違う環境なので何が違うせいでそうなっていのかは分かっていないのですが、とりあえずディレクトリ構造やコマンドが全然違うものになってて悲しい思いをしました。。

もうLaravelのデプロイは余裕なのでデプロイの工数はかなり短めに取っていたんですけどね、、、システム開発って思うように行きませんね。

そのかわりPHPや関連モジュールがインストールされた状態からスタートするため、Laravelのインストール自体楽勝でした！

gitでLaravel資産入れてcomposer installしてドキュメントルート変えたら動きましたからね。すごい。

今まで個人で開発したものはXserverを使っていましたが、今後はLightsailでも良いなー、いやむしろsudo権限ある分レンタルサーバーよりLightsailの方がいいよなーと思いました。

テストが大変だった。。

開発していて思ったのはゲームチックなシステムはテストがめちゃめちゃ大変ということです。

考えてみれば当たり前なのですが、例えばゲームの終了時のテストをしたい場合はいちいちゲームを始めて終了までゲームをプレイしないとテストできないので、たった一回のテストになかなかな時間を要します。

なので最後の方にテスト用の画面を新設して、そこで色々な状態を簡単に再現できるようにしたんですが、マジで最初から作ればよかったと思っています。

「最初からテスト専用画面作ると仕様変更等があった場合に直す画面が一つ増えるのが嫌だな」と思ってなかなか実装しなかったのですが完全に判断を誤りました。

特にヘルプでテストをしてくれる人が来た時にその人がSQL書けない人だったので大変でした。

一人で1から100まで作ることが多かったので、他の人が手伝ってくれる可能性について全く考えていませんでした。

冷静に考えて最後のお客様の受け入れ試験でも使う画面だったのでさっさと作ってしまえばテスト工数を減らせたよなと、、、次から気をつけます。

終わりに

そんな感じでボードゲーム研修システムを実装した話でした。

終わってみるとVue.jsやらLaravel EchoやらAmazon Lightsailやらの知見がとても深まったので、一個人として考えるのであればとてもよい経験になったなと思います。

まあ、最後の一ヶ月は直しても直してもバグが出てくる状態でとても苦しかったんですけどね。。。

昔会社員だったころ先輩がよく言ってた「正しい方向に進んでいればいつか終わる」という言葉を信じて頑張ったら本当に終わりました。

とても良い言葉ですよね。はい。

そんな感じで終わります。ありがとうございました！