【プログラミング初学者向け】良いポートフォリオとは？

こんにちわ。まつしん(@matsushin11)です。

先日に下記のツイートをしたのですが、もう少し捕捉説明をしたいと思います。

採用担当でもない僕が思う転職活動のために作成する良いポートフォリオとは

✅1つのサービスとして機能が揃っている
✅ Herokuなどでエラーが発生せず動くようになっている
✅ レビュアーが見やすいコードになっている
✅ 見た目がそれっぽく整えられている

ざっくりこんな感じかなと想像

— まつしん@フリープログラマ (@matsushin11)

2019年4月5日

ここでいうポートフォリオとはWEBプログラマに転職活動時に利用する成果物を指します。

良いポートフォリオとは？

1つのサービスとして機能が揃っている

ポートフォリオはオリジナルのサービスを作った方が評価は高いですが、それだとハードルがかなり高いので既存のサービスのコピーでも十分だと思います。

例えばQiitaやTwitter等のコピーです。

なぜなら企業としては、入社後に期待されるのは0からサービスを作ることでなく、まずは開発タスクをこなせる技術がどれだけあるかどうかが大事だからです。

Qiitaのコピーアプリならユーザ登録、記事投稿、タイムライン、マイページ、ストック、いいねの機能まであればサービスとして形となるので良さそうです。

プラスでヘッダーの通知機能があれば評価は上がりそうです。

Herokuなどでエラーが発生せず動くようになっている

ローカル環境だけで動作しても採用担当者はチェックすることができないので、ブラウザでアクセスしておけるようにすることが重要です。

業務ではAWSを使うことが多いのでAWSを使った方が評価は高いですが初心者には難易度が上がるので、比較的簡単に利用できるHerokuがオススメです。

そして最低限として画面から操作した際にエラーが出ないようにしておいた方が良いでしょう。

あとよくチェックするのがテキストボックスにHTMLのタグやJavaScriptのコードを入力した際にどうなるのかや、バリデーションエラー表示は見られそうです。

そのあたりの基本的なセキュリティは押さえておきたいです。

レビュアーが見やすいコードになっている

仕事で書くレベルのコードは求められませんが、せめてインデントやスペースを整えておくのは大事です。

採用担当の方はコードまで見ると思うので、読みづらいというだけで評価は下がると思います。

オススメとしてはスタイルガイドに沿ってコードを書くのがオススメです。またRailsでいうところのScaffoldでできるコードは基本が押さえられているので参考にするのが良いです。

あとはコントローラに処理を増やしすぎずにモデル等にメソッドを定義して共通化しておきましょう。

見た目がそれっぽく整えられている

デザイナーではなくプログラマといえど見た目はBootstrapを使う等してそれっぽく整えておくのが良いでしょう。

なぜなら開発の仕事ではデザイナーの方がデザインした見た目になるように実装する。もしくは自分で実装して後から細かいところをデザイナーの方が調整する。のどちらかが多いです。

つまりデザイナーの方と連携して仕事をすることになるので見た目を自分である程度調整できるとスムーズに開発が進みます。

また特に気をつけた方が良いのは余白です。プログラマにありがちなのが要素の間を詰めてしまい余白をなくしてしまいがちです。

とても見づらいのでマージンやパディングで調整するのが良いでしょう。

学習方法としては既存の人気のサービスを真似したり、「ノンデザイナーズブック」を読んでおくと良いです。

最後に

ということで、以上のことに気をつけてポートフォリオを作成すると転職成功に一歩近づけるはずです。

参考までに僕が作ったコピーアプリはこちらです。RailsでQiitaのコピーアプリ「Qiitan」を作りました。基本の処理を色々盛り込んでいますので初心者の方がコードリーディングしてみても学びはあるかと思います。

またプログラミング初学者向けにプログラミング未経験からの学習方法やポートフォリオ作成のメンターもしていますので気になる方は、問い合わせまたはTwitterのDMにてご連絡ください。