Introduction

先ずは記事を見て頂きありがとうございます！

実務未経験・学習期間約5ヶ月でSNS型の旅系アプリケーションを作成したので今までの学習内容も含めて言語化しておきます。随時、加筆修正予定です。

感想やフィードバックなどを頂けると幸いです！

学習期間：2020年10月初旬〜2021年3月(現在)

2020年

10月：HTML, CSS, JavaScript, PHP掲示板作成開始

・学習開始。先ずは習慣化するために、毎朝５分でも「毎日やる」ということを心掛けました。

11月：PHP掲示板作成＋SQL連携、Laravel掲示板作成開始

・後述しますが、正直一番キツかったです。笑

12月：Laravel掲示板作成、チーム開発開始

・掲示板を完成させた後は、一応リーダーをやらせて頂きチーム開発で自己研鑽アプリの作成に取り掛かりました。

2021年

1月：チーム開発発表、個人開発開始

・チーム開発で自己研鑽アプリ「JIKOKEN_SAN」を開発。
・個人開発に入り、一気に今まで学習してきた内容が繋がり始め、仕様書作成から2週間でAWSでデプロイしました。

2月：個人開発のブラッシュアップ / 採用担当からDMオファー！

・Twiterで公開し、フィードバックを頂きながら機能追加/修正、UI/UXの整えを行いました。
・中旬に自社/受託開発企業の採用担当の方からDMでオファーを頂くことができました！最終選考まで進ませて頂き、実力不足で落ちてはしまったものの、勉強と発信の成果が出始めたこともあり、自信に繋がりました。

3月：個人開発を「サービス」としてる作り込む / 就活本格化。

・TechTrainのメンターの方から「サービス」としての視点が抜けていることを指摘して頂くことができました。現在は就活を行いながら、優秀な現役エンジニアの方々からフィードバックを頂きつつ成果物をサービスとして作り込んでいます。

アプリ名：Maps.Backapackers

・URL：http://ec2-52-195-10-177.ap-northeast-1.compute.amazonaws.com/

概要

ガイドブックに載っていないローカル情報を共有できる旅アプリです。

制作背景

個人的に自転車一人旅が好きで、「既存のサービスやガイドブックでフォーカスされていないローカル情報を共有できる」アプリケーションがあったら便利だと感じていたので作成しました。

拘ったポイント

・仕様書作成から2週間でAWS上に公開し、Twitter経由でフィードバックを貰いながら改善を行いました。

・使ってもらいやすいようゲストログイン機能を実装しました。

・Google Maps APIを使用して、投稿から地図を自動検索して表示できる処理を組み込みました。

・現場での作業を意識してGithubでプルリクやIssuesを使用しながら開発しました。

使用言語

・PHP 7.3.11 - Laravel 7.30.4

・JavaScript - Vue.js 7.6.3

API

・Pusher

・Google API ( Maps Javascript API / Geocoding API )

インフラ / コード管理

・Git

・RDB - MySQL

・AWS - EC2

0.機能一覧

○トップ画面

・ゲストログイン機能

・管理ユーザー登録

・管理ユーザーログイン機能

○ホーム画面

・記事投稿機能

・画像アップロード機能

・記事一覧表示機能

・いいね機能

・記事詳細表示機能

・タブメニューでタイムライン / いいねした投稿一覧画面切り替え機能

○詳細画面

・地図情報表示機能(地名/住所からピンを自動検索)

・コメント機能

・編集/削除機能

○プロフィール

・プロフィール画像設定機能

・フォロー機能

・タブメニューでユーザーの投稿一覧 / いいねした投稿一覧の切り替え機能

○サイドバー

・地図情に投稿一覧表示機能。＊実装/改善中３３

・リアルタイムチャット機能

○UI/UX

・レスポンシブデザイン(スマートフォン / タブレット)

1.トップ画面

・使ってもらいやすいように中央にあるオレンジの「GUEST LOGIN」ボタンで簡単にログインできる工夫をしました。

2.ホーム画面

・ホーム画面上部の「Share Your Travel」から自分が旅行に行った場所と文章、写真を投稿できます。
・タブメニューでタイムラインと自分がいいねした投稿一覧を切り替えて観覧できます。
・投稿をクリックすると詳細ページに遷移できます。

3.詳細画面

・Google Maps APIを使用して、投稿から地図を自動検索して表示します。
・コメントでユーザー同士が交流することができます。
・詳細ページ下部のEDITで投稿内容の編集も可能です。

4.プロフィール画面

・投稿者のアバター画像 / サイドバー / 画面上部からプロフィール画面に遷移できます。
・ユーザーの投稿一覧やいいねした投稿の観覧もできます。
・自分のアバター画像や自己紹介文を設定でき、フォロー機能を通してユーザー間での交流を促進できるようにしています。

5.サイドバー

・「MAP」から投稿一覧を地図上で表示。＊実装中
・「TALK」でリアルタイムチャットができます。＊範囲が広過ぎるため、サービスとしての役割を持たせるため改善中。

6.UI/UX

・レスポンシブデザイン(スマートフォン / タブレット)

苦労した点

・一番苦労したのは間違いなく学習1-2ヶ月目のPHPでの掲示板作成です。笑

①ググる ⇆ 言語化＠コメントアウト、Google docsにプログラミングノート作成
②15分考えて分からなければ質問テンプレートにあてはめてメンターに質問。
③継続：脳科学的にやればやる気は出るらしく、平均66日で習慣化されるとのことなので、毎朝5分やる→習慣化させた。

この3点を実行して乗り越えました。
これから学習される方は最初の200時間を先ずは乗り切る(死の谷を超える)ところが関門かと思うので頑張って欲しいです。ここを乗り越えれば少しずつ繋がって楽しくなってきます。笑

フロントエンド

・デプロイした当初は本当に酷いデザインだったのですが、デベロッパーツールを使って根気強く取り組み、なんとか見れる形になりました。笑
・UI/UXについては既存の有名SNSを参考にBootstrapとFont Awesomeを使用して整えました。
・レスポンシブデザインも有名SNSを参考にグリッドシステムを使用してサイドバーを上にズレ込ませ、スマートフォン対応させました。

バックエンド

・どうしても地図を使いたいと思い、Google Maps APIを使用して、投稿から地図を自動検索して地図上にマーカーを表示できる処理を組み込みました。出来た時はめちゃくちゃ嬉しかったです。笑

インフラ

・EC2へのデプロイも苦戦しましたが、ひたすらググって、メンターの方に質問して乗り越えました。笑

参考図書

○IT基礎概念を意識して学んでいます。
・コンピュータはなぜ動くのか
・プログラムはなぜ動くのか
・リーダブルコード
・ネットワークはなぜつながるのか

・また、今年1月からより強制力の高い環境で、優秀なエンジニアの方から基礎概念を学ために古里塾に入塾しました。
cf.古里塾：https://furusatojuku.site/
cf.IT基礎概念の重要性：https://note.com/takkun_desu/n/n7297b6ea03ff

追加/修正計画

GithubのIssuesに、今後の開発計画と目的をまとめています。
・Issues：https://github.com/Kano-engineer/Maps-Backapackers/issues

今後

記事を読んで頂きありがとうございました！

現在、アプリケーションの改善を行いながら就活を行なっています。

気軽にTwitter経由で連絡をして頂けると嬉しいです！

関連リンク

・Twitter：https://twitter.com/kano_engineer

・Github：https://github.com/Kano-engineer/Maps-Backapackers