じまろぐ

めめ

入門者じゃない人にこそ読んで欲しい「Vue.js入門」

f:id:nakajmg:20181013191832j:plain

Vue.js入門を@kazu_ponさんより頂きました。ありがとうございます。

遅くなりましたが、読んだ感想を残しておきたいと思います。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

感想の前に

自分は専業のフロントエンドエンジニアです。Vue.jsの使用歴は4年ほど。個人・案件を問わず多くのプロジェクトでVue.jsを採用した経験があるので、正直に言うと本書の対象からは少し外れてるかなと思います。

それでも本書からは得られるものがありました。

入門だけじゃない内容

タイトルこそ「入門」とついていますが、ページ数（460P）から想像できるように、カバーしている範囲がすさまじいです。

入門して終わりではなく、入門から修了までの道筋が記されています。よくある入門本にあるような「簡単な使い方はわかったけどこっからどうしたらいいの？」といった状態にはならないと思います。

整えられた情報たち

今までVue.jsで「これどうやるのかな？」と思ったときは、ドキュメントを見るか検索してそれっぽいものを探すかでした。

そうやって調べて知見を溜めていくのもいいですが、本書はそういったネット上に散らばっていたような情報が詰め込まれています。

情報を詰め込んでいるだけでなく、整理され、必要なタイミングで得られるようにしっかりと道筋が整えられています。

本書から始めると効率めっちゃいいと思います。

つまみ食いするように読める

入門する人は最初から、そうでない人は途中の章から読めるように章立てされています。

Vue.jsでSPAを作ったことがある人なら、8章からの「中規模・大規模向けのアプリケーション開発」から読んでもいいと思います。

入門する人も本書を最後まで一気に読み切る必要はなく、まずは1章から3章くらいまでを読めば、Vue.jsの基本的な使い方が把握できると思います。

個人的なオススメポイント

本書の個人的なオススメポイントはコラムです。

技術書には本線となるテーマが章ごとにありますが、コラムは本線に入れるとちょっとノイズになるような「知らなくても支障が出るものじゃないけど、知ってると周辺知識の理解が深まるもの」だと思います。コラムと合わせて前後の文章を読むことでさらに理解が深まります。

本書をすでに持っているけど読んでいないという人も、まずはコラムだけでも目を通してみると新しい発見があるかもしれません。

Vue.jsに興味があるすべての人にオススメできる圧倒的入門書

はじめにいったように、本書は入門から修了までをとてつもないボリュームでカバーし、解説しています。これから始める人も、すでに始めている人も、本書を読めば得られるものが確実にあると思います。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

もしVue.jsに明るくないメンバーがプロジェクトに参加するようなときには本書を読んでもらえばいい、そんな本が出てきてくれて感謝の極みです。

技術書典5でVue.js本を出してみた振り返りとか

はじめてのサークル参加

技術書典4で一般参加して「なんか出す側のほうが楽しそうだなぁ」と思ってサークル参加してみた。

大変なこともあったけど、結果的にめちゃくちゃ楽しめた。

頒布したもの

Vueのコンポーネント設計の本。テストのしやすさという観点から、これまでVueを使ってきて感じたアンチパターン的な話と、コンポーネントの分類、テストのやり方なんかを書いた。BOOTHでDL版販売中です（宣伝）

ponyhead.booth.pm

本にするネタ

今回はVue Fes JapanのCFPに出して落ちたネタがあったので、それを本にまとめる形にした。

「売れる内容を考える」みたいなのはしなかったけど、興味を引くようにタイトルは何個か案を考えて最終的に「後悔しないためのVueコンポーネント設計」にした。

執筆環境

PDF生成のために執筆環境構築が必要になる。

はじめは自力での構築を試したが、つらくて挫折した。結局TechBoosterのリポジトリをcloneして使った。

github.com

レイアウトもそのまま使って（見た目にこだわる優先度が低い）設定ファイル、表紙、本文だけ自前のものにすればPDF生成までできて楽だった。ビルドは用意されてるdockerコマンドで。

エディタはVSCode。Re:Viewプラグインは次のやつを使用。

marketplace.visualstudio.com

本文を書く

とにかく書く。お仕事で技術文書をそこそこ書いているのもあって、執筆自体が全く苦ではないのでスムーズに完了した。

CFPを出すときに練りまくったので、構成と内容の流れみたいなのはちゃんとできたかなと思う。CFPを書くときは次のやつを何回も読んだ。

blog.builderscon.io

今回本にした内容は、自分の経験から感じていたことや考えていたことを文章に起こす形だったので、無理なく書けた気がする。

ただ構成とかページ数の関係で削った内容がぼちぼちあるので、それはまたの機会に発散したい。

表紙を作る

表紙は妻にイラストを書いてもらった。

f:id:nakajmg:20181009153525p:plain

かわいいでしょ。

入稿する

本文と表紙ができたらあとは入稿するだけ。

今回は技術書典のバックアップ印刷所であるねこのしっぽさんを利用した。イベント当日にブースまで本を運んでもらえるの超楽なので助かった。

プランは「ねこスパーク」という締切遅めだけどそこそこ安いやつ。

入稿はまず申し込みフォームからページ数やサイズを入力、利用するプランを選択して申し込み。

その後、本文だけのPDFファイルと、表紙と背表紙をそれぞれPSDファイルでアップロード。アップロードしたファイルで印刷してOKですよ、というの印刷会社に伝えるUIがあるので入稿完了状態にする。

入稿完了後「コードブロックがはみ出してるけどこれは意図してるやつですか？直しますか？あと表紙用のPSDのサイズがちょっと合ってないから少し拡大しますか？ 」と確認の電話があった。

修正して再度アップロードして入稿完了の報告をWebで。その後もう一度電話があり問題ないとのことで無事印刷に進めた。

細かいところまで見てくれて大変助かった。また次もお願いしたいと思いました。

DLカードの準備

冊子のほかにPDFのダウンロード版も用意した。

印刷は名刺の印刷でググって出てきたとこに適当に決めた。

printsta.jp

入稿用のテンプレートがアプリケーションごとにあったので楽だった。

printsta.jp

表面に光沢のある用紙を選択したけど、出来上がりを見てマットなやつで角丸とかにしたほうがよかったかな？と思った。

DLカードの表面は表紙をそのまま使って、裏面にPDFをDLするためのURLとQRコードとZipファイルを解凍するためのパスワードを書いた。

個人名刺もついでに作った。

PDFファイルを置く場所

よくあるDropboxで〜ユニークなURLを〜みたいなのがめんどくさそうだったので、BOOTHにパス付きzipファイルを置いて0円でDLしてもらう運用にした。

ponyhead.booth.pm

下書き状態があるので、あらかじめ商品を登録してURLを決めておいて、そのURLをDLカードの裏面に印刷し、当日の朝に公開した。

技術書典の次の日からBOOTHでDL版を買えるようにしたかったので、あらかじめページを作っておいて次の日に公開処理だけすればよい状態にしておいた。BOOTH使いやすい。

事前に準備したもの

サークル向けガイドラインを読んで、ブースの設営に必要そうなものを準備した。

techbookfest.org

以下持ちこんだ物

  • お釣り（1000円札40、5000円札2）
    • 頒布物の価格は1000円のものだけ
  • 見本誌を立てるやつ*2
    • 見本誌を取ってもらいやすくするように2つ
    • 冊子売り切れたときには完売札を立てた
  • ポスター吊るすやつ
  • 机に広げる布
    • 布はあったほうが圧倒的にサークル感が出る
  • スケッチブック
    • 見本誌マークや完売札を作ったり、いろいろ使える
  • マッキーのセット
  • ハサミ
    • スケッチブックで書いたものを切り取る
  • 養生テープ

見本誌立てはなんとなく2つ用意していったけどわりと正解だったぽい。見本誌を結構読んでもらえた。

（自分の文字を書く能力はレベル1のまま止まってるので、全部妻に書いてもらった）

決済方法

今回使えるようにしたのは次の3つ。

  • 現金
  • 技術書典かんたん後払い
  • pixiv Pay

圧倒的に現金が多かった。お釣りの千円札をかなり用意したけど、1万円札or5千円札を出してきた人は合わせて6人くらいでほぼ使わなかった。参加者の人もお釣りがでないように崩してきてる感あってやさしい世界。

かんたん後払いは70部くらい。かんたん後払い用のQRコードは運営側で用意してくれていて、スタンドとして立てられるようになっていて大変よい感じだった。感謝。

pixiv Payは圧倒的に認知が少ないのか、使ってくれたのは6人だった。この利用人数だとサークル側としてはオペレーションが複雑になるだけなので、次回はなしかな〜？といったところ

被チェック数

自サークルの配置場所はこ32。サークルリストを見るとわかるんだけど、リストの下から9番目の位置。500近いサークルがある中でめっちゃ後ろの方にあるので、サークルリストからサークルカットでのチェックに頼ると伸びが悪いだろうなと思った。

ということでこのリストからのチェックはあまり重視せずに、Twitterからの流入で被チェック数が伸びるといいなと思って何回かつぶやいた。

つぶやくときは#技術書典のハッシュタグをつけて、出すものの内容とサークルページへのリンクをセットで。

被チェック数の推移

被チェック数は開催3日前くらいまではゆるやかに伸びて、そこから一気に増えた。

  • 9/12: 15
  • 9/27: 50
  • 10/2: 77
  • 10/4: 103
  • 10/7: 181
  • 10/8: 270

最終的な被チェック数は270。

f:id:nakajmg:20181009143359p:plain

これは読めない。読めないが、この伸び方は理解できる。

前回自分が買う側で参加したとき、サークルチェックしたのは前日の夜&当日の朝だった。早めにチェックしてるのは多分サークル参加する人たちで、一般参加の場合は直前にチェックするのが合理的な行動っぽい。

印刷の部数

今回は250部刷った。初サークル参加だし、Vue.jsというテーマに絞っていたので、自分のなかではかなり冒険した部数。

印刷の部数を決めたのが開催日の10日前くらいで、そのときの被チェック数が50。

被チェック数が50の段階で部数を250に決めたのはいくつか理由があって、一番大きいのは次の記事を読んでなんか大丈夫そうと思ったから。

note.mu

  • 気持ち的に印刷代だけ赤字にならなければいいかなと思ってた
  • 100刷るより200くらい刷ったほうがコスパよくなる
  • 250刷ると70ちょっと売れれば赤字ラインを超える
  • 在庫出たら出たでそのとき考える

という感じで、赤字じゃなければもうどうなってもいいやと思った。10日前で被チェック数50あるなら70以上はまぁ売れるでしょとかなり楽観的だった。

当日の結果

開始45分の時点で赤字ラインを乗り越え、14:30に冊子244部（見本誌とか自分用で6部）が完売。1分に1冊以上なペースで息つく暇もない感じで冊子が売り切れた。

見本誌を見ずに買ってくれる方もぼちぼちいたけど、見本誌を読んで買ってくれる人のほうが多かったかなという印象。この結果をみるに、Vue.jsというテーマの引きは結構強いんだなと認識を改めた。

冊子がなくなったあとはDLカードのみに切り替え。17:00の閉会までで30枚くらい。やはり物理本は強く、「冊子ないのか〜残念」となる人が多かった。

f:id:nakajmg:20181009162723j:plain

最終的な頒布数は合計で275部。すごい。

冊子がなくなったペースをみるに、たぶん物理本は400刷ってもちょっと余るくらいで済む感じのやつだったのかなと推測。

BOOTH公式のこのアナウンスがあと数日早かったら300部にしてたかも。

DL版

技術書典の翌日朝にBOOTHでDL版の販売を開始した。

とりあえず出すけどそんな売れないだろう、と思ってたけどそこそこのペースで売れててびっくりしている。

いろいろな人に届いてる感じで嬉しい。BOOTH使いやすいし、技術書が売れる土壌が育ってる気がする。

次回へのあれこれ

  • 書きたいことは書ききる
    • 入稿してから「削ったあれやっぱ無理やりねじこんでもよかったな〜〜〜」はもったいない
    • 多少構成が崩れても書きたいことを書こう
  • サークル参加の申し込みをした段階から準備する
    • 当選してから書きはじめると少し苦労するぞ
    • 落ちたら誰かのとこに委託するくらいの意気込みで
  • 見本誌は透明なカバーつけるといいかも
    • 「見本誌」マークをテープで貼ったら表紙剥がれて悲しい
    • というか表紙の仕上げをツルツルのやつにしたほうがいいかも
  • 名札作っていったほうがよさそう
    • ただでさえアイコンと顔が一致しないので認知してもらうためにもあったほうがいい

次回サークル参加するとしたら

  • Slackクライアントの作り方
  • Functional Vue.js

のどちらかをテーマにしようかなと考え中。

おわりに

とにかく楽しかった。終わったあとに妻と飲んだビールは最高においしかった。

ブースに来てくれたみなさまありがとうございます。戦利品の写真に自分のが写ってると嬉しいですね。ブースに来てくれた人の中に「これを買うために技術書典きました」と言ってくれた人がいて、なんだよ最高のイベントかよと思いました。

購入報告とか感想とかありがとうございます

Twitterで購入報告とか感想を書いてくれてる人がちらほらいて感無量でございます。ありがとうございます😭

こういう感想とか反応がもらえるとめちゃ嬉しいし、書いてよかったな〜。

自分のに限らず、本を手にした人たちは一言でもいいので感想をつぶやくと著者の人がめっちゃよろこぶと思います。

自分がゲットした本については別途感想を書きます。

おつかれさまでした。

ねこちゃんと泊まれる旅館で癒やしと学びを得てきた

f:id:nakajmg:20180924235917j:plain

湯河原にあるまいきゃっとという旅館でねこちゃんと一晩を過ごしてきた

www.mycat-yugawara.com

この旅館では併設されている猫カフェのねこちゃんを部屋に招いて一緒に泊まれる。控えめにいっても最高の体験&経験だった

ねこちゃんのトライアル

ねこちゃんと一緒に泊まれるというのは、ねこちゃんをレンタルするというわけではなく、あくまでもお試しで共同生活を体験してみるというやつ。ねこちゃんの糞の世話なんかもやる必要がある

今我が家では真剣にねこちゃんを飼うことを検討しているので、ねこちゃんとの生活がどういうものかを少しながら体験できて大変よかった

宿泊当日の流れ

  • 15時までにチェックイン
  • 併設されている猫カフェでトライアルするねこちゃんを決める
  • 18時~翌朝9時までねこちゃんと一緒に暮らす

旅館はすべて素泊まりで食事などの提供はなし。ねこちゃんのトライアル開始時間以降は部屋にねこちゃんしかいない状況にはできないので、18時までに外で済ますか、外で買ってきて部屋に持ち込むかのどちらか。

自分の場合、14時半に旅館に到着、猫カフェでねこちゃんを決めて、16時~17時30くらいまで熱海駅前を観光してた。熱海までは電車で10分。

トライアルの記録

今回２匹のねこちゃん、あらしくんとよしのちゃんをトライアルした。２匹は姉弟。

最初は警戒してかごの中からあまりでてこない

f:id:nakajmg:20180924235758j:plain

わりとすぐ慣れてきて遊んでくれる

f:id:nakajmg:20180925000233j:plain

f:id:nakajmg:20180924235805j:plain

f:id:nakajmg:20180924235912j:plain

ちゅーるすごい

f:id:nakajmg:20180924235915j:plain

かわいい

f:id:nakajmg:20180924235923j:plain

朝背中に乗られる

f:id:nakajmg:20180925000747p:plain

ねこちゃんのいる暮らし

めちゃくちゃ幸せな時間だった。今回トライアルしてみて、ねこちゃんがいる暮らしがどんな感じなのかの具体的なイメージが掴めた。ねこちゃんにも性格がいろいろあるとか、糞はリアルなニオイがするとか、寝てると乗ってくるとか顔舐めてくるとか。

夫婦ともによい感触が得られたので、次の引っ越しの際には、ねこちゃんを迎え入れるのにかなり前向きになれそう。

Nuxtが監視していないファイルの更新をトリガーに再レンダリングしたい

Nuxtでプレゼンツールが作れないもんかと試してみたときにたどり着いた副産物。

作ったのはこれ。（数ヶ月前に作ってもう飽きてる

github.com

スクショ

f:id:nakajmg:20180925001859p:plain

TL;DR

  • Nuxtをexpressのmiddlewareで動かす
  • コンテンツの取得はexpressでAPI
  • ファイルの監視はchokidar
  • クライアントへの通知にServer Sent Events

プレゼンツールの概要

  • Markdownファイルでスライドが作れる
  • generate でSSRしたやつが静的HTMLとして吐き出せる
  • pdfで保存できる

もろもろ

  • Nuxtはexpressのmiddlewareとして動かす
  • スライドは --- でページ区切り
  • Markdownのパースとかはexpress側でやる
  • パースした内容はAPIで取得
  • /talks/awesometalk/2 みたいな感じでページごとに取得

Markdownが更新されたら再レンダリングしたい

本題。Markdownの更新をトリガーにAPIから再fetchして画面を更新したい。

使ったのはServer Sent Events (SSE)

developer.mozilla.org

その辺りのソースはこれ

https://github.com/nakajmg/vresentation/blob/master/scripts/devServer.js

https://github.com/nakajmg/vresentation/blob/master/store/actions.js#L23-L34

EventSourceはVuexのactionsで作成するようにした。

  async [types.WATCH_MARKDOWN]({ commit, state }) {
    if (!es) {
      es = new EventSource('/stream')
      es.addEventListener('updated', async ({ data }) => {
        const { slug } = JSON.parse(data)
        if (slug !== state.slug) return
        const filePath = baseURL(`/${state.slug}/${state.page}`)
        const response = await request(filePath)
        return commit(types.SET_RESPONSE, response)
      })
    }
  },

これでNuxtの監視してないファイルの更新をトリガーにして再レンダリング成功

Nuxt便利

VuePressみたいなツール、Nuxt使えばわりと低コストで作れそうだなという感触。

SSR環境を自前でつくるの、思ってるより数倍はめんどくさいから、Nuxt使って楽していこう。

超お高級耳栓 BOSE SLEEPBUDSでストレスが減った

f:id:nakajmg:20180924235932j:plain

BOSEから発売された眠るためのイヤホン、BOSE SLEEPBUDSを購入してから3週間ほど経ちました。このエントリは自分にはそこそこ効果があったよというレビューです。

BOSE NOISE-MASKING SLEEPBUDS ノイズマスキングイヤープラグ

BOSE NOISE-MASKING SLEEPBUDS ノイズマスキングイヤープラグ

※ 自分は眠りにつくのが遅い＆眠りも浅めでちょっとの音で起きるタイプです。

なにこれ

  • 入眠時に周りの音で眠りを妨げられないようにするためのイヤホン
  • ノイズキャンセリングではなく、ノイズマスキングで周りの音が気にならないようにする
  • アプリを使ってヒーリングサウンドを流し続ける（ノイズマスキング）
  • アラームが設定できる
  • 決まった音しか流せない（Bluetoohイヤホンではない）

小さいワイヤレスイヤホンをつけて、音を流し続けてほかの音を気にならないようにする、というやつ。決まった音しか流せない。

f:id:nakajmg:20180924235816j:plain
10種類の音から選んで流す

f:id:nakajmg:20180924235812j:plain
アラームが設定できる

使ってみての感想

まずこれを使うことで眠れるのかどうか、自分の場合は眠りにつく際に周囲の音で困っていたこともあり、その音への解決策として一定の効果があった。

自分が困っていた音は次の２つ。

  • 寝室と扉1枚で隣接するリビングからの音（生活音、話し声）
  • 深夜に動き出す上の住人の音（2時すぎ、足音とかいろいろ）

とくにリビングからの音に悩んでた。音の主は妻。いつもは一緒の時間に寝るか、自分が後から寝るので問題ないが、たまに先に寝たいときに音が気になって眠れない。

それがSLEEPBUDSをつけて音を流すと、リビングからの音が気にならなくなり眠れるようになった。これだけでも自分にとっては買った価値があったなと思えた。眠れないストレスって悪循環でさらに眠れなくなるから、ストレスを減らせるなら3万でもまぁいいかと自分は納得できた。

つけ心地

  • かなり小さいが、耳の穴が小さい人には合わなそう
  • つけて横向きになると「あるな」と思うくらいには装着感はある。枕によって変わりそう
  • 仰向けで寝る人には合ってそう

前はどうしても寝たいときBOSEのノイズキャンセリングイヤホンで音楽流すとかもやってた。普通のイヤホンだと大きさのせいで仰向けを強制されるんだけど、SLEEPBUDSはかなり小さいので眠る体制は割と好きにできる。

寝るとき以外の使い道を模索

なにせ3万ですから。寝るときだけ使うのもアレなので試してみた。

  • カフェで作業するとき
  • 家で作業するとき
  • オフィスで作業するとき

カフェで作業するときSLEEPBUDSつけて音を流してみると、近くの席の会話が気にならなかった。水の音とか流すと、完全にシャットダウンするほど大きい音量じゃなくても会話に耳がいかなくなる感じ。

家作業では、車の音とか、おばちゃんの話し声とか、工事の音とかが気にならなくなる感じ。

オフィスでは話し声が聞こえなくなって集中できた。

それ普通のイヤホンでよくない？

はい。

でもでも、集中したいけど曲は聴きたくないときとか、ただ話し声をカットしたいときには結構いいと思う。ノイズキャンセリングだと話し声ってカットしきれないし。

総評

  • 入眠時の音で困ってるなら一考する価値はある
    • 先に普通のイイ耳栓試したほうがいい
  • 決まった音しか流せないのがちょっと残念
    • 好きな音楽とか流せないので注意
    • 作業用に使うのは割とアリな感じ
  • ケースがかっこよくて所有欲が満たせる

自分の場合は割とマッチしててアリかなという感じ。ただ3万円が適正価格かどうかというと何とも言えないかも。

現状これ系の選択肢がSLEEPBUDS以外になさそうなので、ほかのメーカーも参入してくれたらいいなぁと思う。特許ガチガチで無理なら、あと数ミリ小さくして好きな曲が流せるやつ出してくださいBOSEさん。

Dockerでホストしてるwebページを同一ネットワークにいる端末から開きたい

Dockerでホストしてるページ、pcで localhost とかでアクセスできるやつにiOS端末実機から開こうとしたらできなかった（同一ネットワークでpcのローカルipをURLに入れて） 。

webpackとかのローカルサーバだと同一ネットワーク内ならip入れればアクセスできるけど、Dockerの場合は事情が違うようで、検索したらいろいろ設定が必要とか出てきてめんどくさそうだった。

めんどくさいから localhost をそのままプロキシして公開すりゃいけるだろと思って試したらできた。

npx browser-sync start ---proxy localhost

npx でダウンロード&起動してお手軽プロキシ。すぐ思い出せたのが browser-sync なだけで、プロキシできればなんでもいい。

無事実機からページを開けて世界は救われました。fin

Firebase SDKのimportでwarningが出るときは 

import firebase from "firebase"

すると

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

とwarningが出る。

使うパッケージだけimportしろってことなので

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"

使うやつだけimportするとwarningは出なくなる

これで解決しなかったら次のissueを参照

github.com