エンジニア初心者向けにポートフォリオの作り方・公開方法を紹介していくよ!

エンジニアとしてポートフォリオ作りたいんだけどどう作ればいいの?

そんな疑問を解消するためにこの記事ではポートフォリオの作り方を書いていきたいと思う。といってもポートフォリオの作り方にはそれぞれやり方があるだろうし、ここで書く内容はあくまで個人的な意見。だから参考にできる部分は参考にして参考にならない部分は他の情報を参考にしてみてください。

記事の内容
  • 初心者向けポートフォリオの作り方
  • ポートフォリオの作成手順
  • ポートフォリオの公開先

    ちなみにポートフォリオを簡単に作成できるサービスはいろいろあるけど、今回は自分でコードを書いてポートフォリオサイトを作っていくやり方。ゴリゴリプログラミングしてネットに公開していくっていう方法ですね。

     エンジニアとして正社員やフリーランスで働いてきたよ

    ポートフォリオの作り方書くといってもお前誰だよコード書けるのかよ?感がありますよね。自分は新卒でエンジニア就職してそれからフリーランスでいくつか案件を受けてきました。やってきた言語なんかはプロフィールに書いているから良かったら参考にどうぞ。

    ポートフォリオの作り方を見ていくぞ

    参考になるポートフォリオを見ておこう

    いきなりポートフォリオを作ろうと思っても、どんな感じのポートフォリオサイトを作ればいいのか分からないですよね。そういった場合は世界的なアワードを覗いてみるのもいいかもしれない。

    海外のサイトが多かったりするけど、何かとデザイン的には参考になる部分があるはず。日本の方が作成したものものを知りたい場合には「エンジニア ポートフォリオ 参考」とか検索すればまとめたサイトが出てくるから見てみるといいですよ。

    ポートフォリオを作る上でイメージは大事ですからね。イメージがないとどんなデザインにしようかなーっていうのが作れないです。デザインがある程度固まるまでいろんなサイトを見てみるといいです。

    ポートフォリオに載せる情報を整理する

    ポートフォリオを作る目的は自己満じゃなくて「就職や転職などで企業に自分はこんなことができるよ、こんなことをやってきたよ」っていうアピールをすることだと思います。だから自分のことを知ってもらうための情報を記載する必要があるんです。

    • 今までどんな仕事をしてきたのか
    • どんな言語やフレームワークを扱えるのか
    • どんなアプリやWebサービスを作ってきたのか
    • ・・・

    相手からしたら知らない人だから自分のどういう点を知ってもらいたいかを整理しておきましょう。経験年数や実績なんかがあるとわかりやすいですよね。ブログやQiita、Zennなどで記事を投稿しているならそのURLを載せておくといいでしょう。GithubやGitlabなんかも同様。

    ブログなんかで日々アウトプットをしていると、この人が普段どんな開発をしているのか垣間見れます。誰かに教えるような気持ちで書くと自分の知識も深まっていくのでおすすめです。

    ポートフォリオに使う技術を決める

    ポートフォリオを作るといいってもどんな技術を使って作りますか?選択肢はいろいろあると思います。

    • HTML・CSS・素のJavaScript
    • React
    • Vue
    • React+API(PythonやRuby・PHP)
    • Vue+Firebase
    • ・・・

    考えるとかなり多くの選択肢が浮かびますよね。フロントだけで完結させるか、それともDBを使ってバックエンドの言語を使うか、フレームワークを使うのか、それともバックエンドをAPIとして使うのかなどなどいろんな考えが巡ります。

    簡単に済ませるならHTML・CSS・JavaScriptだけで作ったものだけど、フロントエンドとしてやっていきたいならReactやVueを使って作るのもいいですね。そこにFirebaseなんかも使えば結構良い感じ。バックエンドとしてやっていきたいならPythonやPHPのフレームワークを使ったりAPIを画面とは別に作るのもいいでしょう。

    自分がどんなエンジニアとしてやっていきたいのかを考えて言語やフレームワークは決めるといいと思います。ポートフォリオのコードもポートフォリオになりますからね。

    有料も許容するのか考えよう

    あれも使いたいこれも使いたい!ってなるとポートフォリオサイトを公開するのにそれなりのお金がかかってしまいます。無料でやるには無料なりの構成を取らないといけません。

    • フロントエンドだけなら無料でやりやすい
    • リレーショナルデータベースを使うと無料だとやりづらい

    HTML・CSS・JavaScriptで作ったものであれば、Netlifyなんかを使えば無料で公開できる。ReactやVueなんかもそうだね。React + FirebaseとかでちょっとFirebaseの機能使いたいとかでも無料でできる。(FirebaseのデータベースはNoSQLだからちょっと注意)

    無料でやりたいなら
    • JavaScript(React、Vue)、HTML・CSSのみで開発(NetlifyVercelGithubpagesなど)・・・React・Vueの場合でもビルドしたもの公開すればOK
    • Firebaseの無料プラン・・・無料でもポートフォリオぐらいならいける
    • Heroku・・・Mysql・Postgresのアドオンを使える

    データベースを使いたかったらFirebaseやHerokuを検討するといいと思います。バックエンドが絡むならHerokuでMysqlやPostgresqlを使うのが良いかもしれないぞ。HerokuはDockerも使えるしね。

    JavaScript(React、Vue)、HTML・CSSのみで開発したものを公開するっていうのはレンタルサーバーだけど、こっちの記事でやったからどんな感じなのか気になったら見てみてください。

    AdobeXDでポートフォリオデザインを作成する

    ポートフォリオを作る時にはどんなポートフォリオを作るのか?っていうのは頭の中で多少はイメージがあるんじゃないかなと思います。イメージがあやふやなまま開発しても何度もやり直してしまうので、デザインをある程度固めてから開発することがおすすめ。

    デザインを作成するツールはたくさんあるけど、個人的に使うにはAdobeXDが割と良い感じだからちょっと紹介します。作成画面はこんな感じで画面デザインを好きなように作っていくことができる。

    作成したデザインに遷移を付けてアニメーションさせることもできる。

    右上の再生ボタンを押せば、実際に画面を触ってどんな風に画面遷移するのか?っていうのかっていうのも確認することが可能です。ここまでできればポートフォリオのイメージはかなり固まってくるでしょう。

    紙にイメージを書き落とすっていうのもいいけど、デザインツール使うとそれっぽくなって良いです。ポートフォリオ作ったらこの作成過程なんかも取り入れられますしね。

    デザイン通りにポートフォリオのコーディングする

    デザインが決まったらそのデザインを満たせるようにコーディングしていこう。これはもうゴリゴリ思い通りのデザインや機能になるようにやっていくだけです。コードを書くのが好きならきっと一番楽しい作業でしょう。

    もしこれどうやって実装すればいいんだろう・・・?って悩んだらココナラなどで助けてくれる人を探してみるのも手です。

    自分一人だけでやると詰まりに詰まってしまったら結構しんどくなってしまいます。初心者のうちは特にそうだから、Mentaでメンターを見つけるのもいいですね。

    単体テストを書く

    ポートフォリオでここまでやる人はなかなかいないだろうけど、もしテストなんて書いたら他の人とちょっと違いますよね。テストの種類はいくつかあrけど、コードレベルの小さい範囲で行う単体テストを書ければ書いておくといいと思います。ポートフォリオのコードを見た人は「テストもちゃんと書いている・・!」となる可能性があります。

    ポートフォリオをサーバーにデプロイする

    コードを書いたらもうローカル環境ではポートフォリオサイトが出来上がっているはずです。後はその作ったものを公開すれば他の人もURLから見れるようになります。

    デプロイ先はさっきも少し書いたけど、無料でやるなら以下のような選択肢がある。

    無料でデプロイしたい
    • Firebase
    • Netlify
    • Heroku
    • Vercel
    • GithubPages

    サーバーサイドでmysqlやpostgresqlデータベース使っているなら、この中ならHerokuですかね。Firebaseもデータベース使えるけど、NoSQLだから作る時にちょっと考えないといけない。フロントのみのHTML/CSS/JavaScriptでできているものなら簡単にデプロイできるから楽です。

    以前エックスサーバーっていうレンタルサーバーでポートフォリオをデプロイするっていう記事を書いたから、レンタルサーバーでやりたい人は参考にしてみてください。

    ConoHa WINGでもやったからどうぞ。

    SSL化する

    サイトを公開したらSSL化しておきましょう。httpsになるやつですね。せっかく作ったポートフォリオサイトがhttpでしか見れなかったらかなり残念だからやっておきましょう。SSL化したら以下の2つを確認するといいです。

    • httpsでアクセスできるか
    • httpでアクセスしてもhttpsにリダイレクトさせる設定になっているか

    独自ドメインを取得してポートフォリオサイトに割り当てる

    デプロイしてもURLは自分の好きなものではないはずです。自分の好きなものにするために独自メインを取得しましょう。取得できるサイトはたくさんあるけど、お名前.comでいいんじゃないかなと思います。

    欲しいドメインを入力すれば、それが取得可能か確認することができるから見てみるといいですよ。

    お名前.com

    独自ドメインの設定方法はそれぞれデプロイしたサイトによって多少違うから参考になりそうなサイトを少し載せておきます。

    ポートフォリオのコードをGithubに上げる

    ポートフォリオサイトを作成したらそのコードをGithubに上げておきましょう。作った後よりGitを使いながらやった方がやった感が出るので、ポートフォリオを作る際にGitを使ってGithubにPushしつつ開発するといいです。そうすればコミット履歴やプルリクを遡って見ることができる。プルリクがいくつか出ていれば、それを見た人も何をしたのか分かりやすいです。

    ちなみにgitを使う時にはSourcetreeなどのGUIで確認できるツールを使うとやりやすいです。

    Sourcetree

    ただgitのコマンドを忘れてしまったりするので、たまにはターミナルからgitのコマンドを使ってやっておくといいですよ。gitのコマンドをある程度覚えたらGUIのツールを使ってみるといいと思います。

    ポートフォリオコードを自動デプロイできるようにしておく

    ポートフォリオは作って終わりではないですよね。作って公開してから修正を加えたりするはずです。そのたびに毎回デプロイ作業をするっていうのは面倒、だからコードに変更を加えたら自動デプロイするようにしておこう。

    CIツールを使えば例えばプルリクをマージしたタイミングでデプロイっていうことが可能になる。CIツールはいくつかあるけど、以下のどちらかを使えばいいんじゃないかな。

    • GithubActions
    • CircleCI

    GithubActionsはGithubについている機能で結構便利です。Github上で見ることができますからね。GithubActionsを使ったものは以下の記事で書いたからどんな感じか気になったら見てみてください(レンタルサーバーでやってるけど)

    ポートフォリオの作り方まとめ

    ポートフォリオを作り方を書いてみたけど、もちろんここで書いた以外にも方法はいろいろあると思います。AWSやGCPのサービス使ったりとかもあるけど、お金がかかる場合が多いので書いていないです。ちなみにGCPは登録すると300$分無料で使えたりするからそれを使ってGAEやCloudSQLなんか使えたらいいかもしれない。

    ポートフォリオサイトを作って公開してって結構労力かかるけど、作ってしまえばずっと自分のポートフォリオです!って見せることができますからね。自分が名得するもの作っていきましょう。