ポートフォリオを作ろう!現役エンジニアの「ポートフォリオの作り方」参考例つき

※本サイトはアフィリエイトリンクを掲載しています。
学習方法

ポートフォリオとは

ポートフォリオとは、自分が今まで過去に作ったWebページやアプリやシステムをまとめた物のことです。要するに、相手に自分のスキルを証明するものです。
見せ方としては、PDF画像で各ページをGoogleドライブなどにまとめて、相手の方が見やすい形で提示しましょう。
加えて、ポートフォリオに関する説明資料をテキストでまとめておくとよいでしょう。

どんなスキルをアピールできればいいか

Webデザイナーの場合

・デザイン力

・何の言語をつかえるか。

・どのくらいのスピード感でできるか。

 

Webエンジニアの場合

・何のツールをつかえるか。

・何の言語をつかえるか。

・どのくらいのスピード感でできるか。

・環境構築やバージョン管理ができるか。

・設計ができるか。

私はフロントエンド+バックエンドを扱うフルスタックエンジニアなので、フロントエンドとバックエンドのアピールすべき点は細かく言うと沢山あるのですが、本サイトは初心者の方へ向けてご説明させて頂いていますので、詳細はどこか違う記事でまたご説明しますね。


自分がなりたいエンジニア像を浮かべて、必要な言語やスキルを洗い出しましょう。その言語を学習したのちにポートフォリオを作っていきましょう。

 

ポートフォリオの重要性について

ポートフォリオはスキルの証明であり、就職やフリーランスで案件を受ける際は必須なので重要であることは言わずもがなです。

もう一つ学習面においても非常に重要であると覚えておきましょう。
ポートフォリオを作る前段階のここまでの基礎学習において、基本的にはカリキュラムで指定されたものを言われたとおりにコーディングしてきた事が多いのではないでしょうか。

しかし実はそれでは、さほど力は付きません。どんなことでも共通することですが基礎を理解した後、実践を多く取り入れる必要があります。

ポートフォリオを作成することで、実務に近い経験を積むことができるでしょう。何かを完コピしてポートフォリオを作成することを除いては下記のように悩むことがあるでしょう。

①何を作ればよいか?

②どのような構成でつくるのか。レイアウトは?何か機能をつけた方がいいのか?

③プログラミングコードはどう書くのが最適なのか?コード書けたけど合ってるのか?

④エラーが起きたとき、なぜ思うように動作しないのか?

 

実際に作るとなると、分からないことが沢山でてきそうですね。

私は言語の基礎をある程度習得して、ポートフォリオを作るときにこのような悩みによく直面しました。この時に、自分なりに「考える」ということが学習する面において重要だと思っています。

 

①②何を作ればよい?レイアウトや構成は?

参考ページのデザインやレイアウトをたくさん見て学びが得られます。

 

③プログラミングコードはどう書くのが最適?コード書けたけど合ってるのか?
コードについて深く考えることで、応用力が身に付きます。

 

④エラーが起きたとき、なぜ思うように動作しないのか?

エラーを改善するために調べることで自己解決能力が身に付きます。

 

 

 

このように考える調べる解決するの経験を多く積むことが重要です。しかし、こちらは想像すれば分かるように大変です。時間もかかります。挫折しないポイントとしては自分が作りたいと思えるポートフォリオを作りましょう。好きな商材で形にしたいという思いが強ければ、モチベーションを保つことができるでしょう。

 

・「考える」「調べる」「解決する」を繰り返し経験できるように頑張りましょう。
・挫折しないためにも、ポートフォリオは思いれのあるものを作りましょう。

 

ポートフォリオをつくろう

どの言語を使うかについてですが、以前の「プログラミング言語を選ぼう」の記事で紹介したように、フロントエンドの言語(HTML,CSS, Javascript)+バックエンドの言語をどれか1つを学習することを推奨しています。

言語が決まったら次は何を作るか。どんな機能を盛り込むかを決めていきましょう。

よくありそうな参考例を挙げながら説明していきます。

では仮に「記事を投稿できるブログサイト」をポートフォリオで作るとしましょう。
ブログサイトを作る場合、必要になってくる機能や画面は例えば以下です。

・新規会員登録機能

・ログイン機能/ログアウト機能

・記事投稿機能

・記事編集機能

・記事削除機能

・記事一覧ページで記事を閲覧できる機能

・記事一覧ページのページング機能

・記事検索機能

・ユーザーによって機能を制御する。(管理者権限を付与する)

・記事の予約投稿

あくまで参考までに。自分の作成したいものが決まったら、このように「どんな画面が必要なのか。」「どんな機能が必要なのか。」を洗い出してみましょう。

これらが見えてくると、作業が明確になってきて効率良く作成できます。この工程はいわゆる「設計」「要件定義」と呼ばれるものですね。

ちなみに上記の機能の例は、主にバックエンドの言語を多く使用する形になります。

 

完全独学は可能なのか?

結論、不可能ではないです。ですが人によっては難しいと思います。私は呑み込みが早い方ではなかったので色々なサポートを受けて今に至ります。

基礎については無料学習ツールなどでカリキュラム通りに学習していけば、十分可能なのですがポートフォリオを作る場合や、基礎を学習した後の実務レベルの問題をやっていくときに「教材」又は「サポート」が必要になってくることが多いです。ですが、できる人は独学でできます。需要の高い言語の場合はググればいくらでもヒントがでてきますからね。

ただ全て独学でやる場合は調べる時間や躓いて自己解決するのに、かなりの時間を要することは想定しておきましょう。
もちろん全て自分で調べて自己解決できるのは素晴らしいですし、能力もかなり上がると思うのですが挫折してしまう人はそこで挫折してしまいます。ちなみにプログラミング独学の挫折率は90%を超えると言われています。

稀に独学であまり躓かずにスラスラと学習できる方もいらっしゃいますが、一部のすごい人なのかなと個人的には思います。

あまりに時間を割いてしまう。挫折しそう。という場合は何らかのサポート体制を整えると良いでしょう。私の当時の考え方は多少お金を払ってでも学習時間を短縮して、エンジニアになった後に稼いでプラスに変えていこうという考えでした。

 

サポート体制を整えよう

プログラミングスクール

万全なサポートを体制を整え、効率よく学習を進めたい方はやはりプロのサポートや教材を使って学習していくのが良いでしょう。上記で触れましたがエンジニアとして力が身につくのは考える力をつけ、実践的にプログラミングをしていくことが重要だと感じています。カリキュラム通りに言われたまま、あるいは見たまま学習してもさほど身についていないことが多いです。

実践的に学習でき、かつ最後はポートフォリオを作りながらサポートしてもらえるようなスクールをご紹介します。

・SAMURAI ENGINEER

・Tech Boost

・RUNTEQ

・DMM WEB CAMP

 

Udemy

Udemyとはオンライン学習ツールの一つです。各ユーザーがそれぞれのスキルを活かしてオンラインレッスン動画を公開しており、動画から学習できる仕組みになっています。

料金は有料になりますが自分がどんな学習をするかが明確で、それにマッチしたコースを見つけられるとメリットが大きいでしょう。

Udemyがおすすめな人

・低価格で学習をしたい人

・自分のペースで学習したい人

Udemyがおすすめではない人

・学習の相談に乗ってほしい人

・転職サポートを受けたい人

 

MENTA

MENTAとは「教えたい人」と「学びたい人」をマッチングするサービスです。

コースの内容についてはMENTAの「教えたい人」によって異なります。
カリキュラムを持っているMENTAさんもいらっしゃいますが、カリキュラムはなく、学習中の躓いている点について相談に乗ってもらうコースが多いと思います。

MENTAがおすすめな人

・学習する教材や方向性がある程度決まっている人

・分からない点についてチャットやオンライン通話で相談に乗ってほしい人

MENTAがおすすめではない人

・何を学習したらいいか定まっていない人

・転職サポートを受けたい人

コメント