ITエンジニアへの転職活動をするにあたって、ポートフォリオは重要です。
特に他業種から未経験の転職をする場合、経歴からは見えないプログラミングスキルを一目で判断できる成果物の存在は強力なアピールポイントになります。必須のものではありませんが、用意できれば有利になるでしょう。
では、具体的にどのようなポートフォリオをどうやって用意すればいいのでしょうか。
今回の記事は、ポートフォリオのポイントから制作、公開に至るまでの、ポートフォリオの基本をお伝えします。
企業が見るポートフォリオの注目ポイントは？
企業はポートフォリオを通じて、あなたのスキルを見極めようとしています。重要なポイントとそのアピール方法について、いかにいくつかまとめました。
基礎的なアプリ制作能力があるか
まず第一には成果物自体の完成度、つまりアプリを一から自力で構築できるかどうかです。とはいっても未経験者に高度な即戦力を求めている訳ではないので、最低限の能力があるかという観点になります。基礎のラインとしては、CRUD（データの登録・表示・更新・削除の処理）を一連の流れとして設計して動くものを作れるというところです。その他能力に応じて機能を盛り込んでいければ更にアピールになるでしょう。
実装した機能をきちんと見てもらうため、READMEなどで画像や説明を詳細に織り込むとより効果的です。
読みやすいコードを書けるか
ポートフォリオの公開にあたっては、成果物だけでなくそのコードも公開出来る事が望ましいです。企業はできたアプリケーションそのものだけではなく、そのコードも重視しているからです。開発の現場では基本チーム開発となるため、他者がそのまま利用できる理解しやすいコードを書くスキルが求められます。
変数名や関数名の統一、処理の意図を補足する的確なコメントを加えるなど、コードを読むだけで構造が把握できる状態を作りましょう。
ソースの公開方法については、後の項でポートフォリオの効果方法と一緒に説明します。
課題解決する能力があるか
トラブル発生時に、自ら原因を特定し最適解を導く能力は、エンジニアにとって必須です。ポートフォリオの制作過程では不具合が発生してそれを解決する、という事が何度か起こるはずです。これらの中から特に重要そうな不具合解決の経験をピックアップし、READMEや添付資料などで説明すると、問題解決力アピールとして有効です。 実際に起きたエラーのログやスクリーンショット、修正前後のコード比較などを使い、不具合修正の流れを簡潔にまとめてわかりやすくするのがポイントです。
ポートフォリオの形式はWebアプリが最適な理由
ポートフォリオ制作にあたって考えるべきことの一つに、どのアプリケーション形式を選ぶかがあります。アプリケーションにはデスクトップアプリやモバイルアプリなど色々ありますが、未経験者の方のポートフォリオにはまずWebアプリ形式をおすすめします。
WebアプリはJavaScriptベースであればブラウザとテキストエディタがあれば制作可能であるため、開発環境を容易につくれます。また成果物の公開も、後述のGitHubなどのサービスを利用すればURLひとつで成果を共有できます。
一方、デスクトップアプリなどの形式では、専用ツールのインストールやビルド設定、配布方法の習得が必須です。そのため、公開までの準備工数が増え、学習コストや作業負荷が高くなります。
場合によってはOSごとのUI設計やパッケージ作成など、細かな知識が求められるため、初学者にはハードルが高いでしょう。ただし、この学習コストを乗り越えた先には、より深い技術理解や高い訴求力が得られるメリットもあります。
まずはWebアプリで基礎を固め、安定した公開プロセスに慣れてから新しい技術領域にチャレンジするのが賢いステップです。
どんなポートフォリオを作ったらいいの？ レベル別サンプル課題
それでは、実際にどのようなポートフォリオを作ったらいいのか、簡単な例題を用意しましたのでご紹介します。基礎編と応用編の２例として、Todoリストと写真ギャラリーを例として、簡単な仕様と制作ポイントをまとめました。制作にあたっては、HTML+JavaScriptによる開発を前提としています。
基礎編：ToDoリストアプリ
ユーザーがタスクを登録し、その期日や完了/未完了の管理をするためのアプリです。基本的なデータの扱い(登録・表示・更新・削除)の実装能力をアピールできる課題です。機能は以下のようなものです。
・タスク追加機能（タイトルや期日などの入力欄を設ける）
・未完了／完了の切り替え機能
・タスク完了状態などでフィルタできる、一覧表示機能
・タスク削除機能
・ローカルストレージへのデータの自動保存/読込機能
制作のポイント
・日付入力の実装にはHTML5のinput type="date"タグを利用しましょう。標準機能でカレンダーが表示されるため、外部ライブラリなしで手早く実装できます。・データ保存にはブラウザのストレージ機能を拡張する localForageを使いましょう。ブラウザのストレージの差異を吸収してくれるため、容量や互換性を気にせずに安定動作を実現できます。
・画面更新のロジックにはAlpine.jsを組み込んでみてください。HTML属性で状態管理や表示切り替えを書けるため、複雑なJavaScriptを自作する必要がなくなります。
・入力チェックはJust-validateに任せると便利です。バリデーションルールを設定ファイルで定義できるため、手軽にエラー表示を実装できます。
応用編：写真ギャラリーアプリ
ユーザーに写真をアップロードさせ、それを一覧表示したり拡大表示したりするアプリです。基本的なデータ入出力等に加え、ローカルからのデータアップロードや画像表示といった発展的な機能の実演を目指します。
盛り込む機能は以下のようなものです。
・ローカルからの画像のアップロード
→選択ダイアログまたはドラッグドロップによるアップロード。
アップロード時に即時プレビューを行う。
可能であれば複数一括アップロードの対応も。
・サムネイルによる画像のギャラリー表示
・クリック時に画像拡大表示ダイアログを表示する。
・キーワード検索による絞り込み機能
・遅延読み込みによる表示の高速化
制作ポイント
・アップロード機能の実装にはDropzone.jsを使いましょう。プレビュー表示やアップロード進捗といったUIを手軽に実装できます。・サムネイル生成にはPica.jsと言うライブラリを使ってみてください。ブラウザ内で高品質かつ高速にリサイズできるため、パフォーマンスを維持しながら画像処理が行えます。
・サムネイルの整列にはMasonry.jsというライブラリを利用すると綺麗に表示できます。これは不規則なサイズの画像をタイル状に美しく配置するためのグリッドレイアウトを提供します。
・画像の拡大モーダル表示はMicromodal.jsで実現しましょう。モーダル表示を簡単に作成できるほか、キーボード操作もサポートされます。
・画像の遅延読み込みにはlazysizes.jsというプラグインを活用しましょう。data-src属性を付与するだけで、画面に入ったときに自動的に読み込まれ、初期表示の高速化に貢献します。
GitHubでポートフォリオを公開する手順
ポートフォリオの公開形式は、GitHubの利用をおすすめします。 GitHubは世界中の開発者と企業が使うオンラインプラットフォームであり、無料でプロジェクトを公開できます。成果物を見せたい企業にURLひとつで共有できるため、制作物のデモに最適です。GitHubでのポートフォリオ公開の手順は以下です。
1.リポジトリを作成する
リポジトリはプロジェクトを管理するフォルダです。GitHubにログインして「New repository」を選択し、名前と説明を入力した後「Public」を設定して作成します。
2. ソースファイルをアップロードする
作成したリポジトリから「Add file」 → 「Upload files」を選択し、コード一式とreadme等の付属ファイルをアップロードします。
3. GitHub Pagesを有効化する GitHub Pagesを利用することで、アップロードしたソースをWebアプリとして稼働させる事ができます。 「Settings」→「Pages」から公開元（mainブランチ・rootフォルダ）を指定し、「Save」を押下すると自動でビルドされ、公開用URLが発行されます。
あとは3で発行されたURLを応募書類等に記載すれば共有可能です。
公開前の最終チェックポイント
ポートフォリオ公開前に、以下のポイントをチェックし直しましょう。起動時間の最適化
初回アクセスでユーザーを待たせないために起動速度を再確認します。5秒程度を目安にするとよいでしょう。それ以上遅くなる場合は、不要なライブラリの削減やコード分割、遅延読み込みの導入などで高速化を図りましょう。
複数のブラウザや環境での表示確認
ChromeやFirefoxといった主要ブラウザで表示テストを行い、レイアウト崩れやエラーが生じないかを確認します。また、スマートフォンやタブレットを使うと画面サイズの都合上表示が崩れる場合があります。可能な範囲でチェックしましょう。
表示が崩れてしまう場合、cssのメディアクエリなどを利用し最適化してください。
ドキュメントと実装の一致確認
READMEに書かれている内容と実装内容が完全に一致しているかを確認しましょう。一度手動でリハーサルし、誤りや抜け漏れを排除します。
まとめ
ポートフォリオは技術的なスキルを提示するだけでなく、自身の学習過程や問題解決のアプローチを示す「成長の履歴書」です。本記事で扱った各ステップを踏むことで、単なる成果物ではなく、実践力や問題解決力をアピールできるツールになります。制作は大変かもしれませんが、転職の武器になるのと同時に、１つのアプリを完成させる事は良い経験になります。できるところからチャレンジしてみてください。
