RailsとReact hookでGistみたいなWebアプリを作りかけた
Ruby(Rails)の練習がてらGistみたいなやつを作ろうとしていた(過去形)。
https://github.com/petitviolet/acoder
モチベーションはこの辺
- Ruby on Rails 6を触ってみたかった
- ActionTextとか
- React hooks触ってみたかった
- TypeScript
- RubyでもGraphQLやってみたかった
- Getting Startedくらい
作りかけた?
飽きた。
個人開発だし真面目にcommitしたりしなかったりPR作ったり作らなかったりでめっちゃ雑なプロセスだったと反省している。
以下メモと感想。
API
Ruby on Rails 6.0で動いている。
ActionTextを捨てた
目玉機能っぽいActionTextを使ってコードスニペットのエディタを作ろう!と思っていたがReactで書いているクライアントに対してActionTextを使って作ったビューをいい感じに埋め込むことが出来ず諦めた。
こういうことやりたい人っていないのかな、参考になりそうなのがうまく見付けられなかったし面倒くさかったので。
自前認証 -> devise_token_authで認証
最初は自前でTokenを使った認証を実装したが面白くないのでdeviseでやってみた。
が、cookie認証を実装する元気はなくヘッダにtokenを埋め込んで認証したかったので、deviseだけだとどうしても辛くdevise-token-authを使ってやってみることにした。
とにかくdeviseどころかRailsにまだ慣れていない自分には動作を追いかけるのが大変で辛かった。
確かにこういった認証機構を自前で実装するのは大変なのでdeviseみたいにオールインワンでやってくれるのは便利だと思う反面、結局のところ実装を読んで理解して使わないといけないだろうしそれだったら自分で実装した方がシンプルになるのでは...という感想。
少なくともぜひ使いたい!という感想は持てなかった。
GraphQL
ScalaではわりとGraphQLやっていたけどRuby(Rails)でも素振りしておくかというところ。
こんな感想を持ったりしていたのがコンテキスト。
API考えてるとGraphQLは良かったなぁという気持ちにはなる
— kom (@petitviolet) November 7, 2019
とはいえとりあえず/graphql叩けるようにした、以上のことはまだしていないので素振りの回数は足りてない。
フレームワークのおかげでわりとさくっとGraphQLエンドポイントを動かすことが出来て楽っぽい。
Scalaでやったときは型のおかげでじっくり安全なAPIを作れたが、一方Rubyでやるとよく分からんがさくっと動いたみたいな感想になり、まあそれがRubyの良さでしょうと割り切ってしまえば問題なさそう。
例えばContextがただのHashだったり。
GraphQLそのものはある程度わかっているつもりだが、graphql-rubyの使い方を習得する必要がありそれはまた必要が発生してからでいいや。
Front
ざっと要素を並べるとこのあたり
- TypeScript
- React(hook)
- styled-component
- react-bootstrap, font-awesome
- eslint + prettier
storybookなるものも使ってみようと思っていたが忘れていた。
TypeScript、文字列でkeyの存在チェックして暗黙的な型キャストみたいなことが出来るようになっていたのは発見。
けど、そんな文字列でマッチさせるなんてやり方よりパターンマッチしたいよね。
そして折角だからasync/awaitも一応使ったがあまりに小さいアプリなので恩恵は感じられなかった。
個人的にはPromiseのまま使う方が好き。というのもawait
って要するにAwait.result(f, Duration.Inf)
でしょという理解なので雑に使うには怖くない?
UIのデザイン力は無いし身に付ける気も今のところ全くないのでbootstrapでレイアウトだけ適当に弄ったりした。
React hook
Vue使うかも悩んだけどhook触りたかったので。
以前React触ってたときはReduxとかpropsのバケツリレーが大変だった記憶があり、React hookを使うとなんか良さそうに書けるんじゃないかと思って手を出した。
ひと通り動かしてみて基本的なhook(useState
, useEffect
, useReducer
, useContext
, useMemo
, useCallback
)は触れるようになった。
単なる関数を組み合わせてコンポーネントを組み立てて、ひいてはアプリケーションを組み立てていく感覚は気持ち良い。
実装だとこんな感じ。useForm.tsx
Webpacker -> Webpack
最初はRailsにべったりなrails/webpackerを使っていたのだがいかんせんよくわからず自由を求めてwebpackに移行した。
大体変更はこの辺: #1 Webpacker to webpack
必要な変更が多くて難儀したがなんとか。
TrixEditor -> AceEditor
ActionTextは諦めたけどせめてTrixEditorを使ってみるか!と思っていたが使い勝手があまり良くなく感じ、AceEditorに乗り換えたりした。
デプロイ
Herokuで動かせるようにしてみた。 RailsといえばHeroku!
apiとfrontendという2つのプロジェクトが1つのリポジトリに置いてあるのでmakeでデプロイ出来るようにした。 バージョンをgitハッシュとしたかったのでデプロイと同時に環境変数に埋め込んで参照するようにしてみたらわりとよかったかも。
フロント力が足りずwebpack --mode=production
するとineffective mark-compacts near heap limit allocation failed - javascript heap out of memory
などという無力感あるエラーを吐いて死んだ。
--max_old_space_size
であったり--gc_interval
の値を調整するなどしたがダメで、よくわからないままwebpack --mode=development
したら動いたなんだそれ。
CI
時代はGitHub Actions!
いい加減触っておくか、みたいな感覚でYAMLファイルを書いてみて動かせるようにしてみた。
必要十分かなという感想。
肝心なテストはほとんどない。