Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2019年10月2日

iida

フロント初心者がVue.jsを勉強する part.2

こんにちは、飯田です。
世間はいろんなゲームで盛り上がっていますね。普段FF14ばかりの私も久々にゲームを買いました。
今回も前回に引き続きVue.jsの勉強記事となります。
 

はじめに

この記事はフロント初心者がVue.jsを勉強する Part.1の続きです。
今回は実際のプロジェクト上のコンテンツをVue.jsにした話を書いていきます。
 

実際のプロジェクトでVue.jsを書いてみた。けれど…

まずは現状ピクトリンク内でVue.jsに置き換えられる静的ページやコンテンツを探すところからはじまりました。
 
そのひとつが、年に4回発行されるGIRLS TRENDという冊子の紹介ページです。
(余談ですがこちらの冊子は内容もデザインもとても可愛いので、ゲームセンターなどで見かけたらぜひ手にとってほしいです!)
 
GIRLS TRENDのディレクトリ構造は厳密には違いますが、だいたいこのようになっています。
色々突っ込みたいのですが現状それぞれのvolumeでディレクトリが切られていて、その中にファイルが2つセットでたくさんある感じになっています…

(vmというのはピクトリンクで使われているVelocityというJavaテンプレートエンジンのファイル拡張子です。ちょっとカオスなHTMLファイルのような感じですが、特にここで説明する必要はないので割愛します。)
 
毎号同じレイアウトで色や画像・内容が変更されるだけなので、内容のみ異なる同じようなvmファイルがたくさん存在しています。
まずは深く考えずに最新号のindex.vmをVue.jsに置き換えてPull Requestを出しつつも、せっかくVue.jsを使うのに似たようなファイルをどうにかまとめられないのか? と疑問に思っていました。
 
結果的に『Vue Routerを使ってみると良いかも』とレビューをもらい、Vue Routerに触れてみることにしました。
 

Vue Routerとは

シングルページアプリケーション(SPA)を構築するために用意されているVue.jsの公式拡張ライブラリです。
ルーティング制御に優れています。
 
公式ドキュメント
https://router.vuejs.org/ja/
 

シングルページアプリケーション(SPA)って?

単一のページで構成されているWebアプリケーションのことです。
ブラウザによるページ遷移を行うことなく、単一のページの中でコンテンツを切り替えて表示します。
こちらの記事が簡単にまとまっていて概要を掴むにはわかりやすいです。
https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a
 

やってみる

さて、今回やりたいことは以下になります。
 
・URLをシンプルにし、volumeに対応した内容を表示させたい
→ magazine/21/ならvol.21のindexの内容を、magazine/22/ならvol.22のindexの内容を表示したい
・毎回レイアウトは同じなので1つのコンポーネントを使いまわして内容だけ変えたい
 
前回vue-cliで作成したプロジェクトにVue Routerをインストールしてローカルで試してみることにします。
 

インストール

※npm5.0より前のバージョンを使っている方は–saveオプションをつけてください。
 

ルーティング用コンポーネントの作成

ルートにアクセスしたときのVueコンポーネントをIndex.vue、magazineにアクセスしたときのVueコンポーネントをMagazine.vueとし、それぞれ作成します。
とりあえず簡単な文章を入れているだけです。

 

main.jsに設定の追記

Vue Routerはインストールしただけでは当然使えないので、main.jsに設定を追記します。

ルーティングの設定について簡単に解説します。

mode

デフォルトでは、設定したパスにアクセスするとURLに#(ハッシュ)が含まれてしまいます。
historyと設定することによって、URLから#を除くことができます。
ただ実際のプロジェクトでhistoryモードを使うにはサーバー側の設定が必要です。
詳しくはこちらを参照してください(私はサーバー側の知見がないのでこのへんもゆくゆくは知りたいですね! )

path

パスの設定です。
:からはじまるものはパラメータで、可変URLをマッチングするために使います。
今回は:volume部分に号数の数字が入る想定でパラメータにしています。

name

ルートに名前をつけます。
ナビゲーションの作成などに使うことができます。

component

path部分にアクセスしたときに表示するコンポーネントを設定します。
この場合だと/(ルート)にアクセスしたときはIndex.vue、magazine/:volume/にアクセスしたときはMagazine.vueが表示されます。
 

ルートコンポーネントに表示部分の追記

ルートコンポーネント(この場合なら全ての親コンポーネントにあたるApp.vue)に、表示部分を追記します。
(App.vueにはもともとvue-cliでプロジェクトを作成した際にすでに色々書いてありましたが、今回はわかりやすいように余計な記述を消しています。)

<router-view />と記述することによって、パスと一致したコンポーネントがこの部分に表示されるようになります!
最初のうちは書き忘れてなんか表示されないんだけど…?とやっていたりするので書き忘れないようにしましょう。(実体験)
 

実際にアクセスしてみる

上記が終わったら、前回と同じように

でローカルサーバーを立ち上げてhttp://localhost:8080/にアクセスします。

FireShot Capture 018 - my-project - localhost

このような表示になったら成功です! ちゃんとルートにアクセスした際にIndex.vueが表示されました。
 
次はhttp://localhost:8080/magazine/21にアクセスします。
21部分は上記で説明したとおり可変パラメータにしているので、別の数字でも同じ表示になります。
 

FireShot Capture 019 - my-project - localhost

Magazine.vueが表示されました!
これでVue Routerを使うことによって、ルーティングが機能してコンポーネントの表示が切り替わることを確認できました。
 

まとめ

今回はどういう経緯でVue Routerに触れることになったかの話とVue Router導入編でした。
Part.3では実際にvolumeに対応した内容を表示することをやりたいと思います。


2019年08月29日

iida

フロント初心者がVue.jsを勉強する part.1

はじめに

はじめまして、飯田です。
フリューにはフロントチーム設立と同時に2018年6月に入社しました。
主にピクトリンクのフロント面を触っていて、現在はVue.jsを勉強しています。
Vue.jsは「わかりやすい」「フロント初学者に最適」などと言われてはいますが、今までアニメーションをつけるためにふんわりjQueryを書いていた程度の私には敷居が高く、難しく感じました。
そんな自分がどのような流れでVue.jsというものを学んでいるのかを少しずつ書いていこうと思います。

 

最初にやったこと

公式ドキュメントに目を通す

https://jp.vuejs.org/v2/guide/index.html
Vueは公式ドキュメントが日本語化されているのでありがたいなあ、ととりあえず読んでみる…も、自分の知識が足りず、説明に当たり前のように出てくるカタカナの開発用語やプログラミング用語が分からず、コードを見てなにができるのかなんとなく分かっても文章自体はあまり理解できませんでした。
ベースの知識があまりない状態で新しい技術を習得しようとするときのあるあるなのかもしれません。
正直挫折しそうになってしまったので書籍に頼ることにしました。

書籍を読む

基礎から学ぶ Vue.js
通称「猫本」
公式ドキュメントの内容をもっとわかりやすく書いてくれている本です。
7章以降は飛ばしました。
  
動かして学ぶ!Vue.js開発入門
こちらはVue.jsの基礎中の基礎がかなり噛み砕いて説明されておりわかりやすかったです。
説明にも特に難しい用語が使われていないので最後までスラスラ読めました。
個人的に最初から難しい説明を読むのが嫌ならこの本から入ると良いと思います。
  
Vue.js入門 基礎から実践アプリケーション開発まで
全体を読むというよりは、わからない部分や知りたい部分のみ都度目を通しています。
  
コンポーネントやVue Router、Vuexについての説明は最初は読まずに飛ばしました。
また、学習過程でわからないことが出てきた際に公式ドキュメントや上述の本の必要な部分を都度読み返しています。
 

とりあえず簡単なものを書いてみる

まずは公式ドキュメントや本を見ながら、基礎的なものを手を動かして書いていました。
私はWebページでVue.jsをどのように使えば良いのかうまくイメージができなかったので、自分が今まで書いたjQueryをVue.jsで置き換えるとどうなるかを試したりもしていました。
 

  • dataを作ってそのまま表示してみる
  • v-modelを使ってフォームに入力した内容を表示してみる
  • v-ifを使って要素の出しわけをする
  • v-onを使ってボタンをクリックしたときにイベントを発火させてみる
  • v-forを使ってリストの内容を繰り返してみる

 
そして上記がなんとなく理解できたら、実際の業務で使えそうなものを書いて動かしていました。
 

  • 文字数をカウントするフォーム(v-model)
  • 押したボタンによって内容を切り替える(v-on + v-if)
  • Todoリスト(色々なものの組み合わせ。書籍やあらゆる記事で解説されているので基礎の応用かなと思っている)

 
などなど
 

Vue Componentについて

プロジェクト上で練習用ブランチを切って過去に作ったキャンペーンページを練習でVue.jsに直していたのですが、Pull Requestで「コンポーネントに分けた方がいいよ」とレビューをいただきました。
すっ飛ばしていた公式ドキュメントや書籍のVue Componentについての説明をやっとここで読みました。
ボタンなどの何度も使うような部品をコンポーネントとして定義し、都度呼び出すことによって簡単に使い回せるようにするイメージです。
 
公式ドキュメント
https://jp.vuejs.org/v2/guide/components.html
 

表示

FireShot Capture 015 - my-project - localhost
作成したHogeComponent<hoge-component></hoge-component>部分で表示させています。
コンポーネント名をケバブケースで記述することによって呼び出すことが可能です。

慣れないうちは割とやりがちな注意点

ちゃんと表示されないんだけど!?というときに確認すること。

  • Vue Componentを使う際はdataをfunctionにする / returnを記述する
  • スペルミスをしていないか(プロパティ名、コンポーネント名、あらゆる場所でよくやりがち)
  • Vueインスタンス内のcomponents:の中にコンポーネントの設定を記述するのを忘れていないか

 

vue-cliを使ってみる

※あらかじめnode.jsとnpmのインストールが必要です。この記事では省略します。
ある程度の規模のプロジェクトでVue.jsの開発環境を一から構築するのは大変です。
Vue.jsのアプリケーション開発に必要な環境や設定を色々と整えてくれて、雛形ファイルも用意してくれるのがvue-cliというなんかすごいやつです。
 
試しにローカル環境で使ってみます。

インストール

プロジェクトの作成

my-project部分はプロジェクト名にあたるのでお好きな名前で。
色々聞かれますがとりあえずEnter連打で良いと思います。

ローカルサーバーの起動

作成したプロジェクトのディレクトリに移動し、ローカルサーバーを起動します。
FireShot Capture 017 - my-project - localhost
http://localhost:8080/ にアクセスし、上記の画面が出れば起動成功です。
  
初めて使うときはこちらの記事を参考にさせていただきました。
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
 

ファイル構造について

vue-cliを使う際は、単にHTMLファイルにVue.jsを書いていたときとは違う点が多々あります。
先ほど作成したプロジェクトのディレクトリを開き、主要なファイルを見てみます。

どのVueファイルの内容をindex.htmlのどの要素内に表示させるかを設定しています。
上記では#appという要素にApp.vueの内容を表示させています。

Vueファイルにはtemplatescriptstyleがまとめて書かれています。
これを単一ファイルコンポーネントと呼びます。
 

単一ファイルコンポーネントのメリット

Vue Componentを独立した一ファイルにすることができます。
vue-cliで作成したプロジェクト内のVueファイルは既にこの形になっています。
 
公式ドキュメント(説明が難しい…)
https://jp.vuejs.org/v2/guide/single-file-components.html
 

単一ファイルコンポーネントの利点は、一ファイルにtemplatescriptstyleをまとめて記述することができる点です。
先ほどのsrc/App.vueをもう一度見てみます。

template、script、styleがまとめて書かれているのがわかると思います!

<template>タグ直下は必ずひとつのブロック要素で囲みます。(エラーになります)
ここでHelloWorldという名前のコンポーネントを表示しています。
msg=部分についてはApp.vueからHelloWorldコンポーネントに表示させたい文字列を渡しているのですが、次のセクションで説明します!

name:部分は省略可能ですが、書いた方が良いと思います。
他の単一ファイルコンポーネントを読み込むときは、<script>タグ内でファイルをimportします(変数名 + ファイルパス)
components:内に読み込んだコンポーネントの変数名を記述するのも忘れないようにします。

デフォルト言語はCSSですが、lang属性を使用することによって他の言語をサポートしてくれます(普段書き慣れているSCSSなどで書ける)
scopedを付けることによって、記述したスタイルをそのコンポーネントにのみ適用させることができます。
その場合は下記のように書くことができます。

 

コンポーネント同士のデータの受け渡し

先ほど触れた通り、App.vuetemplate部分で読み込んでいたコンポーネントHelloWorld部分にmsg=ではじまる謎の記述がありました。

ここで、HelloWorld.vueという単一ファイルコンポーネントを読み込んでいるApp.vue親コンポーネント、読まれているファイルであるHelloWorld.vue子コンポーネントと呼びます。
 
親コンポーネント側(App.vue)のこの部分で子コンポーネント側(HelloWorld.vue)のmsg部分にWelcome to Your Vue.js Appという文字列を渡しています。

ここで、コンポーネントとして読み込んでいるsrc/components/HelloWorld.vueを見てみます。

このとき、子コンポーネントに親コンポーネント側から受け取りたいデータについて記述する必要があります。
このときに使うのがpropsで、script内に以下のように書きます。

propsを記述することで親コンポーネントから文字列を受け取ることができました。
template内の{{ msg }}部分で受け取った文字列が表示されています。
  
ここまでを表示で確認すると以下のような構造になります。
FireShot-Capture-017---my-project---localhost
 

注意点

単一ファイルコンポーネントを作成するときの命名規則

パスカルケースかケバブケースに統一するべきとのことです。
https://bit.ly/2HsGJDO
  
ちなみにピクトリンクのフロントチームではファイル名をパスカルケースに統一しています(公式ガイドに合わせています)

 

同じ階層にあるファイルのパス指定には./必須

vue-cliでファイルをimportする際、同じ階層のファイルのパス指定に./を含めないとエラーになってしまいます。

 

長くなってしまいましたが、Part.1ではVue.jsを学ぶに当たって最初に何をしたか、Vue Component、vue-cli、単一ファイルコンポーネント、propsについて説明してみました。
Part.2では実際にプロジェクト上のコンテンツをVue.jsに直した話を書いていこうと思います。


2018年09月25日

furusin

フリュー主催の勉強会(京都Devかふぇ#3)を開催しました!

こんにちは。ピクトリンク事業部の古川です。

前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。

前回のレポートはこちらから

京都Devかふぇ#3 〜フロントエンド〜

今回も合計で30名以上とたくさんの方々にご参加頂きました!

これまで開催した2回はどちらもモバイルに特化した内容でしたが、今回は初のフロントエンドでしたので、はじめましての方が多かったです!

勉強会の様子

トップバッターは弊社の佐藤Johnより、「Vue.jsを使うようになるまで」を発表しました。

IMG_20180914_190946

Vue.jsを導入するまでに至った経緯から、Vue.jsのいいところを纏めて発表しました。

二人目は @kobashinG 様より、「Puppeteerのお話」でした。

IMG_20180914_192804

Googleが出しているHeadless Chrome Node APIのライブラリで、

どんなモチベーションで触り始めたか、簡単にどんなことができるかを発表してくださりました。

 

3人目は@jiyuujinlab 様より、「あえてNuxtを使わずプロフィールサイトを作った話」でした。

IMG_20180914_194229

プロフィールサイトを作ってみた実体験を基に、デモを交えてVue.jsの良いところを発表してくださりました。

人生初の登壇だったとのことで、そのような場を提供することができて運営として嬉しい限りです!

 

LT大会

LT大会では@RyosukeIzumi 様、るい 様、@funnelbit 様、そして私の4人が登壇しました。

IMG_20180914_200814

IMG_20180914_201327

IMG_20180914_202051

IMG_20180914_202544

懇親会の様子

一度休憩を挟み、LT大会を終えて、懇親会です!

今回は北海道を応援する意味でも、いつものケータリング(カツサンドが好評)に加え、サッポロビールをご提供しました!

IMG_20180914_200603

 

 

まとめ

参加した皆さんもたくさんTwitterでツイートしてくださり、とても盛り上がった勉強会となりました!

懇親会でお話した方から「とても楽しいからまたやってほしい!」というお声を頂きましたので、

是非ともまた開催したいと思います!


2017年06月7日

Vue.jsを使ってみよう その3

こんばんは、フリューのジョンです。Vue.jsを社内に広める活動を頑張ってます。

前回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をしました。
今回はVue.jsのHTML側(v-bind、v-model、v-on)の話をしていきたいと思います。

今回もVue.jsはバージョン2.3.0を使用します。

v-bindやv-onなどの属性を、Vue.jsでは、それぞれを「ディレクティブ」と呼んでいます。

v-bindディレクティブ

タグ要素のattributeにdataプロパティやmethodsプロパティの結果を当てはめる(バインドする)事ができます。

classやstyleの属性については、少し特殊な書き方で値をバインドすることができます。

v-modelディレクティブ

v-bindでは属性値に値を入れることができましたが、v-bindでは入れるだけではなく、監視して更新することができます。
更新が走る属性値、つまり、inputやtextareaタグのvalue属性につけることでその値を監視することができます。

selectに対しても記述することができます。この際、初期値のvalueがselectedになることを覚えておきましょう。

v-onディレクティブ

属性に、eventに対する振る舞いを指定することができます

記述した関数に引数を渡すことも可能です。

click以外にもkeyupなども使うことができます。ただし、v-modelとの競合に気をつけてください。

補足

ここまでのディレクティブを使用することで、画像を一定時間ごとに切り替えるスライドショーを作ることができます。
また、v-modelとv-onを使い、画像を動的に追加するなどと行った処理を追加するなどができます。

まとめ

v-bind、v-on、v-modelで、データバインディングについて、大まかな説明が終わりました。

これにより、簡単なアプリケーションは作れるようになりました。

次回は、より複雑なアプリケーションを作成するためにv-ifなどのディレクティブについてお話したいと思います。

ありがとうございました。


2017年05月11日

Vue.jsを使ってみよう その2

こんばんは、フリューのジョンです。最近Vue.jsを理解しようとVue.jsのソースコードリーディングをしています。

前回はVue.jsのかんたんな使い方とjQueryとの比較、などをお話しました。
今回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をします。

Vue.jsのバージョンは2.3.0です。

elプロパティ

elプロパティはString型、または、HTML Elementである必要があります。
String型で与えた場合、document.querySelectorで存在した要素を使いますので、HTML Elementを与える必要はあまり無いと思われます。

コンパイル対象のルート要素に対して設定します。
コンパイルとは、データのバインディング設定などを行うフェーズです。
Vue.jsではルート要素以下の要素を網羅してHTMLを再構築しています。

dataプロパティ

dataプロパティはObject型、または、Object型を返すFunction型である必要があります。
後で説明するコンポーネントを使う場合、dataプロパティはFunction型でなければいけないので、常にFunction型を返すようにしておくほうが妥当だと思われます。

dataプロパティの値にはインスタンスからアクセスすることができます。また、HTML側からは直接アクセスすることが可能です。
さらに、Vue.jsはこのObject型に記述されたプロパティの変更を感知することができます。感知することで画面側の再描画が走ります。

このようにdataプロパティが返すObject型をいじると、再描画されているのがわかります。これは、Vue.jsがプロパティにsetterとgetterをつけており、その中で変更を検知しているためです。
しかし、配列の場合は少し勝手が違います。配列の中身をいじっても更新はされません。

もしこのような場合があれば次のように置き換えます。

vm.messages[0] = ‘ほげ’ → Vue.set(vm.messages, 0, ‘ほげ’)

またはspliceメソッドを用いてやります(spliceメソッドは再描画の検知ができます)

vm.messages[0] = ‘ほげ’ → vm.messages.splice(0, 1, ‘ほげ’)

(https://jp.vuejs.org/v2/guide/list.html#注意事項)

methodsプロパティ

methodsプロパティはプロパティがFunction型のObject型である必要があります。
methodsの各関数のthisはインスタンスがバインドされていますので、アロー関数を使わないようにしたほうが良いと思われます。

これらの関数にはdataプロパティと同じようにアクセスすることができます。

また、結果を返す関数も記述ができ、内部で使用しているプロパティが変更されると再描画されます。
しかし、この書き方は推奨されていません。全てのmethodsが自分が参照していないプロパティが変更されても、実行をしてしまうためです。

この問題を解消したい場合はcomputedプロパティを使いましょう。computedプロパティは後々お話します。

まとめ

Vue.jsの基本のプロパティの紹介とその使い方をご紹介しました。

次回は、HTML側について詳しく紹介したいと思います。

ありがとうございました。