HTMLを学び始めたのがちょうど1年前のこと。
現在はLaravelとVue.jsを学び少しずつ知識がついてきたので
ポートフォリオとして自分としては大規模なWebサービス(アプリ)を使ってみました！
作っていくのは
【子育て知識共有サイト-mikata-】です。
作成するまでにかかった時間や流れをまとめてみたいと思います。
【Mac】Laravelのインストール手順！環境変数PATHの通し方とは？
またこの記事は1年プログラミング学習したらこんな感じのアプリが作れるまで成長できたよ！という参考にしてもらえると嬉しいです！
プログラミング未経験から1年学んで作れたアプリ
アプリ開発の流れと環境やフレームワーク
アプリ開発の流れに沿ってみてみます。
- 要件定義
- 設計
- 制作
- テスト
- 公開
また今回は初めてバージョン管理が可能なGitを使用してみました。
◇環境
- Mac
- VS Code(エディタ)
- MAMP(ローカル環境)
- Xサーバー(本番環境)
- Git(バージョン管理)
- GitHub(バージョン管理)
アプリの主となるのはLaravelとVue.jsです。Uiのチートと認証機能はライブラリで導入しました。
またVue.jsのルーティングにはVue Router、データや関数の管理と保守性を高めるためにVuexを導入。
◇フレームワークやライブラリ
- Laravel
- Vue.js
- Vue Router(Vue.js)
- Vuex(Vue.js)
- Element Ui(Vue.js)
- Auth(Laravel)
【Vue.js】Element-uiの導入方法！オンデマンドとVue3対応版
【Vue.js】Vuexの導入方法と使い方まとめ！超初心者向け
LaravelでVue Routerを組み込む方法とは？初心者向けに1から解説！
要件定義
まずはアプリの**要件定義（要望と実現方法を定義）**から始めます。
◇アプリの目的
子育て世代のストレスを少しでも減らせるように
◇アプリの概要
- ユーザ登録できるSNS
- 質問and回答機能
- コメント機能
- フォロー機能
- 質問は記事としてインデックスされる
設計
次にアプリを作る上でのアプリの設計、データベース設計をまとめます。
◇データベース設計(テーブル)
- users
- profile
- friends
- boards
- board_category
- category
- answer
- comment
- sympathy
- bookmark
◇必要なページ
- トップページ
- 記事ページ
- 記事投稿ページ
- 記事編集ページ
- プロフィールページ
- プロフィール編集ページ
- ランディングページ
- その他サイトに必要なお問い合わせページなど
◇制作構造
- 大枠はLaravelで制作
- コンポーネントをVue.jsで実装し切り替える
- SPAに近い構造
- その他ページのみLaravel側で実装
- データはデータベースに格納
- データベースの値はAPIで取得
- データベースのCRUDはコントローラーに実装
APIは該当URLアクセスで指定データを連想配列で返してくれる機能
制作
総所要時間：200時間
◇デザインカンプの作成
figmaを使って大方のデザインを作成
◇実際のコーディング作業
ルーティング処理→web.php(Laravel)/router.js(Vue.js)
API→コントローラー
CRUD→コントローラー
大枠レイアウト→bladeファイル
コンテンツコンポーネント→Vue.js
メソッドの一元化→Vuex
お問い合わせ機能→Laravel
認証機能の日本語化→Auth
【超解説】Laravelでお問い合わせフォーム作成！Gmailで連携するには？
【Laravel】authを日本語する方法！プロジェクト内のメッセージもカスタマイズ
◇必要だった機能
- 認証機能
- 入力値のバリデーション
- 画像のキャッシュバスター
- migrationとシーディング
- データベースへのCRUD
- DB格納レコードのAPI取得
- 問い合わせ機能
- スマホで日付がNaNになる問題解決
◇感想
LaravelとVue.jsを使っての初めてのアプリ制作だったのでいろいろ苦戦するところも多く、学びながらの制作でした。
だけどおかげでアプリを作る流れや構造、必要な機能などへの理解が大幅に深まったと思います。
またWebアプリを作る上で注意しなければならない画像のキャッシュやスマホブラウザでの日付表示などこれからの制作時にも使えるポイントにも気づくことができました。
【HTML】画像のキャッシュバスターで変更時の自動更新！日付を入れるだけ！
【JavaScript】スマホ表示で日付がNaNになる原因と解決法
Gitでの管理
バージョン管理には初めてGitを使用してみました。GitHubへのアップロード方法や本番環境へのダウンロード、ステージングやブランチなどGit特有の用語もだいぶ覚えることができました。
【Git】インストール方法と使い方！リポジトリの違いと作成方法！
LaravelプロジェクトをGitHubにpushする方法と注意点
テスト
ローカル環境でエラーを1つ1つ潰しながら実行していました。
公開
実際に本番環境(エックスサーバー)の中にアプリをGitHubからダウンロードしてみると微調整は必要でしたが大きなバグやエラーもなく公開することができました。
実際に公開したのがこちらです。
公開したは良いものの今回作成したWebアプリはユーザーがあってのものです。しかし集客方法の知識が全くなく一番そこが難しいのではと感じています。。
また初めて作ったWebアプリですので不具合やエラー、注意するべきところなどありましたらなんでも良いので教えていただけると嬉しいです！！
ご覧いただきありがとうございました。