始めに
こんにちは〜、まんじです。
今回は未経験からウェブエンジニア（ソフトウェアエンジニア）になるために必要なポートフォリオの作り方や例やらポートフォリオに関連する情報を書きたいと思います。
前提: ウェブエンジニアにおけるポートフォリオの定義
まずはポートフォリオの定義からなんですけど、ポートフォリオはウェブエンジニアの場合はこんな感じに定義できます。
- 簡単な成果物
- 例: ウェブアプリケーション、LINEBOT、その他なんかのアプリ
〜年〜大学卒業とかの自己紹介ページではないのでそこだけご注意ください。
プログラミングを勉強して作った成果物（証拠）がウェブエンジニアにおけるポートフォリオです。
そもそもポートフォリオを作る目的
1: 会社側にちゃんと勉強しましたって証拠
未経験からエンジニアになる場合には何かしら勉強した結果を示すことが必要になります。
「プログラミングはやったことありませんがエンジニアやりたいです！」だとその人が本当にやる気があるか分からなかったりそもそも開発に必要な最低限の基礎知識があるかも企業側は分かりません。
一方で、「プログラミングを勉強してこういうアプリを作りました！使った技術は〜〜〜です。エンジニアをやりたいです！」だと、なんていうか本当にやる気があることも分かります。
あとは成果物を見れば、
- 最低限どれくらいの技術力は自力で身につけてそうか
- 入社してからもキャッチアップしてついていけそうか
などの部分も企業側が判断できます。
未経験から転職もしくは就職の場合、基本的には現段階の実力よりもポテンシャル採用になるので、そのポテンシャルをいかに示せるかって部分でポートフォリオが必要です。
そのポテンシャル力みたいなものをポートフォリオ以外で示せればいいんですけど、ポートフォリオ以外で示すのは実際問題難しいです。
大学が情報系でエンジニアで長期インターンしてたとかならポートフォリオなしでもいいんですが、かなり特殊なケースですし、そもそもその場合は未経験からではないという。
なので、ポテンシャル力を示すためにもポートフォリオは必要です。
2. ポートフォリオを作る過程で勉強になるってのがある
ポートフォリオを作っているとその過程でいろいろな開発に必要な基礎を嫌でも学ぶことになります。
- APIとは？
- サーバーとクライアントとは？
- リクエストとレスポンスとは？
- NetworkやConsoleタブの見方とは？
- フロントエンド、バックエンド、インフラとは？
- データベースとは？
- 変数、定数、関数、オブジェクト指向、配列 …etc
ポートフォリオを作る過程で開発に必要な知識を調べながら作っていくことになる（勉強していくことになる）ので、ポートフォリオを作ることが実際のところすごく勉強になります。
ドットインストールとかプロゲートとか本とかの入門系のプログラミング教材を何周するよりも、1個LINEのミニBOTでも作ってしまうほうが本当に使える知識というか手が動く知識が身に付きます。
ちなみにミニLINEBOTならAPIとデータ処理のためのプログラミング処理と使用した関連した知識を学べます。
プログラミングの勉強はアウトプットするために必要な知識をインプットしてアウトプットするという流れが重要なんですけど、それがポートフォリオ作ってる時に勝手にされる感じです。
ポートフォリオに必要な要素
1. デプロイ必須
ウェブアプリの場合にはウェブアプリを作ったらVPSかAWSやGPCかvercelあたりにデプロイしましょう。
デプロイってのはネットに公開する作業で一応このサイトとかもWordPressがレンタルサーバーの共用サーバーにデプロイされていると言えるっちゃ言えます。
個人的にはデプロイする先はVPSかAWSのEC2あたりかvercelなどで十分だと思っています。
2. それなりにモダンな技術
ポートフォリオを作る時はそれなりにモダンな技術ベースで作るほうが、応募できる会社もイマドキなテイストの会社に応募しやすいです。
例えば、javaとかphpやるならGoやったほうがいいし、フロントエンドにテンプレートエンジンを使ってjQuery入れるよりもReactを使ったほうがいい、そんなイメージです。
個人的には言語はTypeScriptでNext.jsベース（Reactが使われている）を使って作っていくのがいいんじゃね？とは思ってます。
完全にバックエンドに寄せたいならGoかなーというところ。
3. Git, GitHub
どの分野のエンジニアをやるにしてもブランチ切って開発してGitには慣れたいというか実務では必須なので使って慣れていきたいところです。
Git, GitHubに関して言うと、勉強するよりも実際に使って慣れていくのが大事です。
- pull, push, commit
- UI上でのgit操作
- merge, conflict解消, revert, reset
- origin, remote
- clone, 消してcloneして再現
などなど。
4. テーマのオリジナリティはあったほうがよさげ
一時期、プログラミングスクール行って「みんな同じポートフォリオを手順通りに作って持ってくる問題」みたいなのが流行ってたらしいんですけど、ポートフォリオは独自のテーマを選んで作ったほうがよさげです。
そんで、独自のテーマ、かつ、自分なりに工夫があるというか便利さがあるというか、そういうものが理想的です。
メルカリのクローンアプリとかじゃなくて、じゃんけんゲームに勝つとアマギフがもらえるアプリ（1日3回まででIPアドレスを国内だけにしてかつ同じIPに対して回数制限をかけるとか）とかそういうなんか自分なりに工夫があるテーマのものを作るのが大事です。
自分なりに工夫（オリジナリティ）があるものを作ろうとすると自分なりに調べて試行錯誤しながら作ることになるんで、時間とか手間はかかるけどそこが成長というか勉強になります。
逆に言えばみんな作ってる同じものを真似して作っても未経験枠を採用する会社側が「なんかこれ前にも見たことあるぞ・・・」となったら落ちる率が上がります。
5. 使う技術を応募する会社に寄せる
応募したい会社をざーっと洗い出して、そこの求人を見ると使ってる言語やらフレームワークやらが書かれています。
全部抑えるのは当然無理なんですけど、共通で使われてる技術などがあればそれをベースにしたり、1番優先度が高い会社が使ってる技術に寄せてポートフォリオを作るってのは良いです。
例えば、応募する会社がReact * Expressを使っているのにポートフォリオでDjangoを使っていると、書類や面接で通る確率が下がるし仮に受かってからもキャッチアップするのが最初は特に大変です。
なので、応募する会社にポートフォリオに使う技術はできるだけ寄せていきたいってのはあります。
自分の場合のポートフォリオの例
自分もポートフォリオ作ったので、今閉じちゃってるやつもあるけど軽く書きたいです。
過去: Amazonの商品スクレイピングツール
未経験からエンジニア長期インターンに応募する時と新卒エンジニア就活する時に作ってこれをポートフォリオとして使ってました。
使ってた技術がFlask * Pythonで、Amazonのセラーのためのツールで、会員登録してAmazonの商品を登録すると、レビュー数とか順位とかを毎日勝手にスクレイピングして記録してそれがグラフとか表に表示されるってだけのツールです。
Stripeも入れてましたけど、ずっとテストモードだった記憶があります笑。
もともと自分がAmazonで物販してた頃があったので、そこらへんを「こういうのに時間がかかっていたからそれをウェブアプリで自動化しました!!!」みたいなことを面接ではひたすら叫んでいました。
評価はわりと高かったけど、面接担当の人が実際に会員登録してみてくれてはいなかった気がする笑。
KUJIRA SEO(ワイ制作)
2022年に作ったけど特にめぼしい機能がなきくて全然使われていないSEOツールなんですけど、実務11ヶ月でフリーランスに応募する時に役立ちました。
Next.jsベースなんですけど、「まるっと簡単なUI作れて、それをデプロイできる」てきな技術力が最低限ありまっせっていうのに役だった気がします。
具体的なポートフォリオの作成手順
ここからはこんな流れでやるといいぞーっていう手順。
STEP1: まず募集要項を見たり需要のある技術を調べる
応募したい会社やらをリスト化して、そこのエンジニアの採用ページなどを見て、使われてる技術を把握しましょう。
そんで共通の部分やら絶対に応募したい会社で、かつ、それが汎用的な技術ならそこらへんをベースにポートフォリオを作っていくと決めます。
STEP2: 作り終える期間を決める
2ヶ月、3ヶ月、4ヶ月と、期限を設定してそれまでにデプロイして応募できる状態にすると決めます。
目標設定的なお話にはなるんですけど何気にこの期限設定はすごく大事で、期限を設定しないとダラダラと作ってしまいがちだしUIの部分とかはこだわり始めると特にエンドレスなので、期限を設定することが大事です。
0からプログラミングをやる場合には、言語自体の勉強とか含めると最低でも4ヶ月ぐらいは必要かなって印象です。
STEP3: 技術スタックを大雑把に考える（技術選定）
時間がかかるので、モダンな技術に全部をする必要はないですけど、技術スタックを大雑把に考えましょう。
知識がなくて考えられない場合はとりあえずなんかそれっぽいものをChatGPTに壁打ちしながら、考えます。
1例としてはこんな感じ。
- フロントエンドサーバーサイド: Next.js
- CI/CD: GitHub Actions
- ローカル開発: Docker(docker-compose)
- デプロイ先: VPS(か、vercel)
この技術スタックはSTEP1で調べた技術をベースに選ぶのが大事です。
あとは別に最初の設計通りじゃなくても、作りながら途中で変更しても良さげです。
STEP4: テーマを決める
上のほうにも書いた通り、オリジナルの題材を決めましょう。
マーケティング的なところで言うと、人間の「ペイン」とか「不」とかを意識するとよさげとは本に書いてあります。
- 日常的に不便に感じるところ
- めんどくさいこと
- 時間がかかること
他にも「こうしたい」「ああしたい」なども良さげです。
理想を言うとプログラミング以外で自分が興味あることやら不便さを感じることで作れるのがいいんですけど、少し抽象的なTipsになっている気がします。
自分はAmazonとかSEOとかに関することをプログラミングやる前はやっていたので、そこらへんをテーマにしたんですけど、、、ここのテーマ選びは本当に人それぞれですし、ある意味で味が出るところなのでじっくり考えてもいいのかもしれません。
STEP5: 実際に毎日時間を決めて作る
人それぞれプログラミングの勉強やらポートフォリオの作成に使える時間は違うと思いますけど、計画を立てて毎日時間を決めて実際に作り始めましょう。
実際に作り始めると調べてもよく分からない部分とかAIに聞いても意味不明なところは多く出てきて心が折れそうになりますけど、みんな大体そんな感じってのはあります。
例えば、「stripeの決済APIとの繋ぎ方ががちで意味不明すぎてオワタ…」とか3日ぐらい使っちゃうとかもわりと普通な現象です。
特に最初の頃はそういうよく分からなくて進まなくて調べてたら数日経過してたってのは結構普通っちゃ普通です。
とりあえずあとは調べながら作るだけの状態になったら、目標とか期限を意識しつつ試行錯誤しながら作るって作業をやる日々を繰り返しましょう。（大変だけどね！）
まとめ
未経験からエンジニアになるのにポートフォリオ作りはなんだかんだで1番ハードかなーってところです。
ただやることはこの記事に書いてあることを手順通りにやるだけではあります。
STEP 1: 募集要項を見て需要のある技術を調べる
STEP 2: 作り終える期間を決める
STEP 3: 技術スタックを大雑把に考える
STEP 4: テーマを決める
STEP 5: 毎日時間を決めて作る
個人的にSTEP5が普通にしんどいというか、時間がかかるし毎日の継続になるし心も折れそうになることが多いので、大変なところかなーとは思うところです。
それ以外のところはそのまんまやればいいだけです。
結局のところやり方とかノウハウというよりかは目標とか毎日やることのほうが大事になってきます。
