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年10月18日

MavenでNode.jsをインストールしてwebpackを起動しよう

こんにちは。フリューのジョンです。

最近はプロジェクトで使用できたgulpやwebpackについて勉強しています。

その関連ではありますが、今回はMavenプロジェクトでwebpackを起動するということをやりたいと思います。

Mavenプロジェクトでwebpackを使えるようにする

webpackを使うためには、npmが必要です。そして、npmを使うためにはNode.jsをインストールする必要があります。
そのため、各自Node.jsをインストールして・・・となると、バージョン違いが発生したり・・・環境設定から・・・と、とても大変です。

そのために、frontend maven pluginをつかいます。https://github.com/eirslett/frontend-maven-plugin
このライブラリでは Node.jsのインストールや npm install、webpackの実行ができます。

pom.xmlにpluginを登録します。

これだけです。そして、

と叩くとNode.jsがインストールされます。

Node.jsやnpmのインストールはMavenのsetting.xmlを見てproxyを通してくれるのでとても助かります!

しかし、おそらく、プロジェクト直下にpackage.jsonが存在しないという以下のようなwarningが出てくると思います。

そのため、インストールされたNode.jsのnpmを利用してpackage.jsonを作成しましょう。
helper scriptが用意されておりますので、こちらのnpmファイルかnpm.batファイルをプロジェクト直下に配置します。

https://github.com/eirslett/frontend-maven-plugin/tree/master/frontend-maven-plugin/src/it/example%20project/helper-scripts

そして、プロジェクト直下にて以下コマンドを叩きます。

色々聞かれると思いますが、適当で良いです(Githubのレポジトリなどの情報のためです)。終わるとpackage.jsonが作成されています。

次にMavenからwebpackを利用するために、webpackをinstallします。

終わると、package.jsonに記述がされていると思います。

次にwebpackを使うための記述を記載します。

こちらはお使いのプロジェクトに合わせて適当に記述してください

以上で設定は終わりです。先ほどのコマンドをもう一度叩いてみてください。

index.jsなどきちんと用意されていればbundle.jsというファイルが作成されていると思います。

まとめ

Mavenからwebpackを利用するというのでお伝えしました。弊社ではwebpackの実施をprofileにしており、maven-war-pluginのlifecycleに上手く載せるようにしています。

webpackだけではなく、npm タスクや gulpも使用できるため、タスクを実行することもできます。

最後に

弊社ではVue.jsやwebpackなどフロント周りで楽しみたいエンジニアを募集してます!!

詳しくはこちら


2017年07月24日

Spring Securityを使ったAjax通信について

こんにちは。フリューのジョンです。

最近はVue.jsがあればテンプレートエンジンなんていらないと思いながらThymeleafを触っています。

さて、今回はSpring Securityを使ったAjax通信についてハマったのでそれの解消方法について書かせていただきます。

具体的には、Spring Securityの機能の一つである、クロスサイトスクリプティング防止機能でハマりました。

クロスサイトスクリプティングの説明については、今回省きます。他サイトを参照してください。

概要

環境は以下のとおりです。

spring-boot 1.5.3.RELEASE
spring-boot-starter-security 1.5.3.RELEASE
Thymeleaf 3.0.6.RELEASE

結論から言えば、Spring Securityを導入すると、単純なPOSTアクセスをすることができなくなります。
理由としては、認可した場所からのリクエストであることを検証するためにトークンが必要になるためです。その為、これを解消するには以下の方法があります。

  • Formにトークンを付ける。
  • Cookieにトークンをつけて、リクエストヘッダにトークンをつけて送信する。
  • GETで対処する  ← ダメゼッタイ、ユルサナイ

上手くいかない例

まずうまくいかない、例を見てみましょう。

この状態でボタンを叩くと以下のような画面になります。

spring-security-postが上手くいかない例

Formにトークンを付ける

これはSpring Security+Thymeleafを導入すると簡単に対応できます。

具体的にはFormのaction属性をThymeleafのものにします。

Formタグを見てみると自動でinput[type=’hidden’]が追加されているのがわかると思います。

spring-security-form送信(上手くいく例

Ajaxにする場合、このinput[name=’_csrf’]の値をJavaScriptで取得すれば良いのです。しかし、この方法はFormタグがなければ成り立ちません。

FormがないAjaxのpost通信をするためには、以下の方法があります。

Cookieにトークンをつけて、リクエストヘッダにトークンをつけて送信する

Spring Securityでは、Cookieにトークンをつけることができます。そのためには、CookieCsrfTokenRepositoryを使用します。

withHttpOnlyFalseとしているのは、HTTPでもCookieにトークンをつけてもらうためです(デフォルトはHTTPSだけにしかCookieは付いてきません)。リクエストを見てみると、以下のようにXSRF-TOKENという名前のCookieがついているのがわかります。

spring-security-cookieが付いている

このCookieの値をJavaScriptで読み込み、リクエストヘッダにX-XSRF-TOKENをつけます。

これによりAjax通信が可能になります。しかし、いちいちCookieをとってリクエストヘッダに渡すのは面倒ですね。

Axiosというライブラリではそれを解消してくれます。内部でcookie()を見て、リクエストヘッダに追加してくれているのです。

非常に便利ですね。

Cookieの名前、ヘッダの名前は、デフォルトの値ですので、変更可能です。もちろんAxiosの方も変更が可能です。

AxiosのFormData通信

ちょっと話が変わりますが、Spring SecurityでのAjaxのlogin機能を実装しようとした時、すこし、ハマりましたので追記します。

Axiosで通信するとデフォルトはJsonでの通信になります。しかし、loginには、FormDataでパラメータを渡さなければいけません。

実装方法としては、以下のようにAxiosのpostメソッドの第3パラメータに変換メソッドを追加してあげます。

まとめ

Spring Securityを使ったajax通信は少しだけ工夫が必要です。
しかし、その設定は本当に少しだけです。
ここではSpring Securityの機能自体について触れませんでしたが、Spring Securityは本当に素晴らしいので、ぜひ使ってみてください。

そして、Ajax通信だけのために、jQueryを使うのは止めましょう。Axiosを使ってみましょう。(個人の感想です)

最後に

弊社は、Springを実践利用してバリバリコード書きたいエンジニア募集中です!

詳しくはこちら