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したら動いたなんだそれ。