はじめに
プログラミング完全未経験者だった私がポートフォリオを作成するまでの３ヶ月で取り組んだことをまとめました。
ポートフォリオは基礎学習（1ヶ月）ポートフォリオ作成（2ヶ月）の計3ヶ月で作成しました。
私と同じように未経験からエンジニアを目指す方の参考になれば嬉しいです。
作成したポートフォリオ
【概要】
ゴルフ初心者向けの投稿アプリです。
学生時代の経験からゴルフ初心者が持つ課題を解決するためのツールとして作成しました。
【URL】
https://golfour.herokuapp.com
【GitHub】
https://github.com/matao0214/golfour
【言語・使用技術】
・Ruby 2.5.1
・Ruby on Rails 5.2.4
・HTML(Slim)
・CSS(Sass)
・Bootstrap4
・JavaScript
・jQuery
・PostgreSQL 12.2
・GoogleMapsAPI
・Heroku
・Git
・GitHub
基礎学習（1ヶ月）
まずは基礎的な知識をインプットするために以下の書籍を使って学習を進めました。
これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
プロを目指す人のためのRuby入門
現場で使える Ruby on Rails 5速習実践ガイド
この1ヶ月はかなり辛かったですが以下の2点を習慣化して取り組みました。
1. 知らない単語が出なくなるまでググり続ける
わからないことを調べるとその説明文の中に知らない単語が出てきて更に調べて、というのを何度も繰り返しました。
ただ、それを続けていくと確実に知識量が増えて調べる量は減っていくので、諦めずに調べ続けることが重要です。
2. インプットした内容はQiitaでアウトプットする
インプットした知識は理解度を高めるために、Qiitaの記事にまとめてアウトプットしていました。
本を読んで「理解した！」と思ってもいざアウトプットしようとすると言語化出来ず、十分に理解できていないことが多々ありました。
理解度の確認・定着のためにもQiitaへのアウトプットは非常に有効だと思うのでおすすめです。
わかりやすい文章を書こう！とは考えずにとりあえず書いてみるのが重要です！
数をこなしていけば書き慣れていくので積極的にアウトプットして習慣化するのが良いと思います。
ポートフォリオ作成（２ヶ月）
基礎学習が一通り終わったところでポートフォリオ作成に移りました。
ポートフォリオは以下の手順で作成しました。
1. ポートフォリオのアイデア出し
2. 機能・DBの設計
3. ポートフォリオの作成
1. ポートフォリオのアイデア出し
ポートフォリオはどういうコンセプト・背景があってポートフォリオを作成したのか？という点を意識して設計しました。
これまでに自分または身近な人が抱えている（抱えていた）問題を書き出してみて、
その問題はどういう機能・仕組みがあれば解決できるかを考えポートフォリオに落とし込みました。
具体的には以下の順序でアイデアを出して形にしていきました。
私は大学生の時、研究室に入るのをきっかけにゴルフを始めた。そしてこれまでにゴルフに関して印象に残った２つの経験があった。
- 私が以前働いていた会社でゴルフを始めた先輩が２人いた。２人ともなかなか上達せず途中で辞めそうになっていたが、アドバイスしあいながら練習を続けた結果、徐々に上達し今でもゴルフを楽しんで続けている。
- 大学の同期に「ゴルフを始めたいが一緒に練習に行ってくれる同年代(20代)の人がなかなかいない」という人が結構いた。
この経験からゴルフ初心者には次の課題があると感じた。
・ゴルフ初心者はなかなか上達が難しく、途中で諦めてしまうことが多い。
・ゴルフを始めたい２０代は一定数いるが、一緒に始める人が身近にいない。
↓
課題の解決策：同じ境遇（ゴルフを始めたい・ゴルフを始めたばかり）の若い世代の人が身近にいれば、ゴルフを始めやすい環境、挫折しにくい仕組みが作れるのでは？
↓
サービスの形：ゴルフの練習記録を投稿して共有するアプリケーション
2. 機能・DBの設計
ポートフォリオのアイデアが固まったところで機能・DBの設計を行いました。
ゴルフの練習記録を投稿して共有する機能を中心に、練習のモチベーションを維持できる機能を併せて設計をしました。
機能設計
新規投稿機能
一覧表示機能
詳細表示機能
編集機能
削除機能
ログイン機能
検索機能
いいね機能
位置情報投稿機能（GoogleMapAPIの利用）
投稿データからグラフ作成機能
DB設計
Usersテーブル
| カラム名 | データ型 | 制約 |
|---|---|---|
| nickname | string | NOT NULL,10字以内 |
| string | NOT NULL,UNIQUE | |
| password_digest | string | NOT NULL |
| golf_reki | string | 5字以内 |
| goal | string | 50字以内 |
TrainingPostsテーブル
| カラム名 | データ型 | 制約 |
|---|---|---|
| training_place | string | NOT NULL, 50字以内 |
| training_task | string | NOT NULL, 150字以内 |
| training_impression | string | 150字以内 |
| user_id | integer | NOT NULL, FOREIGN KEY |
TrainingContentsテーブル
| カラム名 | データ型 | 制約 |
|---|---|---|
| training_post_id | integer | NOT NULL,Foreign_key |
| training_time | integer | NOT NULL |
| training_hits | integer | NOT NULL |
Likesテーブル
| カラム名 | データ型 | 制約 |
|---|---|---|
| user_id | integer | NOT NULL, FOREIGN KEY |
| training_post_id | integer | NOT NULL, FOREIGN KEY |
Spotsテーブル
| カラム名 | データ型 | 制約 |
|---|---|---|
| address | integer | NOT NULL, 50字以内 |
| latitude | float | NOT NULL |
| longitude | float | NOT NULL |
| training_post_id | integer | NOT NULL, FOREIGN KEY |
3. ポートフォリオ作成
機能・DB設計の終わりようやくコードを書く作業に入りました。
ポートフォリオの作成手順は以下の通りです。
1. 基礎学習で使った書籍をベースにCRUD機能を実装
2. 実装したい機能をQiitaの記事・公式ドキュメントなどを参考に実装
3. UI／UXを意識したデザイン
1. 基礎学習で使った書籍をベースにCRUD機能を実装
基礎学習を終えた直後ではまだまだコーディングに慣れていないので「この機能を実装しよう！」と思っても
・どうやって実装する？
・何がわからないのかわからない
という状態だったのでコードに慣れる意味合いも込めて書籍を参考にしました。
結果的に基礎的な知識の復習とプログラム全体の構造に慣れることができました。
また、自分でもここまでできるんだ！と自信を持てるので
モチベーションを維持するためにも難易度の低いことから手をつけるのが良いと思います。
2. 実装したい機能をQiitaの記事・公式ドキュメントなどを参考に実装
CRUD機能を実装した後はいいね機能の実装やGoogle MAP APIの利用等に取り組みました。
機能の実装ではググりながらQiitaや公式ドキュメントを参考に実装したのですが、
調査する上で重要だと感じたのは絶対に公式ドキュメントを読むことです。
公式ドキュメントを読むと実装したい機能の説明の他にこんなオプションもあるよ!と書いてあることが多いです。
そういったオプションなどを取り入れることで機能が予定していた以上に充実したことが何度もありました。
Qiitaの記事はわかりやすくまとめられていて非常に読みやすく便利です。
ただ、当たり前ですがソースの信頼性が公式ドキュメントに比べると低く、必要以上の情報に触れられないので、Qiitaの記事だけではなく公式ドキュメントも読むべきですね。
3. UI／UXを意識したデザイン
一通り機能の実装が終わった後、UI／UXを意識してデザインに取り掛かりました。
UI・UX改善入門：「UIとUXの違い」から「UX改善の3ポイント」を大解説！
具体的には以下の３点を意識しました。
・ターゲット（２０代）を意識したデザイン
・使い続けたくなるデザイン
・直感的なデザイン
そしてポートフォリオには以下の形で落とし込みました。
・若者向けのポップな背景・フォント
・投稿内容の入力欄を具体的な選択肢からの選択式に変更（入力内容を考えさせる手間を省略）
・グラフを利用して直感的に練習記録を可視化
この中でも特にグラフによる可視化は取り入れて良かったです。
最初はユーザーの練習記録を文字と数字で表示していましたが、データをグラフ化することで欲しい情報が視覚的に得られやすいデザインを実現できました。
chartkickというjemを使えば簡単にグラフを作成できるのでおすすめです。
ポートフォリオ作成で意識したこと・工夫した点
・とにかくできることから手を動かしてコードに慣れる
・使い続けたくなる機能の実装・仕組みの構築
・ターゲットを意識したデザイン
・ユーザー目線での使いやすさ
・保守性の高いコーディング
ポートフォリオ作成を通して学んだこと・成長したこと
・自分のアイデアが形になる楽しさ（一番実感したことです
）
・サービスを１から作れるエンジニアとしての自走力
・わからないことを言語化して調査する能力（ググる力）
・参考文献の選び方（公式ドキュメントは必須）
・アウトプットの重要性
まとめ
ポートフォリオ作成を通してこの3ヶ月間で多くのことを学び成長することができました。
全くプログラミングを触ったことがない自分でもここまで作れるんだという自信が得られたこと、そして何より自分のアイデアでサービスを作る楽しさを知ることができました。
AWSによるインフラ構築などまだまだやりたいこともありますが、まずはエンジニアへの就職活動を始めます。
ポートフォリオをアップデートしながら就活をがんばっていきたいと思います！