ちょっと気になる隣の技術畑

第2回 Reactの何がエンジニアを夢中にさせるのか

この記事を読むのに必要な時間:およそ 3.5 分

画像

【話し手】
うひょ(本名:鈴木 僚太 SUZUKI Ryota)

TypeScriptとReactを愛するフロントエンドエンジニア。Web標準も好き。技術記事を書くのが趣味。

GitHub:uhyo
Twitter:@uhyo_
URL:https://uhy.ooo/

技術分野は成熟が進み,新しい領域が急激に増えています。本コーナーでは技術へのタッチポイントを増やすことを目標に,各分野で活躍されている方をお迎えします。

今回はWebを超えてモバイル分野などでも受け入れられつつある宣言的UIUser Interfaceをテーマに選び,フロントエンド分野で活躍されている「うひょ」さんに普及のきっかけとなったReactの魅力を余すところなく伝えてもらいます。

Reactの特徴って?

日高:知らない人にReactを説明するとしたら,どんな特徴がありますか?

うひょ:理解のためのキーワードが2つあって宣言的UIと仮想DOMDocument Object Modelです。特に宣言的UIという考え方はReactが普及に一役買ったと感じています。

日高:たしかに宣言的UIはWebだけでなくモバイルアプリの文脈でもよく登場してきています。

うひょ:簡単に宣言的UIを説明すると画面の変更を直接書く,いわゆる命令的なスタイルではなく,あるべき状態を記述してUIを構築するという考え方です。これはReact登場以前ではパフォーマンス良くやることが難しかったのですが,仮想DOMとの組み合わせにより,うまく実現できるしくみが整いました。

日高:宣言的UIはReactiveプログラミングとの相性もよく広く受け入れられつつあると私も感じています。フロントエンドで宣言的UIが普及するきっかけとなったReactですが,開発者に受け入れられた理由は何かあるんでしょうか?

うひょ:よく言われるのがReactは非常にシンプルなライブラリだという表現ですね。いわゆるイージーの対極としてのシンプルです。芯の通ったコアとなる概念があって,その上に組み立てられている設計の良さと言えばいいんでしょうか。そういうところにReactの魅力があると感じています。

実はReactってバーンと新しい設計を持ち込んでユーザーを困惑させるみたいなことを,これまで何回かやっていると思うんですよ。たとえば最近では広く使われているReact Hooksです。これはかなり大きな転換点でした。ソースコードの書き方も変わってしまい,登場した当時はif文の中にフックを書いてはいけないなどの独自のルールがあり,少なからず奇異に感じたユーザーもいたと思います。

日高:一見,アグレッシブな変化が設計に効果的だったと?

うひょ:はい。しばらく経ってみるとReact Hooksの良さがコミュニティやエコシステムに伝わっていって,もうフックのない書き方はほとんどやらないよねという状況にまでなっています。

驚きがありましたが理に適っていたわけで,シンプルな設計を打ち出してエコシステムを引っ張るという姿勢がReactの魅力というか,ここまで大きなライブラリに成長した秘訣なのではと感じます。

日高:ちなみにうひょさんがReactに出会ったときにそのような設計の魅力を感じて触ってみたんでしょうか。まだ普及していないタイミングだったんですか?

うひょ:えっと2013年か2014年ぐらいだったと思うんですけども,正直あまり憶えていないです。どうもReactっていうライブラリがあるらしいと耳に入ってきまして,それなら使ってみるかと思ってちょっと使ってみたんです。そのときは理想が高いとか設計が良いとかは考えていなくて,単に新しいものを試してみようくらいの感覚でしたね。使ってみたらかなり良くて,いつのまにか手放せなくなってしまいました。

論理的なシンプルさ

日高:お話を聞いているとより良い開発を達成しようというライブラリ設計者の気持ちが伝わってきます。実際に仕事でも生産性などでメリットは感じますか?

うひょ:宣言的UI,より具体的にはReactの用意しているAPIに関していうと我々,使う側に対してすごく設計を意識させてくれるところがあります。やっぱり良い設計をしてこそReactを使いこなせる側面があって,設計がおぼつかないと汚いReactのコードになってしまう。きれいなReactらしいコードを書こうと頑張っていると,いつの間にか良い設計が強制される,そういう意識を感じます。

日高:逸脱しようとしても書き味が良くない。結果,書いていて気持ち良くないみたいなところを開発者に気付かせるんですかね。

うひょ:そうですね,無駄な処理がたくさん連なっていて良くないなと気付けるということがあります。

自分は,すごく論理的にいろんなことを突き詰めながら考えてプログラムを書くタイプでして,そういうやり方にはReactがマッチしているなと思います。React自体が意志が強いライブラリというか「我々が考えたこの設計に乗っかればうまくいくよ」みたいな色が出ている気がするんです。ですのでライブラリ設計者が用意した条件にのっとって自分のやりたいことを考えると,物事が整理しやすくなります。

Reactの良さを最大限活かすには,どういう設計にすればいいかなと考えさせてくれるんです。うまく乗っかれたときはメンテナンス性やパフォーマンスという結果もついてきます。そういうところはやっていて楽しい,いいな,今どきだなと感じます。

日高:そのロジカルな設計の良さがあったからこそReactは普及していったということでしょうか。

うひょ:そうですね,理想としては「良いものだから普及したんだ」って言いたいところではありますが,コミュニティが頑張った側面もあります。比較的最近にはコミュニティに向けてドキュメンテーションを充実することにコアチームが取り組んでいます。

顕著に出ているのはReact 18というメジャーバージョンのアルファ版アナウンスのときです。ディスカッション用のリポジトリでQ&Aを準備して網羅的に疑問を解消してくれていたり,あるいはコミュニティからの質問を受け付けたりとか。普及のための活動をかなり頑張っているようでした。

ここ1~2年でReactのドキュメントの多言語化や翻訳も進んでいます。Reactのコアチームとしてもコミュニティに情報を発信していく気持ちが強くなってきているなと思っています。

著者プロフィール

日高正博(ひだかまさひろ)

Androidの開発者カンファレンスDroidKaigiや技術書イベントの技術書典を主宰。技術の共有やコミュニケーションに興味があり,ひつじがトレードマーク。(イラスト:shatiko)

GitHub:mhidaka
Twitter:@mhidaka
URL:https://techbooster.booth.pm/

バックナンバー

ちょっと気になる隣の技術畑