React 開発日記。開発からデプロイまで。

50代からの挑戦状 React編。

みなさんこんにちは、みくのすけです。
年齢なんて関係ないを実践して証明する企画です。

コンセプト

html、css、WordPress、webデザインといろいろやってきました。そこへ新たなる野望。そうReactです。

50を超えたおじさんが何を言っているのと笑っているあなた。当然です。web開発は30歳でも遅いと言われています。

しかし、好きだけを理由に始めたReactでの開発。アプリを作ってデプロイまでする。そんな軌跡を綴ります。

ここまでの流れ

エンジニアスクールに入って一年。WortPress開発、webデザイン、そして、Reactを学びました。プログラミングは好きで特にフロントは性に合っています。

ただ好きだというだけで始めたReact。どうせなら自作アプリの１本をデプロイまでする工程を同じ様にプログラミングを始めたおじさん、おばさん、いや若い人たちにも見ていただきたい。で、肝心のスキルってどうなの？以下に現状のスキル概要を掲載します。

• js=>paiza Cランク
• React=>2022/4 より学習中　ようやくReactだけ（Type script、Next.jsなし）でeslintとprttierの環境構築が終わった。styled-ocmponentsでサイドバーのサンプル作った程度
• Vue =>ちょっとかじったことがある。
• express=> progateでちょっと
• Docker =>触ったことある。わすれた。
• html、sass

day1 〜企画のヒアリング~

アプリの方向性をヒヤリングしていただきました。

ヒヤリング？

そうです。コミュニティに入った翌日にこの企画のお話をいただきました。そのコミュニティの名は

Over 40 Web Club です。こちらを運営しているピータンさんからお話をいただいた次第です。

ヒヤリングに参加してくださった皆さんはピータンさん、ふみさん、yokoさん。

ピータンさんは物腰柔らかくまとめ上手、ふみさんは褒め上手、yokoさんは実際に開発現場に携わっていて的確なアドバイスをいただけます。

やったこと

簡単にいえば、どんなものを作っていきたいのか、機能はどうするか、フレームワークはどうするかということです。

そこできまったのは以下です。

機能要件

• 作業時間を計測する（タスク、タグ or カテゴリ付け？）
• 分析レポートを表示（時間範囲）
• Twitterに投稿する

フレームワーク

• Next.js

データベース

• ローカルストレージ

コンポーネントライブラリ

• Mantine

CSS

• Tailwind

まとめ

ヒアリングを通してやりたいこと、やり方がまとまってきました。

cssは当初styled-components を使用する予定でいたのですがピータンさんのおすすめもあってTailwindをつかってみることにしました。また、yokoさんいわくTailwindのほうがレスポンスが良いのだとか。なんでも使ってみる。評価はそのあと、そんなスタイルなのでまずはTailwindでいきます。

コンポーネントライブラリのMantineは初めて聞きました（初学者なので当たり前やろ）。非常に機能が豊富でよさそうです。yokoさんピータンさんのおすすめでした。元をたどるとYouTubeでおなじみのしまぶーさんのおすすめだそうです。

で次にやることは、TailwindとMantineを触ってみること。次はNext jsかな。

Follow me!

@miku_nosuke