TCGのマッチングサイトを作りたいよ～！#1学習・準備編
こんにちは、フリーターです。
プログラミングでご飯が食べたいので日々勉強しています。
公開前の宣伝も兼ねてカードゲーマー向けのマッチングサイトを作る過程をnoteにして行きます。セイッ。
どうして作りたいのか
僕は遊戯王プレイヤーだったのですが、田舎在住で特にフリー戦はショップ交流会などの集まりが悪く対戦の機会が少ない環境にあります。
なのでショップ等のスペースを使って軽いオフ会的な募集ができるサイトが欲しいと思った事がきっかけです。
また、誰も作ってなさそうという大きな理由もあります。せっかくなら人集めて運営したいので。
超大まかな計画
まず入口として使ってもらうweb版を開発した後、アプリ版を作成しようと思っています。なのでまずはweb版の開発の記録になります。
アプリ版だけでいいような気もしますが、単純にたくさん作りたかったのと、ios用にmacを買うお金がまだ足りなかったのでこういった計画になりました。
最速でweb版開発一か月→アプリ版の勉強+開発二か月で計三か月のスピード感を想定してますがどうなることやら...
使用する技術(web版)
ここからプログラミングっぽい話になります。web版に使用するフレームワークの紹介とそれぞれに現時点の僕の理解度で説明+選定理由を付けていきます。
・React.js
facebookが作った。facebookなのにtwitterもweb版で使ってるらしい。コンポーネントで細かくコードを分けられるから効率的に開発できる。直接DOMを変更するんじゃなくて仮想DOMを生成して差分だけ変えるから最強らしい。エラーでググってReact Nativeの記事を30秒くらい見ちゃってる時間がある。
後述のfirebaseと相性が良さそうだったのでReactにしました。あと教材と求人の数も多そうだったのも大きな理由です。
・typescript
数字とか'文字'とかtrueとかの型を指定できるのでjavascriptより強い。安全に開発するためとはいえ結構覚えることが多くて難しい。reactと合わせるとReact.ChangeEvent<HTMLInputElement>みたいなイカつそうなのを結構使うことになる。
Reactとセットになってることが多く覚えて損は無さそうという理由からの選択です。
・firebase
googleが作った。リアルタイムでデータを出し入れできるバックエンドサービスらしい。なので向いてるのかチュートリアルはチャットが多い。railsで結構苦労したsnsアカウントログインがめっちゃ簡単。反面参照から別コレクションのデータを取って来たりするのがrailsより大変。
後に作るアプリ版とデータを共有したかったのでやりやすそうなfirebaseになりました。ユーザー間のチャット機能も追加したかったので。
・chakra ui
React用のuiフレームワーク。見た目担当。最近できたヤツらしい。短くかけて見た目カスタマイズしやすくて楽。
デザインには自信がないので楽+新しくて洗練されてそうなこれにしました。bootstrapから足を洗いたい。
使った教材
主にudemyで見てコードを写経しました。特に参考になった物を貼ります。
最初はこの2つからreactに入りました。javascriptの書き方~typescript~React+Atomic Designとこの講座で覚えたこと全部余すことなくこのサイトに使ってると思います。多分開発途中に何回も見直す。
React+firebaseの教材です。大まかにfirebaseを理解することができました。初心者向けの感じではなくさらっと非同期関数を使うので＋αググるか何かで勉強する必要がありました。
なのでおすすめ度は上の教材よりも低いかも。正直今でも非同期関数は理解しきれてない感じがします。
評価が高かったので基礎三冊+firebase用と購入しました。書き方の細かい理由まで対話形式で丁寧に記してあるので実務未経験には非常にありがたかったです。技術のバックボーンの解説もあるのでタメにもなりました。
理解度でいうと50%行ってないと思うのでまたもう一段階書き慣れてから読むとまた違って見えるかも...
次の予定
ワイヤーフレーム→firebaseの設計→ESlintなどの設定→トップページ→....
の順番で計画してます。
ここまで見ていただいてありがとうございます！
これから是非プログラミング素人が開発をやり切れるのか見守っていただけると幸いです。
この記事が気に入ったらサポートをしてみませんか？