そんなあなたにレボリューション

もう安い金で働かされるのは嫌なので、ポートフォリオ作りを始めた。そして、1ヶ月。


私のスペック

・エンジニア歴6年
・開発言語経験
  -Java:3年
  -JavaScript:1年11か月
  -VB.NET:1年5ヶ月
  -PHP:3か月
  -C#:2ヶ月
  -PowerShell:2ヶ月
  -Perl:2ヶ月




野望

・楽しむが価値
 人生が楽しすぎて仕方がないくらいに心踊る体験をしたい。




ポートフォリオの使用技術

【バックエンド】RubyRails
【フロントエンド】React、Redux、TypeScript
【通信部分】axios
【コンテナ基盤】Docker
【データベース】Mysql


Mysql以外、業務で使ったことがない。見様見真似で開発を始めている。
もうすぐ1ヶ月経過するが、




作成した機能

・サインイン ・サインアップ ・サインアウト ・ユーザ情報更新 ・ユーザ画像更新




ハマった箇所

・Docker、Docker-compose

一発目から、やってらぁって気分でDocker-composeを使用し、開発環境を構築したが、こいつにはめられた。
ネット上に転がっている情報から自分に必要な情報のみを選り分け、それだけを掴みとり自分のファイルに適用する。
悔しすぎた、4連休。ハマりすぎて、深夜までやってしまった。
だが、残念だったなdocker-composeよ。
私の勝ちです。
  
いろいろ思うところはあるけども、実際、どこかの企業に所属するにしても私がこいつをあたりくりまわす機会はないと思っている。
だけど、今までeclipseでの環境構築、こんなくだらないことに1日もかける時間が、
docker-compose build で永続化して、docker-compose up -d とか docker-compose upで環境完成。
  
こんなのおしまいです。
お兄ちゃんはおしまいです。
なんで、こんな夢のような素晴らしいツールを今まで使えない環境で過ごしていたんだろうか。
もうパソコン買い替えました。とか新しい案件が始まるたびに環境構築で1日も2日も使うようなくだらない時間にはおさらばです。
 
でもVagrantは使ったことあるんだよね。もう忘れました。
  

・React

ごめんなさい。java scriptやってたんですが、アロー関数とか使ったことないです。もしかしたら使ったことあるのかもしれないですが、
4年くらい前のことなので覚えていません。。
関数コンポーネントとクラスコンポーネント。主に関数コンポーネント使ってます。
あと別名エクスポートがNGみたいな記事を見たのですが、今はコンポーネントの別名エクスポートをしてしまっております。
あとhtml&css、、怖いです。そんなあなたに送る、Material UI。
ありがとう、material ui 本当に助かりました。もう、cssが怖くないです。
Udemyでもう怖くないCSS入門みたいなのがあれば見ます。でもまだその時ではありません。
今回のポートフォリオ作成では、CSSなんかおまけみたいなものなので、全く勉強する気はありません。必要に応じてで良いでしょう。

・Redux

今では友達です。最初はクマの子みていたかくれんぼ、おしりを出した子一等賞。
何を言っているのか私にも分かりませんが、これには苦しめられました。
こいつからの苦しみを軽減するために、re-ducksパターンを忠実にポートフォリオに適用し、あとどちらかというとmaterial uiの話だと思いますが、
material designも導入しました。やはりディレクトリ構成とかについては有能の証明をされた方々の、先人の知恵を借りるのが楽です。
Railsであれば、ディレクトリ構成が決まっているので、こんな難しい部分で悩む必要はないのですが、
create-react-app さんはなんでそれないのでしょうか。
create-react-app -typescript -react -redex -re-ducks
なんかこう言うのないのでしょうか。reduxさんがreactさんの家族じゃないからでしょうか。なんか従兄弟に見せかけた赤の他人だからですか?
あと実はReduxじゃなくて、redux-ツールキットみたいな方がいらっしゃって、これの方がわかりやすいみたいな話がございましたが、
もう頭はReduxになっており、Redexの勉強をしておりましたから、途中で頭を切り替えるのは私には無理でした。
もう必要になったら勉強します。
あと私の実装が悪いのかもしれませんが、storeの内容がページ遷移するたびに消えてしまいます。
これは永続化しなくちゃならないのでしょうか。なので、reactRouterさんで、全部のコンポーネントをセッション管理するコンポーネント
包み込んで、Railsさんにこいつログインしておりますかと聞いて、ログインしてたらaction経由でstoreに情報詰め込んでます。

csrf/spa

もう私が如何に無知かを知りました。
RailsAPIモードだとcsrfの対策が入っていないようで、自前で用意しなくちゃならないという理解をしているのですが、
これは私に大きな打撃を与えました。認証はRailsのGem、devise_token_authでやっているのですが、
これを疎通するためのcorsの設定があったり、qiitaとかネットに載っている情報だと、当たり前のようにapplicationControllerで、
csrf対策を無視する設定になっており、疑問が残る。
もうGoogleが脳で思ったことをそのまま検索してくれる機能を提供してほしいです。
どうすればよいのか私には分かりません。
最終的に、どうやら私の認証方式ではIPACSRF対策をするサイトには該当しないという結論に落ち着き、自分もその理解で
とりあえずOKにしようという結論に至りましたが、果たしてこれが正解なのかは疑問なところです。
ですが、いちいち疑問を持ち、つっかかりすぎるといつまで立っても進まないってことで、その理解のまま進むことにしています。

teratail.com




Rails

なんでしょう…なんか気持ちが悪いです。
Controllerとか継承しているのはわかるんですが、何かが気持ち悪い。うまく言葉にできません。
あと本当に悩み、調べても答えがなかなか出なかったのが、devise_token_authでユーザ情報保存する、userテーブルにあるimageカラム。
こいつをactive_storageにアタッチさして、active_storageに画像データ保存する。
Responseでactive_storageの画像URLをJsonで返却する方法。
これが本当に分からず、悩みました。
  
結果的には、devise_token_authが提供するヘルパーメソッドとか使って返せました。
あとはuserモデルに、画像をactive_storageにアタッチするよとか、アタッチした画像URLを返却する関数を書く。
で、各コントローラーでその関数の結果をJsonに追加して戻せばOK。

  

・サインアウト

もう直近のコミットを手当たりしだいにリセットしても解決しない最悪な問題。
ログインした直後にログアウトしようとすると、ログアウトに失敗する。
ログインした直後に、useEffectとかでむりくり、Session管理するオペレーション関数をdispachしても、そんなuserいないよエラー。
これ本当は、順番が逆でactive_storageにアタッチした画像のURLが
1:セッション管理するオペレーションが動いた時、2:ユーザ情報を更新した時、この2つの時しか戻ってこない。
なぜなら、devise_token_authのSessionControllerはRails側でRouter定義していなくて、勝手に自前でセッション管理Controllerを作って、
そこで有名な4つのヘルパーメソッドのうちの1つ、カレントユーザーかどうかメソッドで判定させてOKなら、ユーザーJSON in 画像情報返却
でやってたから。
何書いているんだろう。
結局画像を、ユーザーマイページと、ヘッダーの右側によくあるユーザCircleに画像を表示させたかったが、
ログイン直後は、devise_token_auth純正のJsonResponseでactive_storageにアタッチされた画像URLは戻ってこないので、
useEffectで第2配列で[]指定して、初めて描画したときだけ、自前セッション管理動かして画像URL取得すれば全部解決と思ったら、そこでエラーになる。
  
なぜか、ログイン直後にログアウトができない。
ログイン直後にセッション管理すると、Rails側でそのユーザいないよエラーが起きる。
  
devise_token_authはログイン後にはヘッダーに、tokenとuidとclientとかいうのを詰めてRails側に投げてますが、
詰めるところでなにか問題があるのかもしれないし、rails側で変更した内容が誤っている可能性もある。
これから解決します。

・localStorage/Cookie

これが本当に分かりません。token情報をlocalStorageに保存すると抜き取られるリスクあるよ。
そんな記事を見たので、安直な理由で、js-cookieってのをReactにimportして、その中にログイン後にRailsからプレゼントされる
token3つを詰めているんだけども、これは意味があるのか?
何にも意味がない気がしている。正直、全くわからない。八九寺真宵です。
localStorageに保存すると抜き取られるかもしれませんが、転職用に作成するポートフォリオで、これは困ることなんでしょうか?
ログイン用にメールアドレスは保存することにはなりますが、その他、取られて困る情報はありますかね?
もちろん外部公開する際にはSSL対応いたしますし。もう何もかもの情報が不足しています。

・Qiita/個人ブログ

やはり、ググり力が試されます。エラーとかはぴったし有能な方が記事を書かれているのでそれを参考にいたしますが、私がやりたい技術、やりたいことを
解決するための方法は、ピンポイントで書いておりません。
いろんな記事の情報を集め、選定し、取捨した上で、自分のものにしていく感じでした。
ですが、記事を書く方々は本当に素晴らしいと思いました。ときには英語の記事を参考にするしかないケースもございましたが、
こういった記事を書いてくださる善良な方々のおかげで私も一歩前に進んでいけると感じました。




今後やらなきゃならないと考えているところ

・docker-compose/dockerのログ出力
Railsのログ出力
正直、全く分からないので調べます。これを使ってログイン直後にログアウトできない問題を解決したいです。




最後に

これが、ポートフォリオを作成して一ヶ月経過した結果をまとめたものです。
最終的には体系的にQiitaとかにまとめてみたいなと思っています。
おそらくこういうのって要所で振り返っておかないと忘れてしまうかと思うので、とりあえず書いておきます。

あと本当にどうしようか迷っているのですが、平行して転職ドラフトってのを使ってみようと思っています。
どうやらレジュメを書くのが大変なようなので、ポートフォリオ作成完了! あとレジュメだけに時間を使いますよ~みたいなことは
おそらく面倒なので、レジュメも書きながら、ポートフォリオを作成する、そのような2足のわらじで参ります。

おそらくポートフォリオ完成したところでしこりが残っている箇所、、優先度が低いけどいつか解決しなきゃならない問題とかを
片付けないといけないかと思うので、まあそこの修正を続けることになるかなという意味では、
もうレジュメを作成してみても悪くはないかなと思いました。