Typescript&Nuxt.js を使って今風なデザインのポートフォリオを制作するまでの流れ

何故、ポートフォリオを作るのか？

プログラマーが仕事を請け負う際に企業側からポートフォリオの提出を求められることはほとんどありません。しかしポートフォリオを作成し提出した場合、他のエンジニアよりも有利になります。特にプログラマーとしての実務未経験者がポートフォリオを作成し、WEB上で自らのサンプルプログラムを公開する事は数いるエンジニアの中から出来るエンジニアを探す必要がある企業にとっては魅力的なエンジニアに見えるはずです。

また、プログラムの勉強にもなるのでポートフォリオを作るという行為自体がスキルアップに繋がり前向きに取り組んでいるという証にもなるので、多少不出来であってもポートフォリオ自体がマイナスに受け取られることはほとんどありません。

このポートフォリオは、Nuxt.js & Typescript を利用して作成しており、最近のフロントエンドの技術を出来るだけ利用して制作するように心がけました。

完成したポートフォリオ

https://profile.isystk.com/

制作にかかった時間

デザイン構想策定・・・2日
HTMLコーディング・・・2日
Nuxt.js アプリ化・・・2日

デザイン構想策定

良いWebサイトを作るためには、良いWebサイトが何かを知る必要があります。自分が良いサイトだと思っていても世の中の人が見たらそれは普通のサイトだと感じるかもしれません。
自分の感性を確認するために世の中で良いサイトと言われているWebサイトを調査しました。

Webデザインを参考にしたサイト

サイト名	URL
io3000.com	https://io3000.com/
イケサイ	https://www.ikesai.com/

次に、自分のポートフォリオに組み込みたい内容や機能を整理していきます。

自己紹介
プログラミングのスキルセット
ブログや過去に制作した作品の紹介
Twitterのタイムラインとフォロワー数
FacebookやGithubなどのコンタクト情報

また、アプリに組み込みたいこだわりやアニメーションなどの細かな機能もここで決めました。

レスポンシブデザイン
ドロワーメニュー
チャート表示
アニメーション表示
モックアップ画像
SNS連携
メインビジュアルに動画を表示したい

ある程度やりたい事（素材）が頭の中で固まってきたら構成を紙に書いてみると良いと思います。

サイトの構成が決まったらWF（ワイヤーフレーム）を作成していきます。
私はエンジニアで、Webデザインの知識は少ないですがYouTubeやUdemyなどを利用してWFを作成する為の簡単なPhotoshopの操作方法は予め学びました。

作成したPSDファイル↓

https://demo.isystk.com/design/psd/portfolio.psd

HTMLコーディング

WFが完成したらHTMLファイルをコーディングしていきます。
最近のWebサイトは、スマホからのアクセスが70%を超えておりPCサイトからのアクセスが減少しています。
その為、Webデザインはスマホファースト（スマホからのアクセスを優先したデザイン）となるようにして、PCからアクセルされた場合でも違和感なく表示出来るようレスポンシブデザインとなるようにしました。

HTMLコーディングの段階で、CSS3やjavascript を利用したアニメーション処理も組み込んでいきます。

アニメーション機能

ドロワーメニュー

スマホ表示の場合に右上にメニューボタンを表示します。タップするとスライドでメニューが表示され、ハンバーガーメニューのボタンがバッチボタンに切り替わるアニメーションです。

超・便利技！CSS3を使ったハンバーガーメニューの作り方

フェードインアニメーション

画面をスクロールしてコンテンツがウィンドウ範囲内に含まれた際にフェードインさせて表示するアニメーションです。

<template>
  <div :class="[classDefault, isInScreen ? classChange : '']">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Scrollin extends Vue {
  scroll = 0;
  windowHeight = 0;
  @Prop()
  classDefault?: [];
  @Prop()
  classChange?: {};
  isInScreen = false;
  mounted(): void {
    window.addEventListener("load", this.onScroll);
    window.addEventListener("scroll", this.onScroll);
  }
  beforeDestroy(): void {
    window.removeEventListener("load", this.onScroll);
    window.removeEventListener("scroll", this.onScroll);
  }
  onScroll(): void {
    if (!process.browser) {
      return;
    }
    this.scroll = window.pageYOffset || document.documentElement.scrollTop;
    this.windowHeight = window.innerHeight;
    // console.log(
    //   "scroll:%s,position:%s,windowHeight:%s",
    //   this.scroll,
    //   this.getPosition(),
    //   this.windowHeight
    // );
    if (
      this.scroll >
      this.getPosition() - this.windowHeight + this.windowHeight / 5
    ) {
      this.isInScreen = true;
      // 表示が完了したらスクロールイベントを削除
      window.removeEventListener("load", this.onScroll);
      window.removeEventListener("scroll", this.onScroll);
    }
  }
  getPosition(): number {
    const el = this.$el as HTMLElement;
    if (el) {
      return el.offsetTop;
    } else {
      return 0;
    }
  }
}
</script>

チャート表示

Vue-Chartjs の使い方とサンプル（Typescript対応版）

数字をシャッフルしてから表示する

Twitterのフォロワー数を初期表示の際にシャッフルさせるアニメーションです。


const shuffleNum = document.querySelector(
  ".js-shuffleNum"
) as HTMLInputElement;
const defautVal = shuffleNum.textContent;
let count = 0;
let id = 0;
const setRandom = function(): void {
  const random = Math.floor(Math.random() * 9999);
  shuffleNum.textContent = random + "";
  count++;
  if (count > 50) {
    clearInterval(id);
    shuffleNum.textContent = defautVal;
  }
};
id = window.setInterval(setRandom, 20);

ページトップに戻るアニメーション

一定位置までスクロールすると右下に「ページトップに戻る」為のボタンを表示させて、クリックするとページトップまでスクロールさせるアニメーションです。

Nuxt.js & Typescript でアプリ化

HTMLをそのまま公開しても良かったのですが、フロントエンドエンジニアとして働いていることもあり、折角なので最近流行りのNuxt.js & Typescript を利用してアプリ化しました。

Nuxt.js で対応した機能

表示内容をjsonファイルから読み込んで表示
vue-charts
PWA対応
GA設定

苦労した点

HTMLコーディングの際にjQueryを利用してアニメーションを作成していたのですが、Nuxt.jsにする際に、脱jQueryで書き直す必要が出てしまったのでHTMLコーディングの時点でjQueryを使わないようにした方が良かったなぁと思います（笑）

ソースコード

ソースコードはGithubにて公開してますので参考にしたい方はforkしてご利用くださいませ。

https://github.com/isystk/profile.isystk.com

最後に

ポートフォリオは自分をアピールして、自身の価値を判断してもらうためにとても重要なものです。一度ポートフォリオが完成しても新しく成果物を作ったり、休日に作ったプロダクトなどで自身があるものは追加して少しづつ充実させていきましょう。ポートフォリオが充実するほど自分自身のスキルもアップしていくはずです。

この記事を参考にして素敵なポートフォリオを作ることが出来た人が増えれば公開者として嬉しく思います。よかったら”いいね”してシェアよろしくお願いいたします。