植物図鑑アプリをLaravel × Vue.js のSPAで作ってみた
はじめに
独学でプログラムの勉強をして、ある程度の基礎知識はつけました。しかし、自分でオリジナルアプリを作ってこなかったので今回、個人で運用することも視野にアプリを作ることにしました。
アプリの概要
製作したアプリ
ソースコード
なぜこのアプリを作ろうと思ったのか
私自身、趣味でよく散歩をします。散歩をしていると、花や植物をたくさん見かけます。その植物たちのことを調べようとする時、植物の名前を知らないと検索しようがありません。そこで、名前がわからなくても、植物が生えている場所から探し出すことができるアプリがあれば、調べやすいのになと思い、今回の植物図鑑のアプリを製作する事にしました。
開発環境
WSL2, docker
使用技術
フロント
JavaScript, Vue.js, Vue Router, Pinia, Vuetify
バックエンド
PHP, Laravel, MySQL
インフラ
さくらVPS
CI/CD
Github Actions
TOP画面
アプリのメインである「生えている場所」から植物を探せます。他の植物を探す方法として、「名前」と「特徴の内容」から検索する方法や、「花の色」や「注目されている植物」など、色々な植物の検索方法を実装しました。
植物詳細画面
植物の特徴を見て興味をもってもらいます。その植物と同じ「花の色」「生えている場所」を検索できるようにして、似た植物に素早くアクセスできるようにしています。
植物登録画面
植物の情報として、植物の画像、よく生えている場所、花の色、特徴の説明を登録できます。
API構成図
Vue Routerで各コンポーネントへのルーティングを行います。5つのコンポーネントを作成しており、それらに対してAPIでデータベースのデータを返却する処理を行います。
ER図
colorsテーブルとplacesテーブルから、plantsテーブル内を検索できるようにしています。
工夫した点
植物を調べることができたら終わり。では、わざわざここにアクセスしてもらったのが、もったいないと思い、各々の植物に「いいね」と「コメント」ができるようにし、簡単なSNS機能を実装しました。
苦労した点
Linuxの知識が皆無であったこと。アプリの開発はWindowsで行っていました。コマンドや権限など、全てが初めて聞く言葉たちで、理解して使いこなせるようになるのに時間がかかりました。最終的にLinux専用のパソコンを1台用意して、触り倒すことによって、Linuxとは何なのか？どうやってアプリの開発を行えばよいのか？を勉強することにより、Linuxの基礎知識を得ることができました。
まとめ
植物を見つけやすいように、TOP画面からすぐに表示できるよう製作しました。その結果、植物を瞬時に表示できるようにできよかったです。今回、運用を考えたアプリを作るとなると、自身の技術がもっと必要だということもよくわかりました。LaravelやVueはできることがたくさんあり、これからもアプリ開発に励み、新しい技術を身に着けていきます。
謝意
写真の素材は以下のサイトから、フリー素材の写真を使用させていただきました。大変感謝しております。
Discussion