1.はじめに

現在都内でiOSアプリエンジニアをしていますが、転職を考えており、ふとQiitaを読み漁っていた時、ポートフォリオ作成の記事をいくつか拝見し、触発され、新しい知識を身に着ける良い機会だと思い、作ることにしました。これからポートフォリオの作成を検討している方など、参考になれば幸いです。

2.学習サイト

1から学ぶ必要がありましたので、下記のサイトでHTML、CSS、Javascript、JQuery、Bootstrap辺りを学びました。
JQuery、Bootstrapはふわっとしてますが、大体1週間ぐらいで終わらせました。

Progate

Progateは無料だと物足りなかったので有料課金しました。
980円/月で出来るならお手頃だし独学で調べて学ぶよりもコスパはかなり良いです。
丁寧なスライドと練習問題がレッスンごとにあるので、取っつきやすさは他の学習サイトに比べてかなり高いと感じました。でも変数とは?とかfor文とは？というレベルからなので、他の言語やっている人は、最初の方は退屈さも少し。

Facebook広告でGraspy(グラスピー) というプログラミングが学べるサービスを見かけ、今ならプロフィール登録で500p無料でもらえて、１カリキュラム100p消費で1ヶ月間学べるので、HTML、Javascriptの2講座を学びました。
こっちはAWSでCloud9上でプログラミングが出来きて、メンターに質問もできますが、AWS の無料利用期間は1年間となっており、1年経過後もAWS Cloud9を使い続けていると利用料金が発生するので、解約忘れに気をつける必要があります。忘れないようにしないと。
最初の登録についても丁寧にチュートリアルがあるので始めるまで時間はかかりません。
ただプログラミング経験0の人だとProgateみたいにチャプターごとにコーディングして自動チェックしてとかないので、記事を読みながらCloud9で動作試して進めていく流れです。
学ぶ順番としては、ProgateでHTML/CSS、Javascript、ドットインストールでHTML、CSS系、Javascript系を復習兼ねて学習。Graspyで再チェックしました。

3.考えたこと

ざっくり以下のことは気にしながら作りました。
・ホスティングをどうするか
・開発工数とマイルストーンの検討
・デザインおよび表示内容

ホスティングをどうするか

ホスティングは単純に参考にしている記事の中でGithub Pagesで作っている人が多かったこと、僕自身Github Pagesを使ったことがなかったこと、簡単にホスティングが可能なことから選定しました。

開発工数とマイルストーンの検討

たかがポートフォリオと言えど、貴重な時間を費やして作る以上は、だらだらやりたくなかったので、遅くとも2週間ほどで完成させたかった。なので、1週間で学習、残り1週間で開発という簡易的なスケジュールで行うことにしました。本当は1週間で完成させたかったorz。
それと使う技術よりまずは完成させたかったので今回はHTMLとCSSだけに留めました。
次は、Vue.jsやBootstrapとか、Firebase使ってみようと思います。

デザインおよび表示内容

最初は学習期間内に参考になるポートフォリオを模写しました。その後Sketchを使って画面設計と言えるほどではないけど、デザインを作成。
デザインツールはXD、Sketchで迷ったんですが、使いやすかったのと個人的に好みだったのでSketchにしました。
表示するコンテンツについては、だいたいホームとかプロフィール、スキル、ワーク、コンタクトとSNSリンクぐらいなのでそこまで考える必要はないかなと、当初そこまで意識してなかったのでHome、About、Skill、Work、Contactにしていました。
しかし、デザインって以外と意識すると時間かかりますね。
デザインとかフロントエンド初心者なので、個人的見解でしかわかりませんが、果たしてHomeいるのか？とかAboutよりProfileの方がニュアンスよくないか?Skillは複数形のほうが...(ry
と悩みました。
また、ロゴやアイコンなどは無料のを使えばいいかと考えていましたが、全体のデザインに統一感を出す為にはやはり、自分で作成したほうがよかったので、それらもSketchでパパっと作成しました。
こういうカラーとか配置とかいざ考えてみると、デザイナーさんってすごいんだなと思いますよね。リスペクト。

4.成果物

完成したポートフォリオ
 リポジトリ

5.反省点と課題

・CSSファイルが肥大化した。
フレームワークを使っていないから、色々調節するのにpaddingやらwidthやら設定しすぎて可読性がすこぶる悪くなりました。このHTML量でCSSは157行。これが多いのか少ないのか、きっと多い、共通化もあまりできていない、リファクタリングの余地は有り余るくらいあります。これについては今後理解を深めるとともに改善すべき点です。
・デザインがシンプルだけどモダンじゃない
やはりフレームワークやもう少しアニメーションをつけたり装飾していかないと質素さは拭えませんね。
・レスポンシブ対応がお粗末
メディアクエリを使用しましたが、結局px指定を多用していたり、パーセント指定やem、remなどはあまり使っていないので、しっかり対応できていません。

6.経験になったもの

HTML、CSS、Javascript、JQueryの知識
知識ゼロからいくらかは覚えられたので、コードを見ても吐き気はしなくなったと思います。それだけで成長。
Bootstrap、Vue.jsはふわっとしすぎてこれでは役に立たないのでもう少し学習しないとという危機感が得られた。
ネイティブアプリ開発時にwebViewでHTML、javascriptをごにゅごにょしたりとかするときには役に立ちそう。
・ポートフォリオという作品を作ったという実績
予定通り「作る」という目的を達成できたのでよしとします。
過去に個人開発でアプリをリリースしましたが、それ以外で作品と呼べるものは特になかったので、これを機に色々作ってアウトプットしていけたらなと思います。

6.参考記事

Qiitaや技術ブログを書いている先輩方の以下の記事を参考にしました。
・Qiita
春から大学院生が3日間で「Nuxt.js + Vuetify + CircleCI」を使ってポートフォリオを作った話
 エンジニアでポートフォリオ作りました
 ハードル下げまくったポートフォリオを作った話
 GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）
jQueryでスムーズスクロールを心地よくする！
Font Awesome で Qiitaロゴっぽいアイコンを表現
・ブログ
GitHub Pagesを使って、ポートフォリオを公開してみた。

7.最後に

色々経験になったことや反省点があったのでとても有意義に学ぶことができました。
今回は技術的なことは全然載せていないですが、最後まで見ていただいてありがとうございました。
今の世の中、独学でも学習サイトが結構充実しているので、ある程度、多言語で知識があれば容易に作ることが可能です。こんなにも簡単に出来るなんて、ほんと便利な時代になったものです。
次はPHPとかサーバーサイドも少し覚えて、アプリ開発に役立てていけたらなと思っています。

エンジニアの方でまだポートフォリオを作っていない方、ぜひ試してみてはいかがでしょうか?

私ごとですが、ひっそりとブログを始めました。
iOSエンジニアのブログ
kazyblog

Web知識ゼロのiOSエンジニアが2週間でポートフォリオを作ってみた