Technote

JavaScriptでコードを書くときは JS Beautifier を使ってフォーマットしていたのですが、 mizchi’s blogの最近のフロントエンドのエディタ事情で

フォーマッタは当然のように prettier が入る。もう選択肢はなくて、猫も杓子もprettier。すでに勝負は決している。

と書かれていたので、じゃぁprettier入れようと思ったのがきっかけです。

prettier を使うには

私がメインで使っているエディタは Adobe Brackets です。 vs-code にも atom にも拡張があるので、Bracketsでも誰か作ってるだろう… と思ったらありませんでした。 ここで考えたのが、以下アイデアです。

• gulp-watch 使って、ファイルに変更があったら自動的に変換する
• git の commit フックに仕込む
• Bracketsの拡張作る
• vs-code にエディタを変える

Brackets 愛が強すぎて拡張を作ってみることにした

まぁアレですよ。エディタの機能拡張といえば古くは（これはものすごく古い話）Emacsの拡張作ったり、Sublime使っていたころはpython使って拡張書いたりしていたので「エディタ拡張を作るとは」みたいな流儀はわかっていたつもり、でした。 そもそもBracketsの拡張ってatomやvs-codeとどう違うのか？と思って、atom版とvs-code版のコードを見比べましたが「お・おぅ」となって、断念しました。 まぁBracketsってCEFベースだからなー（electronベースではない）、そもそもコードを流用とか考えない方が良さそうだ。

Brackets 拡張を作るのに参考になるサイト

とりあえず調べられた範囲が以下のとおり

• 初めてのBRACKETS拡張機能の作成
  • 記事が2012年で大丈夫かぁ？と思ったが、終わってみれば何も変わっていなかった
• How to write extensions
  • こちらは2015年に更新されていて、情報のメンテはされているようだ
• Brackets API
  • 詳しいAPIの使い方が書いてある Show code が便利というか、それ見ないとわからないよ！

どうやって作るか

公式サイトにも書いてあります

For a quick start, you can paste in the Simple “Hello World” extension or the code from an existing extension that is similar to what you want to do.

「既存の機能が似ている拡張のコードを参考にすると良いよ！」（おまえドキュメントを書くということを放棄しているんじゃないだろうな…

参考にするもの

Brackets Beautifyという、最初にも紹介した JS Beautifier を使えるようにする Brackets拡張です。 普段この拡張を使っているので、参考にするにはもってこいです（機能もコードフォーマットという部分では似ている）。

いくつかの壁

Brackets Beautifyのコードは難しくなく、簡単に読めたのですが

• これテストコードとか書けないの？（まぁ書けないに近い
• ES6とか使えないの？
• ファイル分割するベストプラクティスとかないの？

という部分が気になりました。 他の拡張のコードをいくつかみたりしましたが、まぁエディタの拡張って、ちょこっとした機能だから分割するまでもないんですよね、「わかる」みたいな感じ。

結果として

• テストコードは諦めた（モックのテストになりそうだったので
• ES6というとアレですが、 const let あたりは使えた。allow functionはエラーになってしまった
• ファイル分割してみた！（ベストではないかもしれないが!!

Brackets Prettier 作ったよ！

そんなこんなで、Brackets Beautifyのコードを パクって 参考に、Brackets Prettier を作りました。

Brackets 拡張を作ったらやること

Brackets Extension Registryというところに登録しておくと、エディタの 拡張機能マネージャ からインストールできるので、世界中のBracketsユーザーが prettier と検索したら出てくるようになります。 で、レジストリへの登録方法は、公式WikiのExtension Registry Helpに書いてあるので、そのとおり作業を進めます。

で、登録するとBrackets拡張のBotアカウントがツイートしてくるんですね。知らなかった。

Brackets Prettier - 1.0.0 (NEW) https://t.co/axTV7nu5xB https://t.co/3KQ31k1dED @brackets

— Brackets Extensions (@brktsextensions) 7 June 2018

今後は

Brackets拡張の作り方わかったので、これからは俺得な拡張をもっと作っていこうと思います！ とりあえずPolymer関係を作ろうかなー

CakePHPのコア開発のメンバーでもある dakota が南アからPRをくれました。 最近は普段からCakePHP使っていないので、PRはとても助かります。 テストコードなかったので、たくさんビルドエラーになっていましたが、マージして、私の方で対応しておきました。

デフォルトのdevelopブランチから取得すると、CakePHP3.6の開発でも利用できます。

まだリリース切ってないけど、3.6以前と互換性なくなるので、バージョン番号の規則から言うと 0.x → 1.x にするしかないのかな。 もう少し見直してから（結果として何も変わらないかもしれないけど）1.0にしたいと思っていますので、しばらくお待ちください。

Polymerそのものと、Polumer.co-edoでの活動（取り組み）について、LTをしました。

co-edoに集う人の中から参加者が増えると良いなーと思っています。

今月は6/25に PWA starter kit のハンズオンを予定しています。

5/29に開催された Vivaldiジャパンツアー2018 #Vivaldi帰れま千 に参加しました

古くからのOperaユーザーがほとんどでした。 中には母親から与えられたPCにOperaが入っていたという若手もいて、年齢を感じましたがw

Peatixのオフィスは恵比寿の、月に2度以上は目の前を通る場所でした（そこに入っているの知らなかった）。

みんないろんなTIPSを持っていて、すごいなーと思う反面、私はヘビータブ使い（500タブとか当たり前）なので、タブの話（要望）を。 標準でタブスタックできて、検索もできるんだけど、ウィンドウ横断でタブ検索できるようにしてほしい！というLTでした。

昨夜、東京でのミートアップも大盛り上がりでした。登壇いただいた方、ご参加いただいた方、みなさまありがとうございました！！#Vivaldi帰れま千 pic.twitter.com/OL4qSbIzHo

— Vivaldiブラウザー (@vivaldi_jp) 2018年5月30日

1年に一回ぐらいなのかな、ユーザーの集いがあるブラウザって良いですね。

今年5回目となる Polymer.co-edo ミートアップ を開催しました。

今回の議題は

今回は先日開催された Google I/O ‘18 から Polymer のセッション動画を見ながら Polymer3 のリリース記念パーティとして、食べ飲みしながら情報共有したいと思っています。

ということで、ピザとビールを片手に Polymer 談義が盛り上がりました。

Google I/O で発表された内容のリンク集

Polymer Japan の Facebook グループには、Google I/Oの翌日に貼りましたが、こちらにもまとめておきます。

セッション動画

• Web Components and the Polymer Project: Polymer 3.0 and beyond
• PWA starter kit: build fast, scalable, modern apps with Web Components

セッションで紹介されたサイトなど

Web Components and the Polymer Project: Polymer 3.0 and beyond

• CSS Shadow Parts
• Custom Element Registers
• Package name maps
• HTML Modules
  • https://github.com/w3c/webcomponents/issues/645
  • https://github.com/PolymerLabs/html-modules-toolkit
• HTML Template Instantiation

PWA starter kit: build fast, scalable, modern apps with Web Components

• PWA Starter Kit
• pwa-helpers
• Redux and state management
• Application testing
• Building & Deploying

Polymer の過去/現在

Polymer 3.0 のリリースに関して、Polymer がいつ発案されて、どうやって進んできたのか、という話から始まりました。 とても古いGoogle I/Oの写真を使ったりして、Web Components がどんな問題を解決しようとしていて、Chromeチームとしてどのように取り組んできたか、がわかります。

ブラウザ/JavaScriptを中心としたフロントエンドのトレンドは変化が大きく、最初にWeb Componentsを発案したころと、現在では細かいところに問題が多く残っていたのは事実です。 ただ一方でPWAに代表されるように、モバイルアプリでできることをブラウザでもできるようにする取り組みも、大きな進歩を遂げています。

PolymerがGoogle内部でどのような位置付けになっているのかを図るのは難しいのですが、少なくとも多くのプロジェクトで利用されていることは間違いないです。

そして「現在の最適解」がPolymer3であるわけです。 動画の中でも Too weird として紹介されていた、 polyfill/perceived silo/bower/HTML imports の解決に取り組んできたということです。

polyfill については、モバイルブラウザ（iPhoneならsafari/Androidならchrome）では、Polymer3.0の仕様であればpolyfillを必要としない対応状況です。 perceived silo （自己中心的、というかWeb Components == Polymer みたいに受け取られていた批判みたいなもの）については、 Custom Elements Everywhereでも公開されているとおり、AngularやVueなどPolymer以外のJavaScriptフレームワークでも利用できることがわかります。 bowerについては、発案当時はフロントエンドでは非常に流行っていた、けど今はということで npm に。 HTML importsの仕様化はあきらめ、多くのブラウザが実装する ES Module Import へと。

そう、Web Components は、今日ではメインストリームになるのです。

一部のツールはまだPreviewですが、フィードバックを待っているということで、特に何もなければ大きな変化はなく、リリースになるのではないでしょうか？

• lit-html
• polymer-modulizer

未来

PWA Starter Kitで作れるアプリのコードを見るとわかるのですが、 lit-html を使うことで Polymer 感？みたいなのは非常に薄まります。PolymerElementじゃなくなるし。 ただ lit-html は Polymer3 をベースに作られているし（互換性は少ないけど）、Polymerチームは多くの Web Components を公開しています。 Polymerは、Web Components を使って課題を解決するのに役立つ下回りを整備してくれるライブラリやフレームワークとしてまだまだ価値があると思っています。

あとは、Polyemrチームが取り組んでいる、上記で紹介した今後の仕様に期待しています。 特に HTML Modules について、ES Module Import によって HTML部分が HTML in JavaScript になるわけです。 「どうしてもHTMLで書けた方が良いじゃん！」というPolymerチームの意思というか（私もそうですが）HTML Importsはダメだったけど、これなら良いでしょ！私たちはHTMLで書きたいんですよ！愛が溢れています。

次回は

6/25(月) の予定です。Doorkeeperのコミュニティページに今年の予定も書いてあるので参考にしてください。

PWA starter kit のハンズオンをやって、Polymer3 や lit-html を体験してみたいな、と思っています。