作りたいものは？
本格！手軽！中華料理のレシピ投稿アプリーー「食華（しょくか）」
- 背景：私はグルメが大好きな中国人です。5年ほど前、私は日本に来たばかりの頃、日々本格中華料理を恋しくなりました。その後、コロナ禍の影響の下で自宅で料理を作り始め、中華料理を作る習慣をつけました。日本人の友達としょっちゅう中華料理を食べたり、自分が作った中華料理をみんなに一緒にシェアしたり、いい思い出を作りました。しかし、私は自分が好きなことからいろんな問題点を見つけました。
- 問題点1：来日中国人留学生人数の増加によって、池袋や高田馬場では本格中華料理店が増えました。しかし、中華料理店の外食費は母国より高いです。
- 問題点2：東京と比べて、地方の中華物産店と本格中華料理店が少ないので、地方住みの中国人にとって母国の味を食べるのはかなり不便になります。
- 問題点3：中華料理に興味があるが、作り方がわからない日本人もいます。自分が日本のスーパーで手軽に買える食材を買って中華料理をアレンジしたので、自分の工夫点をシェアしたいです。
そのため、日本で手軽に中華料理を食べたい、あるいは作りたい人たちの困りごとを解決したいという思いを込んでこのアプリを作りたいです。
使用している技術・ツール
使用している言語、技術とツールをここで挙げます。バージョンは全て開発時点における最新バージョンで実装します。
- Frontend: HTML / JavaScript / Tailwind CSS
- Backend: PHP + Laravel / MySQL(phpMyAdmin)
- Infrastructure: Docker / AWS
- Others: Git / Github Actions / Figma / VSCode / Lucidchart
実装したい機能は？
基本のCRUDを通して、ユーザーがレシピの作成、閲覧、更新と削除ができます。
様々な設計図一覧
ER図
各テーブルの名前と意味は以下になります。
| テーブル名 | 意味 |
|---|---|
| Users | 本アプリを使用しているユーザー |
| Recipes | レシピの内容 |
| Steps | 料理をするためのステップ |
| Recipe_step | レシピとステップの中間テーブル |
| Ingredients | 料理をするための材料と分量 |
| Recipe_Ingredient | レシピと材料の中間テーブル |
| Followers | フォロワー関連 |
| Likes | お気に入りレシピ |
| Comments | コメント |
インフラ設計図
Figmaで構想したイメージ図
ワイヤフレームを作成したいと思っているが、つい色をつけたり、欲しい要素を細かく追加しました。
それにしても、実際に作成したものと自分の構想はやっぱり違いますね...
実際の画面
【9/4】現在、AWSで構築している本番環境がまだ調整中なので、全てのスクショはローカル環境で作成したものです。そのためデバッグツールが入ってありますが、お許しください。
LP
新規登録
ログイン
プロフィール
ユーザー自身がお気に入りのレシピのここに載せます。
レシピ作成
それでは、麻婆豆腐の作り方を書いてみようと思います！
実際にレシピを書くためきっと長い文章を書く必要があるでしょう。
機能を紹介するため、あくまでも適当なレシピを書きますので、ご了承ください。
レシピのカバー写真をアップロードし、タイトルと紹介文を入力します。
次は材料と分量を追加します。
素のJavaScriptで動的な入力欄を作成したので、材料の追加、削除ができます。
次は作り方ステップも追加します。必要な場合であれば写真のアップロードも可能です。
最後に、このレシピを作るための注意点も一筆で書きましょう。
ちなみに、麻婆豆腐を作るなら絹豆腐の方がお美味しいでしょうね。
いざ、投稿へ！
レシピ投稿
やっと、レシピを投稿しましたー！！
先ほど適当に書いたレシピをちゃんと反映されました。
レシピの中に何か追加したい内容があれば、もちろん再編集して、更新できます。
将来実装したいもの
- タグをつける：中華料理だと言っても、実はバラエティが多様です。レシピを作成する際にタグをつけて、タグによる検索（例えば「#四川料理」）をかけたら、きっと自分が好きな中華料理レシピに出会えるはずです。
- 検索機能をもっと多様に：現時点ではサイト内でレシピの検索しかできないが、将来的に特定のユーザー、特定のタグも検索できるように実現したいです。
- 多言語対応：将来、日本語が苦手な中華系の人のために、中国語で閲覧できるようにしたいです。
学習、実装期間
私は仕事しながら、独学でプログラミングの学習とポートフォリオの作成をやっていたので、学習および実装期間が比較的に長いです。
平日は5時起きて、1~2時間程度の朝活をします。たまに体調がどうしても無理な場合には朝活をせず、仕事終わった後に同様な時間で作業することもあります。
以下は私は各学習項目の学習期間と参考した教材です。
HTML, CSS, Javascript
学習期間：2022年4月〜2022年8月
学習内容：FreeCodeCampとCodeStepを用いてHTML、CSS、JavaScriptの基本を学習しました。さらに、Udemyでの基礎講座を受講しました。
使った教材：
- FreeCodeCamp
- CodeStep
- HTML、CSSとJavaScriptの基礎講座：The Complete 2023 Web Development Bootcamp（Udemy - Dr.Angela Yu）
PHP 8.0の基礎知識
学習期間：2022年8月〜2022年11月
学習内容：まず、ProgateでPHPの全コースを完了。その後、UdemyでPHPの講座を受講し、To-doリストの作成に挑戦しました。
使った教材：
- Progate
- ちゃんと学ぶ、PHP+MySQL(MariaDB) の入門講座（Udemy - たにぐち まこと）
Laravelの基礎知識
学習期間：2022年11月〜2023年1月
学習内容：UdemyでLaravelの講座を受講し、Laravelを用いてTo-doリストの作成に挑戦しました。
使った教材：【作って学ぶ】laravel8とMySQLで作るシンプルメモアプリ（Udemy - 打田裕馬）
Laravelで開発作業
学習期間：2023年1月〜現在
学習内容：要件定義の段階から始めてER図とワイヤフレームの作成、開発作業を実施。
使った教材：
- Figmaの使い方：就是它以黑馬之姿擄獲了全球設計師的心！超人氣 UI 設計工具 Figma 快速上手！（Youtube - PAPAYA電腦教室）
- ER図の設計：Entity Relationship Diagram(ERD) Tutorial （Youtube - Lucid Software）
- Laravelの教科書（ソシム - 加藤じゅんこ）
- Let's Learn Laravel: A Guided Path For Beginners (Udemy - Brad Schiff)
- Git：はじめてのGitとGitHub（Udemy - 山浦清透）
- AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得（Udemy - 山浦清透）
独学を選んだ理由
私は勉強の旅を始めてから、スクールに入らず、ずっと独学していました。MENTAで出会ったメンターに助言をもらいながら、動画や書籍を使って勉強してく感じです。
独学の理由としては、地方勤務の私にとって、これが一番最適な方法だと考えております。
私が住んでいた地域は田舎なので、そもそもスクールがありませんでした。
また、オンラインスクールがあっても、自分の時間を作るのは難しいです。
さらに、前職では独自の社内カレンダーがあるので、繁忙期でも月に2回土曜日に出勤しなければなりません。なので、社内カレンダーをベースとして、自分のための時間を作るしかないと考えていました。
作成する際に意識したところ
1️⃣ プログラミングは英語を勉強する場所ではなく、英語を使うための場所です。
私はプログラミングを勉強する前に、英語を意識的に使う習慣をつけました。例えば、英語で小説を読んだり、ゲーム実況を観たり、洋画を英語の字幕を意識的にかけたりします。だから、英語のドキュメントしかない場合だったら、恐怖心を感じることもなく読めます。
学習中にわからないことがある時に、常に日本語か英語で検索をかけて、技術ブログとドキュメントを読んでいます。二つの言語で使いこなせば、参考できる資料がいっぱい出てきます。
環境構築の際にYouTubeに頼ることもありますが、英語で検索するとインド英語のチュートリアルが大半です。最初に戸惑いましたが、実際に一通りでやってみたら、聞き取れなくても全然いけると気がします。
ツイッターで語学の勉強に熱心なエンジニアもいますが、本当に意識的に使うことがおすすめです。技術力を高めることだけでなく、英語力も高めることができます。
2️⃣ ChatGPTはコードを生成する場所ではなく、思考整理のツールです。
初学者がChatGPTを使った方がいいかどうかという討論はやっぱり賛否両論がありますね。
私はエラーで詰まった時にもちろん使っています。エラーが出てきて、一歩前進ができないと感じたら、まずエラー文を読み取ります。
そこで、問題点が特定できたらググるか、もしくはドキュメントを参考します。
参考したものを自力で解決できれば、仮説を立て、「この方法で実行してみよう、できれば自分の仮説は正しい、できなければ、きっと別の道があるはず」というマインドを持って仮説検証をします。
もし自分の仮説検証が失敗したら、ChatGPTに聞いてみましょう。
私の聞き方はこちらです↓
「私は（このような機能）を作りたいです。しかし、（このようなエラー）が出てきてしまって、私は（このようなこと）がエラーが生じる理由だと思いまして、（このような方法で）解決してみました。ただ、仮説検証がやっぱりダメでした。どこに間違えましたか、教えてください」
大体、ChatGPT先生はこんな時に答えを教えてくれます。
決してChatGPTは100%正しいとは言えないが、自分が質問する際にも、ChatGPTとの会話のなかに思考回路を整理することができます。
ちなみに、私はエンジニアの知り合いやメンターに聞く際にも、大体こんな感じて質問します。
要するに、【やりたい課題】【自分の仮説と検証】【参考したもの】を示すことが必要です。
相手は経験豊かなエンジニアでも、AIでも、自分が欲しい答えをもらいたいときに、自分の質問の仕方を工夫しましょう。
3️⃣ Notionをこまめに活用を
ポートフォリオを作成する際に、常に参考資料を探しながら解決策を見つけます。そこで、Notionを使う際に、自分が使った資料を残しておきます。また、エラーに遭遇する際に自分が解決策として使っていたコードとコマンドもメモしといて、今度似ているような問題が発生してしまった時にも、自分用の手順書として使うことができます。
これから転職活動もやり始めたいと思いますが、Notionを活用して履歴書、職務経歴書や面接の想定問題などをまとめながら、自分の思考回路を整理していきたいです。
苦労したこと
1️⃣ Laravelに理解不足があったため、常に戸惑っていました
アプリ開発が始まった際に、既にチュートリアルで一通りにメモアプリの作成をしましたが、MVC の構造によって裏でどのように働いているかわからないため、最初にどこから始まったか全然わからなくなって戸惑っていました。
Eloquent ORMへの理解も足りないため、裏に動くロジックとしてのControllerを書く際にも「何を書いた方がいいか全然わからない」状態でした。
わからないまま開発を進んでいるからこそ、手を動かしながら勉強した方が良いと気がします。
そこで、私がおすすめの初心者向けの教材を一冊シェアしたいと思います↓
https://www.amazon.co.jp/Laravelの教科書-バージョン10対応-加藤-じゅんこ/dp/480261408X
Laravelを勉強している方がたぶんJunkoさんのブログを馴染んでいるでしょう。私もJunkoさんのブログとこの書籍に世話されました。中では、キャラクターたちのかわいい絵によって、初心者でもLaravelの働きを理解することができると思います。
それにしても、一番理解を深まった近道はやっぱり繰り返しをして手を動くことです。
2️⃣ フロントエンド側にハマってしまいました
（バックエンドの人はCSSをやっている様子↑）
どれほど苦労したのか、このネタは私のことを説明することができます。笑
私がバックエンドの知識から勉強し始めたので、決してフロンドエンドの知識を深まっていない状態だと言えます。
だからUI/UXを整えるように、一からHTMLとCSSを書くことではなく、TailwindCSSを使ったコンポーネントをコピペして、なるべく自分の思い通りに合ってるように調整していく感じです。
それにしても、レイアウトを崩したり、何度も調整してもうまくいかないのは日常茶飯事ですね。
調整する際に、私はTailwind CSSの公式ドキュメントを読みながら、一番適した数値を見つけ出す方法で解決していきます。
UI/UXの調整は本当に時間かかりますので、できる限り最低限の時間で進んでいきましょう。
私が使った無料Tailwind CSSのコンポーネントを一応ここにシェアしていきます。
Flowbite: https://flowbite.com/docs/getting-started/introduction/
Hyper UI: https://www.hyperui.dev/
他にはたくさんありますが、ググる際に「Tailwind CSS free template」とかのキーワードで検索してみてください。
3️⃣ GitとAWSのコマンド操作は本当に大変でした
ローカル環境で開発する際に、ずっと「コードを書く」と「ハマったエラーを修正する」という二つの課題で専念していたので、Gitの操作を全く行わなかったです。
そのため、草が生えないですし、Gitの操作をVS Code経由でMain Branchに投げる以外ブランチを切ることしかできませんでした。
しかし、AWSでデプロイするときに、コマンド操作を不可欠になります。忘れかけたGitを復習したり、本番環境にうまく行ける操作をすることを心がけています。
大変だと思う理由は、やっぱり基礎知識が不足のためです。そのため、私が公式ドキュメントに参加したり、Notionでコマンドを操作するための手順書を書いています。万が一忘れた場合があれば、自分が書いたものを読んで、知識を思い出せます。
今後の課題
エンジニアになる前だけではなく、エンジニアになったらどんな課題を解決していきたいかを常に自分に問いかけます。今後直面しなければならない課題は大まかに二つあります。
1️⃣ 基礎知識を固める
X（ツイッター）で一時に「エンジニアは勉強しなければならないですか」という質問が話題でしたが、独学未経験の私にとっては「Yes」を答えたいです。
自走力を高めるために、勉強はその中の一環でも過言ではありません。現時点では、アプリを完成させることを中心にやっていますが、将来は意識が薄い部分（例えばセキュリティ、テストなど）を補足で勉強しながら、アプリ機能強化・追加の形でアウトプットしていきたいと思います。
これからも実務で自走できるエンジニアになれるよう、地道に、着実に進んでいきたいです。
2️⃣ 質問力を高める
私が詰まったときに、自力ですぐ問題を特定して解決していくタイプなんですが、正直に言うと、他人に助けを求めることが本当に苦手です。なぜなら、「他人に迷惑をかけたくない」という謎の思いが身につけられたからです。
しかし、自分でどうしても解決できない場合であれば、経験豊かな他人からの助言をもらうことができれば、作業の効率に爆速で上げるかもしれません。
「他人に迷惑をかける」を恐れることではなく、どうやって質問の仕方を工夫して、質問する勇気を出しながら「他人からの助け」を確実にもらうのは大事です。
いままだまだ模索中ですが、今後チームワークを順調に進めるために、柔軟性のある人間になれるように、助けを求められることを実践していきたいです。
To be continued…
何がアップデートがあれば随時更新します！