こんにちは。フロントエンドエンジニアの田渕です。
2015年4月に中途入社して早3年目です。
前職はWeb制作会社でディレクター兼マークアップエンジニアをしてました。
最近流行りのVue.jsを使ってちょっとした診断ゲームを作ったので紹介します。
まずは以下を実際に遊んでみてください。
はい。趣味丸出しです。
ルーツ・ミュージックに興味を持ってくれる人が一人でも増えたらいいなと思います。
技術的な話
Vue.jsを使ったメリットは以下です。
- ページ遷移を非同期でおこなえる
- ページ遷移時にトランジション（アニメーション効果）をつけられる
Vue.jsでできることはまだまだありますが、Webサイトのページ遷移にちょっとした効果がついているだけでもそれっぽくなるかと思います。
実際に使ったものは以下です。
- Vue.js（JavaScriptフレームワーク）
- webpack（モジュールバンドラー）
- pug（Node製テンプレートエンジン）
- Sass（AltCSS）
- babel（JavaScriptの次世代の標準機能のトランスパイル）
- yarn（パッケージマネージャ）
パッケージは他にも使ってますが主要なものは大体こんな感じ。
現時点でのフロントエンド開発で比較的オーソドックスな組み合わせだと思います。
もちろん環境に合わせてそれぞれ違うものを導入するので、一例くらいに考えていただければと思います。
Vue.js
Vue.jsはページ単位、コンポーネント単位で管理できるので割りと気に入ってます。
pugとSassは効率的に書けて良い感じです。
babelは新規で作るなら使っていきたいですね。
Vue.jsのコンポーネントはこんな感じです。
GlobalHeader.vue
<template lang="pug">
header.contentHeader.container
p.contentHeader_title
| ルーツ音楽診断
</template>
<style lang="scss">
.contentHeader {
text-align: center;
&_title {
margin: 40px 0 70px;
color: #fff;
font-size: 38px;
font-weight: bold;
line-height: 1;
text-shadow:
-3px -3px 0 #222,
3px -3px 0 #222,
-3px 3px 0 #222,
3px 3px 0 #222,
4px 4px 0 #fff,
5px 5px 0 #fff,
6px 6px 0 #fff,
7px 7px 0 #fff;
}
}
</style>
vueファイルにHTML, CSS, JavaScriptをまとめて書けます。
今回はpugとSassを使うためlang属性で指定しています。
使いたいページや親コンポーネントにコンポーネントを入れることで、複数ページに同じようなコードが散乱することを回避できます。
Vue.jsを使うには大抵webpackを使うことになります。
webpackでいろんなファイルを一つにまとめます。vueファイルとかjsファイルとか。
Vue.jsを勉強していると思ったら、いつの間にかwebpackを勉強していた。な…何を言っているのかわからねーと思うが（ry
みたいな楽しいことになります。
元ネタがわからない人は「ありのまま今起こったこと」でぐぐってください。
トランスパイル言語
pug、Sass、babelはプロジェクトに合わせて選べば良いと思います。
- Rubyでの開発だからpugではなくslim。
- Node製で固めたいのでSassではなくStylus。
- 型が欲しいのでbabelではなくTypeScript。
みたいな感じ。
実際の開発への導入だと、開発スピードやプロジェクトメンバー、好み等によって判断することが多いかと思います。
自分の周りの状況に合わせて勉強すると効率的ですね。
yarn
yarnはいいぞ。
さいごに
新しい技術や初めての技術に触れるのはとても楽しいですね。
今回一番テンション上がってたのは、コンテンツ内容を考えてる時でした。←
技術も楽しいですが企画も楽しいです。
いろんな技術を学んでいくことでエンジニアならではの企画を思いつくこともあると思います。
ただ技術を学ぶだけでなく、ぜひ何か新しいことができないか妄想しながら考えながら学んでみてください。
楽しくモノ作りしていきましょう。
