今年は何を作って学んだか振り返ってみる話

今年やってみたものを振り返ろう

気づけばもう年の瀬…。
ということなので、今年は何を作ったかの棚卸しも兼ねて振り返ってみましょう。

1.グラブルの宝晶石が何連分あるか計算する

公開サイト: グラブル宝晶石計算サイト
使用言語:HTML / CSS / JQuery
github
サイゲームズ社製ブラウザゲームのグランブルーファンタジーで使用する、
主にガチャ使用する宝晶石がガチャ何回分かを計算するWebアプリです。
作った動機としては、

• グラブル内で宝晶石が何連分あるか解らない
• HTMLとかCSSとかJQueryでなにか作りたかった

サーバーなどバックエンドの処理はなく、バリデーションや換算する処理、フラグ等もすべてフロント側で行っています。
今見返すと、成功フラグ管理が何故かHTMLにクラスで差し込んでいたりと割とセキュア的に怪しい部分が多くあったり…。
そのような点に違和感を持てたり、リファクタリングの際にどのようにすればよいかなどがわかるようになったりと、
この作品を作った時期に比べては少し成長したのかなと思います。

反省点

• バリデーションチェックの結果の値をフォームに持たせてる
• 背景画像のサイズが大きすぎるため、読み込みに時間がかかる
• 背景色等が少し明るすぎるきらいがある

2.ピュアJSとピュアPHPで作った掲示板

使用言語:HTML / CSS / Javascript / MySQL
github
javascriptとajaxを使い、サーバー側のphpとやり取りしながらバックのDBからMySQLでデータを取り出して返し、
それをフロントでDOMを生成し表示する掲示板です。
掲示板の構成としては、スレッドも1つのみで画像投稿もできず文字のみ投稿できます。
作った動機としては、

• 非同期通信でバックとやりとりしてみたい
• JQueryは前やったので、次はピュアなjavascriptをやってみたい
• なんかSPAみたいなのが流行ってるみたいだから、自力で実装できないものかやってみる

とりあえず、技術習得目的によくおすすめされる掲示板を作ってみました。
掲示板を作る、となるとPHPでページ全体を生成して…てのが多いですが、私はフロントで作ってやるんじゃい！
という気持ちで、javascriptでDOMを生成して…てのとやりました。
このプロジェクトで一番苦労したのが、非同期通信部分をどう書くかとか、CSSでちょっとイケてるふうにしたいとかでした。
またこれを作成している途中から、やって苦労したことをQiitaに記事を投稿するようになりました。

作業中に書いた記事

ajaxで非同期通信とかを頑張った話
モーダルウィンドウを作ってみた話

反省点

このプロジェクトは作り上げる事はできましたが、上記のグラブルガチャ計算機と違ってDBの環境構築も必要であり、
無料でやれそうないいところを選定できなかったため、作品自体は公開を行えませんでした。
しかし、FirebaseとかのBaaSがあるため、そちらでバックエンドを構築してやってみようかなと思っています。

• 公開するためのサーバー選択ができず公開できなかった点
• CSSでの指定が混線しすぎ、要素のポジション位置が中心からズレている
• 読込中の回転が中心からずれている
• javascriptの処理は1ファイルに書いたため、ファットファイルになっている
  • 各処理ごとにファイルを分割すべきであった

3.Vueの公式ガイドを見ながら弄ってみた

使用言語:HTML / CSS / Javascript(Vue.js)
github
github Jestを試した
Vue.jsの公式ガイド(チュートリアル)を見ながら、Vue.jsを学ぶ。
これをやっていた動機としては、

• 前回でピュアなjavascriptを触ったので次はモダンなFWをやってみたい
• 資料が揃ってそうなVue.jsを触ってみたい

公式のガイドを見ながら、Vue.jsを触っていました。
何を考えてか、初心者なのに最初からVue CLI版から始めてしまいました。
最初はよくわかっていなかったのですが、いろんなコンポーネントを作ってみたり、propsやemitを試してみたり、
コンポーネントの粒度がわからなかったので、色々ググっていたらAtomicDesignというデザインパターンを知ったので、
それを元に組み立ててみたりしていました。
また、このときにJestを使って自動テストを試してみたりと、とりあえずVue CLIを弄くり倒して学んでいました。

作業中に書いた記事

算出プロパティなAtomコンポーネントを自動テストしてみよう
子コンポーネントからの通知をテストしてみた話

4.FFXIVでの製作に必要なアイテム個数を算出する

現在制作中
使用言語:HTML / CSS / Javascript(Vue.js)
使用サービス:Firebase(予定)
github
スクエアエニックス社製MMORPGであるFFXIVにおける、ゲーム内での製作で使うアイテムの個数を計算する。
作っている動機としては

• Vue.jsをある程度触れるようになったため、なにかアプリを作りたかった
• FFXIV内で、アイテムの製作を行おうとすると素材が何個必要かわかりにくい

現在作成中の作品です。
Vue.jsの公式ガイドを作成している途中から、画面デザインやコンポーネント設計を構想しておりましたが、
いざ作成するとなると多くの出戻りや再設計になったりと、設計スキルがまだまだ全然だなと感じています。

作業中に書いた記事(12月30日時点)

GridLayoutをアニメーションさせたかった話
同じコンポーネントでStoreを使って状態を共有できるか確かめてみた話[Vue]
Vue初級者がPropsとv-Slotをどう使い分けるかを考えた話

現在の進捗率

今の進捗率としましては、フロント部分で約60％ぐらいです。
ユーザーの選択により、製作レシピのリストを表示しその中から好きな物を複数選ぶ、
というところまではUIのデザインと処理の流れまで作業が完了しました。
残りの工程としましては、

• 製作レシピの詳細情報(子や孫の情報)をDBから取得
• 選択した情報を集計
• 集計した結果を画面に表示

というところが主に残っている工程です。
デザインはどうするかが固まっていますが、処理の部分はまだ試行錯誤しながらなのでまだ完成まで時間がかかりそうですが、
FFXIVが2月に行う予定のパッチ5.2アップデートまでには完成させたい意気込みです。
でないとまた零式攻略が始まって開発時間が

バックエンドはFirebaseに

当初はPHP+MySQLで自作APIを作りオール自作で行うと計画しておりましたが、
先輩エンジニアの皆様方の助言や、自ら情報を調べていくうちに自作APIを作るのはセキュリティとしても危険であるのと、
私が見込んでいた工程よりもさらに伸びる事が確実なため、BaaSのFirebaseを利用する方向に切り替えることにしました。

反省点

• 各コンポーネント間の設計があとから変更が大きく、最初に見積もれなかった
• バックエンド側の技術選定が何度も変更があり、正しく見積もれなかった
• 出戻り作業が多く発生したため、開発時間が予定より多くかかってしまった
• 作業時間の把握をしていなかったため、実際に何時間したのかが不明であった
  • WakaTime導入で作業時間の記録を取るようにしたため対処済み

来年の目標を考えよう

今年は2つのアプリを作り1つのアプリを作成中でしたが、来年の目標や作りたい物も書いておきまた来年の今頃に振り返りましょう。

FFXIVのアプリをリリースする

まずは、これを2月中旬までにリリースする。

グラブルにおける古戦場貢献度の推移をなんとかしたい

FFXIVの作品をリリースが行うことができたら、次に開発したい作品の内容はすでに決めています。
それは、グラブルにおける古戦場というコンテンツでのランキングで使用されている戦闘貢献度の管理を省力化を行いたいと考えております。
理由としては今現在、管理・入力・Twitterに投稿自体をフレンドが行っているのですが、
古戦場というコンテンツ自体が週4日で朝7時から夜の24時まで行われているため、その期間はフレンドに非常に重い負担がかかっており、
貢献度の推移の監視、それを管理しているGoogleスプレッドシートに入力、グラフを保存しそれをTwitterに投稿、といったのを毎時行っています。
それを技術の力で入力からTwitterの投稿までを省力化を行う事で、フレンドの負担を軽減したいというのが目的です。

今後の作業予定

• 画面設計
• コンポーネント設計

終わりに

今年一年はWebのフロントの言語を触り色々作り悩みながら進めてきました。
途中からではありますが、やったこと学んだことをQiitaに記事にしアウトプットを行いました
来年も学びは継続しながらも、技術でゲームのコミュニティの課題などを解決していくために、
自らの技術や知識を使って何ができるかを考えながら行動をしていきます。
また、作品ができるまで様子見していた就職も行っていきます…。できるかな転職…(絶賛ニート中の発言)