🗂

初心者のポートフォリオ作成方法を教えます！

2021/10/24に公開

GitHub

この記事は、これからポートフォリオを作成する駆け出しエンジニアに向けた記事です。

プログラミングのインプットを終えて、
これから、ポートフォリオ作成をしようと思いますが

○どんな機能をがあればいいのか
○何を作ればいいのか

と迷うことがあります。

progateなどの初心者教材を終えたときに次に何を作ればいいのかイメージが湧きづらいですよね。

ここからは僕がポートフォリオを作るまでの過程を紹介したいと思います。

はじめに

ポートフォリオをこれから作成しようとしている人
progateや書籍、チュートリアルを終えた人
を対象としています。

作成過程

1.何を作りたいかを決める（テーマ設定）

まず何を作りたいかを明確にしましょう。
オリジナルアプリを作ると言っても
・自分は何を作りたいのか？
・課題を発見して、どう解決するかを明確化する　など

アイデアを紙やメモに書いてみましょう。

参考(筆者)

僕は、glass house というポートフォリオを作成しましたが

◎課題
・コロナ禍でオフラインでの交流ができなくなった。ビジネスマンなど交流する機会はないか？
◎解決方法
・zoomを使ってオンライン交流。自分を紹介して「話してみたい人」とつながる機会をを作る。
・異業種の人とつながることができるのでビジネス・アイデアが広がる可能性がある。

を考えて作成しました。

なぜ、このサービスをつくろうと考えたのか

コロナ禍で家にいることが多くなったので、人と会う機会が少なくなりました。
テキストでの交流もいいですが、実際に映像で話し合った方が情報量が増えるのではないかと考えました。
オンラインで繋がりを増やせないかなと考えていたときにこのサービスを作ろうと考えました。
異業種の方やビジネスマン、起業家などの方と簡単にトークできるプラットフォームを作りたいと考えました。

GithubのRaedMeに自分の考えをまとめてみよう

GithubにはReadmeに
・アプリの概要
・課題
・解決法
を書いてみましょう。
書くことによって自分が作っているサービスを可視化できるのがいいですね。

2 レイアウト作成

次はレイアウト作成です。どんな画面が必要か書いてみましょう！　例えば
・ログイン画面
・ユーザー一覧画面
・ユーザー詳細画面
など、必要な画面を書き出します。

ここで大事なのが、　
UI/UXを考えて設計する
がポイントです。

「ユーザーが使いやすい機能」
「このボタンを押したらこの画面に遷移する」
「ボタンを押したらフラッシュメーセージが出る」

など

ポートフォリオに必要な機能を洗い出して画面を設計してみましょう。
イメージはざっくりとした感じで大丈夫です。

作り方ポイント

まずはメイン機能や必須機能のレイアウトを作成する
レイアウトで共通化するところを洗い出す
ボタンの配置(どこに画面遷移するか決めておく)

どこを共通化して使うかレイアウトを組み立てるか。
後でここの機能を追加するときに崩れると困るから大枠を先に作っておこうなど。
を意識して作ると良いです！

レイアウト作成方法

レイアウトは紙に書くのもいいですが
僕は Adobe XDを使って画面を描きました。

チュートリアルも整っているのでざっと学んだらすぐに使えます！

##3 テーブル設計
次にテーブル設計です。
「Readme」「画面設計」で作ったのを元にして、テーブル設計をしていきます。

・どんなテーブルが必要か？　カラムが必要か？
・リレーションの設計
を考えて設計します。

不要なカラムなどは追加しないようにしましょう

またリレーションは混乱します。

私も開発前にリレーションや中間テーブルを追加して開発をしましたが、途中でいらなかったり、後々になって追加したりと
開発途中でも大幅に修正したりしました

なので、テーブル設計をきちんとすることによってあとで混乱しなくて済みます。

(参考)
draw.ioで作成しました。
こちらは無料ツールなので、テーブル設計のときにお勧めです！
Draw.io
glass house database.png

4 issueとTrello

ここまで終えたら、**Githubでissue管理をしましょう。**必要な機能をタグ付けで管理しましょう。
また開発途中で機能の不具合などがでてきます。そういうときにもどこでエラー・不具合が起きているかをissueで管理すると問題点が浮き彫りになるのでおすすめします。

特に最初はあまり気づかないと思いますが,
機能をたくさん追加していくと思った通りに動かないことや、不正アクセスができてしまうなど
いろんな不具合があります。
issueは現場でも使われているので、是非issueを使って開発をしましょう。

あと、個人的になんですが、私はタスク管理アプリ「Trello」を使って開発しました！
「やるべきこと」「作業中」「作業完了」などにタスクを分けて管理しました。
実務になると「期日」というものがあり、日付期限などもう少し細かくやると思いますが、私がTrelloを使っている理由は
「今、やるべきタスクは何か？」
を意識して開発しています。またモチベーションアップにも繋がります。

開発をしていて、途中で、「検索機能」「メール通知設定」「セキリュティ対策」など追加したい機能がどんどん挙がっていきます。タスク管理をしていないと
「何の開発をしているのか」
「優先順位が分からない」
「どの機能追加を完了したのか」
を確認できなくなるので、
駆け出しエンジニア方はこの機会にタスク管理を取り入れてみましょう。
もちろん、「Trello」以外にもタスク管理アプリはあるので自分の使いやすいタスク管理アプリを使いましょう！

##5 開発へ
1~4を作成して、いざ開発に入ります。分からなくなったらまた1~4に戻って確認できるので
スムーズに開発ができると思います。

プルリクエストを使って開発

開発はgitを使っての開発が大半となりますが、git開発でも
「Git flow」
「Github flow」
があります。私はGithub flowを使ってmaster(main)からブランチを切って開発をします。
機能追加するときはfeature/○○でブランチを作成して開発をします。

実務ではプルリクエストやレビューがあるので、疑似的ですが実務に近い開発をするとgoodです！！

##6 さいごに
僕はテーマ設定、レイアウト、テーブル設計などにあまり時間をかけずに開発をしてしまいました。
その結果
・テーマ設定は後になると簡単には変えられない
・レイアウトのずれ(後々、レイアウトの修正工数に時間がかかった)
・テーブル設計の大幅な修正、追加

で、修正に時間がかかってしまいました。
これからポートフォリオを作成する方は、

デザイン
画面レイアウト
テーマ設定
テーブル設計
をしっかり固めておいたほうが後々、大幅な修正をやらずに済むからです。

また、ざっくりと思いついたことは、メモしておいた方がいいです。
開発に専念していると忘れてしまうからです。
evernoteなど便利なメモツールがあるので、アイデアや機能一覧など書き留めていた方がいいです！
ポートフォリオ制作は自分が作りたいサービス・機能を作ればいいと思っています。
もちろん、プログラミングだけでなく
・マーケティング
・マネタイズ
などやるべくことはたくさんあると思いますが
**「なぜこういうサービスを作ったのか」**を
説明できるようにしとくといいと思います。

#参考
Draw.io　(テーブル設計を作成するツールです)
Trello　(開発のタスク管理ツールです)
Adobe XD　(レイアウト作成ツールです)
evernote (メモを書いたり、ノートブックみたいにファイル分けすることもできます)
[notion] (https://www.notion.so/)(最近流行りのタスク管理ツールです。いろんなアプリと連携できるので融通が効きます。)

上記は全部無料で使えるのでお勧めです。

アウトプットを公開しているので、ぜひ参考にしてみて下さい！
ポートフォリオ【Laravel vue.js Docker AWS Circle CI】ビジネスマッチングアプリを作成しました!