Vueの単一ファイルコンポーネント+TypeScript+Hot Module Replacementの環境を作ってみた話

こんにちは!ファイ部の ひめの です。

この記事はTech KAYAC Advent Calendar 2017の15日目の記事です。

さてさて、今年JSフレームワークとして多くの注目を集めたVue.jsですが、v2.5のリリースで、TypeScriptのサポートが強化されました。 (2017/10/14)

このリリースを受けて、「今までTypeScriptを触ったこと無いけど、元々興味はあったので、これを機にVueを使ってTypeSriptを触ってみるか〜」と思いたち、気がつくとタイトルのようなオレオレスターターキットを作っていました。

今回はその成果物の紹介と、調べながらスターターキットを作っていった過程での気づきや所感を記そうと思います。

開発リポジトリ

以下が動作まで確認できたリポジトリです。

nyawach/vue-ts-hmr-starter

できること

  • WebpackでHot Module Replacement
  • TypeSciprt / Sass / Pug でVueの単一ファイルコンポーネントが書ける

Hot Module Replacementについては、以下の記事が参考になりました。 Hot Module Replacementの設定と仕組みを理解する

その他画像の圧縮や gulp-open でブラウザを開いたりなどしています。 全く関係ないけど gulp-sass-globpostcss-assets は便利です。

動作している様子

yarn で必要なnpm modulesをインストールした後、

yarn start でwebpack-dev-serverを起動すると、ブラウザが立ち上がります。

Index.vue をいじってCSSを変更・保存してみましょう。

f:id:beinto:20171214121554g:plain

ログがでて、文字がすぐに変わりました! 🙌

参考にしたリポジトリ

他にもたくさんありましたが、最終的には、以下2つのリポジトリの設定をつなぎ合わせたような感じになりました。

kayac-html5-starter

Pug/Sassファイルあたりはこちらがベースになっています。

kayac-html5-starter については、ファイ部リーダーである のびーさんの昨年の記事 を読んでいただければと思います。

TypeScript Vue Starter

webpack-dev-server / TypeScriptの設定は、こちらのレポジトリを参考にしました。 先日行われた Vue.js Tokyo v-meetup #6 でもお話があったようです。

実際に使ってみて

「リロードしないからstate保持したまま変更される!styleが即反映される!良い!」

Hot Module Replacementすらもつい最近知った技術ですが、一度試してみると良いと思います。Chromeのデバッグモードで編集してるのに近い感覚でコーディングできます。

また、TypeScriptをVS Codeで書いていると、nullになりうるオブジェクトをコンパイル前に指摘してくれたり、numberにstring入れようとしたらエラーハイライトしてくれたりと、Linter入れる前からかなり丁寧にコードを解析してくれます。ありがたや...。

環境をつくってみて

環境構築は正直かなりつまづきました。

単純に自分の知識不足もありますが、Vue.jsがTypeScriptサポートを強化したのがつい最近&2.0の公開もここ1-2年くらいの出来事だったので、ウェブ上にある文献がかなり少なかったというのもあります。

そんな中でも参考になったのは、前述のリポジトリと、公式ドキュメント、あとは vue-cli・Nuxt.jsなどでした。

公式のドキュメントの充実度

公式ドキュメントガイド に関しては言わずもがな、これを見ればフロントエンドエンジニアであればほとんど知りたいことが書いてあります。とてもありがたいです 🙏

vue-cli

vue-cli は、Vue.jsを使うプロジェクトの土台となる環境をCLIで一通りそろえるように出来るCLIツールです。 インストールした後に、以下のコマンドを打つだけで my-project フォルダに一式の設定ファイルが生成されます。便利。

vue init webpack my-project

最初作る時には、とりあえずHMRを試してみたかったので、これでサクッと環境を作って試しました。

Nuxt.js

Nuxt.jsは、「ユニバーサル Vue.js アプリケーション」というなんともすごそうなコンセプトのとおり、SPA開発で必要な要素を一通り利用出来るようになっているフレームワークです。 こちらも一旦cloneしてきて、設定ファイルの中身を覗いてたりいじってみたりしてました。

vue-cliやNuxt.jsの登場で、そもそもゼロから自分で設定ファイルを書いてみるという機会は格段に減ったと思います。

今後導入したいもの

Linter

tslint そういえば入ってない...ので、導入しておきたいです。

.tsファイルのHot Module Replacement

現状でもブラウザリロードさえすれば更新された状態にはなっているようなので、特に気になってはいない+ググっても事例が少ないのもあって、保留しています。

最後に

今回は vue-cli や Nuxt.js などを使わずに、自分で調べながらオレオレスターターキットを作成してみました。

案件やアプリの案件によっては、既存のテンプレートだけでは対応できない(あるいは用意されていない)場合が多々あると思います。 そのような自体に備えて予め設定ファイルに関する知識を有しておくと、何かと便利です。

一からでなくとも、既存のいわゆるスターターキットの設定ファイルを触ってみるのは、とても勉強になると思うので、是非挑戦してみてはいかがでしょうか!

カヤックでは、開発環境をもっとこだわりたい&効率化したいというエンジニアを募集してます!

次回は、'17新卒入社の serinuntius によるSlack関連の記事です!

Houdini超々入門

Houdini超々入門

クライアント事業部のフロントエンジニアのマチダです。
カヤックアドベントカレンダーの14日目の記事です。よろしくお願いします。

今回、紹介するのは、Side Effects Software社の3DCGソフト Houdini の超超入門記事となります。
込み入った話をしようと、openCVでFACE-Trackingをして、その情報をオブジェクトにAttributeして動かそうと思ったのですが、
pipe In Chopで躓いて、記事を書くまでに間に合いませんでした/(^o^)\

ですので、興味を持ってもらうことを目的した記事に変更、Houdiniを浅く解説します。
詳しく理解したい方は、本を読んだり、チュートリアルをやること強くおすすめします。

※HoudiniのバージョンはHoudini Apprentice 16.5.268を使用します。
※Houdiniは体験版を使用します。
※環境はMacです

3DCGソフトの紹介とHoudiniの紹介

sideFX社の3DCGソフトです。
あまり聞き慣れないソフトの名前だと思いますが、最近流行りの3DCGソフトです。
3DCGソフトといえば、autodesk MAYAや3DS MAX、MAXON CINEMA4Dが有名です。

autodesk MAYA,3DS MAX

autodesk MAYA,3DS MAXは、3DCG業界のデファクトスタンダード的な立ち位置で、
多くの専門学校などで導入されているため、かなり有名です。
有名ですが、僕は触ったこと無いので特に書くことないですね笑。2つの違いがわからんぞい。

・MAYA
社会人なら725,760円払えば3年間無料でCGを作ることができます。yabai!!
学生なら無償で3年間利用できる!

・3DS MAX
社会人なら725,760円払えば3年間無料でCGを作ることができます。お得!!
学生なら無償で3年間利用できる!

MAXON CINEMA4D

MAXON CINEMA4Dは、モーショングラフィックス界隈で有名になった3DCGソフトです。
mographという、「たくさんのオブジェクトを、効率よく動かす機能」や、
簡単に物理表現ができる機能が非常に便利で、
なんとなく動かしてもそれなりの画になるのが魅力です。 レンダリングも早く、ソフト自体ほとんど落ちないことが有名です。
バージョンと購入のスタイルが複数ありますが、broadcastのスタンドアロン版買っておけば問題ないかと思います。
用途に応じて選びましょう。

・CINEMA 4D Studio R19
社会人なら432,000円(税別)払えば一生無料でCGを作ることができます。C4D半端ないって!
下位モデル(CINEMA 4D Prime R19は100,000円(税別))
学生は無償です!

Side Effects Software Houdini

Side Effects Software Houdiniは、ソフトウェア自体は結構昔からあり、
ハリウッド映画やディズニー映画ではよく使われています。
得意分野としては、パーティクル(煙など)や流体表現などのシミュレーション系や、エフェクト系を得意としています。
最近ではゲーム内のエフェクトアセット作成や、プリレンダ映像のアート表現などに使われています。
日本国内で流行りっており、Houdiniを教える専門学校や、コミュニティも増えてきています。

・Houdini FX
社会人なら517,500円払えば一生無料でCGを作ることができます。すご~い!

・Houdini Education
学生は9200円(税別)です。飲み会2回ぐらい我慢すれば1年間無料で学習できます!
えっ?払いたくない?じゃあ制限付きのHoudini Apprenticeで我慢しましょう。うえ~い!
https://www.sidefx.com/ja/products/Houdini-education/

・Houdini indei
制限付き商用ライセンスです。
売上1000万円以下の企業・営利団体および契約事業体企業・営利団体および契約事業体は1年間2万円で商用利用できます。OMG!!
http://www.sidefx.jp/index.php?option=com_content&view=article&id=165
いろいろややこしい部分はこちらで確認してください
https://www.sidefx.com/ja/faq/Houdini-indie-faq/

個人的な見解

今回Houdiniの紹介ですが、個人的には、CGを学び始めるなら圧倒的にCINEMA4Dを推します。
理由としては、まず安い。そして軽い。なによりもAfterEffectsとの連携ですね。
あとはCineware for IllustratorとかCV-ArtSmartとかのPluginですね。なんでもできます。
それにAfterEffectsとの連携はC4Dだけです。いつかAdobeに吸収されるんじゃないと思ってしまうぐらいすごい。ていうかAfterEffectsにCINEMA4DLiteが付属されてるので買う前に1回触って見てください。

CGを始めるとフォトリアルとか建築とか人物モデリング、物理シュミレーションとかやりたいことたくさん出てくると思いますが、まずは操作の基本からやっていきましょう。
学習してると将来的に、
x-particlesでparticleを飛ばしたとか
RealFlowでリアルな流体表現とか
v-rayってきれいとか
octaneはきれいで軽いとか
Redshiftは流行りとか
Maxwell…とか
思い始めます。たぶん。

Houdiniの特徴

Houdiniの特徴としては下記の4つがあります。

・Procedural workflow

プロシージャルな制作とは、「数式や処理を組み合わせ、何らかの操作を行うこと」をさします。
つまり計算のプログラムを記述し、オブジェクトの位置や形、色を操作することです。
逆に非プロシージャルな制作とは、「形状そのものを制作していく」のことを指します。
つまりポリゴンを選択して押し出したり、切り抜いたり、オブジェクト自体を破壊(元の形に戻すのが面倒)していく制作スタイルです。

プロシージャル制作の特徴は
・形、動きはアルゴリズム的に記述
・ノード構築のプランニング
・非破壊的なプロセス
・数学力(ここ重要)
になります。

・Node-based workflow

皆さん!node.jsのことじゃないですよ!
「処理→受け渡し」の流れのことです。
Houdini Operatorという、入力と出力を持つOperatorをくっつけていくことで、
最下層のOperatorまで逐次的に処理→受け渡しの流れを一方通行で行います。
めっちゃ適当ですが料理で説明するわかりやすいと思います。
最終的に皿に出力されるまでの流れを考えます。
f:id:machida-yosuke:20171213114617p:plain

・Houdini Operatorについて
https://www.sidefx.com/docs/hdk/_h_d_k__op_basics.html

・VEX language

Houdiniには独自言語にVEXというものがあります。
VEXは並列実行できるスクリプト (SIMD、マルチスレッド対応言語)。 600以上の関数があり、大量のデータに対する処理スピードがヤバイです。
また独自のCustom Operator作成ができます。
・VEXについて
https://www.sidefx.com/docs/hdk/_h_d_k__vex_op.html

Houdiniで使用できる言語はVEX以外に
・H Script
operatorのパラメーターに直接書ける
シングルスレッド言語

・Python
主にシェルの役割。処理の自動化など
H scriptの代わりもできる

・C++
Houdini SDKを使用してPlugin作成

・Houdini Engine

Houdini ではデジタルアセットの作成ができ、このアセットを他のソフトに持っていくことができます。
個人的にはアンリアルエンジンと、かなり相性がいいじゃないかと思っています。
https://www.sidefx.com/ja/products/Houdini-engine/

・夢が広がるHoudini Engine紹介記事
『バトルフィールド1』のエフェクトはこうして作られた Houdiniが可能にするモダンなワークフロー
https://spark.adobe.com/page/k6aQnnfPka8Uq/

Horizon Zero Dawn | Rivers and Cables
https://www.sidefx.com/community/horizon-zero-dawn-guerrilla-games/

Killzone: Shadowfall
http://sidefx.jp/index.php?option=com_content&view=article&id=146:killzone-shadowfall&catid=10&Itemid=435#sthash.hyVfsc48.44qkQE5B.dpbs

Houdiniのインストール

まずはソフトのダウンロードですね
http://sidefx.jp/
ナビの「ダウンロード」から「Houdini Apprenticeについて」をクリック
             ↓
「FREE Houdini APPRENTICEダウンロード」をクリック
             ↓
個人情報を入力後、ログインしてdmgファイルを手に入れましょう
カスタムインストールはデフォルトのままでおkです。
Houdini EngineはApprenticeで使うことはできません。
             ↓
インストール完了後、SpotlightでHoudini Apprenticeと入力して起動。
             ↓
ライセンス選択画面が出てくるので、Houdini Apprentice licenseを選択してください
             ↓
起動するとUIがめっちゃ小さいと思います。
f:id:machida-yosuke:20171213114622p:plain
なのでEdit → Performance → GeneralUserInterfaceのGlobal UI SizeをHigh DPIに変更
             ↓
Houdini Apprentice再起動でUIの大きさがかわるはずです。

これで下準備はおわりです。
ハローフーディーニワールドです。

Houdini Apprentice非商用利用となっています。
http://www.sidefx.jp/index.php?option=com_content&view=article&id=25

公式ドキュメント
https://www.sidefx.com/ja/docs/

画面に球体を出そう

習うより慣れろのクリエイティブの世界、とりあえず画面になにか出しましょう。
Houdiniを起動し、ここにカーソルを持ってきてtabキーを押すとオペレーターの一覧が出てきます。
ここの名称をネットワークビューといいます
f:id:machida-yosuke:20171213114636p:plain
キーボードで「geometry」入力するとこのような入力した文字に応じてオペレーターをソートしてます。
f:id:machida-yosuke:20171213114642p:plain
エンターキーを押すと画面がかわります。
f:id:machida-yosuke:20171213114614p:plain
geometryオペレーターをダブルクリックすることで階層を移動します。Uキーを押すと階層を1つ戻すことができます。
なかに入ると「file1」というオペレーターがあるので削除しましょう。さよなら
ネットワークビューにカーソルを持っていき、tabキーを入力、「sphere」と入力し、オペレーター作成すると、画面に丸球体が現れます。
f:id:machida-yosuke:20171213114702p:plain
sphereオペレーターの右側が青くなってると思います。これはディスプレイフラグで青くなってるオペレーターがプレビュー上に反映されます。
つぎにネットワークビューの上に、パラメーターをいじるパネルがあるので、PrimitiveTypeをPolygonに変更しましょう。
またネットワークビューの左にツールバーがあるので、合計9つ選択してください。
f:id:machida-yosuke:20171213114646p:plain
f:id:machida-yosuke:20171213114650p:plain
シーンプレビュー画面がこのような感じになればおkです。
青い数字が、ポイント番号
赤い数字が、頂点番号
赤い線は、頂点の法線ベクトル
です。

ここに表示されているのは「ポイント」といわれるエレメントです。
houdiniはこのポイントを基本単位として、オペレーターで操作していきます。
このポインタや頂点のデータを知るには、シーンプレビューの上にあるタブの「Geometry Spreadsheets」から一覧表示されたポイントを確認できます。
f:id:machida-yosuke:20171213114708p:plain

それでは、sphereに他のオペレーターをつなぎましょう。ネットワークビューにカーソルを持っていき、tabキーを入力、「mountain」と入力し、オペレーター作成します。
f:id:machida-yosuke:20171213114629p:plain

mountainオペレーター作成しましたが、sphereオペレーターと繋がってないので警告が出ています。
sphereオペレーターの下にある丸を、ドラッグ・アンド・ドロップでmountainオペレーターの上にある丸に持っていきます。 つなげたら、mountainオペレーターの右側にあるディスプレイフラグをクリックして青くしましょう。
f:id:machida-yosuke:20171213114632p:plain
mountainオペレーターを選択して、パラメーターのHeightをいじると、sphereの形が変わると思います。
またGeometry SpreadsheetsをみながらHeightをいじるとポイントの位置情報(P[x],P[y],P[z])が変わってることがわかります。

これでオペレーターの作り方、つなげ方、プレビューの仕方がわかったとおもいます。
次はスクリプトを書いていきましょう。まずは「H Script」です。

・H Script
operatorのパラメーターに直接書ける
シングルスレッド言語

前に説明したとおり、operatorのパラメーターに直接書きましょう。
mountainオペレーターのHeightに

sin(@Time)*10

@Timeは再生時間を表しています。
適当な計算式をつっこみ、画面下の再生バーから再生してみましょう。

HScript global variables
http://www.sidefx.com/docs/houdini/network/expressions.html
f:id:machida-yosuke:20171213114624p:plain

計算式以外に他のオペレーターのパラメーターをpathで参照して連携させることもできます。

次はVEXを使いましょう。
VEXは並列実行できるスクリプトで、ポイントすべてを扱う処理を書くのに便利です。
それでは、sphereに色を付けてみましょう。

ネットワークビューにカーソルを持っていき、tabキーを入力、「pointwrangle」と入力し、pointwrangleオペレーター作成し、mountainオペレーターと繋げましょう。
f:id:machida-yosuke:20171213114656p:plain pointwrangleオペレーターを選択し、パラメーターのVEXpressionにコードを記述します。

@Cd = rand(@ptnum);

意味としては
Cd (Color diffuse) というアトリビュートが r, g, b の配列で各頂点に、ポイントの番号を基づいて乱数をセットします。

rand関数
http://www.sidefx.com/docs/houdini/expressions/rand.html
f:id:machida-yosuke:20171213114529p:plain
f:id:machida-yosuke:20171213114611p:plain

非常に簡単なVEXの記述でしたが、学習を進めていくうちにそんなこともできるんかいってなります。
下記にオススメチュートリアルを貼っておきますので、見てみてください。
以上Houdini超々入門でした。

モチベーションの上がるチュートリアル群と本

・まずは公式のチュートリアルですね
https://www.sidefx.com/ja/tutorials/?title=&user=SideFX&level=1

最初に作るものアルゴリズムを確認してから、Houdiniでの作成にはいるので、かなり優秀なtutorialです。これがやりたかった!がたくさんあります。
http://www.entagma.com/

日本人語のHoudini本もあります

理論と実践で学ぶHoudini -SOP&VEX編-

理論と実践で学ぶHoudini -SOP&VEX編-


Houdiniではじめる3Dビジュアルエフェクト (I・O BOOKS)

Houdiniではじめる3Dビジュアルエフェクト (I・O BOOKS)


Advent Calendar があるので見てみましょう。
Houdini Advent Calendar 2017 https://qiita.com/advent-calendar/2017/houdini

あとは、youtubeやvimeoで「Houdini tutorial」と検索しましょう。
個人ブログはあまりオススメしません。「ああ、こんなことできるだ」的な感じで参考だけにしましょう。

まとめ

昨今max msp、UnrealEngine、TouchDesignerのようなノードベースのソフトが流行っていますね。
やはり処理の流れがわかりやすいっていうのは、クリエイティブ活動に優しく、精神衛生上良いんだなと思いました。
ノードベースHTMLとかあったら楽しそうですね。

カヤックでは、無料ならとりあえず業務と関係なくてもソフトを触っちゃう人を募集しています!たぶん。

明日のアドベントカレンダーは、ひめちゃんさんによる多分vueの話です!
お楽しみに!!
チャンネルはそのまま!!