アウトプット駆動開発でポートフォリオ作ったのでその記録です。

経緯

作るならかっこいいのにしたいとか、どうせフロントエンド案件は外からは来ないとかを理由にポートフォリオを作っていなかった某業務系出身フリーエンジニアは、絶妙に気になるステキ案件を見つけてしまいました。
しかも後先考えずにとりあえず応募(Wantedlyなので話を聞きたいボタン)してしまいました！

先方「ご連絡ありがとうございます！ポートフォリオ出してくださいね！(要約)」

某エ『あかん、衝動的に応募してもーたけど、外に出せるフロントエンド仕事ってレガシーJS指定＆JQueryで書いたのしかないわ』
某エ『Githubには昔手伝ってたとこ向けのニッチな業務ツールとかお遊びExcelアドインとかしかないし』
某エ『もう！バカバカ私のバカ！こういうことがあるから、ちゃちくても作っとけって言ったのに！(自分で自分に)』
某エ『・・・とりあえず返事遅くなるのは失礼だし、今更仕方ないからまずはお返事しよう』

某エ「お返事ありがとうございます！実はポートフォリオ作ったことないっす！2、3日待ってくれたら突貫で作るっす！(要約)」※積極的に背水の陣を作ってしまうタイプ

先方「わかりました！待ってますね！」

そんなわけで急遽ポートフォリオを作ることになりました。

方針

実際いろいろ作ろうと思えば作れるとは言っても、他の作業の合間2〜3日で作れるものには限界があるので、やることを絞り込みます。
かっこいいものを作る、できる技術をいろいろ盛り込むのは後付けでいいのです。
というか、エンジニアにありがちだと思いますが、自分でハードル上げまくって完成できないケースには持っていかないようにします。

今回に関して言えば以下の点を最低ラインとします。

ES6以降の記法で書く
背伸びせず大人しく普段通りjQueryで書く
webpackは普段と同じでパッケージバンドルとbabelだけ使う
Webと直接関係なくてもGithubにあるブツは紹介しておく
なんでも屋状態で知識が分散しているので、「それなりに使える技術」をちゃんと書く
せっかくなので「興味があって勉強してるもの」もある程度書いておく
ステキはともかく、見やすいサイトを心がける
ソースマップはあえて付ける

正直こんなんでフロントエンドのポートフォリオになるのか甚だ疑問ですが、ないよりマシなので作ります。
ダメだったら今後いろいろ付け足して、またステキ案件に出会ってしまったときに備えます。
まずは動くものを作るのが大事！

レイアウト

基本的にデザインセンスが瀕死なので、美しいステキポートフォリオとか無理なんですよね。
ただ、見づらくないものとか、それなりにすっきりしたものは作れるので、そんな感じにします。

最近はいろいろデザインツールあるじゃないですか、XDとかsketchとか。
今回はあの辺は使いません。
これもありがちだと思うんですけど、ツール使うことに夢中になってしまって、肝心の目的忘れるんですよね。
大体、作ったデザインをレビューするわけでもないので、自分がわかるようにアウトプットできれば充分です。
というわけで、レイアウターは紙です。
紙と鉛筆、最強ですよ。

※人によると思います。新しいツールふぉおおおって人はツール使う方が進むかもしれません。

結果

そんなこんなでできたものがこちらになります。

https://www.uzuworks.net/portfolio_light/index.html
※付け足して作っていくポートフォリオとは別にこちらは残しておきます

リポジトリはこちらです。
https://github.com/uzuworks/portfolio

今後はissue管理も真面目にやってくつもりです。たぶん。
半分は気に入った技術のお試し場になりそうな気がします。

反省点

大きなものだけ。

コンテンツは先に用意する

ネタが少ないので見せ方を工夫しようと頑張った結果、文章などが後回しになってしまい、結構場当たり的に書いたものが多くなってしまいました。
そもそもネタが最も大事なので先に作っておくべきでした。

画像を足す

作り終わって確認したら、びっくりするほど画像使ってませんでした。
フリー素材でもなんでも探せばあると思うので、もっと使ってステキっぽくしてもいいのでは？と思いました。

見切りは早めに

やろうと思っていたことでトラブってだいぶ時間を取られました。
ないならないでどうにでもなる部分だったので、早めに後回しの判断をしていたら他に時間をかけられたので反省。

最後に

同じように、ポートフォリオ作らなきゃと思いつつ作ってないエンジニアさんは結構いるんじゃないかと推測します。(特に業務系からの転向狙い組)
計画も大事ですけど、まずはハードル下げて作ってみるところから始めましょう。
でないと、私みたいに肝心なタイミングで困りますよ？