4日でポートフォリオサイトを作った話

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

最近全然アウトプットできていなかったんですが、久しぶりの投稿です。
今まで学んできたVue.jsを使ってポートフォリサイトを作りました。

Kenta Takimura's Profile site

動機

細かいものを出していくといろいろあるんですが、大きいところでいうと、

• 自分が持っているスキルとかやっていることとかをまとめたかった
• このサイトを見てもらうことで、ちょっとでも興味持ってくれた人と繋がれたりしたら嬉しいなー

とかですかね。

使用言語etc

• HTML
• CSS(Buefy)
• JavaScript(Vue.js)

HTMLは当然、Vue.jsも最初に述べた通り。
Buefyは今回初めて使った、Vue用に作られたコンポーネント群。

Buefy?

今回初めてなので少しだけBuefyとはについて書こうと思います。
使った感想とかはまた後で。

公式サイト(https://buefy.github.io/)を見ると、

Lightweight UI components for Vue.js based on Bulma

と書いています。
Bulmaをベースに作られたVue.jsのための軽量なコンポーネント群ってことですね。

で、Bulmaって何よ？となるわけで、さらにBulmaの公式ページ(https://bulma.io/)ヘ...

Bulma is a free, open source CSS framework based on Flexbox (以下略)

と記載されていて、要はFlexboxベースで作られたOSSのCSSフレームワークで、Bootstrapみたいなものかなぁと理解します。

なので、BuefyはこのBulmaというCSSフレームワークを使って作られたコンポーネント群ですね。

作る前に考えてたこと

• コンテンツ
• UI

考えてたことは正直この2つだけです。
どういうコンテンツにするかを決めないと作れないし、ダサいUIは嫌だし・・・
(結局UIは個人的には好きな感じだけど、そこはほんとに人によりそう 笑)

コンテンツ

まず初めに考えた。
あまり情報が多すぎでも見る気失せるし、少なくても自分のことわかってもらえないし。
自分のテクニカルな側面を知ってもらうために、過不足ない情報はどんなもんなんだろうというところから考えた。

逆に、自分は人のことを知りたい時、何がわかればいいか。

結果、コンテンツは

• Top
  Top画面。ベタに。
  だけどこのサイトを見てもらえるかどうかが決まる画面とも思ったのでかなり真剣に考えた。

• Me
  自分の基本的な情報を書く画面。

• Skills
  自分のスキルセットを書く画面。
  たぶんこのサイトを訪れた人が一番気になること。

• Outputs
  今までの成果物を挙げる画面。
  Skillsページよりこっちの方が気になる人もいてるか。

• Contacts
  僕への連絡手段を掲載する画面。
  おまけみたいな感じ。

で構成することにした。

UI

とりあえずExcelで大雑把なイメージを書き出してみた。

大雑把なイメージ。こういうの考えるときはできるだけ英語で考えるようにしている。

これを上の各コンテンツに対して行い、自分の中でのイメージを書き出してより明確なものにした。
ちなみに、自分の考えていることを書き出すということはよくやっている。
頭の中が整理されてちょっとすっきりするんですよね。

実装へ

実装するにあたって要件として以下を考えていました。

• SPA
• レスポンシブにすること
• Git hub pagesでホスティングすること

Vue.js使うならSPAは大前提ですが、前提でも要件は要件なので一応考えてた。
レスポンシブもWebでアプリ作るなら必須だと思うので要件にしています。

GitHub pagesは実は今回初めて知ったんですよね。
GitHubのリポジトリから直接Webサイトをホスティングできるサービスです。
簡単にリリースできるとのことなので、友人からの勧めもあり使うことにしました。

ハマったポイント

ここではポイントの紹介だけ。

コーディング自体はまぁまぁスムーズにできたんですよね。
Vuexとかも使う必要なかったですし、ルーティングをネストさせることもなかったので、
そもそもハマるポイントがそれほどなかったです。

GitHub pagesに上げるところで一番時間使ってましたw
成果物をビルドして、専用のリポジトリにpushしたんですが、URLにアクセスしても真っ白でした。
このポイントはまた別の機会に書こうと思います。

感想

Buefyを今回初めて使ったんですが、かなり良かったです。
こういうTileを使ったUIとか

Tileコンポーネントを使って作成

NavbarとHamburgerの切り替えとか

Navbar

Hamburger(右上の三本線)

を一瞬で実装できた。

実際はTileはCSSクラスを利用することで実装できるのだが、それらをラップしてTileコンポーネントにして、
ラベルと値組み合わせ(誕生日： YYYY/MM/DD)を渡すようにし、再利用できるようにするとともに、
項目が追加された時も簡単に追加できるようにした。

Tileコンポーネントを呼び出している。labelやvalue、textなのかurlなのかを表すtypeなどの配列をcontentsに渡すことで、Meページを実現している。

にしてもやっぱりUI考えるのって難しいですね。

今回は割とスピード感持って完成させましたが、本音を言うならもっとゆっくり時間使ってやりたいです。
(これからも当然ブラッシュアップしていくんですが)

今後もう少しUI考えてできればもっと改良したいのと、
あとは多言語対応もしたいです。

i18n使えば実装自体はすぐできるんですが、翻訳をする時間が無い。というか優先度低い。

今回このようにまとめたことで、自分のスキルセットを整理して、今後どうしようかとか考えるいい機会になりました。
みなさんもぜひ自分でサイト作りましょうよ、めちゃくちゃ楽しいですよ。

最後まで読んでいただきありがとうございました!