毎日更新

38日目 個人開発記⑤-実装開始-

こんにちは。

今日も個人開発。
忘れかけてたReactのリハビリが一旦ひと段落したので、ついに実装に取り掛かりました。

とはいえ、Laravel×Reactの実装はしたことがなく、どう設計していいのかもわからない。

Reactは初めてだからしょうがないとしても、Laravel側ですらSPAになるとよくわからない。。という状況。

「どっから手つけたらいいのかさっぱりわからんぞ、、」と途方に暮れていたところ、ネット上でこんな記事(教材)を見つけました。

https://www.hypertextcandy.com/vue-laravel-tutorial-introduction

サイト画像

「Vue×VueX×Vue-router×LaravelでSPAの写真共有アプリを作ろう」という内容です。

今回フロントはReactなので直接ソースを流用できるわけではないですが、SPAにおけるLaravel側の設計などは大いに参考になるなとは思いました。

今回の個人開発での技術的な目標は、「React × Redux × Hooks × SPA」というところなのですが、なかなかReact初心者にとってReduxを取り入れることはハードル高めです。じゃあReduxは後回しでやろうかなと思ったところ、これまで学習で使ってきたUdemyの動画がReduxは使わないまでもHooksを使ってStoreを操作するというもので、正直「それってReduxと何が違うん?」状態なんですが、一旦サンプルソースのあるReduxなしパターンで書いてみようと思います。書いてるうちにいろいろわかってくるでしょう!

とりあえずフロント側でルーティングさせるSPAのLaravel側設計は、前述のVue講座で書かれていたのでそれを参考にしました。

フロント側は、Udemyの教材を見よう見まねでとりあえずreact-routerdを使って複数ページ表示できるところまで作ってみました。Reactは自由度が高い分設計も何が良いのか全然分からない感じなので、とりあえず汚くても無茶苦茶でもいいから動くコードを書いて、そこから行き詰まったらお金を払ってレビューでもしてもらおうかと思います。まずは自分でもがいてみないことには始まらない。

CSS設計?をどうするかについても少し調べてみました。僕の購入したUdemyの講座ではCSS Modulesという手法が取られていたようで、コンポーネント毎にscssファイルを用意してスタイルを書いていました。

しかしネット上で調べてみると、「Styled Component」がいいぞという記事がたくさんヒットしました。「なぜStyled Componentがいいか」という理由についても触れられていましたが忘れました。でも記事を読んだときに「よさそう!」と思ったのは間違いないので、自分の感性を信じてみます。

いよいよ始まったReact × Laravelの実装、前途多難すぎてどうなることやら。。
独学は本当にスピード感遅いので不安感ありますが、1つ1つ積み上げていくしかない。

がんばります。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。

© 2021 きわっちのブログ Powered by AFFINGER5