HTMLを学び始めたのがちょうど1年前のこと。
現在はLaravelとVue.jsを学び少しずつ知識がついてきたので
ポートフォリオとして自分としては大規模なWebサービス(アプリ)を使ってみました！

作っていくのは
【子育て知識共有サイト-mikata-】です。
作成するまでにかかった時間や流れをまとめてみたいと思います。

またこの記事は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を日本語する方法！プロジェクト内のメッセージもカスタマイズ

◇必要だった機能