PHPカンファレンス福岡2回目の参加

PHPカンファレンス福岡2017に参加してきました。前回の参加は一昨年のPHPカンファレンス福岡2015でしたので2年ぶり。地元宮崎県から近い福岡県開催というのもありがたい。このところPHPそのものの知識や技術に希薄になっている気がするので、新しい発見があるかなと思うとワクワクしながら行きました。

とりあえず自分が聞いて興味深かったセッションの内容とカンファレンスの様子をレポートとして記録。

WordPressのこれから

まずは@miya0001さんのセッションを聞きに行きました。日頃からWordPressをさわっているので、このセッションはマストで聞こうと思っていたので。会場入りがギリギリだったので、間に合ってよかった…。会場にはWordPress界隈のお知り合いで@tekapoさんや@marushuさんがいらっしゃったので、ちょっとご挨拶。九州はホッとする。

WordPressの全体的な方針について

WordPressの素晴らしいところの一つに後方互換性にあると思います。セッションの中でも語られていましたが、今後もこの方針は変わらない（はず）ということが聞けて一安心。どうしても新しい技術が入ってくると古い技術が切り捨てられることになるのですが、そこを見捨てない？といったら語弊があるかもしれませんが、ではどうやって対応していこうか？という発想になるところがいいなと。まぁ当然対応できる限界はくるとは思うのですが、可能な限りこの考えは失わないでほしいと切に願います。

WordPressの新プロジェクト

コードネーム：Gutenberg（グーテンベルグ）というプロジェクトの紹介がありました。WP-APIの実装により管理画面の多くの部分がAjaxで非同期化する方向だそうです。
フレームワークにReactかVue.jsを採用するという議論がでているということで、これは勉強せねばと思いました。どっちもさわったことあるレベルなので、まじめに勉強し直そう。

Gutenbergは従来の投稿画面をもっと投稿しやすいようにする仕組みのようで、ブロックレベルで投稿を管理できるようになるそうです。これは日頃WordPressでブログなど投稿している人にはかなりありがたい機能になりそうです。複数人で投稿するような場合、ある程度のところまでは自動で構成されると思うので、コーディングにバラつきがなくなりそう。

flowで始める型のあるJavaScript

次に聞いたのが、@sota1235さんの登壇。facebookがオープンソースとしてリリースしているJavaScriptの静的型解析ツール、flowのお話。PHPの話出てこないですw
PHPカンファレンスはフロントエンドエンジニアはアウェー感ある（と思う）ので、こういう話が聞けるのは嬉しい。

あくまで静的型解析ツール

flowはフレームワークやAltJSではなく、あくまで型の解析を行ってくれるツールであるということです。JavaScriptは型なし言語なので、型言語であれば発生するはずのエラーをその処理を「正」としてエラーなく通してしまうことが多々あります。PHPも同じ型なし言語なので同様のことが発生する場合がありますが、JavaScriptのほうがうーん、と思うところが多いです。そういうところもかわいいのですが。

flowを実際に試してみる

大体話している内容は理解できたので、なにはともあれやってみようと思い、休憩の合間にローカル環境にflowをインストールしてサンプルを書いて動かしてみました。

// @flow
function concat(a: string, b: string): string {
  return a + b;
}
concat(1, 2);

// @flow と書くことでflowのチェック対象となります。関数の引数に数値を渡すと、通常であれば「3」という戻り値が返ってきてエラーはでませんが、関数の意図としては文字列の結合をしたい。そこで関数側の引数をstring型で定義しておけば、number型が渡されたときにエラーを出すことができます。

concat(1,2);
       ^ number. This type is incompatible with the expected param type of
function concat(a: string, b: string): string {
                   ^^^^^^ string

このように型のチェックができるというもの。使いどころですが、TypeScriptを最初から使えば？と思われる方もいるとは思うのですが、既存のシステムのJavaScriptに導入したりといったかたちで導入することになるのではと思います。最初からflowでチェックする前提でコーディングすれば、型を意識するので抑止力が出そう。いろいろな型チェックができるようなのでこれは別途ブログでまとめよう。

Progressive Web Apps + AMP = PWAMP for PHPer

@yui_tangさんの登壇を聞きに。実はこれが今回一番聞きたかったセッション。PHPに触れない話をする枠ということで、PHPの話は出てこないけどw
お前は何故PHPカンファレンスなのにPHPのディープなセッションにいかないんだというのは置いておいて、AMPはWordPressで実際に実装して試しているのでわかるのだが、PWAはまだ理解が浅い上にAPMとの組み合わせがどう作用するのかということの理解を深めたく聞きました。

PWA (Progressive Web Apps)

発展途上国からの検索件数が爆発的に伸びているそうなのですが、回線環境の悪い国ではダウンロードすらつらさや料金制度のつらさなどある。Webブラウザで表現できることが増えたので、要は限られたリソースの中でWebでできることを活かしていけばアプリ化せずともいける的な感じ。

実際、PWAでできているという「Twitter Lite」をインストールしてみました。おー、確かに速い。アプリのように登録申請が不要だし、ゲームのようなアプリでなくニュースなどを閲覧するようなアプリであれば、もはやPWAでいいな。ECサイトをPWA化できればWebViewに頼らずいけそう。これはやってみる価値が大いにある。

技術的にはServiceWorkerが使用されているのですが、この実装に関しては別途ブログで書こうと思います。WordPressでもPWAのプラグインがいくつかリリースされているのですが、あまり更新もされていない感じなので思い切って作ってみようかなと思っています。

AMP (Accelerated Mobile Pages)

AMPはWordPressであればプラグインで簡単にAMP化できます。実際にこのサイトでも実装していますし、AMPからのアクセスも日に日に増えていますね。最近はformなど使えるタグの種類も増えてきたので、これからできることが増えそう。このセッションで聞きたかったのは、PWAとAMPがどのように交わるかということなのでワクワクしながら聞いてました。

PWA + AMP

PWAはインストール後が速い。AMPは最初から速いがコンテンツがリッチでない。じゃあAMPでPWAをインストールすれば？という話を聞いて「Σ( ﾟДﾟ) おぉぉぉぉ！！なるほどー！」となりました。すごい。そうか。なるほど。そうだよね。腹落ち感がハンパなかった。Web/PWA/AMPそれぞれのすみ分けがあって、それぞれのリソースをうまく活用できれよいなと思った。ははーん。

Apple

非常に残念なことにPWAの技術根幹であるServiceWorkerにSafariが対応していないということ……。まぁアプリの申請登録がいらずにアプリのようなことができる技術であれば自分たちのうまみがなくなるのはわかるが…。Safariが第二のIEになりそうな予感。しかしPWA+AMPおもしろすぎる。聞けて良かった。