ポートフォリオはこう作れ!モダンなWeb系自社開発企業に転職・就職する秘訣とは!?

main-image
  • 「モダンなWeb系自社開発企業への転職・就職を成功させたい…」
  • 「そのためにはどんなポートフォリオが必要?」

なんて悩んだり、疑問をもったりしていませんか?

強めのタイトルになってしまいましたが、この記事ではモダンなWeb系自社開発企業への転職を成功させるためのポートフォリオの作り方とコツを、わかりやすく解説します。

「あなたがモダンなWeb系自社開発企業への転職を成功させるために」

ぜひ役立ててくださいね!

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

  • モダンなWeb系自社開発企業への転職を成功させたいプログラミング初心者

記事の信頼性として、僕がやってきたことを簡単に紹介します。

記事の信頼性

【1日12時間×3年】→ 30歳からプログラミングを独学
【取締役・フルスタックエンジニア】→ Web系ベンチャー企業にて
【合計2万ユーザー以上】→ 開発したWebサービスにて
【2,800万円の資金調達】→ 開発したWebサービスにて
【新規事業企画】→ AIベンチャー企業にて

まずは結論から

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

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

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

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

そこで大切になってくるのが、「ハイレベルなポートフォリオ」です。

モダンなWeb系自社開発企業への転職を成功させるためには、ハイレベルなポートフォリオを用意するようにしましょう。

「ハイレベルなポートフォリオとは、具体的にどんなものか?」

そのあたりをわかりやすく解説していきたいと思います。

ポートフォリオとは?

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

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

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

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

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

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

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

①完全SPA化する

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

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

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

一つのWebページのみでコンテンツの切り替えをおこなう

ページ遷移をなくす

ブラウザの挙動に縛られない表現を可能にする

ということです。

完全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をわかりやすく解説

②コンテナ実行環境に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でインフラ構築をコード化する

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

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

メリット

簡単・手軽

デメリット

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

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

TerraformにAWSのVPC・EC2・RDS・S3などの設定コードを書いておく

コマンド実行でAPIを呼び出し、その設定コードからインフラ構築が可能

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

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

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

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

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

まずはAWS管理からボタン操作でインフラ構築

アプリケーションをきちんとホストできるようになる

慣れてきたら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上にストレージを構築して、自由に利用できるのが特徴です。

優先度が高いのはどれ?

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

main-image

【決定版】社会人におすすめのプログラミングスクール完全比較ランキング
プログラミングスクールに入学しようか悩んでいる社会人やプログラミングスクールを探している初心者の、「選び方がわからない…」「数が多すぎて悩んでしまう…」「目的に合わせて選びたい」「習得するプログラミング言語に合わせて選びたい」こんな悩みを解決するために、社会人におすすめのプログラミングスクール・コースの比較ランキングを、わかりやすくまとめました。
「あなたがプログラミングスクール選びに失敗しないために」ぜひこの記事を役立ててくださいね!

main-image

【厳選3校】自信をもって女性におすすめするプログラミングスクール
プログラミングスクールに入学しようか悩んでいる女性や女性向けのプログラミングスクールを探している人の、「女性向けのプログラミングスクールと、それぞれの特徴を知りたい」「数が多すぎて悩んでしまう…」「自分のレベルに合わせて選びたい」こんな悩みを解決するために、女性におすすめのプログラミングスクールを厳選して、3校にまとめました。
「あなたがプログラミングスクール選びに失敗しないために」ぜひこの記事を役立ててくださいね!

main-image

【決定版】高校生におすすめのプログラミングスクール完全比較ランキング
プログラミングスクールに入学しようか悩んでいる高校生やプログラミングスクールを探している高校生の、「選び方がわからない…」「数が多すぎて悩んでしまう…」「自分のレベルに合わせて選びたい」こんな悩みを解決するために、高校生におすすめのプログラミングスクール・コースの比較ランキングを、わかりやすくまとめました。
「あなたがプログラミングスクール選びに失敗しないために」ぜひこの記事を役立ててくださいね!