Technote

by sizuhiko

esm LTでブラウザの最新動向について話しました

esm LTとは永和システムマネジメントの社内LT大会のようなもので、福井にゆかりのあるやきとりの名門 秋吉のやきとりとビールを片手にワイワイ楽しむイベントです。

自分で写真撮るの忘れたので、同僚のツイートを引用。

私が話したのは「ブラウザの最新動向について」ということで、PHPerKaigiでも話した import maps と、Chrome73から入ったDevToolsの Add Logpoints について話しました。

ChromeのDevToolsに入った新しい機能とか、そもそもWeb Updatesみんな読んでないよね、ってことで、新しい機能便利なんでみんな読もう!ってことです。

Logpointsに関してはWhat’s New In DevTools (Chrome 73)の記事を読んでください。 最初に紹介されます。 これからみんなソースコードにデバッグ用途の console.log() を書くの禁止な!

PHPer Kaigi 2019に参加しました

初めてのPHPerKaigi参加です。 これまで予定が重なっていて参加できなかったのですが、今年は年度末開催ということで、他の予定もなく参加することができました。

どうせなら何か話さないと、ということで

他はセッションを聞いていました。

CI/CDとは…

CI/CD相談会で受けた印象は、CI == 自動テストやってます、CD == ツール使ってデプロイしてます(完全手動ではない)という雰囲気の人が多く、ほんとうのCI/CDにはまだまだ遠いなぁという感じ。それでも私がテストやろうね、といってほとんどの人が書いてない時代からは大きな変化で、いつかほんとうの意味に近づいてくれることを期待しています。

import maps と HTML Template Instantiation について

アンカンファレンスではWeb Componentsの周辺仕様の動きについて、話しました。

このうちCSS Shadow PartsはCSSWGのドラフトになっていることもあり、概要をさらっと説明。 Custom Element RegisterHTML Modulesは、Web Components色が強いので、これも概要をさらっと。 で、import mapsHTML Template Instantiationについて、少し深く話しました。

import maps

これは過去のブログ記事でも登場した Package name maps の最新の名前です。過去のリンクからは自動的にリダイレクトされます。 bower によるJavaScript依存ライブラリのインストールが、npm中心のエコシステムに変わり、ブラウザからそのモジュールを利用するには Webpack のようなもので依存解決をする必要がありました。 しかし今日では ESModule Import がブラウザでもサポートされているので、以下のようなコードでライブラリを利用したくなります。

import moment from "moment";
import { partition } from "lodash";

しかしブラウザは from から読み取るときURIとして識別するので、当然サーバーからJavaScriptファイルを取れないし、Node.jsと違って package.json から main のスクリプトファイルをロードすることもできません。 そこで import maps では以下のようなマッピング定義を使います。

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}

するとブラウザはマッピングファイルから以下のように記述されたものとして解釈します。

import moment from "/node_modules/moment/src/moment.js";
import { partition } from "/node_modules/lodash-es/lodash.js";

これはWeb Componentsに関係なく、普通にHTMLからjQueryを使おうとしていた人にとってもわかりやすくなるし、Webpackからも解放されるので、はやくブラウザ実装になってほしいなぁと思っています。

HTML Template Instantiation

「テンプレートエンジンをブラウザ自体に」というのがこの仕様なわけですが、様々なフレームワークや handlebars のようなライブラリまで、テンプレートエンジンは数多くあります。ブラウザでやることは車輪の再開発なのか?という点については、RawレベルのAPIが利用可能になることでDOMの書き換えをブラウザがやってくれることはスピードアップにつながるし、ぜひとも進んでほしい仕様の一つです。 PolymerチームのJustinなど、各ブラウザベンダーの人も議論に参加しているので、期待できます。

フロントエンド相談会

Reactを使う人、Vueを使う人、Web Componetsを推進したい人(私)など、様々なお悩み、SSRの話しなども出ました。 技術ワードに踊らされるのではなく、それぞれの課題に対して議論できたのがとても良かったです。 IRT楽しかったですね。

出張版PHP勉強会@東京で話しました。

「PHPを学ぶということ」というタイトルで初心者セッションをやりました。

最近PHP勉強会で初心者の人多いなーと感じることが多いのと、開発チームでもプログラミングこれから!みたいな人にどうしたら良いのかなーと思うことがあって、まずは勉強の入り口にどうしたら良いかというキッカケを作ることができれば良いと思いました。

PHPコミュニティのSlackへの参加者が、このセッションをきっかけに結構増えたので、良かった!

さいごに

PHPerKaigi とても楽しかった。 交流がメインのカンファレンスらしく、多くの人と、様々な話題について議論できました。 さぁ、次は福岡に行きますよ!

Polymer.co-edo meetup #23を開催しました

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

今回、私はいよいよEdoエレメントの作成に入りました。 名前は edo-blogcard です(まだリポジトリをPUSHしてないので、upしたら別の記事にします)。 これは、はてな等でブログにリンク先のサムネ、タイトル、概要の部品が入っているのを見たことがあると思うのですが、あれです。 これを LitLoader を使って作り始めました。

次回

2019年のGWに Polymer.co-edo day として開催予定を公開しています。 私が1日 co-edo で作業しているので、一緒にもくもくしたり、Web Components関連の質問を受け付けたり、 好きな時間に来て、帰ってもらっても大丈夫な1日になります。 皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ

Web×IoT メイカーズチャレンジ 2018-19 in 東京【ハッカソン】にチューター参加してきました

1ヶ月前に始まった東京ステージ、Web×IoT メイカーズチャレンジ 2018-19 in 東京【ハンズオン講習】にチューター参加してきましたの続きです。

チューターも、デモに向けて各チームの完成を全力で応援します。 工作からプログラムまで、その道の凄腕が揃っています。

最後はバタバタとしましたが、みんな何かしらデモできる状態になって、デモからの審査。 最優秀作品(と予定になかった優秀賞3つ)も決まりました。

最優秀作品は今週末に開催されるスマートIoT推進フォーラムに展示されますので、興味がある人はぜひ見学にいってみてください。 (それまでに完成度が上がっていると良いなー)

Polymer Japan Cafe #4 もくもく会が開催されました

今月のPolymer/Web Components のもくもく会は、Polymer Japan との共催になったので、Co-Edoではなく渋谷にて開催となりました。

Lit Elementが2.0リリースになったので、 はじめての LitElement エレメントの作り方のバージョンを最新に更新しました。

Lit Elementではスタイル定義を以下のように、記述することが推奨されています。

class MyElement extends LitElement {
  static get styles() {
    return css`
    :host {
        display: block;
    }`;
  }
}

これはConstructable Stylesheetsとして2019/1/24にGoogleから提出されたアイデアで、 エレメントのスタイルを static getter で返すことで、ページ内に同一エレメントが複数回あるとき1回だけスタイルを評価するようになるというものです。 高速化には役立ちそうですが、現時点サポートしているブラウザあるのか?(Chromeはもうサポートしてるかも)という状況です。

なので前述のCodeLabとか、私の好きなLitLoaderとかは、まだConstructable Stylesheetsの記法には対応していません (もちろん従来の書き方でも動きます)。 でも注目していきたい仕様の1つではあるので、今後組み込むこともあるかもな、とは思っています。

詳しくはLitElementの公式ドキュメントのStylesを参照ください。