Vue.jsのコンポーネントをライトな範囲で使う
Vue.jsの情報をあさっていると「.vue」拡張子のファイルに行き着くんですよね。
これって公式様のいう「単一ファイルコンポーネント」なんですが、ビルド（ようはコンパイル）が必要なんですよ。
ライトな範囲で使う前提なので、ビルドツールはもちろん使用しません！ そのため、今回は単一ファイルコンポーネントは利用できません。
じゃあ、せっかく行き着いた情報は意味がないのかというとそうでもなくて。（ビルドツールを使わないので）単一ファイルコンポーネントは使えませんが、コンポーネント自体は使えるのです。（ということがわかるまで結構四苦八苦しました……）
単一ファイルコンポーネントのソースを同じファイル内に書いてしまえば動きます。
（※注意！！！ 本来のコンポーネントの概念には真っ向から逆らっています！ 分かる人はちゃんとビルドツールを使ってください！ そのほうが色々便利です！！！）
コンポーネントの使い方
公式を見ましょう（←
あと、こちらの記事が分かりやすかったです。（私はこの内上の２つしか使っていませんが……）
ライトな範囲ででもコンポーネントを使う利点
単一ファイルコンポーネントは再利用という面において非常に便利です。が、単一ファイルじゃないならコンポーネントを使う意味がないのかといわれると、もちろん利点はとってもあります。
- 同ページ内で同種の要素を使いまわせる。
- ネストしがちな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しらなーい、ばべるってなーにー？ なレベルでも使えます！安心！！
具体的に言うと、下の１行を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入るとかすごくほっこりしますね。
本当に買ってよかったー！
技術書典３に行ってきました。
昨日はすごい雨でしたね。
そんななか、私、技術書典３に行ってまいりました！
一般参加者から見た、今回の技術書典を振り返ってみたいと思います。
現地着～入場まで
そろそろ #技術書典 むかうか。
— 不知火/しぃ (@shiranuik) 2017年10月21日
現地着！ #技術書典 pic.twitter.com/DXxeAtSuGi
— 不知火/しぃ (@shiranuik) 2017年10月22日
#技術書典 座って待てるし雨でも問題ない。あったかいコーヒーまであってマジ快適……。 運営さんありがとうございます！
— 不知火/しぃ (@shiranuik) 2017年10月22日
Twitterのつぶやきを振り返ると、９時前に起き出して現地に１０時４０分頃着していたようです。整理券番号は私の時点で３００番代前半です。
雨でしたので、駅から会場まで歩いてる間は多少濡れましたが（この時点では普通の雨）、整理券貰ったあとは会場上階の「立ち読み会場」と「戦利品会場」にさっさと移動。
あったかーいお部屋であったかーいコーヒー飲みながらまったりタイムライン監視しつつ最後のサークルチェックをしつつ、実に快適に待てました。
前回春の技術書典２の時に寒い中外で待機していたのを考えると、本当に天国でした。
ただ、整理券番号を登録しておくとPush通知が届くという素敵なサイトは、（おそらくクライアントが多すぎて）機能していませんでした。戦利品会場で待っていたので運営さんのアナウンスで誘導されることができましたが、会場から離れた場所で待機していた方は、情報のキャッチアップにラグが発生していたかもしれません（推測）。
会場入口で整理券番号を確認され、手に透明はんこ（UVライトで光るアレ）をぽんとされて入場しました。
技術書典会場内
会場内は「 あ つ か っ た 」の一言。ブースを離れるとだいぶ涼しかったので、もう人口密度のせいですね。
動線は前回よりも良くなっていたと思います。人気のjavascript系のジャンルと企業ブースは会場の奥と手前に分断され、ついで人が多そうなUnity系は真ん中あたりでした（よね？ちょっと自信ない）。
前回は会場入口付近に旬ジャンルと企業が固まっちゃっていたので、そりゃもうぎゅうぎゅうで移動がままならないくらいでしたが、
今回は多少心に余裕があれば移動ができるくらいでした。埼京線と山手線くらいの差（どんなだ）。
テーブル列とテーブル列の間は３人分くらいの幅はあったので、両列に人が張り付いていても、一応中央が通り抜けられる感じです。
ただ、余裕がある分通路の人の流れが一定でなく、両方向の人の流れがあったので多少すれ違いに苦労はしました。
一方通行にするのもおかしいと思うし、入場制限をこれ以上かけるのものなぁとは思いますが……。
一通り回って無事にお買い物完了。
ミッションコンプリート！ #技術書典
— 不知火/しぃ (@shiranuik) 2017年10月22日
#技術書典
— 不知火/しぃ (@shiranuik) 2017年10月22日
、私が入った時点で紙の本売り切れてたブースもあったけど、前回よりも電子書籍も出してくれてるとこ増えてるの嬉しい。 そして後払い超便利。運営さん本当にありがとうございます！！！
運営さんの後払いシステム、お財布の出し入れを最小限にできたので大変便利でした。ＱＲコード読んで確定するだけなのでさくっと完了。どうせスマホはサークルチェックリストを確認するので出しっぱなしですし、お財布出さないの（人が多いのでなおさら）楽。。。お財布出すの面倒だなーとか、小銭無いなーとか考えずに脊椎反射で「後払いでお願いします！」できたお陰で、ステッカーとかにも手が伸びました。
逆に言うと、どうしよっかなーと悩む本（とかグッズとか）が、技術書典後払いに未対応で購入に至らなかったことが私だけで何件かあるので、次回参加されるサークルさんはぜひぜひ対応していただけると嬉しいです。やっぱりandroidだけってのが辛いんですかね……。iPhoneユーザー多そうですもんね……。
あと、グッズ置かれる方はぜひぜひ値札をしっかり大きくつけていただけると助かります！ 並んでいても売り物なのかいくらなのかわからないと買えないです。
買い物完了～おまけ
買い物完了後は、もう一度「戦利品会場」へ移動。また温かいコーヒーをいただきました。まったり。
会場入りの時間が不明なのですが、大体３０分強くらい会場うろうろしていたのかな、と。
コーヒー飲みながら荷物整理をし、戦利品を丁寧にしまった後は、
コーヒー飲んで戦利品整理したら、ビッカメ行ってGoogleホームみてこーっと。
— 不知火/しぃ (@shiranuik) 2017年10月22日
というわけで、すぐ隣のブロックのビックカメラに寄りました。
なぜかというと、今月末まではGoogleHome買うとChromecastをタダでつけてくれるという噂を入手したからです！！！
噂は事実でした！というか実はそれどころではなかった。
ビックカメラでは
- ２台購入で２万円（１台定価１万５千円）
- Chromecastをプレゼント
- Hueを20%OFF
していました。（覚えている範囲で。他にもあった気がする）
まぁ、２個はいらないのでChromecastもらって帰りました。
帰って速攻セットアップ。無線環境があればサクッと簡単でした。
子どもたちに簡単なレクチャーをし、早速使わせてみました。
やはり指定単語の選び方が口語的で、アシスタントさんを困らせてばかりでしたが、自分が喋ったことに反応を返してくれることに興奮。
Chromecastつなげてyoutubeを流してみたら大興奮。
寝る前は「おやすみ」とみんなで言うと挨拶を返してくれるので嬉しそうでした。
今朝はFMを流しつつ朝食。我が家に未来が来た気がします。
GoogleHomeを購入予定でしたらお早目のほうが良いかもしれません。
私は今、寝室用にGoogleHomeMiniを購入しようかどうしようか悩んでいます……。Hueもっと安ければな……。
2017年10月のWindowsUpdateはお祭りだったよ！
もちろんよくない意味のほうのお祭りです……。
今現在も対応中で、今起動待ちの時間でこれを書いております。
何があったか
詳細は省略しますが、マイクロソフトさんがWSUS（WindowsUpdateを組織で管理できるやつ）に間違った配信情報を流してしまったとのことです。
なので、今回被害にあったのはWSUSを使うような組織＝企業ユーザーのみですね。 一般の方はご安心ください。たぶん大丈夫です。たぶん。
どういう風に壊れたか
単純に言えば、Windowsが起動しない。です。
セーフモードも起動しない。
システムの復元も復元できないです。
どうやって対応してるか
自動修復に失敗した画面からメニューを進んでいくと、コマンドプロンプトにたどりつけます。
あの黒い画面でいろいろやりました。
最初は詳細が出ていなかったので（原因のKB番号（WindowsUpdate毎のIDみたいなやつ）もわからんかった）、とにかく復元させるために WindowsAppsをリネームさせてました。
c: cd Program Files attrib WindowsApps -h rename WindowsApps WindowsApps.old exit
リネームさせた後に通常通り復元、です。
１日目の大半はこれで乗り切れました。
が、２日目はより深刻になって戻ってきます。
なんと、もう一度起動に失敗し、なおかつ復元ポイントが無いのです（どーーーーん）
同じチーム内の同僚がまさにこれ。
システムエンジニアからパソコン奪ったら何もできません。無能です。
無事だった私がググりますと、公式方面に情報が載っていました。
↑のページの一番下の方の内容です。
コマンドプロンプトでインストール待ちになっている該当のWindowsUpdateを消し去る方法です。
同僚はこれで無事に復帰しました。無能時間は一時間くらいで済みましたよ。よかったよかった。
で済めばよかったのですが……。
さらに何があったのか
続いて持ち込まれたのがBitlocker付の端末。
BitlockerでWindowsドライブが常に暗号化されてるよ！セキュアだね！
でも暗号化されているからcドライブに移動できないよ！！どうしようね！！！
さすが先人は偉大です。コマンドプロンプトでちゃぁんとBitlocker解除できました。
manage-bde -unlock c: -rp <回復キー>
他にも色々というか、弊社首都圏中心に拠点散らばってるんで、どうしようもないところに旅にでたりとか、拠点で使ってるパソコンは何故か回復処理中は英字キーボードになってくれてて記号がまともに打てなかったりとかいろいろありましたけど、私は元気です。
夏休み終わってるよ！
生存報告です。
放置しているうちに、溜め込んどいたネタがすっかり消費期限過ぎてしまったのでしょんぼりしております。
最近はslackで雑談してたーのしー！してます。雑談も飲み会も楽しいです皆さんありがとうございます。
実はマストドンインスタンスも立ててみました。ゲーム専用インスタンスとか作れたら楽しいなぁと思いつつ開発止まっています。くすん。
てわけで小ネタメモをまとめて放出。
Cakephp関連
FormHelperで生成されるLabelにStyleを直書きする
echo $this->Form->input('gakunen', array(
'label' => array('text'=>"学年",'style'=>"width:25px;"),
));
labelをArrayにする。label文字列はtextで渡す。
findByの後ろに項目を入れることで複数条件検索ができる
http://bashalog.c-brains.jp/07/12/18-161125.php
その他
二段階認証を有効にしているGoogleアカウントからのメール送信
アプリ用パスワードを発行する。
https://myaccount.google.com/security
のアプリパスワード＞
から新しいパスワードを発行。
発行されたパスワードをパスワード欄に貼り付け。
コマンドラインからのVM操作
ヘッドレス起動 $ "C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" startvm "開発用" --type headless シャットダウン $ "C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" controlvm "開発用" poweroff 起動中のVM確認 $ "C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" list runningvms
gitでリモートのブランチ削除
$git push --delete origin ブランチ名 他の人が消したブランチ情報を同期するには $git fetch --prune
createrUpdateしようと思ったら某業務用ソフトのせいでWindowsが壊れた話
お久しぶりの生存報告です。
最近はslackでうぇーいたーのしー！してます。
雑談も飲み会も大好きですみなさんありがとうございます。
原因まとめ
ポケモンターミナル試すためにCreaterUpdateしてみたら
sky○○○がまだ対応していなくてあぼーんしちゃった。
症状
Windowsのログイン画面までは正常に動くが、
ログイン後すぐに画面が真っ暗になり、マウスポインタだけが表示されている状態。
Ctrl+Alt+Deleteは有効だが、タスクマネージャーやコマンドプロンプトを起動しようとしても
GUIが死んでいる（様子）なのでログオフくらいしかできない。
回復への道
原因判明までに試したこと
セーフモードで起動
そもそもこの時点で軽く詰む。
私が知ってたWindows10のセーフモード起動方法は、msconfigからか設定からかコマンドプロンプトからかの み。
どれもログイン後にGUIが使えないとできない。
今回はログイン画面までたどり着けるので以下でセーフモード起動できた。
「 Shiftキーを押しながら再起動 」
（こんなん知らなきゃわかるわけないよぉ！）
セーフモードでサービスとかスタートアップ系を殺す
とりあえず全部黙らせた後に通常起動するも討ち死。
よくわかんないけどログイン後におかしくなるんだから別ユーザーログインしてみるべ？
これは良くなかった……やるんじゃなかった……
結論から言うともちろんNG。
しょうがない、一回戻すか
起動オプションで前のバージョンのWindows10に戻そうとしたものの戻せない。
この段階では原因不明。
表示上は「なんかエラーったからできないよ。初期化してちょ」ぐらいなものだった。
初期化なんてできるかバーロー。なので原因をググる。
原因は SKY○○○ だった！！！
こんちくしょう。
とりあえずSKY○○○を黙らせた
とりあえずセーフモードで某ソフトのインストールディレクトリパスをまるっと変更。
その後通常起動。
起 動 し た ！ ヽ(=´▽`=)ﾉ
Updateをなかったコトにする
この状態で設定から回復させようとすると、「Update後に作ったアカウントあるでしょ。先にアカウント削除してからじゃないともとに戻せないよ」と言われる。
ぁーん？んなもの作った覚えはないし、設定のユーザー一覧にもそんなもん無いぞ？
と思ったけど一応一緒に表示されていたIDっぽい文字列をレジストリエディタで検索。
メインで使っているADのユーザーとほぼ同一の文字列……あれ、もしかして……
あれだ。別ユーザーでログインしたからそのアカウント情報が（変な具合に）残ってるんだ……っ！
が、見えないものをどうやって消したら……？
たしかこれで消した。
コンパネ＞システム＞システムのプロパティ＞詳細設定タブ＞ユーザープロファイルの設定
不明なアカウントを削除！
再度無かったことにする。
今度こそなかったコトにできた。
某ソフトを再び有効に
退避させたファイルを正常なパスにコピー。
この時システム権限じゃないとできないような仕様になっていたので、Admin権限でもOKなようにフォルダ権限い じった気がする。
最後の確認
最後にもう一回再起動させて無事にログインできて某空を見るソフトも正常に起動していることを確認。
ていうのを6月末辺りにやってました。 ちなみに某ソフトは未だに対応したという情報を聞かないのですがまだですかねぇ……。 そろそろFallCreatersUpdateきちゃいますよ…？
