くろもワークス

しがないWebエンジニアの日記です。

VS Code Meetup #1 で登壇してきた #vscodejp

勉強会参加・登壇

この記事は「Visual Studio Code Advent Calendar 2019」の19日目の記事です。

12/18に以下のイベントでLTをしてきました。

vscode.connpass.com

スライドはこちらです。

発表内容について

「初回基礎編」というサブタイトルだったので、「2年半VSCodeを使ってきて意外と知らなかったこと」という題目で、あまり難しくない基礎的な内容にしました。
自分がVSCodeを2年半使ってきて「え、こんな機能あるの？」と思うことがたびたびあり、そういう機能を紹介するような内容です。具体的には以下の機能について紹介しました。

ワークスペース

ワークスペースを使うとフォルダを2個同時に開くことができます。これを知るまでVSCodeも2個開いてたという話をしたら、結構同じ方がいるようで安心しました！

詳細検索

検索パネルの右下にある「…」みたいなボタンを押すか、フォルダー内検索をしたときに有効化になる機能です。
通常の検索では全体を検索しますが、詳細検索では検索対象に含めたり除外したり*1するファイルやフォルダを指定することができます。

Git機能

左バーの分岐マーク（でいいのかな？）を押すとソース管理のパネルが開き、コミットや変更を戻すなどの操作ができます。ブランチの作成や切り替えなどは左下のブランチ名を押すとメニューが出てくるので、そこからできます。

タスク

任意のコマンドをタスクとして登録しておくと、VSCodeからそのタスクを指定して実行できるような仕組みです。作り方はスライドに書いてあるのでご参照頂ければと思います🙏
当日は@sakkuruさんが、LT前のセッションでタスク機能の説明やデモまでしてくれたので、発表ではあまり細かくは触れませんでした。

その他もろろろ

と称して、ペラ1のスライドで以下の3つの機能を紹介しました。

選択範囲のみ検索

ファイル内を「command+F」で検索するときに、デフォルトだと選択範囲がある状態でもファイル全体が有効になってしまいます。
右の方にある棒グラフみたいな謎ボタンを押しておくと、選択範囲のみを対象にして検索することができます。

マルチカーソル

「option+クリック」をするとカーソルを増殖させることができます。複数行や複数箇所を同時編集したいときに便利です。
ただ実はこれは一例で、マルチカーソル機能は結構奥深く私もまだまだ使いこなせてはいません。以下の記事がとても詳しく説明されていておすすめなので、ぜひ見てみてください！

mugi1.hateblo.jp

Compact folders

これは機能というよりまあ設定なんですが、最新の1.4.1のバージョンで新しく入った設定です*2。
デフォルトが有効なので気づいている方も多いと思いますが、子供のフォルダが1個しかないときの表示が変化します。

反響

まず反響がとても多く正直驚きました。LT直前にスライドをツイートしたのですが、拡散していただきありがとうございます！

はてブのホットエントリーにもなって、一時的に「テクノロジー」カテゴリの一番上にも掲載されたのでキャプチャを残しておきました。

f:id:kuromoka16:20191219193333p:plain

そんな中で良い反応もあったのですが、「内容が薄い」って反応もチラホラあり、これについては完全同意で反省点かなーと思っています😢
5分間のLTという時間の中で、多くの機能を紹介しようとしたので個々のスライドでの説明が薄くなってしまったかな、と感じています。逆に言うと今までの登壇活動ではこういう指摘をもらうほどの反響がなかったので、今後の登壇を改善していくための良い機会と捉えていきたいと思っています！

全体的な感想

まずVSCodeは自分がとても好きなエディタで、そういったVSCodeに関する勉強会の1回目に参加して登壇できたことはとても光栄でした！今後2回目、3回目と続いていくとのことなのでとても楽しみです。
LTの登壇者にはイケてるバッチをもらえたのもよかったです！

今回は「初回基礎編」 で、次回は「Live Share編」とのことで*3、全然使ったことない機能なので登壇はお休みして、一般参加として参加できたら勉強をしにいく心構えで行くつもりです。もしまた登壇する機会があったらぜひ登壇したいなーと思います！

*1:スライドでは除外のことしか書いてないのに、例は含めるの方を紹介するようなキャプチャになっていますね、すいません！

*2:https://code.visualstudio.com/updates/v1_41#_compact-folders-in-explorer

*3:https://vscode.connpass.com/event/160083/

Vuetify StoreからVuetifyグッズを買ってみた

日記

Vuetify Storeは、Vue.jsのUIフレームワークの一つであるVuetifyが開いているショップです。ショップ自体はShopifyというサービスで作られているみたいです。

store.vuetifyjs.com

Vuetify用の有料テーマなどもここで売られていますが、帽子やTシャツなどのVuetifyグッズも売られています。

Vuetify好きとして、またOSSで開発されているVuetifyがさらに発展してほしいという意味も込めて今回グッズを買ってみました。

購入方法

Vuetify Storeのページから、欲しい商品を選んで「Add To Cart」でカートに入れていきます。

TOPページに薄い字で書かれているんですが、合計が$85以上の場合は送料無料になるのでまとめて買ったほうが絶対お得です！

それ以下で注文した場合、アメリカからの発送のため日本への配達にしようとすると結構えぐい送料になります😇

$85以上になるようにして、最終的には以下の商品を注文しました。ステッカーのほうはサービスで1個無料になりました。

商品を選んだらページ上部のカートのアイコンから「CHECKOUT」を押すと、メールアドレスや配達先を入力する画面になります。*1

入力後に「Continue to shipping」で先に進むと、計算された送料が表示されます。$85以上注文してた場合は「Free」になっているはずです。

配達までの日数

アメリカのテキサス州から、USPSでの発送でした。

9/23にVuetify Storeから注文→9/25に発送→通関手続きなどを経て10/7に一度配達されました。ただこのときは不在で取れなかったので、10/9に再配達で受け取りました。そのため日本への配達は概ね2週間くらいと思ったほうがよさそうです。

届いたグッズの紹介

ステッカー

Vuetify Dark StickersとVuetify Light Stickersです。<v-developer/> ロゴがVuetifyでコンポーネントを書くときと同じ感じになっているのがイケてますね。

帽子

White Vuetify Capです。被ってたら一発でVuetify使ってると認識できます。

Tシャツ

Special Edition Vuetify Teeです。真ん中にでっかくVuetifyロゴが入ってます。

サイズは少し大きかったです。いつも日本で服を買うときはXLを買うことが多いので同じサイズを買ったのですが、あくまでアメリカ基準でのXLのようなので1段階下げるくらいがちょうどいいかもしれません。

また商品ページに、よくあるXLはこれくらいのサイズだよ的なのは載っていますが、アメリカらしくセンチではなくインチ表記なので注意が必要です。

ジャケット

Full-Zip Vuetify Jacketです。こちらは控えめに左胸のところに小さくVuetifyロゴが入ってます。

これもXLを買ったんですが、袖が萌え袖になっちゃうくらい大きいですね。まあ小さいよりは全然マシですが・・・これから冬場になるので活躍機会は増えそうです。

また前を閉めようとしたとき違和感を感じたのですが、ファスナーが右側に付いています。調べた感じどうもアメリカの服は日本の左側と逆のことが多いらしいですね。大したことではないですが、右利きで慣れてないのもあり少し閉めにくさは感じますね。

最後に

こういうグッズ販売をするようなOSSプロジェクトはあまり見たことがなかったのですが、応援する側にとっては好きなOSSのグッズがもらえるのは嬉しいし、良い取り組みなのかなと思いました。

今後もVuetifyが発展していくことを祈って、みなさんもぜひVuetify Storeでなにか買ってみましょう！

*1:英語での住所の書き方は、海外通販するなら必ず覚えたい！住所入力フォームの英語での書き方などのページを参考にしてみてください

We Are JavaScripters! @36th で登壇してきた #wejs

勉強会参加・登壇

9/30に以下のイベントでLTしてきました。 wajs.connpass.com

スライドはこちらです。

発表内容

タイトル通り「TypeScriptでVSCodeの拡張機能を作っている話」をしました。ほんとうは登壇までに完成させて「作った話」にしたかったですがｗ

VSCodeの拡張機能を作るのもTypeScriptを触るのも初めてだったので、今回の開発経験をもとに以下の3点について話しました。

作っている拡張機能について

「CircleCI Status」というVSCodeの拡張機能を作っている話を最初にしました。

github.com

スライドにもあるように正常系は大丈夫そうですが、それ以外がまだ怪しいので修正して頑張って公開までこぎつけたいと思います！

VSCodeの拡張機能開発について

拡張機能開発を実際にやってみて、「こんな流れで開発してたよ」って話をしました。

簡単にまとめると、「ドキュメントを読むよりはコード読むほうが開発の参考になるかも？」という話です。まあ公式ドキュメントは英語しかないから理解が追いつかないって部分もありますが 😇

特に以下リポジトリの、公式のサンプルコード集には本当にお世話になりました。

github.com

TypeScriptで開発してみて

（拡張機能開発には直接的には関係しないですが）TypeScriptを初めて触ってみて、良かったところ・辛かったところを話しました。

VSCode上での開発体験本当に素晴らしすぎます・・・

会場について

会場のSmartHRさんが入っている六本木グランドタワーは、すでに何度か行ったことがあったので特に迷わず行けました。ただビルに入ってからどこに行けばいいかは分からなかったので、以下の記事がとても分かりやすく参考になりました。

shanaiho.smarthr.co.jp

会場の中はとてもきれいでした！

感想

「We Are JavaScripters」の参加は1年以上ぶりくらいでしたが、当時から良い意味で登壇への敷居の低さは感じれる勉強会だったので、特に変わってない感じで良かったです。

またスピーカー側にはバッジをもらえたのですが、こういうのがあると懇親会のときに誰がスピーカーだったか分かりやすくなるので、良い仕組みだと思いました！

登壇枠の倍率がいつも高いので次がいつになるか分かりませんが、機会あったらまた登壇したいですねー

技術書典7にサークル参加したので頒布数や大変だったことの話 #技術書典

勉強会参加・登壇

9/22 の技術書典7に「くろもワークス」で参加してきました！ ブースの様子はこんな感じです。当日来て頂いた方ありがとうございました 🙏 f:id:kuromoka16:20190923233941j:plain

頒布した本

「PHP7時代のコードの書き方」という、あとがきでもTwitterでもたびたび言ってますが我ながら偉そうなタイトルの本を頒布しました。

内容的にはPHP7.3までのPHP7の新機能についていろいろ紹介している本です。PHP7使っているけどPHP5のころと何も変えてなかったり、PHP7の新機能をまだ知らない方とかの参考になることを期待した本になっています。
正式版はまだなので付録としましたが、PHP7.4にもちょっとだけ触れています。（印刷するにあたってページ数を4の倍数にする必要があるので急遽入れたという事情もあったりなかったり・・・）

boothでもPDF版・冊子版を販売しています。冊子版のほうはこの記事を書いた時点ではまだ入荷待ち状態なので、「入荷お知らせメールを受け取る」をポチってくれると嬉しいです。

当日の頒布数

当日は冊子版と急遽キンコーズ大先生にお願いして、DLカードも作ってみて頒布しました。頒布数としては以下のような数値になりました。

  • 冊子版
    65冊
  • DLカード
    9枚

サークル側からはチェック数が見れるのですが最終的には「被チェック数：151」になりました。もちろん全員が必ず来て買うわけではないのは理解しているんですが、それを加味してもちょっと少ない印象はあるので本のクオリティを上げていくことが必要かなと感じています・・・

また今までの技術書典ではコピー本でやってきたのを、今回は初めて印刷所に入稿（日光企画さんにお願いしました）して本を作ってみたりしたので、気合が入ってたのと単価を安くするために200冊刷ったので、冊子版が結構あまってますｗ
手元に少しだけ残して大半は会場からboothに直接送ったので重い荷物を持ち帰ることはなかったですが、単価に目がいって自分のレベル感にあっていない部数を刷ったのは課題ですね。

あとは執筆にいっぱいいっぱいでSNSなどでの宣伝に時間を掛けれなかったのも敗因とは思ってて、次は余裕を持って原稿完了させて宣伝に時間を掛けれるようにしたいです。

大変だったこと

売り子が大変

サークル「くろもワークス」は私一人でやっているので、一人だと当日もスペースに私しかいないのでなかなか離れづらいのが難点です。自分のほしい本を買えなかったり会場の様子とかも本当はもっと見て回りたかったです（3Fはこれまでと比べて平和でしたが2Fはすごかったらしいので）。
売り子の募集もかるーくTwitterで掛けてみたんですが、自分の本がほんとうに出来上がるかが不安で万が一落としてしまったことを考えるとあまり積極的には宣伝できなかった、というのもあります。

デザインが大変

ただ売り子は最悪当日自分が我慢すればなんとかなるんですが、それより大変だったのは間違いなく各種デザインの作業でした。
具体的には、本の表紙の作成・頒布物紹介の作成・DLカードの作成・印刷所への入稿データの作成など・・・デザイン知識皆無の素人がこれらをやるのはめちゃくちゃ大変でした。
逆に言えば、普段エンジニアとして働いているとまずやらないことなのでデザインを作る楽しさもあるんですが、やはり他のサークルのきれいなデザインの表紙の本とか見ると凸みますorz

良かったこと

印刷所に本を入稿して本を作れたこと

今回の個人的目標でもありました（前回の技術書典6後のツイート）

入稿はギリギリになってしまったので当日に初めて製本された自分の本を見ました。朝に自分のスペースにつくと印刷所の方が置いてくれた段ボールがあったのですが、開けたときのコピー本との品質の違いにちょっと感動してました。 f:id:kuromoka16:20190924012554j:plain また入稿しようと思うとイベント前に強制的に期限ができるので、これまでみたいに前日のギリギリまで執筆するような事態にはならず、心理的に楽な状態で当日を迎えれたのは良かったことでした。

過去に比べて一番多く頒布できたこと

先ほど当日の頒布数も書いたのですが、このくらいの頒布数は技術書典のサークルの中では全然ありふれた数だと思っています。
ただ自分の中では技術書典5からサークル参加してますが、今回が一番多く頒布することができました。これは5や6が正直適当な心構えで薄いコピー本で参加していたのもありますが、本の内容的にも今回は初めて黒歴史化しないレベルにはまとめられたのが大きいと思っています。
boothでの販売も初めてやってみて、そちらでもぼちぼちと売れています。ありがとうございます！

次回の目標

次の技術書系のイベント参加は技術書典8になると思いますが、まずは今回出せなかったVuetifyの本を出したいです。今回Vuetify目的で来てくれた方もいたのですが申し訳なかったです。

またデザインはさすがに自分だけだと限界を感じたので、素直にデザイナーの方に頼めるような状態を作っていきたいかなと思っています（残念ながら私の周りには今のところあてがいないですが・・・）

あとは原稿に余裕を持たせて、早割入稿（早めに入稿するほど印刷代が安くなる）を決めたいところです。

改めてになりますが、当日来て頂いた方またboothで購入してくれた方もありがとうございました！

あるあるLT〜サーバーサイドエンジニア〜 Vol.3 でLTしてきた #あるあるLT

勉強会参加・登壇

6/17に以下の勉強会でLTをしてきました。

andfactory.connpass.com

スライドはこちらです。

テーマについては自分が好きなPHPネタとも悩んだのですが、技術領域がバラバラなことが推測されたので今回は汎用的なテーマにすることに決めて、
自信の経験を元に「チームにジョインしたての開発あるある」というテーマで発表しました。
内容は以下の3個のあるあるネタについて、それぞれ話をしてきました。

  • ローカルの環境構築が大変
  • ドキュメントのサーバ情報が古い
  • 同じエラーログがたくさん出ている

今回この勉強会には初めていったのですが、いい意味でかなり登壇テーマが自由な印象を受けました 😊
人数的にもそこまで大規模でない分、懇親会で多くの人と話せる機会があって楽しかったです！

雑記

前の記事に引き続き、会場に着くまでネタです。

kuromoka16.hatenablog.jp

会場のand factoryさんは、住友不動産青葉台タワーというところでした。 f:id:kuromoka16:20190620011357j:plain

地図を見ると分かるのですが、割と駅から離れていたのでどうやって行くのか悩みました。
調べてみるとシャトルバスが出ていることが分かったので、仕事帰りであまり時間がなかったので、行きについてはこれに乗っていきました。
参考になったら嬉しいです！

ProLabo(プロラボ)渋谷もくもく会 #5 に登壇してきた #ProLabo

勉強会参加・登壇

5/18に以下のもくもく会でLTしてきました。 itpropartners.connpass.com

一般枠がなかなか空きそうになく参加できなそうだったので、前日からスライドを作り始めてLT枠で申し込みをしました。

発表したスライドは以下です。

Vuetifyに初めてOSSコミットをしたのでそれに至るまでの話と、実際にPRを送ったときに苦労したことなどをお話しました。
あとVuetify 2.0に向けて、ドキュメントの翻訳を進めていることもちらっと話しました。 ↓はスライドに書いたCrowdinのVuetifyのプロジェクトページです。 crowdin.com

会場の設備も電源もありwifiもあったので特に不便に感じることもなく、また登壇の敷居が低い印象を受けたためとても良いと思いました。
今回はなかったのですが餃子 🥟が出る会もあるそうなので、今度はそのときにぜひ参加したいなーと思います！

雑記

会場のITプロパートナーズさんのイベントスペースに渋谷駅から歩いていったのですが、 坂が多く通勤大変じゃないかなとちょっと思いました。ただ体は鍛えられそうですが 💪

f:id:kuromoka16:20190519135253j:plain

また渋谷は前職の職場の近くだったため、久しぶりに来てちょっと懐かしさを感じました。 ランチはそのときによく行ってた 信州屋 渋谷店 （そばどころ しんしゅうや） - 渋谷/そば [食べログ]のそばを食べてきました。

f:id:kuromoka16:20190519135737j:plain

転職して周りが高いお店ばっかりなので、この価格帯のお店があるのはやっぱ羨ましさを感じました。

技術書典6にサークル参加していました #技術書典

勉強会参加・登壇

遅ればせながら、4/14に行なわれた技術書典6に「くろもワークス」としてサークル参加をしていました。 techbookfest.org

f:id:kuromoka16:20190418013115j:plain

ほんとは開催前に宣伝としてこんなの出します！って記事を書きたかったのですが＞＜
いつもの締切に近くならないと頑張らない癖のせいでコピー本になってしまったため、当日まで告知できませんでした。大変申し訳ないです 🙏

頒布したコピー本ですが「PHPで学ぶはじめてのGraphQL」という本を出しました。 f:id:kuromoka16:20190418010950j:plain

薄い内容で恐縮ですが、少しでもPHPでGraphQLに触るきっかけになったら嬉しいです。
当日に来て立ち寄ってくれた方、そして買って頂いた方ありがとうございました。

本にも記載していますが、サンプルコードのリポジトリは↓になります。 github.com

BOOTHでの電子版PDFは一瞬販売していたのですが、今の内容で公開するのはちょっと恥ずかしいのでいったん非公開にしました。
内容を増強してまた公開できたらと思っています。

次の技術書典7にも申し込む予定で考えています！
受かったら、次こそはちゃんとしたオフセット本を出せるように頑張っていきます 💪