【ポートフォリオはこう作れ!】たった3つのコツでモダンなWeb系自社開発企業に転職!

main-image
モダンなWeb系自社開発企業に転職・就職したいけど、どんなポートフォリオが必要?

なんて悩んでいませんか?

モダンなWeb系自社開発企業の採用選考を突破するのは簡単ではないので、悩んでしまうのも無理はありません。

まずは、採用選考を突破するポートフォリオの作り方とコツを知ることが大切です。

ポートフォリオの作り方とコツを知らないままでは、いつまでたってもモダンなWeb系自社開発企業に転職・就職することはできません。

そこで本記事では、モダンなWeb系自社開発企業の採用選考突破するためのポートフォリオの作り方とコツをわかりやすく解説します。

この記事を読めばポートフォリオの作り方とコツをつかめるので、モダンなWeb系自社開発企業の採用選考を突破できるようになるはずです。

この記事はこんな人におすすめ

  • モダンなWeb系自社開発企業への転職・就職を目指す人

まず結論からお伝えすると、モダンなWeb系自社開発企業の採用選考突破するためのポートフォリオの作り方とコツは、次の3つになります。

  1. 完全SPA化する
  2. コンテナ実行環境にAWS Fargateを使う
  3. Terraformでインフラ構築をコード化する

それぞれ詳しく解説していきます。

記事の信頼性

りょうぴー
この記事を書いている僕の実績は次のとおり。
  • 【1日12時間×3年の学習量】
    → 30歳からプログラミングを開始
  • 【取締役・フルスタックエンジニア】
    → Web系ベンチャー企業にて
  • 【合計2万ユーザー以上・2,800万円の資金調達】
    → 開発したWebサービス・アプリにて

ポートフォリオとは?

ポートフォリオとは?
そもそも「ポートフォリオ」は、「複数の書類をひとまとめにして持ち運べるケース」を意味します。

「書類を綴じない = 内容物をひとまとめにしつつ部分的に差し替え可能」という点がポイントです。

Web系クリエイター職におけるポートフォリオは、自分のスキルや知識を証明するための役割をはたします。

ポートフォリオは相手に合わせて内容を変えていく必要があり、こまめなアップデートが大切です。

特にWeb系クリエイター職は技術やトレンドの変化が速いため一回作って終わりではなく、できる限り新しい内容にアップデートしていきましょう。

モダンなWeb系自社開発企業への転職を成功させるための3つのポートフォリオの作り方とコツ

モダンなWeb系自社開発企業への転職を成功させるためのポートフォリオの作り方とコツを、「3つ」解説していきます。

完全SPA化する

完全SPA化する
SPAとは「Single Page Application (シングル・ページ・アプリケーション)」の頭文字をとったものです。

「一つのWebページのみのアプリケーション構成」を意味します。

つまり、SPA化を簡単に説明すると

  1. 一つのWebページのみでコンテンツの切り替えをおこなう
  2. ページ遷移をなくす
  3. ブラウザの挙動に縛られない表現を可能にする

ということです。

完全SPA化するということは、フロントエンドの技術難易度が高くなります。

フロントエンドがjQueryとBootstrapだけでは、モダンなWeb系自社開発企業の選考突破は難しいでしょう。

そこで、フロントエンドにはVue.jsなどを使う必要があります。

TypeScript化までやっておくと、さらにインパクトが大きくなるでしょう。

React.jsを使っているとさらに評価は高くなります。

しかし、React.jsは初心者や未経験者には少し難しいので、Vue.jsで完全SPA化するだけでもインパクトは大きいと思います。

用語解説

Vue.jsとは?

Vue.jsはオープンソースのJavaScriptフレームワークです。
jQueryと同様にscriptタグを書くだけで使うことができます。
jQueryよりも簡潔に分かりやすくコードを記載できる特徴があります。
JavaScriptやjQueryの基礎スキルがあれば、数時間の学習で使い始めることができるでしょう。

TypeScriptとは?

TypeScriptはJavaScriptを拡張して作られた、オープンソースのプログラミング言語です。
TypeScriptで書かれたコードをコンパイルすると、JavaScriptのコードに変換されます。
大規模開発ができるように設計されていて、Googleの開発でも採用されています。

React.jsとは?

React.jsはUIパーツ構築のためのJavaScriptライブラリです。
Facebookとコミュニティによって開発されています。
jQueryと同様にscriptタグを書くだけで使うことができます。
コーディングコストが小さく、大規模開発にも向いているという特徴があります。

Bootstrapとは?

BootstrapはHTML・CSS・JavaScriptから構成されるWebフレームワークです。
jQueryと同様にscriptタグを書くだけで使うことができます。
ボタン・フォーム・メニューなどよく使われる部品が、テンプレートとして用意されています。
デザイン性が確保されているため、最低限のスタイル調整で済むという特徴があります。

JavaScriptやjQueryについては以下の記事でそれぞれ解説しているので、あわせてご参考にしてください。

JavaScriptをわかりやすく解説

jQueryをわかりやすく解説

コンテナ実行環境にAWS Fargateを使う

コンテナ実行環境にAWS Fargateを使う
現在モダンなWeb系自社開発企業では、コンテナ実行環境にAWS Fargateを使うことが非常に増えています。

AWS Fargate上でコンテナをきちんと動作させるのは、非常に大変です。

そのため、ポートフォリオでAWS Fargate対応していると高く評価されます。

モダンなWeb系自社開発企業では、コンテナ技術としてDockerは完全に定着しています。

そのため、ポートフォリオの開発環境でDockerを使っていてもあまり評価されません。

そして、Dockerは開発環境で使うだけではメリットをじゅうぶんに享受できません。

本番環境でもDockerを使うことで、以下のようなメリットを享受できます。

  • 差分吸収
  • 高速起動
  • デプロイ・ロールバック・オートスケールの簡略化

また、AWS EC2にRuby on Railsのアプリケーションをホストしているだけでは評価されません。

なぜなら、この手法はプログラミングスクールのカリキュラムやマニュアルに掲載されているからです。

カリキュラムやマニュアル通りにやっただけと判断され、評価されないのです。

用語解説

コンテナとは?

コンテナは必要なコンポーネントをパッケージ化したものです。
ステージング環境や本番環境などにコンテナを使うことで、同一環境を構築してアプリケーションを動作させることができます。

AWS Fargateとは?

AWS FargateはAmazon Elastic Container Service (ECS) とAmazon Elastic Kubernetes Service (EKS) で動作する、ホストマシンを意識しないコンテナ実行環境です。
AWS Fargateを使うことで、コンテナとコンテナ実行環境の重複管理が不要になります。
つまり、コンテナ向けのサーバーレスコンピューティングということです。

Dockerとは?

Dockerはコンテナを管理するソフトウェアです。
サーバー起動方法がシンプルで、起動や処理が速いことが特徴です。
Dockerは完全仮想化のサービスではなく、「コンテナ型」の仮想化サービスです。

デプロイとは?

デプロイは作ったプログラムやアプリケーションをサーバーなどのしかるべき場所に置き、使える状態にすることです。

ロールバックとは?

やりかけの処理を取り消して、何もなかった状態に戻すことです。

オートスケールとは?

オートスケールは自動でクラウドサーバーの台数やスペックを増減させることです。
インスタンスの負荷の閾値をあらかじめ設定し、閾値に達した際に自動でクラウドサーバーの台数やスペックを増減させる機能を指します。

AWS EC2とは?

AWS EC2とは「Amazon Elastic Compute Cloud」の頭文字をとったものです。
AWSで利用できるサービスの一つです。
AWS上に仮想サーバーを構築して、自由に利用できるのが特徴です。

Terraformでインフラ構築をコード化する

Terraformでインフラ構築をコード化する
AWS初心者や未経験者は、AWS管理画面のボタン操作でEC2などを立ち上げることが多いかと思います。

これには以下のようなメリット・デメリットがあります。

メリット

簡単・手軽

デメリット

設定内容を手順書で管理する必要があり、正確性に欠ける
同様の設定を別環境でおこなう場合、とても手間がかかる
正確なインフラ構成が把握しにくい

実はこのようなインフラ構築は、APIを呼び出すことでも実現できます。

  1. TerraformにAWSのVPC・EC2・RDS・S3などの設定コードを書いておく
  2. コマンド実行でAPIを呼び出し、その設定コードからインフラ構築が可能

Terraformでコード化しておくと、ステージング環境と本番環境などの複数環境をコマンド一発で構築できます。

また、変更履歴をコードで管理できるようになるので、開発効率・保守効率が圧倒的にあがります。

ポートフォリオでここまで対応する人は滅多にいないので、かなり大きなインパクトがあり高評価されます。

Terraformを使うことでインフラ周りのスキルや知識をコードで可視化し証明できるので、大きなアドバンテージになります。

AWS初心者や未経験者は、以下のような流れがおすすめです。

  1. まずはAWS管理からボタン操作でインフラ構築
  2. アプリケーションをきちんとホストできるようになる
  3. 慣れてきたらTerraformでコード化していく

用語解説

Terraformとは?

Terraformは、インフラの構成や設定をコード化するためのオープンソースのツールです。

AWS VPCとは?

AWS VPCとは「Amazon Virtual Private Cloud」の頭文字をとったものです。
AWSで利用できるサービスの一つです。
AWS上に仮想ネットワークを構築して、自由に利用できるのが特徴です。

AWS RDSとは?

AWS RDSとは「Amazon Relational Database Service」の頭文字をとったものです。
AWSで利用できるサービスの一つです。
AWS上にリレーショナルデータベースを構築して、自由に利用できるのが特徴です。

AWS S3とは?

AWS S3とは「Amazon Simple Storage Service」の頭文字をとったものです。
AWSで利用できるサービスの一つです。
AWS上にストレージを構築して、自由に利用できるのが特徴です。

優先度が高いのは【完全SPA化】

優先度が高いのは完全SPA化
モダンなWeb系自社開発企業への転職・就職を成功させるためのポートフォリオで一番のおすすめは、「完全SPA化」です。

フロントエンド周りは実務未経験者や経験が浅い人でも、いきなりタスクを振られることも多いです。

そのため、完全SPA化は人材ニーズとしても高いわけです。

FargateやTerraformはインフラ周りのスキルであり、実務未経験者や経験が浅い人にいきなりインフラ周りのタスクは振られません。

そのため最も優先度高く一つだけ対応するとしたら、「完全SPA化」となります。

完全SPA化は3つの中では最も導入工数が大きくなりますが、その分大きなメリットがあります。

モダンなWeb系自社開発企業への転職・就職を成功させたいなら、かなりおすすめかと思います。

まとめ【テンプレートに肉付けしただけのポートフォリオはNG】

今回の内容をまとめていきます。

  • 自分のスキルや知識を証明するための役割をはたすもの
  1. 完全SPA化する
  2. コンテナ実行環境にAWS Fargateを使う
  3. Terraformでインフラ構築をコード化する
  • 完全SPA化すること

現在プログラミングを独学している人やプログラミングスクールに通っている人の中には、「モダンなWeb系自社開発企業」への転職・就職を目指している人も多いと思います。

多くの人がモダンなWeb系自社開発企業への転職・就職を目指して競争しているので、当然のことながら年々ポートフォリオのレベルや質は高まっています。

そのため、用意されたテンプレートに少し肉付けしたようなポートフォリオでは、モダンなWeb系自社開発企業の選考を突破するのはまず無理です。

モダンなWeb系自社開発企業以外でも、選考を突破できるところは限られてくると思います。

モダンなWeb系自社開発企業への転職を成功させるためには、「ハイレベルなポートフォリオ」が必要です。

ハイレベルなポートフォリオは、今回解説した内容を参考にして用意するようにしましょう。

モダンなWeb系自社開発企業への転職・就職を成功させるためのポートフォリオは、

「もっとこう作った方がいい!」

など、他にも色々と作り方やコツはあるかと思います。

なので、この記事も一つの情報として参考にしていただければと思います。

おすすめの一冊

これからプログラミングをはじめる人や駆け出しエンジニアの人は、必読の一冊です。

Web系エンジニアの将来性や学習方法、エンジニア転職のためのロードマップまでわかりやすく解説されています。

忘れないうちに購入して手元に置いておき、いつでも読めるようにしておきましょう。

今回はこれで終わりたいと思います。

この記事があなたのお悩み解決のお役に立てば幸いです。

ご質問やご感想などは、Twitter (@ryoopee) にお気軽にご連絡くださいね。

【おまけ】プログラミングで稼ぐためのTips

プログラミングスクール選びにおすすめの記事

【現役エンジニア厳選】失敗なしのプログラミングスクールおすすめ3校【初心者はこの中から選べばOK】
おすすめのプログラミングスクールを知りたいですか?
本記事では現役エンジニアの僕が厳選したおすすめのプログラミングスクール3校を紹介します。
「プログラミングスクールありすぎ…どこを選んだらいいの?」と悩んでいる人は必見です。

【厳選3校】自信をもって女性におすすめするプログラミングスクール
女性におすすめのプログラミングスクールを知りたいですか?
本記事では女性におすすめのプログラミングスクール厳選3校を紹介します。
「女性向けのプログラミングスクールを探してるけど、どこにすればいいかわからない…」と悩んでいる女性は必見です。

【現役エンジニア厳選】自信をもって高校生におすすめするプログラミングスクール3校
高校生におすすめのプログラミングスクールを知りたいですか?
本記事では現役エンジニアの僕が厳選した高校生におすすめのプログラミングスクール3校を紹介します。
「高校生向けのプログラミングスクールを探してるけど、どこにすればいいかわからない…」と悩んでいる高校生は必見です。