Sign up for free

This page is intended for users in Japan(English). Go to the page for users in United States.

Vue.jsで作成したお洒落なWebポートフォリオ


 6月にVue.jsを利用したWebポートフォリオを作成しました。

開発環境
・Vue.js
・JavaScript(ES6)
・pug
・SCSS
・Webpack4

 これはアニメーションを主体的としたもので、Vue.jsの機能(Vue transition)や外部ライブラリ(Velocity.js)などを利用しています。アニメーションを主体的にしたサイトは実装するロジック量が多いため、自分の実力を示すWebポートフォリオに適していると感じたため作成しました。

Vue.jsはよくReact.jsなどと比較されますがReact.jsはJSXを利用して中規模から大規模なサイトを作成することに適しています。今回は、CSSを直接使う事ができるVue.jsがアニメーションサイトを作成しやすいと感じたため採用しました。また本サイトを作成するにあたってVue.jsらしいコードを書くことに専念したので是非ソースコードを見ていただければなと思います。

実装したロジックの一つとして「ページスクロールをアニメーションで行う」というものがあります。
これは「単純なスクロールをお洒落にする事で作品の完成度を上げたい」という思いから作成しました。開発した段階では、スクロールする際にフレームレートが下がってしまったり、かくつくなどのバグがありましたが、これを修正する事でDomやブラウザの理解にもつながりました。

私はこのWebポートフォリオの作成を通してVue.jsの特徴や苦手な事を理解する事ができ、フロントエンド開発をする上での自信につながりました。また、今後のこのサイトのアップデートとしてアニメーション・ページの追加や、Node.jsと連携したサイトを作成したいと考えています。

私はVue.js以外にもReact.jsやNode.js、PHPを利用することができ、エンジニアとしてスキルアップをするためにフロントエンド・バックエンド開発のアルバイト・業務委託・インターンを行いたいと考えています。平日は全てプログラミングに費やす事ができます。少しでも気になった方は是非お声をかけていただけると大変嬉しいです。