空の下でひっそりと

てきとーに更新していきます。レーザーカッターや3Dプリンタが好き

ミニハッカソン終了〜!

「なんか作ってみたくない?」

 

そんな思いつきで始まったハッカソンも今日で最終日でした。

f:id:yabu_sw:20201107092413j:plain



ぼくは、Laravelは触ったことある、reactはほんとに触りだけ(Vueも少し)、開発環境はdocker(1ヶ月前に初めてdocker-compose作った)みたいなスキルセットで、react/Nextをフロントエンド、laravel(API)をサーバサイドとしてこの土日アプリを作ってみました。

 

先に結果だけ話すと、当初の目標の50%くらいしか達成できなかったのですが、どんな感じで進めてたかを残そうと思っています。

 

1日目(作戦を立てる)

どんなアプリを作るかだけ決めていたので、そこから簡単な要件定義をしていきました。

作ろうとしているのは、いわゆる掲示板てきなやつで、railsとかならもはや数時間でできる内容ですが、今回はreactをフロントとして、laravelをAPIとする構成でほんとに初めてだったので、機能は最小限ということでこのコンセプトでどこにでも振れそうなサービスを作ってみようと思いました。

サービスの流れと機能、画面を整理したら、githubのissueに問題を追加していくような感じで進めていきました。

 

2日目(開発初日)

開発初日はまずはgithubでの共有をノボくんにやり方を教えながら午前中に開発環境を整えていきました。

午後は、まずはユーザー登録から、、、ということで進めていたのですが、ここですぐCORSの壁にぶち当たります。

laravel側での許可はどうやらすぐにできていたようなのですが(気づくのが遅かった)、react側での許可がなかなかできなかったです。

これはなんと日曜の朝まで悩まされます。😅

おれ雑魚だなーと思ったんですけど、なんとかできてよかったです。(疲れた

qiita.com

それができてない間に、ユーザーの画面3つ、投稿の画面2つを作っていました。

f:id:yabu_sw:20201108233630j:plain

(お昼はあじとや行ってました。😋)

3日目(最終日)

ぼくは朝は別件で仕事があり、午後からの作業開始。

ログイン時のユーザーの情報がもたせられないという問題は結局さわる時間なかったものの、掲示板の投稿機能/詳細の部分は作成しました。

なぜか投稿の一覧取得のAPI作成後、reactでの表示で引っかかりました。reactむずい、、、

react知らなさすぎるのが影響してしまい、ここまでで時間がきてしまいました。

このときに同じ画面を作ってしまったこと、画面作ったけどAPIをマージしないとテストできない問題で開発が遅れたので、 次はAPIと画面はセットでタスク作ってもイイのかなと思いました。(画面の装飾は別)

 

まとめ

できたこと

・react/NextとLaravelのdockerでの環境構築(別件で使う予定だったものを改造)

・react/NextとLaravelAPIのaxiosを使った通信。

・corsの許可。

・createとread。

 

できなかったこと

・ログイン時のセッション管理

・updateとdelete

・reactでのコンテンツの一覧表示

 

こんなところでしょうか。(エラーに悩まされる時間多かった、、、)

 

今回は挑戦とスキル試しみたいな意味合いでこんなことをやってみました。

 

思ったよりもできなかったので、もっとreact/Next・laravelのこと知ってまた来月やってみます。

 

もしこの投稿みてやってみた人いたら、ぼくに感想教えてくれると嬉しいです🙌

やぶ@Lagoon (@vain_vox) | Twitter

 

最後まで読んでいただきありがとうございました😊