👀

React と GraphQL と仲良くなるために

2022/09/15に公開

勉強

キャッチアップ

仲良くなる

idea

はじめに

自分は普段、RubyとRailsばかり使っています。

ReactやGraphQLといった技術はほとんど使っていませんでした。
ので、彼らと仲良くなるためにやったことを記録します。

やったこと

株式会社万葉さんの新入社員教育用カリキュラムの内容を React と GraphQL を用いて1ヶ月半ほどやってみました。

バックエンドはRails + GraphQL、
フロントはReactでやるので適宜読み換えながら進めました。

↓カリキュラム

↓作ったやつ（後述しますが、もうじき止まる・・・遠い目）

https://eltraning.onrender.com

使った技術

Docker, docker-compose
- 今回もよろしく！
React (TypeScript)
- あ、お久しぶりです。あんま覚えてないけど・・・
Ruby on Rails
- 今回もよろしく！
GraphQL
- あ、あ、はじめましてこんにちは
PostgreSQL
- 今回もよろしく！
Tailwind CSS
- あ、あ、はじめましてこんにちは

などなど

作ったもの

カリキュラムは、タスク管理アプリの開発をするという内容でした。

カリキュラムのステップを上から順にやっていきました。

時間と理解度と色々な都合上、最後まで出来なかったり、途中も飛ばしたりしています。

GraphQLでのCRUD操作やReact側でのセッションの扱い方など、普段の開発で必ず使う部分をメインに進めました。

そして、ログインしたユーザーが自分のタスクを作れるアプリが完成しました。（全然機能揃ってないけど・・・）

大変だったこと

Railsの最新バージョン `7.0.3.1` を使ったのですが... (環境構築時の最新 2022年8月)

Rails7からwebpackerがなくなったので、es-buildを使った結果

react-rails のgemが期待通りに動いてくれない

という事件が起きました。
Railsアプリの中にReactをいれたかったので、 react-rails が使いたかったのです。

結局、 react-rails は諦めて react-dom のpackageを使って、Railsのviewsにrenderするようにしました。

Reactをがっつり触ったことがなかったので、ルーティング周り苦戦しましたが、そのおかげで理解も深まったのでよしとしました。

heroku、無料枠やめるってよ

作ったRailsアプリは、herokuにデプロイする予定だったのです。

でも、無料枠無くなっちゃうらしくて、どうしようかなと思っていましたら

render.com というPaaSをオススメしていただきました。

色々無料で使えますが、
PostgreSQLは90日間だけ無料とのことです。
公開したアプリはもうじき使えなくなるでしょう・・・（遠い目）

とはいえ、かなり使いやすかった印象を持ちました。

今後はrender.com使ってみようかなという気持ちです。

もう1ヶ月あったらやりたいこと

もう1ヶ月あったら、タスク詳細・編集・作成画面をモーダルにしてみたいです。

当初はその予定だったのですが、モーダルにもURLが付与できることを知ってしまい
やりたい！となってチャレンジしてみたのですが、何せReactの知識が乏しく（序盤で出てきたから余計にわからんかった😇）破茶滅茶に時間がかかりそうだったので

一旦、胸の奥にしまいました。

ログインの辺りで、ルーティングの理解が深まったので今なら出来るのでは？？と思ってます。

待ってください、その前にユーザー登録機能が必要でした。
今は、seedでユーザーデータ作ってるから、誰も使えないではないか。

使ってみたい方は、以下の情報でログインできます。でも、他に誰かがログインしたらそのセッションでは使えなくなります。

email: user1@example.com
password: password

感想

新しい技術や使い慣れていない技術をキャッチアップするときは、今回のように具体的に何を作るかが決まっていると進めやすいなと思いました。

機能や要件、実装する順番などがドキュメント化してあると、考えなければいけないことが少なくなるため
目の前の技術のキャッチアップに集中しやすい気がしました。

新しい技術で最初から全部作ろうとすると挫折しがちな自分には、

最小限の機能から作り始める
認証周りは、主要機能の後に取り掛かる
機能ができたところでスタイルをあてる
機能ができたところでテストについて考える
完成する前の段階からデプロイしてみる

など、今回のやり方がとても合っているなと感じました。

これから先に新しい技術を使うときは、この手順を意識してみようと思います。
自分に合ったスタイルを探していきたいです。