なぜエヴァンジェリストになったのか?

1000ch氏(以下、1000ch):司会進行は私、1000chが務めます。よろしくお願いします。

(会場拍手)

ちなみにこの3人って、この手のパネルディスカッションはやられたことありますか?

koba04氏(以下、koba04):ほぼないんじゃないですか?

laco2net氏(以下、laco2net):たぶん3人は……。

koba04:3人はないのか。

1000ch:じゃあこれは本邦初公開の。

(会場笑)

でも、ただ今日は、事前にコンテンツの話を若干していましたがプロレスをやる気はぜんぜんありません。僕の聞きたいことベースで、ご質問させていただこうと思っています。よろしくお願いします。

聞いていきたいのが、なぜ3人がエヴァンジェリスト的な活動をされてるのかということです。なぜAngular、Vue、Reactなのか。あと時間をどうやって捻出してコミュニティ活動に充ててるのかをお聞かせいただければと思っています。じゃあ、laco2さんから。

laco2net:なぜAngularなのかって言われると、僕は基本的にまず、Googleが大好きっていうのがだいぶデカいです。

(会場笑)

Google贔屓で入ってるとこがだいぶあるって言うか、たぶん8割くらいそうなんですけど。

(会場笑)

あとはオピニオン強いのが好きで。あんま考えたくないんですが、Angularはめっちゃ考えてくれるんです。あとイベントとか、ng-confの雰囲気、めっちゃ好きなんですよね。世界各地でイベント開かれてるんですけど、Angular関連のコミュニティのイベントの雰囲気が好きで。それもあって、コミュニティに一緒に入りたいということがありました。なので、日本でそういうムーブメントをやりたい、みたいな感じですね。

時間の捻出方法は、これははっきり言うとちょっとアレになっちゃうんですけど……けっこう仕事中にもやっています。

(会場笑)

だいたい家にいる時にやってますけど。仕事中にちょろっとやっちゃったりするんで、あんまりここ突っ込まないでほしいですね。

(会場笑)

1000ch:でもこれ公開されてますけどね。

laco2net:はい。まぁ周知の事実なんでいいです。

(会場笑)

きっかけはmizchi氏のブログ

kazu_pon氏(以下、kazu_pon):自分は、エヴァンジェリストという意識はないですけども(笑)。もともと始めたきっかけは、今日は来てないと思うんですけど、mizchiさんがブログを書いてたのを見て、「なんかおもしろいもんあるな」って感じで触って。そのあとプロジェクトで試しに使ってみて、「けっこうシンプルで、設計思想がいいな」って思ったのがきっかけですね。

その頃は0.8とか0.10とかそのへんだったんですけども、自分に必要なプラグインがなかったので、そのへんを作っていくうちに……Vue.jsの作者の人に「こういうプラグイン作ったんですけどどうですか」って聞いたら、「いいね」って感じで。そうやってたら自然にオーガナイゼーションに入れられて。そこからやっていくうちに楽しいなと思って。結論言うと、楽しいからやってるって感じです(笑)。

時間捻出は、自分もちょっと時間あるときは仕事中にやったりするんですけども、基本的に家帰ってからですね。夜、ちょっと時間作ってやっている感じですね。

koba04:自分は別にエヴァンジェリストではないんですけど(笑)。

(会場笑)

2人に比べるとぜんぜん、コミュニティ活動とかもやってないのでアレですけど。自分も最初はAngularとかVueから入ってきて。それで、Reactを最初見て……これまで自分の中でViewってインスタンスのオブジェクトだと思っていたんですけど、そこが関数的に考えられてるのがすごくおもしろいなと思いました。

あと、けっこうそのときバーチャルDOMってよく言われていたので、そこの実装がどうなってるのかにすごく興味を持って内部を見るようになって、いろいろ記事を書いているうちにやっていってるという感じです。

どうして今もずっとやっているかと言うと、Reactはさっき紹介したようなSuspenseとかもそうだし、Fiberとか。どんどん新しいことが内部で行われているので、そういうのを見たり。プルリクを送るとFacebookのエンジニアにレビューしてもらえたりするので、そういうのがおもしろいなと思ってやっています。

時間の捻出方法なんですけど、自分も一応仕事中にやっていいとは言われているので、やったりはしてますし(笑)。でも、基本は家帰ってやってることが多いので、その分、逆にほかの分野でキャッチアップできていない部分とかもあったりはします。基本的には好きなので、興味持ってやってる、って感じです。

1000ch:ありがとうございます。みなさん仕事をサボってやられてるということで(笑)。

(会場笑)

コミュニティの運営と海外との関わり方

1000ch:次は、実際にやられているコミュニティ活動についておうかがいしたいとおもいます。実際に運営してるものとか、(参加はして)いないけど「こういうコミュニティ活動がVue、React、Angularであるよ」とか。あとは海外コミュニティとの関わり方などを教えていただければと思います。

koba04:自分は、React meetupはやっていますが最初はぜんぜんReactの勉強会もなくて、あまり話も聞けませんでいた。なので、そういうの作ろうと思ってやった感じです。今は完全に自分のモチベーションベースでやってるので、あまりできていませんが。もし「やりたい」とかいう人がいれば、ぜんぜんウェルカムです。一緒にやってもらえるとありがたいです。

あとコミュニティ……日本で言うと、ほかにもReact Nativeのmeetupもありますが、そういう人と一緒にmeetupをやったり。あとはReactJS Tokyoかな? meetup.comでやってるので、海外の人も多いんですけど、そこの主催やっている人と。この前は自分のmeetupに来てもらって、今度自分はそこで話すんですが、そうやってお互いに交流しています。

海外との関わりという話では、時々海外から来てもらってるんですけど。そういうときも「『React Tokyo』でググったらお前を見つけたから、meetupとかないの?」みたいな(笑)。そういうこと言われたりすることもありますし、やっぱり海外のエンジニアで、「東京来たい」という人が多いので。そういう話をしてるところに巻き込みリプライみたいな感じで巻き込まれて(笑)話をしたりしてるのはあったりします。

なのでReactのカンファレンスとかは、日本でやってもいいかなと思っているんですが、自分がなかなか1歩を踏み出してないという状況です。

あとは本家のFacebookも、こういうディベロッパーコミュニティをすごくサポートしていて。そういう人から声をかけてもらって、「コミュニティ活動のサポートするよ」みたいな話ももらったりしている感じです。

コミュニティの立ち上げは2015年

kazu_pon:私は「Vue.js日本ユーザーグループ」というコミュニティを運営しています。もともときっかけになったのは、2015年かな? まだそのときは本当に規模が小さいと言うか、10人程度の人でした。自分は興味があったので開催したら10人くらいの方が来て、そこが始まりですね。

そのときは基本的に、私がどんな感じで使ってるのかを共有したり、ほかの人がどんなことに興味あるのかを話したりしていました。今は常時100名規模のVue.jsのコミュニティになっています。

そのときはそういう規模ではなかったんですが、たまたまそこにいた人から「翻訳しませんか?」というのがきっかけで始まりました。そこで最初のコアなコミュニティが生まれたって感じですね。

そのあと、そのコアなメンバーでやっていったんですけど、去年あたりに、突然100名規模になって(笑)。最初は自分とコアメンバーでしかやってなかったんですけど、ちょっと回らなくなってきちゃったので、途中からスタッフを募集して、今は20名規模でコミュニティを運営してます。

去年は3ヶ月に1回くらいの頻度でやっていたんですけども、今年もおそらくその頻度を目安にやってくかと思います。そういうかたちで運営してるって感じです。

そして、海外コミュニティとの関わりなんですけども……自分はコアチームメンバーのSlackにいるので、そのコアチームと関わったりとか。あとは韓国の人が私に直接コンタクトをしてきて、いろいろ「レビューしてくれ」とか「どうしたらできるんだ」とか相談あったりとか。そういう点で(関わりが)あったりして、Vue.jsの韓国のコミュニティに入ってたりして(笑)。そういうかたちでしか、ちょっと今関わりは持ってないって感じです。

あとはVue LandというDiscordベースのものがあるんですが、そこにたまに。そこはグローバルなので、たまに顔を出して、Japaneseっていうチャンネルでワイワイしてたりするって感じです。

Angularでは数少ないローカライズが進む国

laco2net:「Angular日本ユーザー会」っていうユーザーグループをやっているんですが、今はSlackをベースに活動してて、メンバーがもうすぐ1,000人くらいという感じですね。僕が代表になったのは2016年の秋くらいで、その前は別の代表がやっていて、「2.0.0出たから代替わりしようぜ」ということで代替わりしました。

ほかにやってるものとすると、年1回のイベントですね。ng-japanという、ちょうど先週土曜日にやったイベントがあって、だいたい300~400人くらいのイベントを年1くらいでやっています。

あとは100人~200人くらいのmeetup的なイベントが、これも1年に1回くらいある。なので半年に1回大きなイベントがある、みたいな感じになっています。イベント的にはそんな感じで、あとはちょいちょい初心者向けイベントとかやってるんですけど。

他には翻訳活動をやっていて、Angularローカライゼーションプロジェクトみたいなやつが世界で走ってるんですけど、現存してるのが日本と中国だけという悲しい状態です。ほかの国はだんだん頓挫していったんです。JPとCNが残っているのはけっこう大きいとこで、公式のドキュメントからAngular.jpにリンクを跳んでいるので、公式に認知されていて、中国と日本だけです。

翻訳作業は20人弱くらい……僕が言いだしっぺなんですが、ほかにもコントリビューターいっぱい集まってくれてて、GitHub上で活動してます。

海外コミュニティですけど、コアチームは先週ng-japanにお二人来てくれまして。今のところだいたい、毎年2人くらいコアチームが「イベントやる」ってなったら来てくれています。Googleのつながりもあるんですが、メールをしてやると「半年先くらいの予定を埋めてあげると行けるよ」みたいなメールが返ってくるみたいな感じですね。

ほかはとくに海外コミュニティとの関わりみたいなのはないかな。そんな感じですね。

どんなコントリビューションをしているか?

1000ch:ありがとうございます。後半のほうで日本語ドキュメント化の話がちょっと出ちゃったんですけども、3人が実際にライブラリ本体にやってるコントリビューションについてもうかがえたらなと思っています。

laco2net:さらっと話すと、僕はAngularのコードをだいたい全般に対してパッチ送ったりしています。あと「ドキュメント、足りてなくない?」みたいなやつ上げたり、日本語化したり。あとは新機能で「これ足りなくない?」みたいなプロポーザルを出したりしてます。

kazu_pon:そうですね……まず翻訳ですね。初期の頃から翻訳活動してるんですけども、今も引き続きやってます。ただ、バージョンがそろそろ2.6になるんですがドキュメントの量が膨大になってきていて。最近はCookbookが無限に増える雰囲気があって、その辺を1人でやるのはもう無理なので、その辺をなるべくコミュニティでやっていただきたいなと思っています。GitHubプロジェクトでissue化して、挙手方式じゃないですけども、できるようにしたりして。翻訳に関してはそんな感じでコミュニティが気軽に貢献できるように心がけています。

本体のほうは、最近はコアのほうにはコミットはしていませんが、たまにissueのトリアージしたりしています。最近ですとさっきのVue CLI UIの部分で。タイポとかドキュメンテーション周りとかやったり、あとバグを見つけたら修正をしたりとか、そのへんを手伝ったりしています。

あとは、Vue周りのライブラリ、プラグインを開発しています。そこの部分でまさにVue CLIのプラグインシステムが出てきたんで、そこを自分の持ってるプラグインで、エコシステムと言うか、そんな感じで貢献しています。

Reactコミュニティの今

koba04:自分も最近はそこまでしてないんですが、Fiberの開発が始まったときは、コードベースもすごく小さくて読みやすかったので、そのあたりでコントリビューションしたりはしてます。

ドキュメントの日本語化に関しては、これが微妙な感じになっていて(笑)。一応Crowdinっていうサービスを使って……jestとかyarnって日本語化されてると思うんですけど、あのへんのサイトってDocusaurusっていう、Facebookが作ってるドキュメントのオープンソースのやつを使っていて。

それはCrowdinとインテグレーションされていていいんですけど、Reactの本体のドキュメントってGatsbyで作られていて。そこをうまくやるところで止まっているという状態があります。だからCrowdinで翻訳とかは始まってるんですが、まだそこを受け入れられるところにない状況です。このへんは今後改善されていくかなとは思うんですが。

それで、日本語化も自分はぜんぜんやってないんですが、やっている人とかもいたりして、けっこう進んでいます。

あとは、Reactとかだとgood first bugはあるので、そういうのを取ればいいとは言えるんですが、Reactだと見ている人も多いので、本当、数十分とかで取られます(笑)。

たぶん本当にそれを使うのはけっこう難しいと思うので、なにかコントリビューションしたいということであれば……good first bugって、取ったらgood first bug takenというラベルに変わるんですが、それで放置されて取ったままやらない人がいっぱいいるので、そういうところを再度キャッチしてやるとか(笑)。

あとはドキュメントもそうですし、個人的にやるといいなと思うのは、サードパーティライブラリのところですね。やっぱりReactって本体じゃなくて、サードパーティのライブラリがいっぱいあって。ごく使われてるライブラリにも関わらず、メンテナンスがあまりされていなかったりすることがあります。そのへんの足りていない部分はあるので、そういうところをやるとすごくいいんじゃないかな、と思います。

例えばEnzymeも、すごく使われてるんですが、ちゃんと運営されてるとは言えない感じの状況になっているので、そういうところをやるといいんじゃないかなと思います。

コントリビューターになるためには

1000ch:ちなみにVueとAngularで、やったことがない人がやるには、みたいなのあったりしますか?

kazu_pon:翻訳に関しては先ほど言ったとおり、一応私のほうでなるべく分担というかコントリビューションできるようにしています。本体や周辺ツールはそうですね……最近公式でも、GitHubのラベル使ってwelcome contributionとか、初めての方でもできるようにアシストしています。そういうふうなところから手をつけていくといいかもしれないです。

laco2net:Angularに関して言うと、ドキュメント日本語化についてはたぶん、1番入りやすいコントリビューションかなと思います。「僕に声かけてもらえばやり方を教えるよ」って感じです。Readmeにも書いてるし、初めての人がプルリクを出してくれるので、ハードルは低いのかなと思っています。

コード周りのパッチに関しては、Angularってコアチームがガリガリ書いていて、トリアージした先からコアチームがどんどん解決していっちゃうので、あんまりgood first bugみたいなやつってないんですよね、Angularって。

どちらかと言うとドキュメントにそもそもの不備があるとか追い付いてないとか。ドキュメンテーションの修正がたぶん1番狙いどころで、「このコードサンプル古いんだけど」みたいなの投げると、スッ、とマージされたりするので、そういうとこが狙い目で、GitHub上でアイコンが出てうれしいな、みたいな感じですかね。

あとはcliとかサブプロジェクト、例えばAngular Materialとか。ちょっとコアじゃない部分だったりすると、若干メンテナーが足りてなかったりしてissueが溜まっているのを拾えるといいかもしれないですね。

JSフレームワークのロードマップ

1000ch:ありがとうございます。次に、Angular、Vue、Reactそれぞれのロードマップを聞かせてください。ライブラリのロードマップだけじゃなくて、そのほかコミュニティとして計画してることがあればお願いします。

laco2net:Angular v7は今のところまだはっきり出ていません。まだ6が出て1ヶ月くらいなので。あと2ヶ月くらいしたら7の概要が出るんじゃないかなと思っています。今日話したIvyがたぶん7で乗るだろう、という気ではいるんですけど……まぁ、今年の秋。だいたい10~11月にかけて出るので、まだ7は気にしなくていいかなと思います。

計画されてるのは、今日話したIvyがほとんどメインです。あれ以外に動いてるものはとくにないかな、って感じですね。Angularって日付ベースで、毎月マイナーバージョン上がります。APIが増えるとかはそこでどんどん足されていくので、半年に1回目指してがんばってやる、みたいなのはそんなにありません。なので、毎月地道にアップデートしていけば、気がついたら7になってるんじゃないかなと思います。

kazu_pon:Vueのほうですが、v3に関しては一応GitHubのロードマップのほうには……具体的にスケジュールは書いてたかな? 最近微妙に更新してあったんですが、今年出るか出ないかは、私もわからない状況です。

ただ、開発はしていて。Vueのv2はflowtypeで書いてたんですけど、そこをTypeScriptで書き始めています。あとは……基本的にv3は、APIの互換性は保つので、breaking changeが起こるようなことはありません。そこはみなさん安心してください。大丈夫だと思います。

あとは、Vueって先ほどもあったとおり、Vue CLI UIなんかがいきなり爆誕するのがたまにあります。ほかにもVuePressとか。最近コアチームメンバーでアイデアある人はいろいろ自由にできるようになってきているので、ひょっとしたら、v3も確かに楽しみなんですが、なにか新しいものが出たりとか、Vueはそんな感じです。

koba04:Reactは、さっき話していたSuspenseとか、今日話せなかったTime Slicingみたいな機能です。非同期レンダリングと呼ばれているものがデフォルトで有効になるのが、1番大きいところです。

それによって、React Routerとかを使っていてサーバーサイドでonEnterがうまくできなくて非同期な処理を待てない、みたいなことがSuspense使うとうまく解決できたりとか。

16.3で、新しくContext APIというのが入ります。それって今までとAPIのかたちがけっこう変わります。そういうものが出てくると、それとすごく似たライブラリとか、似たインターフェースを持ったライブラリが大量に出てきたりします。たぶん今後、さっきのSuspenseを使った機能のコンポーネントやエコシステムが、めっちゃいっぱい出てくる(笑)。

というところはあるかなと思います。そして、またなにか新しいものが出てくることもあるかもしれない、というところです。今年中に17をリリースする目標でやっています。

もう1点は、Reactで言うとReact Nativeもあるので、React Nativeの一部はReact本体のリポジトリで開発されています。最近だと、State of React Native 2018っていうブログが出ていて、新しいスレッドモデルを実験している、みたいな話があります。そのあたりも今後入ってくるので、React Nativeを使ってる人も大きな影響があるというか、いい感じに進化するんじゃないかなとは思ってます。

laco2net:そういえばAngular for Designersというのが動いてる、ということを言い忘れていました。ビジュアルプログラミングですね。それをAngularでやれるようにしたのが動いています。スケッチからAngularのコードを吐き出すとか、そういうことをやろうとしています。

Google内部で600~700のAngularのアプリが動いてて、それぞれコード書いていくのつらいので、HTMLで書かずにもうGUI上でアプリ作っちゃえよ、っていうプロジェクトが進行中らしいです。

この間公式ブログが上がっていて、プロトタイプが動いているgif画像が上がっていました。そんな感じで、今年はそれに注力してるものが出てくるんじゃないかな、と思います。

今後コミュニティで取り組みたいこと

1000ch:ありがとうございます。では、そろそろまとめに入っていきたいと思います。今後の活動や、個人で取り組んでいきたいこと、コミュニティで取り組んでいきたいことで、会場のみなさんにお願いしたいことがあればお願いしたいと思います。

laco2net:AngularはReactとかVueに比べて大きくて、なかなか人口もそんなに多くないんですが、がんばっていますので……あんまりいじめないでください。

(会場笑)

Ivyはわくわくしてるので、みなさんもIvyが出たらわくわくしてほしいです。以上です。

kazu_pon:Vueについては……今のミッションなんですけど、DX(Developer Experience)の向上があります。なるべく初心者の人でもフロントエンドに関わって、徐々にエンジニアとして活動をサポートできるような方向に向かっていくので、みなさん、ぜひよろしくお願いしたいと思ってます。

あとは今、Vue.jsの日本ユーザーグループの運営をしていて、コアスタッフ何10名かでやってるんですが、今後ほかの方も参加していけるようにしていきたいので、みなさんそのときはぜひよろしくお願いします。

koba04:個人として取り組んでいきたいというのはあんまりないです。Reactだと「コミュニティがあんまりないかな」、みたいなことをたまに言う人はいるんですが、「あなたが作れるんだよ!」というところもあったり。

(会場笑)

別に誰にも許可を得る必要もないし、自分がやりたいと思えばユーザーグループも作っていいだろうし、そういうときに「協力してほしい」とかあれば、ぜんぜん協力するし。そういうのを自由にやってもらえるといいんじゃないかな、と思っているところです。

自分としても時間をかけたいなとは思いますが、時間というのは限りもあって、Oculus Goをかぶったりしないとダメだったりもするので(笑)。

(会場笑)

なかなか時間がとれないので、やりたいと思う人がいれば手挙げて、どんどん自由にやってもらえるとすごくいいんじゃないかな、と思っています。以上です。

フロントエンドのフレームワークを用いたSEO対策

1000ch:ありがとうございます。ちょっとだけ時間が残っているので、せっかくこの3人来ていただいてるので、会場のみなさんで質問があれば受けたいと思います。

(会場挙手)

質問者1;技術に関する質問になんですが、フロントエンドのフレームワークを使ってSEO対策をするとき、少し調べてみると、サーバーサイドレンダリングを使うとか、あるいは最近はクローラーがちゃんとJavaScriptを実行してその結果を拾ってくれるんだよ、っていう情報があったり。

いろんな情報があって、結局現状のベストなアプローチはなんなのか少し混乱しています。そのへんについて、なにか知見があればおうかがいしたいなと思っていますが、いかがでしょうか?

laco2net:なんのためにSEOするか、というところがあります。クローラーがほしいんだったら、ビジュアルはいらないじゃないですか。プリレンダみたいな感じで、多少崩れていようともコンテンツはある状態のDOM吐き出しておけばいい、みたいなきもします。

そうじゃなくて、例えばOGPみたいなやつだったりすると、metaタグを揃えることに意味があるし。しかもSEOって変わるじゃないですか。最近出たやつだと、noindexはレンダリング前にしか評価しないとか。

SEOのやり方も変わるので、あまりがんばり過ぎず、どこまでが落としどころなのか見極めながらやるしかないんじゃないかと僕は思っています。

なので僕は、metaタグみたいなところはSSRしつつも、中身はPrerender.ioみたいな、ああいう感じでいいんじゃないかと僕は思っています。Puppeteerでレンダリングして置いてりゃいいんじゃないか、みたいな気もしています。

kazu_pon:SSRとは関係ないかもしれませんが、私はどちらかと言うとstaticな方面も考えてもいいんではないかと思っています。最近サーバーレスアーキテクチャが出てきて、ツールもフロントエンドツールもあれば、Gatsbyとかもそうなんですけども、VuePressもSSG(Static Site Generator)と言うか、静的なHTMLの部分だけじゃなくJavaScriptで動的に変わる部分もHTMLとして生成するので。

SSRも重要なんですが、逆にそういうSSGを使ってやるSEOを対応するアプローチもありなんじゃないかなと。今後の、サーバーレスとかそのへんの環境出てくると思います。私は最近徐々にそっちのほうに。SSRよりは逆にそっちのほうが、今後のアーキテクチャをにらんでやっていったほうがいいんじゃないかな、って思いつつあります。

koba04:今だと本当にベストな解はなくて、さっき言ってたようにPuppeteerを使うというのも、Google I/Oとかで発表されてたりということもありますし、そういう静的なサイトもあるし。一方で、パフォーマンスという意味も含めてサーバーサイドレンダリングを、というのもあるし。そのへんは本当に、自分がなにを求めたいのかで変わってくると思います。

どれに行くにしても、昔ほどつらくない時代にはなってきてるので、状況に応じて選んでいけばいいのではないかと思います。

1000ch:ありがとうございます。あともうひと方、大丈夫ですかね。……じゃあラストでお願いします。

(会場挙手)

React360について

質問者2:Reactの件なんですけど、最近ReactVRから……なんて読むのかわかんないんですが、Reactさんびゃくろくじゅう、って読むんですかね?(注:React 360のこと)その呼び方もなんていうのか聞きたいというのと……。

(会場笑)

あと、ドキュメントを見たところ、内部的にThree.jsが使われていて。今後はそのThree.jsの部分が徐々に使われるようになってくるということも書いてありましたが、そのあたりの進捗は、なにかざっくり入って来ているのか、その2点を知りたいです。

koba04:そのへんは自分もブログを読んだくらいしか知らないので、アレですけど……(笑)。React VRが今回のタイミングで360に変わって、内部のほうはReact VRで、Oculus Goの中のUIとかも作ってる感じで。一方、360度の写真とかを簡単に表示するためのやつだけがOSS化された、みたいな感じになっていて。

今後どうなっていくのかはちょっと、自分のほうも正直わからない感じではあります。すいません。

質問者2:はい、わかりました。あ、ちなみに「さんびゃくろくじゅう」でOKですかね。「さんろくまる」のほうがいいですか?

(会場笑)

すいません、どうでもいいんで大丈夫です(笑)。

(会場笑)

1000ch:ありがとうございます。では、そろそろお時間なので、お三方に拍手、お願いします。

(会場拍手)