jQueryで時間が止まっている人がwebpackつかってVue.jsの単一コンポーネントを普通のjsにするところまで頑張ってみたよ
タイトルそのままです。
よくわかんないから避けて通ってたんですよね、ビルド。 ちょっともう色々限界を迎えてきたので(主にjavascriptのテスト。ブラウザで全関数通るように動かすとか無理ヤダ)、おばちゃん頑張ってみたよ。
ここ1,2週間、毎日ちょこちょこ進めていました。 今週とうとう.vueファイルのビルドに成功したので記録として残しておきます。 (先に去年から残してる最後の1回書けよ)
(完全に余談なんですが、仮面ライダービルドかっこ悪くないです?なんですかあのシャカシャカって。変身前のぴりぴりした雰囲気台無しじゃないです?しゃかしゃかってー)
環境
Windows10
まずは色々整える
1) Node.jsのインストール
2) 適当なフォルダを作成
3) コマンドプロンプトでさっき作ったフォルダに移動
phpstormさんだとProjectで該当フォルダ右クリックしてrun cmd shell すると、そこのフォルダにいる状態でプロンプトがでてくる。もしくはterminalを開くとプロジェクトのルートフォルダで開いてくれる。便利。
4) npm initする
適当にenter押せばOK。おわるとpackage.jsonが生成される
5) webpackをインストールする
npm install webpack --save-dev
素のjsをビルドしてみる
6) コンソールにHelloWorldするだけのjsファイルをつくる
console.log("hello")
7) ディレクトリはこんな感じにして
vueApp └dist └src └index.js
8) webpack.configはこんな感じにしてみよう
const path = require('path'); module.exports = { entry: { "index":'./src/index.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' } };
9) package.jsonはこんな感じ
{ "name": "vueapps", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", }, "author": "", "devDependencies": { "webpack": "^3.10.0" }, "dependencies": { } }
10) 実行したよ!distディレクトリのindex.jsになんか色々書かれてるよ!
ポイントはね、webpackにはフルパスで指定するとこですよ。パス通ってないから……。(ここで数日費やした模様)
vueファイルをビルドしてみる
さあ!ここからが本番ですよー!
さっきは必要無かったファイルを追加で インストールします。
1) npm install --save vue
2) npm install --save-dev vue-loader
3) webpack.configに以下を追加
module: { loaders:[ { test: /\.vue$/, loader: 'vue' }, //ここ気をつけて!!↓の6を読んでね!!! ] }
4) 大本のjsファイルを用意
import Vue from 'vue' import test from './component/test.vue' new Vue({ el: '#app', components: {test}, template:'<test></test>' });
5) vueファイルを用意
<template> <div> <h1>test</h1> {{message}} </div> </template> <script> export default { name: "test", data:function(){ return { message:"Hello Vue!" } }, } </script> <style scoped> </style>
6) ビルドだー! と思ったら、怒られました。
Module build failed: TypeError: this._init is not a function
これでまた数日止まりました(一日数十分ずつだからね)。検索しまくってわかったことは
Into Webpack 2 omitting word loader when initializing some loader is not allowed.So you have explicitly define full name of loader including -loader, such as babel-loader, vue-loader, file-loader etc...
つまり、
Webpack2からローダー名の省略は使えなくなったよ。-loader込みの正式名称で書いてね
だってさ。わかってしまえば何だよもうな話……。
↑を修正してビルドしてみると、色々足りないので入れろと言われました。↓参考。
- "css-loader"
- "vue-html-loader"
- "vue-loader"
- "vue-style-loader"
- "vue-template-compiler"
再度ビルドしたらexitが0で終了しーたよー!わーい!たーのしー!
最終的にこうなった
//package.json { "name": "vueapps", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" }, "author": "", "devDependencies": { "css-loader": "^0.28.9", "vue-html-loader": "^1.2.4", "vue-loader": "^14.1.1", "vue-style-loader": "^3.1.2", "vue-template-compiler": "^2.5.13", "webpack": "^3.10.0" }, "dependencies": { "vue": "^2.5.13" } }
//webpack.config.js const path = require('path'); module.exports = { entry: { "index":'./src/index.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { loaders:[ { test: /\.vue$/, loader: 'vue-loader' }, ] }, resolve: { extensions: ['.js', '.vue'], modules: [ "node_modules" ], alias: { // vue.js のビルドを指定する vue: 'vue/dist/vue.common.js' } }, };
さいごに
ふろんとえんどえんじにゃーのみなさんのつらみを垣間見ました……。色々群雄割拠しすぎだわ情報が数ヶ月単位で使えなくなるわなんなのこの世界……。
あとプロダクションビルドしようとするとminifyできないのなんでなん…。いやもうそこはphpstormさんのFile watcherに一旦任せて、おとなしくwebpack4待つけどさ。。。
あと、肝心要の自動テストにたどり着いていないのでこれから頑張ります。
予定とタスクと実績の管理と記録について試行錯誤中
まあ、社会人になってからこっちずっと試行錯誤中なんですが。
しばらくこれでやってみよっかなという形がおぼろげながら固まってきたのでまとめてみます。
三行まとめ
職種が職種なので予定もタスクも管理はぜんぶデジタル
todoist + GoogleCalendar + toggl (基本はブラウザ)
アナログは別のことに使うよ
今まで
ご多分に漏れずアナログからデジタルまでいろんな方法試してました。
手帳は毎年一冊買いますし、よさそうなサービスがあったら今でもさくっとアカウント作っちゃいます。
そんなこと続けていると、情報が分散→断片化→消失の憂き目に会うんですよね。 もっと言ってしまえば、更新たるくてメンテしなくなりメンテされないから開きもしなくなるという……。
まあ、そんなことを何年も何年も(今現在においても)繰り返しています。
流石に疲れてきたので、仕組みをルール化して少ない頭のリソースを少しでも他に振り分けるぞ!と今年は奮起したわけです。
大まかな説明
メインはブラウザ(Vivaldi)で開いた、todoistとtoggl です。
仕事中は常に開きっぱなし。togglのChrome拡張もいれてます。
todoist と GoogleCalendar の連携も有効にしています。
todoist
オンラインのシンプルなTodoリストです。 仕事のタスクも家のタスクもぜーんぶ一元化してます。しないと意味が無いのでがんばります。
タスクは一元化できれば、モノはなんでも良いと思います。
タスク管理で大事なのは「何でやるか」ではなくて、
- 個々のタスクの粒度を限界まで下げる
- 仕事プライベート限らずすべてを一元化する
の2つが何より大事だと思います。(今もってできてないので頑張ってる最中ですけど)
なんでもいい中で今のところこれを使っている理由は、単純な見た目や操作性が気持ちいいからです。 何が気持ちいいかっていうと基本的なことは全部キーボードで終わるんですよ。もうね、こういう仕事してるとね。マウスのために手を離したくないんですよ。
そういう理由なので、他に良いのがあったらそっちに乗り換えるかもしれないです。
GoogleCalendar
これは説明要らないですよね?
今はやっていないですが、主人との予定の共有に大活躍していました。
注:今は家族間の予定管理はTimeTreeにシフトしちゃいました。これはこれで便利。
共有をはずした+GoogleHomeさんを買った の2つが重なったので、もう予定管理にガッツリ使ってしまおうかと思い、todoistとの連携をいれました。
GoogleHomeさんにかならず朝「おはよう」と(天気とニュースのために)声をかけているのですが、そこに予定の読み上げが加わってくれました。嬉しい。
連携するとカレンダーで時間や日付をずらすとtodoistの時間や日付も移動してくれるのでありがたいです。
あとで再度書きますが、単純なリスト(todoist)になっている状態から予定(GoogleCalendar)にすることで、自分のキャパシティとか一日の流れのイメージとかつかみやすいです。
なにより次に何しようを考える余地がなくなるのがよいですよね!!
toggl
Toggl - Free Time Tracking Software
これはまぁ、不要な人には不要だと思います。
togglのchrome拡張を入れると、todoistのタスクにマウスオーバーするとタイマー起動できるようになるんですよ。
それとchrome拡張には簡単ではありますがポモドーロ機能もついているので、作業に集中するために使っています。(じゃないとすぐに生産性を下げる某所に入り浸っちゃいますからね!!!)
あと、個人の仕事のほうの見積もり精度がまだまだ甘いので、戒めのためにも計測しています。。。記録とっていると思えばあっちの作業したりこっちの生産性を下げたりしようと思えないですからね!
一日の流れ
朝
GoogleHomeさんに天気とニュースを聞きつつ、今日の時間が決まっている予定を聞きます(読み上げてくれるのは、時間が決まっている予定を直近3件までなので注意)。
朝の電車内でtodoistを確認し、漏れている予定があれば追加し今日でなくても良い予定があれば別日に移動します。
オフィスに着いて始業時間になる前までの間に、GoogleCalendarで各タスクを適当に営業時間内にぽこぽこ放り込んでいます。 するとtodoistのほうも入れた順番通りにならびます。
仕事中
vivaldi でtodoistとtogglをタイリングして常に開いておきます。 タイリング便利ですよーーー。
こんな感じです↓
todoistの今日のタスクを粛々と順番通りにこなしていきます。
※GoogleCalendarは別のソフト(Franz)に表示させています。
夜
帰る前に残りのタスクを明日以降に設定。
明日やる作業を明日の日付にします。
後は明日の朝まですべて忘れてしまいましょう。
今のところの不満
不満があるとすると、togglの拡張機能が拡張機能なので「ブラウザでしか連携できない」点、スマホのウィジェットの更新がラグいので、結局アプリを開かないと行けない点の2点が若干不満といえば不満。
togglなので不要になったら使わなければいいやと思いつつ、現在は基本はブラウザで使って、スマホでタイマーのON/OFFは避ける、移動中などパソコンでタイマーをいじらないときにスマホやスマートウォッチでタイマーを起動・終了させるようにしています。
デジタルにしない部分
デジタルはいろんなことを自動でやったりするには便利なんですが、
いかんせん一瞬で忘れちゃうんですよね。apacheのログのごとくほっとかれるんですよ、自分の中で。
なので忘れちゃいけないことはアナログで記録しようかと考え中。
読んだ本のタイトルとか、買ったものと金額とか、無意識に消費してるとこに意識を向けようかなと。 (手で記録を書くのが面倒で早くも挫折しそうです。うまく生活の一部にできるようにこっちも試行錯誤していきます)
あとはやっぱり手で文字や絵を書いたほうが考えがまとまるので、
思考過程を残したい類のものはノートに、
すぐに忘れていい内容や同僚に説明するときはヌーボードに書いています。
説明するときによく使うの↓
CANSAY nu board ヌーボード A4判 NGA403FN08
- 出版社/メーカー: 欧文印刷
- 発売日: 2015/04/01
- メディア: オフィス用品
- この商品を含むブログ (2件) を見る
自分用のメモによく使うの↓
欧文印刷 ノート CANSAY nu board A5 SHOTNOTEタイプ White & Grid Edition シルバー
- 出版社/メーカー: 欧文印刷
- 発売日: 2015/12/03
- メディア: オフィス用品
- この商品を含むブログを見る
あと、これも気になっています。
バタフライボード2 A4 ノート型ホワイトボード(0.5mm極細マーカーセット付)
- 出版社/メーカー: バタフライボード
- メディア: オフィス用品
- この商品を含むブログを見る
まとめ
これは今の私の状態にはこれが良さそう、というだけなので来年あたりには変わってそうな気がします。
だって、専業主婦してたころはこんなん運用できなかったもん。パソコンの前に始終張り付きっぱなしだからできるんですよ。 また主婦に戻ったり、デジタル機器が行きと帰りのスマホのみになったりしたら、アナログ手帳に戻るかもしれません。
ちなみに手帳で良いなーと思って使っていたのは↓の手帳
- 作者: 陰山英男
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2017/09/23
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
時間枠の広いバーティカルが好きです(紙面が白くても罪悪感がない←)
延々と続く試行錯誤ですが楽しんで行きたいと思います(小学生感)。
マウスオーバーしたまま数秒後になんらかの処理をしたい
あけてます。
今年もよろしくお願いいたします。
今月中にはvue.js+d3.jsをまとめたいのですが、できるかどうかは私のやる気にかかっています。
(この時点で無理な気がする……)
マウスオーバーN秒後に処理を発火させたい
まぁ、昔からよくありますよね、こういう実装。
今回の要件は以下。
- 要素マウスオーバーしたらサーバーと通信してメッセージ持ってきてツールチップとして表示したい。
- でもマウスオーバーする度に通信してらんない。→からN秒静止したら取ってきて。
- メッセージはすぐに変わっちゃうから都度取りたい(埋め込んでられない)。
- Vue.jsね(はーと)
- 一応タブレットとかスマホとかのタッチデバイスでも出るようにしてね。
問題点
N秒後に発火はいいんだけど、N秒以内にカーソル外れたら処理を中断しないといけない。
とりあえずgoogle先生に聞いてみる。
先生が教えてくれた結果
先生いろんな方法教えてくれたけど、結局使えたのは以下の方法。
// setTimeoutを宣言しておく(例は1秒後) let sampleTimer = setTImeout(function(){ // N秒後に処理したい内容 },1000); //マウスが離れた時に以下の処理 clearTimeout( sampleTimer );
Vue.jsのv-onには mouseover(マウスがのっかったときに発火)と mouseleave(マウスが離れたときに発火)があるので、これでいけそう。
と思ったら。
スコープ違うからmouseleaveのメソッド内でmouseoverで宣言したsetTimeoutをリセットできない(´・ω・`)
そんならグローバルにしてやんよ!
というわけでグローバルで宣言しちゃいました(てへ
知識がない故の苦肉の策なので真似しないほうが多分よいと思います。
// グローバル(Vueの範囲外)で中身空っぽで宣言 var sampleSetTimeout = setTimeout(function(){},1000); // 親Vueに通信するメソッドを用意(以下全体的にすごい略してるので適宜補ってください) let vue = new Vue({ data:{}, methods:{ getMessage:function(){ return new Promise(function(resolve,reject){ //なんかサーバーと通信してメッセージ持ってくる処理 }); }, }, }); // コンポーネントのメソッドにmouseover時とmouseleave時の処理をそれぞれ用意 Vue.component("sample-component",{ methods:{ mouseOn:function(){ // mouseover時に呼び出されるメソッド。 // mouseleaveの反応が悪いので、ここでもクリアしちゃう。 clearTimeout( sampleSetTimeout ); // なんかいろいろ必要なら処理する sampleSetTimeout = setTimeout(function(){ // ここでN秒後に発火させたい処理 vue.getMessage() .then(function(message){ //メッセージをツールチップで表示させる(略) }); },1000); }, mouseLeave:function(){ // mouseleave 時に呼び出されるメソッド clearTimeout( sampleSetTimeout ); sampleSetTimeout = setTimeout(function(){},1000); // あと、ツールチップを消す処理 }, });
ちなみに
マウスオーバーイベントって、タブレットだとロングタップで発火するんですね。知らんかった。。。
趣味の情報を収集する方法
今日の記事はmohikanz Advent Calendar 2017 の三日目です。
昨日はnawadaさんの情報収集についてでした
mohikanzとは、情報収集と雑談が好きなえんじにゃー(を中心としているようなしていないような多分してるんじゃないかなー?な)集団です。
日々、業務時間中に自分自身のみならず日本の生産性を下げる活動をしています(違)
詳しくはinductorさんの一日目の記事をご参考ください。
誰?
文系しすてむえんじにゃーで三児の母をしてます。
会社では社内SEしつつ、自社webシステムの運用保守開発しつつ、顧客のテクニカルサポートやらなんやらもしてます。
それとは別に、個人で開発も請け負ってます。ぎぶみー案件。大小問わずご相談はお気軽に。
趣味は読書を中心に多岐にわたっております。今日は私がどうやって情報収集しているかの話。(2日目と微妙にネタかぶりしてますが気にしないことにしました、まる)
概略
- 情報が信頼できる人を見つける
- 文明の利器に頼る
- アウトプットも大事
- 金を使えばある意味楽になる
- 最後に頼るのは自分の足
情報を信頼できる人を見つける
情報過多な現代、人間は良質な情報を得るための最良のフィルターです。欲しい情報をくれる人を積極的にフォローしましょう。
例1:作者さんとか広報用の公式アカウント
本や漫画なら作者さんのSNSアカウントは必須です。新刊情報流してくれたり読み切りの掲載情報流してくれたり、電書化のアナウンスもしてくれる上に、時々落書きまで流してくれます!神!!
中にはSNSやブログをやってない作者さんもいらっしゃいますので、そういう時は編集部アカウントとかが良いかと。好きなバンドも好きなアニメも、今は大概何かしら公式アカを作ってくれるのでフォローしておくと幸せ。
各趣味用のリストを作って見れる時に見てます。
ポイントは、
全部見ようと思わない!!!
情報疲れのもとです。本当に自分に必要な情報だったら(こんだけアンテナはってたら)どこかでまた巡り会えます。 全ての情報に目を通す必要は無いのです。一期一会を大切にしましょう。
例2:自分の好みを把握している親しい人
いつもお世話になっています、と声を大にして言いたい。
家族とか学生時代からの友人とか、社会人になってからの趣味友達とか。もう超貴重。
何かあったら向こうから「これ好きでしょー?」ってpushくるんですよ?!
なんなの、天使なの?
感謝を忘れずに日々を過ごすとともに、自分の好みはオープンにしていきましょう。
例3:好みが似ている人
仕事やらニュースやらでは極力ニュースソースは偏らないようにしていますが、趣味はがんがん偏らせる方向です! 趣味なんだから好きなものだけ得てたいじゃないですか。
好みが似てそうな人はガンガンフォローリストに入れます。
おっかけるうちに合わなくなったら即リストから消します。 そこで悩むことはありません。有用な情報なら他の人からも得られます。
で、そもそもどこで見つけるの?
そこはそれ、芋づる式に……。と言いたいところですが、そもそもそれをメンテナンスしている暇があったらほかの事してたいんですよ。 玉石混交な中から自分にとっての玉だけを選りすぐるとか、面倒だしそこそこ労力かかるし、やってらんねですよ。
なので最近は突っ込むだけ突っ込んでメンテしません。 脊椎反射で追加はするけど削除しません。
強いて言うならTwitterで言えば、「この人玉だな?」と思ったらそれ用のリストに入れなおします。それだけ。
でもまぁ。何もないところから作るならおすすめはコミュニティに参加することです。趣味のコミュニティなら玉の割合も高くなります。
えんじにゃーならおすすめはmohikanzですよ!平日毎日たーのしー!ですよ!
(宣伝終わり)
文明の利器に頼る
前段でも書きましたが、情報化社会も進みに進んで、今や「砂一粒」と呼ばれる時代(参考↓の本)です。
明日のプランニング 伝わらない時代の「伝わる」方法 (講談社現代新書)
- 作者: 佐藤尚之
- 出版社/メーカー: 講談社
- 発売日: 2015/05/20
- メディア: 新書
- この商品を含むブログ (3件) を見る
情報を仕入れるにも文明の利器をつかって自動化していきましょう。
TwitterとかのSNSも良いですが、情報が分散してしまいます。なので、発売情報とかは自動で情報が来るようにしてしまいましょう。 私が使っているサービスを紹介します。
ブックフォワード
mohikanzのcomicチャンネルで紹介してもらいました。超便利! 新刊お知らせしてほしいタイトルとか著者さんを登録しておくと、発売前に通知してくれます。また、購入管理とか既読管理もできますし、登録面倒な方向けにamazon連携もしてくれます。
読書が趣味な方にはおすすめ。
mohikan⇒はてブ・Qiita(とかQiitadonとか)
技術情報はmohikan本家でざっと見し、はてブやQiitaで拾い直す形です。飯の種でもあるので、私かなり時間をかけて目grepしてます。 まぁ、ここはちょっと筋がずれるのでサクリとおしまい。
チケットぴあ
舞台見に行くのが好きでして。観劇後のアンケートに住所書いて置くとDM届くようにはなるんですが、それだと劇団単位になっちゃうんですよね。はがき面倒だし、興味ない公演のときもあるしで……。
最近はチケットぴあで好きな役者さんと好きな脚本家を登録しておくとメールで公演情報が届くので、良さそうなのだけチェックしてます。 ファンクラブに入ればいいといえばいいんですけど、面倒だしお金かかるのものなぁというものぐさっぷりです……。
クラウドファンディングサイト
新しもの好きのガジェット好きなので、サイトもメールもまめに見てます。 indigogoとかMakuakeとか見てて本当に楽しい。
昨日もリターンで新しいスマートウォッチが届いたので、早速今日からつけてます。いえーい。たーのしー。
アウトプットも大事
趣味でも好みでもオープンに垂れ流していったほうが絶対に良いですよ。
同好の士は集まるものです。自分でも情報を発信すると、これもいいよ!と教えてくれる人がいます。(というか趣味人なんて布教したくてたまらないんだから、喜んで好みに合いそうなのを選んでくれるに違いない)
これが好き!はおおっぴらにしていくと、より良質なサジェスチョンが得られます。
金を使えばある意味楽になる
ま、これですよね。ファンクラブに入れば向こうから情報をくれるし、Amazonさんがサジェストしてくれるものとか、気になった本やガジェットはかたっぱしから買ってしまえば、感想とか良さとか情報収集する必要もないんですよね。百聞は一見にしかず。現物があればそれで解決。
おかねがなくなりますけどね!!!!
そして積読・積ゲーが貯まる一方で時間までなくなりますけどね!!!!
最後に頼るのは自分の目と手と足
発売日じゃない日にも本屋に行きます。まだ見ぬ良作を、書店員さんがおすすめしてくれているからです! それでみごとにハマった漫画は数知れず……。電子で買おうと思っていたのに我慢できずに紙で買うとかね、実物が目の前にあってまだ未配信とかだとね……。
本に限らず、楽器もパソコンも定期的に実店舗いって目で見たり棚の様子を見たりしてます。新しいのでないかなーとかいう目的もありますが、何よりその界隈の縮図が実店舗にはあります。売れ行き棚構成、全てが情報です。
一番信頼できる情報は自分の目と手と足で得た情報です。
できれば皆さんの得た情報をmohikanzで雑談がてら共有してもらえると幸いです。(念のためもう一回宣伝)
Vue.jsのコンポーネントをライトな範囲で使う
Vue.jsの情報をあさっていると「.vue」拡張子のファイルに行き着くんですよね。
これって公式様のいう「単一ファイルコンポーネント」なんですが、ビルド(ようはコンパイル)が必要なんですよ。
ライトな範囲で使う前提なので、ビルドツールはもちろん使用しません! そのため、今回は単一ファイルコンポーネントは利用できません。
じゃあ、せっかく行き着いた情報は意味がないのかというとそうでもなくて。(ビルドツールを使わないので)単一ファイルコンポーネントは使えませんが、コンポーネント自体は使えるのです。(ということがわかるまで結構四苦八苦しました……)
単一ファイルコンポーネントのソースを同じファイル内に書いてしまえば動きます。
(※注意!!! 本来のコンポーネントの概念には真っ向から逆らっています! 分かる人はちゃんとビルドツールを使ってください! そのほうが色々便利です!!!)
コンポーネントの使い方
公式を見ましょう(←
あと、こちらの記事が分かりやすかったです。(私はこの内上の2つしか使っていませんが……)
ライトな範囲ででもコンポーネントを使う利点
単一ファイルコンポーネントは再利用という面において非常に便利です。が、単一ファイルじゃないならコンポーネントを使う意味がないのかといわれると、もちろん利点はとってもあります。
- 同ページ内で同種の要素を使いまわせる。
- ネストしがちなHTMLをすっきり簡略化。
- スコープを切り分けることでメインインスタンスを圧縮。
同種の要素を使いまわせる
振る舞いはほぼ同じだけどもとになるデータが違うとき、同じようなタグを二回三回書くのは嫌ですよね?
そういうときのためのコンポーネントです。同じコンポーネントに違うデータを流し込みましょう。
<!-- メインのHTML部分 --> <body> <div is="hoge-component" v-for="hoge in hogeAList" :hoge="hoge" class="hogeADiv" > </div> <div is="hoge-component" v-for="hoge in hogeBList" :hoge="hoge" class="hogeBDiv" > </div> </body> <!-- コンポーネントのテンプレート --> <script type="text/x-template" id="hoge-component"> <div @click="hogeClick(hoge)" :class="hoge.class" > {{hoge.name}} </div> </script>
コンポーネントの中身やアクションを書くのは一度で済みます。
HTMLが簡略化
ネストしている部分が外だしされるので、すっきりしてページの構造がわかりやすくなっています。
v-forのおかげで同じタグをコピペで増殖させる必要もありません。
メインインスタンスを圧縮
コンポーネントを使うと、要素に対するふるまい(算出プロパティやメソッド)がメインインスタンスから切り離されます。
親子間のデータのやり取りは明示的に宣言する必要がありますが、その分スコープ内に集中できます。
各要素のオンクリックメソッドで大変なことになったjQueryを見たことがありませんか……? イベント分けのためのクラスが増えすぎて、レイアウト指定用もあいまって10個くらいクラスがついた要素とか……。
ライトな範囲でもコンポーネントを使うと、スパゲッティに多少は歯止めをかけられます。
まとめ
コンポーネントは便利だよ!
詳細は次回、「Vue.js+D3.jsで時間割を表示する」で実感できると思います。
jQueryで時間が止まっている人向けVue.jsをライトに使う方法
jQueryで時間が止まっている人=私です。はい。
もともとサーバー側の仕事ばっかりだったので、jQueryが使えりゃ十分でした。
訳あってぷちSPA(Single-page Application)を作ることになり、機能の多さとアクションさせる要素の多さにうんざりしてカッとなりjQueryを(とりあえず今回は)捨てることにしました。
そして選んだのがVue.jsです。
最先端なJavaScriptにはついていかずに、ライトな範囲でVue.jsを使う方法が今回の内容になります。
Vue.jsとは何か
JavaScriptのフレームワークです。
ここ最近、JavaScriptのフレームワークはたくさん(本当にたくさん)ありますが、Vue.jsを選んだのは 学習コストが少なくて済む≒jQueryで時が止まっていても大体扱えるからです。
Vue.jsは公式が素晴らしいので(日本語ドキュメントが充実しています!)、まずは公式を読みましょう。
ライトな範囲とは
一言で言うと、「vue.min.jsを読み込むだけ」の範囲内でできる。です。
node.jsしらなーい、webpackしらなーい、ばべるってなーにー? なレベルでも使えます!安心!!
具体的に言うと、下の1行をHTML内に書くだけで、Vue.jsを使う準備は整います。jQueryと同じ感覚で使えますね。
<script src="https://unpkg.com/vue"></script>
Vue.jsでHello World
下の例はほぼ公式からの転載です。ライトな範囲の前提なので、HTML1ファイルになるようにしてます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>VueでHello world</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>
app.data.message
の中身が変わると、自動的に{{ message }}
で表示されている文字も変わります。
HTMLの構造を崩さずに、データとDOMが関連付けられています。
HTMLのタグしか知らなくても、だいたいどんな画面になるのか想像がつきますよね。
ブラウザのコンソールからapp.data.message
の値を変えると、画面上の文字列も変わります。すごいですね!
条件分岐とループ
次の例も公式ガイドからの(雑な)転載です。何度でも重ねて言いますが公式が大変充実しています。公式をまず読みましょう。「公式が最大手です」。
https://jp.vuejs.org/v2/guide/
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>VueでHello world</title> </head> <body> <div id="app-3"> <span v-if="seen">Now you see me</span> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var app3 = new Vue({ el: '#app-3', data: { seen: true } }); </script> </body> </html>
これは条件分岐の例になります。seen
がfalse
になると、<span>
タグごと表示されなくなります。
jQueryの.hide()
と違う点は、レンダリングされたHTMLソースからも消えることです。
.hide()
と同じように動作するv-show
というのもあります。
次は繰り返し文です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>VueでHello world</title> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) </script> </body> </html>
配列todos
の中身分、<li>
が繰り返されています。便利ー!
もちろん後からtodos
の中身を変えると<li>
の数や中身も変わります。
算出プロパティ
とはいえ、データをそのまま表示するだけではjQueryでセレクタで選んで要素に値を流し込むのとあまり変わりません。
ましてや繰り返す使うとなると、その度計算がはしって出れば出るほど遅く……。
繰り返し出てくるような計算結果や複雑なロジックは、算出プロパティを使うことで解決します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>VueでHello world</title> </head> <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 算出 getter 関数 reversedMessage: function () { // `this` は vm インスタンスを指します return this.message.split('').reverse().join('') } } }); </script> </body> </html>
算出プロパティは依存関係にもとづきキャッシュされるという特徴があります。もととなるmessage
が変わらない限り、何度reversedMessage
が呼び出されても再計算されることはありません。
逆に、呼び出されるたびに計算してほしいような値(Date()とか)は更新されません。
まとめ
長くなったのでいったんまとめます。
- Vue.jsは最新のフロントエンド事情に疎くても使える。
- Vue.jsはHTMLの構造に影響せずに、データを流し込める。
- Vue.jsべんりー!たーのしー!
次はもうちょっと踏み込んでコンポーネントとaxiosについてまとめたいと思います。
我が家でのGoogleHomeさん事例
日曜に設置してから、大人気のGoogleHomeさん。
我が家で良く使われる機能とかを紹介します。
良く使う機能
良く使うのは以下の機能です。
- Google Play Musicで音楽再生
- 今日の天気
- ニュース
- 調べもの
- アシスタントさんにあいさつ
- ラジオ再生
やっぱり音楽は良いよね
「スムースジャズを流して」とか「MAN WITH A MISSION流して」とか言って流しっぱなしにしています。
自分のアカウントと紐付けているので、「お気に入りの曲流して」というと、自分が GooglePlayMusicでサムズアップしている曲を流してくれます。
問題があるとすると、音声で「いいね」できるので、私が知らないうちに知らない曲が私のお気に入りとして登録されてしまうという……。(パパも自分のアカウントと連携させればいいのに)
後はたまに「静かな曲流して」とか言ってとんでもない曲流されて大笑いしていたりします。
我が家のブーム=あいさつ
Googleさんに「おはよう」と言うと、天気や今日の予定、ニュースを教えてくれます。便利。
でも一番の人気は「いってきます」「おやすみ」。
子どもたちが返事欲しさに何回も話しかけてました。反応が即座に返ってくるのが楽しいんだろうなぁ。
「いってきます」に「いってらっしゃい」が返ってくるとすごく嬉しいみたいです。(アシスタントさんなかなか言ってくれないんですよね、「いってらっしゃい」)
我が家のポリシーとしても挨拶大事!なので、これは思わぬ効果でした。よかったよかった。
GoogleアシスタントさんをLineに繋いでみた
IFTTTで連携させると、決まったワードでアクションを取らせることができます。
Googleアシスタント→ Line Notification を繋いでみました。
リビングでアシスタントさんに決まったワードで話すと、Lineの家族グループにLine Notificationさんが内容を書き込んでくれます。すごい。
仕事中に子供から「今宿題中なの」とかLine入るとかすごくほっこりしますね。
本当に買ってよかったー!