フロントエンドエンジニアを目指す人がポートフォリオで使うべき技術

Webのフロントエンドエンジニアを目指す方が、就活用のポートフォリオサイトでどういった技術を使うべきか。

エンジニアの書類選考や面接は、ポートフォリオサイトの出来で決まると言っても過言ではありません。
では、どんなポートフォリオサイトを作ったら良いのかというと、「使う技術の広さ」を意識するのが良いと思っています。

私はフロントエンドエンジニアとして、10年ほど会社員をしてからフリーランスになり4年目を迎えました。

会社員の頃は面接側として関わって来ましたので、採用側としてポートフォリオサイトでどれぐらいの技術が欲しいか書いていきます。

▼この記事はYouTube動画でサックリと聞くことも出来ます！

ポートフォリオは「実務への近さ」×「使う技術の広さ」で考える

そもそも、エンジニアにとってポートフォリオというのは、実力を証明するための資料となります。

業務未経験者の場合は、個人で作ったWebサービスやサイト。
それが無いときは、自分を紹介するサイトや、架空のWebサイトになります。

「実務への近さ」というのは、実際に運用してる（ユーザーがいる）個人サービスです。
これが無いときは、架空サイトや自分を紹介するサイトでは、「使う技術の広さ」を意識します。

この評価は掛け算なので、ベストなのは実際に運用しているサービスかつ、使っている技術が広いものです。

ポートフォリオの「使う技術の広さ」は実務を想定して

架空サイトや、自分を紹介するサイトを作るに当たり、どういったスキルを使ったほうが良いのか。
これは、今現場で使われている技術を使うのが正解です。

私が最低限、ポートフォリオで使ったほうが良いと思う技術はこちら。
これは、実際に採用まで至った未経験の方のポートフォリオサイトで使っていた技術でもあります。

ポートフォリオは、使っている技術もアピールポイントとして書くと思うので、一覧にしたときに実務でよく使われている技術を並べることを意識します。

CSSアニメーション辺りまでは当然として、「JSライブラリ」は仕事でもよく使うので、slick.jsみたいなスライダープラグインでも何でも良いので組み込んでみる。

SASSもタスクランナーでコンパイルして使う環境を作り、使ってみる。
Webフォントやアイコンフォントも、当たり前に使う技術なので入れておきたいです。

GitはGithubにポートフォリオサイトのコード上げてみるとかで良いので、触ってみると良いです。

これぐらいが出来ていれば、未経験者のポートフォリオとしては十分です。

もっとポートフォリオサイトに技術を取り入れたい人

ただ、もっとやる気のある方は、以下のような技術も触りだけでもやっておけば評価がさらに高くなります。

WordPressは世界的にシェアが高いCMSなので、クライアント案件でなくても自社メディアで使っていることも多いです。

その時にWordPressを触ったことあるというのは、採用するメリットありそうと思ってもらえます。

また、ここからは難易度が高くなりますが、一応書いておくとvue.jsやReactのJSフレームワーク。
アニメーションに強い会社に入りたい場合は、非同期遷移アニメーションとかです。

最後に：ポートフォリオは就職活動しながらアップデートしていくのもアリ

狙っている会社がある場合は別ですが、とりあえず何処でも良いから滑り込みたい場合は、最低限のポートフォリオサイトを作ったら就職活動はじめたほうが良いです。

そして、就職活動が時間かかるようなら随時、ポートフォリオをアップデートしていきます。

もし面接でポートフォリオの感想などを聞けるなら聞くのも良いかもしれません。

そうやって、広く技術を詰め込んでいくことで、学んだ「技術」は評価されますし、フロントエンドエンジニアに対する「熱意」も伝わります。