How IT Works

プログラマーやっています。技術よりも人間学的なところが好きです。

ポートフォリオ作りました

成果物

公開ページ(GitHub Pages) dexia2.github.io

ソース github.com

製作期間

構想:1週間

基本的な実装:5日

動機

 エンジニアなのにも関わらずあまりOSS活動をしておらず、簡単な技術を証明する何かが必要だろうと思い立って作りました。

デザイン

 デザイナーではなくプログラマーなので、なんとなく機械的というか2次元的な感触のデザインのほうがイメージに合うかなと思って、そうしました。

 また、最初にレスポンシブ対応もすると決めました。ポートフォリオにたどり着く方の多くはPCでアクセスするような気もしましたが、技術力の一つとしてスマホ用のデザインが要求されることも多いので対応することにしました。

 内容は業務経歴書などを参考にしました。

使った技術

  • Angular6
    • TypeScript
    • Scss
  • Angular Material
  • Chart.js
  • reset.css

 大体、業務で使っている技術スタックそのままです。

デプロイ先

 凝ったものではないので、GitHub Pagesを使わせてもらいました。

感想

AngularとAngular Materialが便利

 静的Webサイトを作ったのは初めてなのですが、Angularから始めるととても楽でいいです。

 TypeScript、Sassあたりのビルド設定、自動更新のサーバーを勝手に用意してくれますし、CSSカプセル化されています。

 それを自前でやることで技術力を見せるべきでは?と言われるとその通りなのですが、主題に早く入れるのはありがたかったです。

 Angular Materialのパーツはレスポンシブデザインに対応していて、そのまま使えました。デザインは一部書き換えましたが、その方法もシンプルなのですごく楽させてもらいました。

技術的に遊べる

 CSSはFlexbox、CSS Grid Layout 、アニメーションあたりを使って、すごく楽しんでいました。業務ではライブラリに投げている部分も多く、自前で組む楽しさがありました。

 あとは色々な方のWebサイトを開発者ツールで覗きながら開発していたので、勉強になりました。

 最近は常時、開発者ツールを開いて文書構造とCSSを当てるゲームをしていますが、結構楽しいです。

プログラマーの技量はあまり示せなかった

 TypeScriptでガリガリ書く部分がそうそうなかったので、マークアップを頑張ったぐらいしか伝わらないなぁと感じました。

 最近はCSSでできることが多くて、スクリプトで頑張らなくても大体のことはできました。

 WebGLとかで表現を入れようかと思いましたが、自分のPCだとカクカクするので、あまり情報を見るためのサイトに使うのもどうかなという気持ちがあります。

今後

 コンポーネント化の構想だったり、アクセシビリティだとかを含めてもう何回か見直すだろうと思います。

 ただ、今回は無難に作りすぎたきらいがあるので、もっと遊んだものを作りたい気持ちがあります。最初は中国風のデザインを目指して、太極図や陰陽五行、八卦のアニメーションなどを作ったりしていましたが、レスポンシブ対応が辛くて諦めていました。

 今回とりあえずの成果物を作れたので、趣味のほうも試せる環境にあります。なので、今後はちょっと遊びモードに入れたらなぁと思います。

まとめ

 CSSやデザインの勉強がしたい人の題材として、ポートフォリオづくりはいいと思います。

 早急にポートフォリオを作る必要がある人はAngularとAngular Materialを使うと、サクッとできて楽です。