webdb_vol125.pdf

 C O N T E N T S WEB+DB PRESS Vol.125 特集1 作って学ぶ 9 プ  ログラミング言語 のしくみ 水島 宏太 インタプリタ、構文解析器、文法 10 第1章...

 C O N T E N T S WEB+DB PRESS Vol.125 特集1 作って学ぶ 9 プ  ログラミング言語 のしくみ 水島 宏太 インタプリタ、構文解析器、文法 10 第1章 プログラミング言語を知ろう 言語ごとの特徴、 パラダイム、内部構造 20 第2章 インタプリタ 抽象構文木をたどって実行する 30 第3章 構文解析器 文字列を読み込んで抽象構文木を作る 36 第4章 言語を拡張する 拡張 for 文とラベル引数を追加する 特集2 41 GraphQL完全ガイド RESTの先へ！フロントエンドに最適化されたAPI 加藤 尋樹 42 第1章 GraphQLの基本仕様 Web API のためのクエリ言語 50 第2章 GraphQLクライアントの実装 RelayでWebフロントエンド、Apollo ClientでiOS/Androidアプリ 60 第3章 GraphQLサーバの実装 Apollo ServerでAPI 開発、マイクロサービスアーキテクチャでの利用 67 第4章 GraphQLのスキーマ設計 Relayから学ぶ実践的なパターン 72 第5章 GraphQLの運用 特有の課題と解決策 特集3 75 速習 DynamoDB AWSフルマネージドNoSQLの探求 76 第1章 DynamoDBを選択する理由 高パフォーマンス、高スケーラビリティ、低運用負荷桑野 章弘 80 第2章 アプリケーションからDynamoDBを使う チャットシステムでAPI 操作を実践成田 俊 88 第3章 費用と実用性の最適なバランスを導く運用ノウハウ Provisioned mode＋Auto ScalingとOn-demand modeの使い分け成田 俊 95 第4章 新機能のキャッチアップ PartiQL、監査機能、 トランザクション成田 俊 99 第5章 DynamoDBベストプラクティス 現場でよくある設計と実装の悩みを解決成田 俊 一般記事 新登場！ 104 Scala 3クイックツアー 原田 伸一 表現力豊かな新機能、使いやすさと学びやすさの改善 コラム 2 縁の下の UI デザイン ── 少しの工夫で大きな改善！ ［第 27 回］ 数値の入力・選択に適した UI 池田 拓司 4 ［第 2 回］ ちょっと気になる隣の技術畑 React の何がエンジニアを夢中にさせるのか……うひょさん 日高 正博 7 ［第 4 回］ 漫画から学ぶマネジメント 『いいひと。』から学ぶマネージャーのスタンスと強みの総和を生み出すヒント 是澤 太志 165 はまちちゃんとわかばちゃんの READER'S FORUM ── 読者のページ ［第 76 回］ はまちや2、竹原 ア ラ カ ルト 特別広報 1 読者プレゼント EA-1 Ruby biz Grand prix 2021 イノベーティブな社会を創り支えるRuby活用事例大集合！ 74 BOOK REVIEW 大賞はどうなる?! 編集部 123 バックナンバーのお知らせ 161 News Hot Line 連載 114 Go に入りては…… ── When In Go... ［第 27 回］ Data Sinkを使ったAPI設計 ……コールバックより汎用的なしくみを作ろう！ 牧 大輔 116 Ruby 3 標準添付ライブラリ紹介［第 3 回］ ファイルを自在に操作する ……fileutils/pathname/un 西山 和広 124 見なおそう！モダンJava の流儀［第 9 回］ 文字をあつかう ……Unicode のビット幅変化に対応する 櫻庭 祐一 132 現場の Python ── システム開発も！機械学習も！ ［第 9 回］ 型ヒントとmypyによるコード品質の向上 ……型チェックの基本から、既存コードの改善プロセスまで 吉田 花春 140 PHP で複雑さに立ち向かう ［第 3 回］ 不具合調査や高速化の便利ツール ……Monolog によるログ出力、tideways_xhprof、phpspy による性能解析 五十嵐 進士 148 フロントエンド羅針盤 ── Web 体験向上へのアプローチ［第 3 回］ 継続的なアクセシビリティ改善の探求 ……誰もがいつでも使えるWebを目指して 土岐 真里奈 156 Perl Hackers Hub［第 70 回］ Raisin入門 ……Rest APIマイクロフレームワークを使ってみよう！ 礒部 浩行 監修：牧 大輔、福本 貴之、松木 雅幸、大沢 和宏 Facebookをチェック！ Twitter でつぶやく！ 販促情報、 訂正情報など編集部からのお知らせは、 以下の公式 Facebook 本誌に関するコメントは以下のハッシュタグをご利用ください。 ページでご確認ください。 #wdpress https://www.facebook.com/wdpress ※本誌記載の内容およびサポートサイトで公開しているサンプルコードに基づく運用の結果に ついて、記事の筆者、プログラムの作者／提供元㈱技術評論社は一切の責任を負いかねます。 Sponsor Index（スポンサー一覧） 1. アトラエ https://atrae.co.jp/ 表紙の裏 表紙デザイン……柴田 昌房（30A） 表紙イラスト……玉川 正和（えのみちプロダクション） 本文フォーマットデザイン……西岡 裕二 本文デザイン……岩井 栄子／石田 昌治（マップス）／エストール／ SeaGrape ／竹中 秀之／安達 恵美子／酒徳 葉子（技術評論社） 本文図版……スタジオ・キャロット 特別広報 本格始動した日本の DX に欠かせない Ruby 企業たち イノベーティブな社会を創り支える Ruby 活用事例大集合！ 大賞はどうなる？ ！ Ruby biz Rubyを活用し、新たなサービスを創出したりビジネスを展開したりしている個人や企業、団体 審査委員長 を表彰する「Ruby biz Grand prix 2021」が、2021 年 12月15日（水）に島根県からのオン まつもとゆきひろ氏 ライン配信で開催されます。表彰式に先駆けて、その見所を紹介します。 編集部 。Ruby を使った商品やサービス、ビ Grand prix 2021」 誕生から四半世紀 ジネスを展開している個人や企業、団体を表彰する目 世界中の開発者から支持を集める Ruby 的で開催されており、今回も多くのプロジェクトがエ まつもとゆきひろ氏が開発した、オブジェクト指向 ントリーしています。 のスクリプト言語 Ruby。ストレスなくプログラミング Ruby 開発者で審査委員長を務めるまつもとゆきひろ を楽しめることを重視して言語仕様が策定されており、 氏を始め、各審査委員が選考し、大賞 （副賞 100 万円） 、 1995 年に公開されて以来、世界中の開発者から多くの 特別賞 が決定されます。 （副賞 30 万円） 支持を集めてきました。 「Ruby のエンタープライズ領 まつもとゆきひろ氏は すでに誕生から四半世紀近くも経つ Ruby ですが、そ 域での活用を表彰する Ruby biz Grand prix がビジネス の人気の土台となっているのが、コミュニティを含む における Ruby 利用を今以上に推進することを希望しま エコシステムです。そこから新たなツールが生まれ、 す。Ruby やそれをとりまくテクノロジーがもたらすプ それらを活用したアイデアやサービスも数多く生み出 ログラマーが楽しいと思える開発が、生産性の高さや されています。当初はまつもとゆきひろ氏 1 人で開発 ビジネスの柔軟性につながり、ひいてはビジネス上の が進められ、趣味に近い使われ方をしてきた Ruby です 競争力につながっているという事実は、まだまだ Ruby が、今では多くの個人や企業がビジネス領域で Ruby を コミュニティの外には知られていません。Ruby biz 使うようになってきています。 Grand prix を通じて、この パワー が広く知られ、IT Ruby は、大手企業でも幅広く活用されています。日 産業全体の振興につながることを期待します」 とコメン 本最大の料理レシピサービスを手がけるクックパッド 「Ruby biz Grand prix 2021」 トし、 への期待を寄せてい や口コミのグルメサイトを提供する食べログ、無料の ます。 ニュースアプリを提供している Gunosy などが、自社 審査委員は、マジセミ株式会社 代表取締役社長であ のサービスを開発するために Ruby on Rails を採用して る寺田雄一氏、Ruby アソシエーション評議員でデロイ います。こうした事例は日本国内に限ったことではあ トトーマツコンサルティング合同会社 執行役員の森正 りません。海外でも、民泊サービスを提供している 弥氏、株式会社日経 BP 技術メディアユニット 編集委 Airbnb や、クラウドファンディングの火付け役である 員の中村建助氏、Ruby アソシエーション理事でクック Kickstarter、ソースコード 共 有 サイトを 提 供 する パッド株式会社の笹田耕一氏が務めます。 GitHub などで Ruby on Rails が開発に使われています。 応募の中から、事業の成長性と持続性や Ruby の関わ り方などを基準に、書類審査で 5 点程度を選考。表彰 Ruby biz Grand prix を通じて 式は、12 月 15 日 （水） に島根県からのオンライン配信で IT 産業全体の振興につなげていく 開催されます。今年はどんな作品が選ばれるのか、ぜ 「Ruby biz 2015 年の初開催から今年で 7 回目となる ひ注目してください。 EA-1 WEB+DB PRESS Vol. 125  Ruby biz Grand prix 2020 で受賞した Ruby biz Grand prix 2020 大賞 企業の声 株式会社メディカルノート 質問 ❶ Ruby biz Grand prix を受賞したプロダ Medical Note クトにおいて、Ruby を利用することを決めた理由を https://medicalnote.jp/ 教えてください。 質問 ❷ Ruby がほかの開発言語より優れている と考えている点を教えてください。 質問 ❸ Ruby biz Grand prix を 受 賞 し た こ と CTO 横尾 雅博（ヨコオ マサヒロ）様 で、ビジネスや開発業務に何か変化はありましたか。 ❶ Ruby には、柔軟性の高い独自の表現が多く、それ Ruby biz Grand prix 2020 大賞 らのライブラリによって新たな概念やしくみをサービ スに組み込む際に低コストでスピード感をもって対応 株式会社 tsumug できると感じております。メディカルノートでは、創 TiNK Desk https://sites.google.com/tsumug.com/tinkdesk/ 業以来、多様なサービスで Ruby を活用してきており、 社内に Ruby で開発を行うためのエコシステムが構築さ れている点も、長く利用させていただく理由となって おります。 ソフトウェアエンジニア ❷ 表現の柔軟性によって生産性や保守性を向上させ、 池澤 あやか（イケザワ アヤカ）様 新たな検証を行うにあたってのスピード感には優れた ❶ API はもともと別の言語で開発していましたが、コ ものがあると感じています。 ンパイルに時間がかかり、素早くトライ＆エラーする ❸ 創業当時から Ruby での開発を行っていましたが、 スタートアップ的な開発に向かない問題や、開発者を 賞を受けたことで、社内の他部門に対して、開発組織 確保しにくい問題などがありました。 がどういったことを日々考え、業務を行っているかを そのため、コンパイル不要な軽量言語であり、ライ 知ってもらうきっかけになりました。会社が一体とな ブラリやサポートツールが豊富で、開発の効率化が望 ってサービス開発を行うための基盤をより強くする機 める Ruby および Ruby on Rails での開発に切り替えま 会になったと感じております。# した。 Ruby biz Grand prix 2021 表彰式 ❷ Rails チュートリアルなどの良質な教材がそろって 来る 12 月 15 日（水）に、 いよいよ本年度のグランプリが発表 おり、日本語での情報も多いため、初めて Rails で大規 されます。 今年の ITトレンドを牽引するサービス／企業が一堂 模開発をするエンジニアでも技術導入しやすいです。 に会する本イベントの詳細は Web ページ（https://rubybiz.jp/） をご覧ください。 ❸ サービス面の評価だけでなく、開発面でも外部に対 次ページでは、 Ruby biz Grand prix 2021 にエントリーした してアピールできるようになりました。 すべての企業を一挙にご紹介します。 外部企業様との取り組みや採用で役立っています。 開催概要 審査基準のポイント Ruby biz Grand prix 2021 （1）事業の成長性と持続性 募集内容（すでに募集は終了） （2）Ruby との関わり方 Ruby を使った自社商品・サービスなどで、 Ruby の特徴を活かし、 （3）事業の社会的な影響度（事業の実効性・インパクト） 「新規性」 「独創性」 「市場性」 「将来性」に富んでおり、 今後継続 （4）その他独自の特色ある事項、アピールポイント 的に発展が期待できるビジネス事例を募集。おおむね 1 年以上ビ 主催 ジネスが継続されている国内外の事例が対象。 Ruby biz グランプリ実行委員会／島根県 表彰 大賞 2 点程度（表彰状、 記念品、 副賞 100 万円） Web サイト 特別賞 3 点程度（表彰状、 記念品、 副賞 30 万円） https://rubybiz.jp/ WEB+DB PRESS Vol. 125 EA-2  変化の時代を牽引し続ける企業から、 株式会社アジャイルウェア LRM 株式会社 株式会社 Catallaxy プロジェクト管理ツール「Lychee Seculio（セキュリオ） Mitsuri Redmine（ライチレッドマイン） 」 金属加工取引マッチングおよび受 情報セキュリティ向上クラウド 発注管理と工場内自動化を実現 小さなチームも大きなプロジェク https://www.lrm.jp/seculio/ https://mitsu-ri.net/ トもマネジメントをもっと簡単に Seculio は情報セキュリティの管理・ Mitsuri は 金 属 加 工 統 合 プ ラ ッ ト https://lychee-redmine.jp/ 運用に特化した SaaS です。820 社 フォームです。金属加工部品を必要 シンプルなタスク管理から大規模な を超える企業にご利用いただいてい とする会社と受注したい会社をマッ プロジェクト管理まで幅広く対応し ます。ISMS 運用を効率化・自動化 チングする商取引プラットフォーム、 ます。タスク・スケジュール・工数 できる機能や、従業員のセキュリティ 受発注管理システム、自動 CAM な の見える化と管理、報告に使えるレ レベルを可視化・向上させる機能が どからなります。商取引プラット ポートの自動作成など、豊富な機能 多数そろっています。1 ユーザー月 フォームでは、お持ちの図面をアッ が特徴です。サービス導入企業は 額 100 円（税抜）から利用できます。 プロードするだけで、300 社以上 3,000 社を突破。IT 業界だけでなく、 14 日間の無料トライアルが可能で の Mitsuri パートナー工場の中から、 建築業や製造業など業種を問わず幅 すので、まずはお気軽にお試しくだ 発注業者のご希望に沿った加工業者 広くご利用いただいています。 さい。 をコーディネートし、商品の受け取 りまでノンストップで実現します。 ウォンテッドリー株式会社 オーティファイ株式会社 Pulse Autify ガリレオスコープ株式会社 オンラインイベントシステム GALIMO AI を用いたソフトウェアテスト自 メンバーが抱える課題や隠れた貢 動化プラットフォーム 献を可視化し、全員の方向を揃える。 https://autify.com/ja/ UI/UX を極限まで追求した Slack 「Autify」は誰にでも簡単に、プログ サインオンのチームマネジメント ラムコードを書くことなく、Web サービス アプリケーションおよびモバイルネ 現実のイベントを、オンラインで https://www.wantedly.com/about/engagement/ イティブアプリケーションの検証作 https://top.galimo.jp/ pulse/ 業を自動化できます。従来のソフト コロナ禍で開催が難しい現実のイベ 共感採用を実現してきた Wantedly ウェアテストの自動化を阻んでいた ントを、そのままオンライン空間で 上で、メンバーの定着から活躍まで 人手不足・メンテナンスコストの高 実現できるオンラインイベントシス を一気通貫でサポートし、会社のバ さ・技術的難易度の問題を、ノーコー テムです。会場のデザインはもちろ リュー浸透や自律的なチーム作りを ド・AI・カスタマーサクセスの 3 つ ん、通話や動画閲覧などすべての機 支援しています。 のアプローチで解決し、これらの業 能の配置をカスタマイズできるので、 UI/UX を極限までシンプルに作り、 務でかかっていたコストを削減し、 趣旨や目的によらずさまざまなイベ Slack サインオンで使える「Pulse」 高品質なテストを実現します。いつ ントが実現可能です。さらに、主催 は、バリュー浸透を促進できる「さ でも 14 日間のトライアルが可能で 者にとって負担の大きいイベント準 すが！」機能、週次で仕事の調子を す。オンラインフォームからお申し 備のタスク全般、出展者・参加者の 管理できる「調子どう？」機能、そ 込みください。 リハーサルから当日運営までフルサ して組織の状態がひと目でわかる管 ポートするプランも提供しています。 理画面からなるチームマネジメント サービスです。 EA-3 WEB+DB PRESS Vol. 125 新進気鋭のニューフェースまで 株式会社講談社 保管が可能であり、出品・購入にか ユニークなものと捉えた、産地直結 かるネットワーク手数料（Gas 代） 型のオンラインファーマーズマー Glossom 株式会社 は無料です。 ケットです。 ヤンマガ Web シフトプラス株式会社 スパイスファクトリー株 モーション〜ふるさと納税ワンス 式会社 トップ管理システム〜 The Admissions Office か つ て 雑 誌 は、も っ と「雑」誌 で した。カラー弾けるグラビアに、 ドキドキワクワクの連載漫画、思 わず読み入る特集記事……そんな 雑多で多彩な面白さがギュッと詰 ウェブ申請可能なふるさと納税ワ 変えよう、アドミッション まったエンタメ基地です ンストップ管理システム はじめよう、教育アップデート https://yanmaga.jp/ https://lgsta.jp/motione/ https://admissions-office.info/ 週刊ヤングマガジンの漫画・グラビ motiONE ＜モーション＞は、ふる The Admissions Office は、世 界 アといったコンテンツをインター さと納税のワンストップ特例の受付 の大学で利用されている「オンライ ネット上でも楽しめる Web サイト から通知書作成までを行うシステム ンアプリケーション」というシステ です。雑誌に掲載されている漫画の です。 ム同様、願書提出の手続きから合格 連載最新話を読むことができるだけ 寄附者はインターネットから、自治 発表までのすべての入試プロセスを でなく、好きだったあのレジェンド 体は LGWAN-ASP で LGWAN 接続 オンラインで簡単に一括管理でき、 作品も見つかるかも !? 気になった PC より操作が可能です。 さらに日本の大学経営の実情に即し あの表紙グラビアの誌面に載せきれ ワンストップ特例関係の情報がふる た運用が可能なシステムです。 な か っ た 未 公 開 カ ッ ト も あ り、 さと納税管理システム LedgHOME 独自の出願書類の作成や推薦依頼機 Web サ イ ト に し か 載 っ て い な い ＜レジホーム＞と連携され、自治体 能、多言語対応などさまざまな機能 ニュースや連載読み物記事など、多 では LGWAN 接続 PC であれば複数 を備えています。 数コンテンツをご用意してお待ちし 人が同時に操作することも可能です。 ております。 株式会社スペースリー 株式会社スタイル・フリー スペースリー コインチェック株式会社 規格外農作物特化型 EC サイト Coincheck NFT（β版） 「unica（ウニカ） 」 効果を実感できる空間データ活用 プラットフォーム ワンストップで NFT の出品・購 市場に出せず廃棄される野菜・果 https://spacely.co.jp/ 入・保管ができる日本初の NFT 物に特化したオンラインファーマー マーケットプレイス 「スペースリー」は、360 度 VR のコ ズマーケット https://coincheck.com/ja/nft/ ンテンツを簡単に制作・編集し、空 https://unica.market/ https://corporate.coincheck.com/2021/03/24/137. 間データを活用できるクラウドソフ html 大きすぎる・小さすぎる・曲がって トです。不動産・住宅・大手製造業 いるなどいわゆる規格外のものや、 など 6,000 アカウント以上の事業 「Coincheck NFT（β版） 」は、従来 栽培の過程で傷ができたもの、色づ 者にご利用いただいています。撮影 の NFT 取引におけるスケーラビリ きがよくない野菜・果物が、通常の をするだけで、空間の AI サイズ推 ティ（拡張性）問題から発生するネッ ものと中身が変わらないにもかかわ 定やバーチャル家具を置く空間設計、 トワーク手数料（Gas 代）の高騰や らず市場に出回ることなく廃棄され コロナ禍で注目されるリモート接客 複雑な取引方法などの課題を解決し ることは少なくありません。 といった活用が可能。あらゆる業界 た NFT マ ー ケ ッ ト プ レ イ ス で す。 「única（ウニカ）」は、いわゆる「見 の空間データ活用を推進するサービ Coincheck の口座をお持ちの方は た目が悪い」とされる野菜や果物を、 スとして拡大中です。 ど な た で も、NFT の 出 品・購 入・ 普通のものと見た目が異なるだけの WEB+DB PRESS Vol. 125 EA-4  SOELU 株式会社 二酸化炭素濃度を可視化！ 株式会社ネクプロ 感染リスクの低い安心な空間へ SOELU ウェビナーマーケティングプラット https://www.tpj.co.jp/corp/service/WaKaYo.html フォーム 二酸化炭素モニタリング IoT システ ム「WaKaYo」は、目に見えない二 酸化炭素濃度を NDIR 方式（厚生労 働省推奨）で正確に測定し、スマホ フィットネスと暮らそう などのデバイスに数値で表示できる https://soelu.com/ 二酸化炭素濃度計です。タイミング 「SOELU（ソエル）」は、おうちにい を逃さず換気できるので新型コロナ ながらヨガやトレーニングのレッス ウィルス感染症対策に有効です。導 ンを受講できる、国内最大級のオン セミナー・イベントの効果を最大 入することで感染対策のアピールに ラインフィットネスサービスです。 化して BtoB 企業のマーケティン もなり、企業価値の向上と利用者へ 早朝 5 時から深夜 2 時まで、15 分 グ課題を解決します の安心感につながります。温度・湿 〜60 分間のライブレッスンを毎日 https://nex-pro.com/ 度の測定もできるので室内の空調管 200 ク ラ ス 以 上 開 講 し て い ま す。 インターネット上でのセミナー配信 理にも役立ちます。 350 人以上の専門インストラクター システム「ウェビナー」を中心とし が在籍しており、レッスンプログラ たマーケティングプラットフォーム。 ム数は 150 種類を超えています。 207 株式会社 ウェビナーを中心とした多様な配信 トドクサポーター 手 段 を 組 み 合 わ せ た Web キ ャ ン ペーンを簡単に作成でき、Web 上 ツクリンク株式会社 で顧客との接点を継続的に多く持て ツクリンク る新しいしくみ。リードジェネレー ションからリードナーチャリング、 ラストワンマイルの配送を支える カスタマーサクセスまで、企業のマー すべての配送員のアナログ業務を ケティングで利用できるプラット 効率化するアプリ フォーム。 https://todocu-supporter.com/ テクノロジーを活用し業界構造を いまだアナログ業務の多いラストワ 転換 https://tsukulink.net/ ンマイルの配送効率化を目的とした、 note 株式会社 配送員のための iOS/Android 向け note 「ツクリンク」は建設業者をつなぐ アプリです。トドクサポーターと マッチングプラットフォームです。 スマートフォンがあれば、配送専 ツクリンクを通して新たなパート 用端末は一切不要。配送時のお困 ナーとの出会いの機会を創出し、営 りごとを一気に解決できます。主 業の効率化やリソースの効率的な活 だれもが創作をたのしむメディア 要機能に、荷物伝票の OCR 読み取 用、業者間ネットワークの拡大を促 プラットフォーム り、お 届 け 先 の 自 動 地 図 登 録、受 します。さらにプロ同士の評価によ 取人の在宅状況確認、置き配対応 https://note.com/ り、取引における適切な判断基準を 時のエビデンス保管、配送メモの note は文章や画像、音声、動画を 提供し、「適切な能力に、適切な評 共有、宅配ボックス有無の確認、時 投稿して、ユーザーがそのコンテン 価がつく」健全な取引環境の実現を 間指定荷物の通知機能を搭載して ツを楽しんで応援できるメディアプ 目指しております。 い ま す。全 国 15,000 人（2021 年 ラットフォームです。だれもが創作 9 月現在）の配送員の皆様にご利用 を楽しんで続けられるよう、安心で 株式会社テクノプロジェクト いただいています。 きる雰囲気や、多様性を大切にして います。 WaKaYo 個人も法人も混ざり合って、好きな ものを見つけたり、おもしろい人に 出会ったりするチャンスが広がって います。2014 年 4 月から約 1,500 万件の作品が誕生。会員数は 380 万人（2021 年 3 月時点）です。 EA-5 WEB+DB PRESS Vol. 125 noco 株式会社 BONX WORK は現場に最高のチー き、受注処理の手間とコストを削減 ムワークを提供するサービスです。 できます。バイヤー側は COREC に トースターチーム 現場で最も重要なコミュニケーショ 対応したサプライヤーはもちろん、 ンツールである「声」をリアルタイ それ以外のサプライヤーにも FAX ムに届けるため、VoIP サーバとクラ やメールで発注書を送信できます。 イアントをつなぐ API サーバを Ruby 社員・スタッフに生まれる「知ら on Rails で 実 装。Speech to Text ない」 「わからない」 「できない」を や課金システムとも連携する API サー 株式会社 Relic 解決し、人と組織を育てるマニュ Throttle バはサービス全体の中核を担います。 アル＆ナレッジ管理アプリ 最高のチームワークを作る最高の https://toaster.how/ チームメンバーを BONX は募集中。 toaster team（トースターチーム） は、社内や現場で生まれる「知らな い」「わからない」 「できない」を解決 株式会社ヤマップ すべての組織に、イノベーションを するマニュアル作成ツールです。オ ヤマップ https://relic.co.jp/services/throttle/ フィスを始め、現場や店舗における Throttle はすべての新規事業開発 動画マニュアルも専用アプリでかん やイノベーション創出のための活動 たん作成。社内用語集の作成、マニュ に最適化された国内初／国内シェア アルの QR コード化、自動翻訳機能 No.1 のイノベーションマネジメン など便利な機能をオールインワン。 人と山をつなぐ、登山地図 GPS ト・プラットフォームです。 アプリ 事業構想やアイデアの整理、具体化 https://yamap.com/ を支援するフレームワークなどの提 株式会社 HIKKY 電波が届かない山の中でも、スマー 供や、各種インキュベーションプロ バーチャルマーケット トフォンの GPS で現在地と登山ルー グラムの企画、事業アイデアなどの トがわかる、登山を楽しく安全にす 収集・管理や評価・審査などの効率 るアプリ。山行の軌跡や写真を活動 化により、新規事業創出活動におけ 記録として残したり、山の情報収集 る生産性を劇的に改善し、事業の質・ に活用したり、全国の登山好きと交 量を向上させます。 ギネス世界記録 TM にも認定されて 流したりすることもできる、日本最 いる世界最大の VR イベント 大の登山・アウトドアプラットフォー https://vket6.v-market.work/ 株式会社ローカルワークス ムです。2021 年 8 月に累計 260 万 バーチャル空間上の会場でさまざま ダウンロードを突破。 ローカルワークスペイメント な 3D アイテムやリアル商品（洋服、 PC、飲食物など）を売り買いでき る世界最大の VR マーケット。 株式会社ラクーンコマース 世界中から 100 万人を超える来場 クラウド受注・発注システム 者を誇る、ギネス世界記録 TM にも 「COREC（コレック） 」 認定された VR イベントです。 商 品 売買のほかにも、会場内で乗り物に 乗ったり、映画を観たり、音楽ライ ブに参加するなど、バーチャル空間 ならではの “ 体験 ” も提供します。 すべての注文をクラウド上で一元管理 信頼性の可視化と、仕組みを変え できる受注・発注システム COREC ることで中小建設事業者の成長を 支援する 株式会社 BONX https://corec.jp/ BtoB における受発注は、メールや https://localworks.jp/payment/introduction/ BONX WORK FAX、電話など IT 化が進んでいない 建設業に特化した店頭決済ツール 環境が多く、手間や時間のかかる作 です。 業です。そこで誰でも簡単に、Web 店舗と中小建築事業者の間に入り、 上での受発注を行えるようにしまし 与信管理から代金回収業務まですべ チームの笑顔と未来をつくる た。サプライヤー側は COREC 上で ての請求業務を代行し、未入金が発 https://bonx.co.jp/ 注文書を作成して受注することがで 生した際も 100％代金を保証します。 WEB+DB PRESS Vol. 125 EA-6  ウェブディービー プレス プラス WEB+DB PRESS plus は、 WEB+DB PRESS 編集部が 自信を持ってお届けする書籍シリーズです。 増刷 出来 ！ 増刷 ！ 出来 〒162-0846 東京都新宿区市谷左内町21-13 販売促進部 Tel. 03-3513-6150 Fax. 03-3513-6151  電子書籍も好評発売中！ Gihyo Digital Publishing、 Amazon Kindleをはじめ 好評 リファレンス シリーズ 増刷 出来 ！ 詳細＆全タイトルは こちらでチェック！ WEB+DB PRESS plus特設サイト https://wdpress.gihyo.jp/plus  プレゼントの応募方法 Web サイトのアンケートにご協力ください。ご希望のプレ ゼント番号を選択された方には抽選でプレゼントをお送りし ます。当選者の発表は次号にて行います。 ※保証書などは付属しておりません。あらかじめご了承ください。 ※掲載プレゼントがモニター製品としての提供になる場合は、当選者に簡単なレポ ートをお願いさせていただきます。 本誌サイト「読者アンケート」から PRESENT 応募は ご応募ください。 こちら！ https://wdpress.gihyo.jp/ 締切は 2021 年 11 月 20 日です。 1 3 2 名様 1 名様 ステレオマイク内蔵 WEBカメラ MOT-SPSTD12-SV CMS-V61BK 価格：10,780 円（税込） 価格：3,980 円（税込） サンワサプライ MOTTERU https://www.sanwa.co.jp/product/syohin.asp?code=CMS-V61BK https://motteru.co.jp/product/stand/mot-spstd12/#jumpitem フル HD 画質での撮影が可能なWebカメラ。カメラ本体にステレオマイ 4〜13 インチまでのスマートフォン、タブレット、 Nintendo Switch 対 クを内蔵しており、左右の音を自然に拾うことができるので、ヘッドセッ 応のスタンド。台座が 360 度回転するので好みの位置に回転させること トや PC 用マイクがない場合でも各種ビデオチャットでテレビ会議が可能。 が可能。折りたたみ時は厚さ約 45mm でフラットな形状になるため、す っきりとカバンに収納可能。1 年保証付き。 標準テキスト CentOS 8 2 構築・運用・管理パーフェクトガ イド［CentOS Stream 対応］ 4 価格：4,950 円（税込） 2 名様 SBクリエイティブ https://www.sbcr.jp/ 3 名様 product/4815602567/ CIO-MB20W-10000 エキスパートPython 価格：2,798 円（税込） プログラミング 改訂 3 版 CIO 5 価格：4,180 円（税込） https://connectinternationalone.co.jp/product/cio-mb20w-10000 急速充電 PD/QC 対応の 10000mAh 搭載スリムコンパクトモバイルバ ドワンゴ ッテリー。最大 20W の出力に対応し、iPhone であれば 30 分で約 50 https://www.kadokawa.co.jp/ 3 名様 ％の充電が可能。2 台同時充電や便利なパススルー出力にも対応し、コ product/302105001236/ ストパフォーマンスに優れた製品。 ▼ Vol.124 プレゼント当選者（敬称略） 詳説 データベース 1．MATECH BrightBar 4．データベースリライアビリティエンジニアリング ストレージエンジンと分散データシステムの仕組み モニターライト 3 段階調光 三原秀光 6 小川佳納 5．イラスト図解式 この一冊で全部わか 価格：4,180 円（税込） 2．100W 1ポート USB-C PD 対応 るWeb 制作と運用の基本 USB 充電器 PA-B5 矢野誠、奥原由美、西野 豊陽 オライリー・ジャパン ※ WEB+DB PRESS 総集編 1 名様 樋口航也 ［Vol.1 https://www.oreilly.co.jp/ 3．良いFAQの書き方 〜120］発売記念特製ステッカー books/9784873119540/ 福田昌弘、野原翔平、新井祥太 当選者多数のため、発送をもって 発表に代えさせていただきます WEB+DB PRESS Vol. 125 1  UI 27 数値の入力・選択に適したUI デザインアンドライフ㈱ 池田 拓司 IKEDA Takuji URL http://designandlife.jp/ mail [email protected] Twitter @tikeda 数値入力に用いる UI コンポーネントに かを事例を交えて考察していきます。 きてしまうためサービス運営者側で制限が は、テキストフィールド以外にもさまざま 私が数値入力のためによく使う UI コンポ かけにくい点です。 な種類があります。その理由は、入力する ーネントは、これから紹介する 4 パターン 一番わかりやすい事例はフォームの電話 際に何らかの制限をかけたい場合や、あら です。それぞれどんなときに使うとよく、 番号入力（図 1）などが挙げられます。ユー かじめ決められたものから選択してほしい どんなときに使うとよくないか、比較も交 ザーはテキストフィールドの範囲で自由に 場合などもあるためです。自由に入力して えながら紹介します。 入力ができます。 もらえる場合はテキストフィールドを用い テキストフィールド もしユーザーが入力できる数値に制限を ますが、そうでない場合、シーンや目的に （キーボード入力） かけたい場合は、これから紹介するテキス 合わせて正しい UI コンポーネントの選択を まず制限なくユーザーが自由に数値を入 トフィールド以外のコンポーネントを利用 考えなければいけません。 力できる場合は、文字の入力と同様にテキ します。 今回は数値を入力・選択してもらう場合、 ストフィールドを用いてキーボードで入力 プルダウンメニュー どのような UI コンポーネントが考えられる してもらうことが基本です。 このコンポーネントのメリットは、普段 あらかじめ用意された数値を選んでもら ▼ 図 1 電話番号入力の事例 使い慣れた入力方法をそのまま利用できる う場合は、プルダウンメニューを第一候補 ため使いやすいという点です。一方でデメ に考えます。 リットは、ユーザー自身が自由に入力がで このコンポーネントのメリットは、数値 だけに限らず複数の候補から選択してもら ▼ 図2 生年月日の選択と商品選択の事例 う際によく使われているため、ユーザーに とって親しみやすいものであることです。 デメリットは、選択肢がたくさんある場合 は選択が面倒な点です。その場合は自由入 力できないかや、次に紹介するスライダー が利用できないかを検討し欠点が解消でき ないか考えましょう。 生年月日の選択（図 2 a）は、プルダウン メニューによって実装されることが多い UI だと感じます。しかし、生まれた年の選択 肢は多く、その中から自分の生まれた年を 選択することが大変だと感じてしまうこと がよくあります。自分の生年月日は基本的 には覚えているものなので、1 つ前に紹介 した電話番号のようにテキストフィールド を使って入力してもらったほうがユーザー にとっては入力しやすいのではないかと私 は感じています。このように、数値に制限 があり決められた候補から選ぶ必要がある 場合も、選ばせるのではなく入力してもら 2 WEB+DB PRESS Vol. 125  数値の入力・選択に適したUI 27 うほうが使い勝手が良い場合もあると思っ ▼ 図 3 スライダーの事例 ▼ 図4 Google Home の iPhone アプリ ています。 一方で図 2 bのように、EC サービスなど で商品がカートに入れられる際に個数制限 をかけたい場合があります。このようなと きはプルダウンメニューを使うことで、あ らかじめ制限しておくことができるメリッ トもあります。このようにサービス運営す る側の意図で何か制限を設けたい場合、プ ルダウンメニューが効果的です。 スライダー（シークバー） あらかじめ定められた最小値と最大値の 間の数値を選択させたい場合は、スライダ を確実に上下できる点です。デメリットは、 ーを使います。音楽や動画の再生位置を合 数値の変更幅を一気に変えるにはボタンを わせるためのシークバーが代表的です。 押し続けなければいけないため使い勝手が このコンポーネントのメリットは、たく 悪くなってしまう点です。そのため、どれ さんある連続した数値を直感的な操作で変 くらい値の変更幅があるのかによって、ス 更ができることです。デメリットは、正確 ライダーやプルダウンメニューなどほかの に数値を合わせにくい点です。そのため、 コンポーネントも候補として検討する必要 数値そのものを的確に選ぶために利用する があります。 よりも、感覚で操作するために用いられる 図 5 は温度調整のための UI をスライダー ▼ 図5 温度調整のためにスライダー（a） とステッパー（b）を使った場合 ことがほとんどです。具体的には以下のよ （a） とステッパー（b）でデザインした比較 うな例です。 です。お風呂の湯沸かし器やエアコンの温 度変更では、数値の変更幅はあまり大きく ・サビの部分から音楽を聴きはじめる（図 3 a） なく、現状よりも少し温度を上げる・下げ ・照明を今よりも薄暗くする（図 3 b） ・温度が熱くなったためエアコンの設定温度 る程度で考えることがほとんどです。その を少し下げる（図 3 c） ため、使い勝手を優先する場合はbのステ ッパーだけでよいように感じます。 特定の数字をぴったり選ぶのには操作し 図 6 は音量調整のための UI をスライダー づらく不向きだと思います。しかしプルダ （a） とステッパー（b）でデザインした比較 ウンメニューと違って、選びたい値の付近 です。音量の場合は音を消すために一気に ▼ 図6 音量調整のためにスライダー（a） にすばやく変更しやすいというメリットも スライダーで値を変更するケースや実際に とステッパー（b）を使った場合 あります。 聴きながら感覚的に調整することが多いた また、スライダーは直線的なデザインに め、私はスライダーのほうが使いやすいと することがほとんどですが、形状を変えて 感じます。一方で、ステッパーのほうが急 も用いることができます。これには、操作 に大音量になったりしないため、安心して 性を高めること、視覚的なアクセントにす 音量調整できるというメリットもあると感 ることの 2 つの目的が挙げられます。 じています。 図 4 の Google Home アプリのスライダ 図 5、図 6 で挙げた事例は、それぞれの ーは、図 3 の直線的なデザインではなく円 UI にメリットがあると感じます。実際、ど 形になっています。こうすることで、スラ ちらのパターンのデザインも見ることがあ イダーの範囲を画面全体に配置し距離を長 りますし、両方の UI が備わっているものも くできるため、ユーザーがより細かい数値 あります。どちらを選択するかは、どのよ ーの自由度や操作性を考え、キーボードで の設定をやりやすくなります。 うなプロダクトなのかを考え、数値選択以 入力ができるものが一番良いと私は考えて 外のほかのデザイン要素なども加味して決 います。しかし、それだけでは当然難しい ステッパー 定しましょう。 場面があります。 ステッパーは数値を 1 ずつ上下させるコ 今回は、数値の入力・選択に用いる UI に 数値の選択はよく使う UI です。そこをち ンポーネントです。 ついて、コンポーネントごとに特徴を説明 ゃんと考えることで、ユーザーのサービスに このコンポーネントのメリットは、数値 しました。冒頭にも書いたとおり、ユーザ 対する印象も大きく変わると思います。WDB WEB+DB PRESS Vol. 125 3  Reactの何が 第 2回 エンジニアを夢中にさせるのか 話し手 イラスト：shatiko 聞き手・文 うひょ さん 日高 正博 ㈳DroidKaigi／㈱メルペイ 技術分野は成熟が進み、新しい領域が急 じています。 日高 一見、アグレッシブな変化が設計 激に増えています。本コーナーでは技術へ 日高 たしかに宣言的 UI は Web だけでな に効果的だったと？ のタッチポイントを増やすことを目標に、各 くモバイルアプリの文脈でもよく登場し うひょ はい。しばらく経ってみると 分野で活躍されている方をお迎えします。 てきています。 React Hooks の良さがコミュニティやエ 今回は Web を超えてモバイル分野など うひょ 簡単に宣言的 UI を説明すると画 コシステムに伝わっていって、もうフッ でも受け入れられつつある宣言的 UI （User 面の変更を直接書く、いわゆる命令的な クのない書き方はほとんどやらないよね Interface）をテーマに選び、フロントエン スタイルではなく、あるべき状態を記述 という状況にまでなっています。 ド分野で活躍されている「うひょ」さんに して UI を構築するという考え方です。こ 驚きがありましたが理に適っていたわ 普及のきっかけとなった React の魅力を れは React 登場以前ではパフォーマンス けで、シンプルな設計を打ち出してエコ 余すところなく伝えてもらいます。 良くやることが難しかったのですが、仮 システムを引っ張るという姿勢が React 想 DOM との組み合わせにより、うまく の魅力というか、ここまで大きなライブ Reactの特徴って？ 実現できるしくみが整いました。 ラリに成長した秘訣なのではと感じます。 日高 知らない人に React を説明すると 日高 宣言的 UI は Reactive プログラミン 日高 ちなみにうひょさんが React に出 したら、どんな特徴がありますか？ グとの相性もよく広く受け入れられつつ 会ったときにそのような設計の魅力を感 うひょ 理解のためのキーワードが 2 つ あると私も感じています。フロントエン じて触ってみたんでしょうか。まだ普及 あって宣言的 UI と仮想 DOM（Document ドで宣言的 UI が普及するきっかけとなっ していないタイミングだったんですか？ Object Model）です。特に宣言的 UI という た React ですが、開発者に受け入れられ うひょ えっと2013 年か 2014 年ぐらいだ 考え方は React が普及に一役買ったと感 た理由は何かあるんでしょうか？ ったと思うんですけども、正直あまり憶え うひょ よく言われるのが Reactは非常に ていないです。どうもReactっていうライ シンプルなライブラリだという表現ですね。 ブラリがあるらしいと耳に入ってきまして、 いわゆるイージーの対極としてのシンプル それなら使ってみるかと思ってちょっと使 です。芯の通ったコアとなる概念があって、 ってみたんです。そのときは理想が高いと その上に組み立てられている設計の良さと か設計が良いとかは考えていなくて、単に 言えばいいんでしょうか。そういうところ 新しいものを試してみようくらいの感覚で にReact の魅力があると感じています。 したね。使ってみたらかなり良くて、いつ 実は Reactってバーンと新しい設計を持 のまにか手放せなくなってしまいました。 ち込んでユーザーを困惑させるみたいな 論理的なシンプルさ ことを、これまで何回かやっていると思 うんですよ。たとえば最近では広く使わ 日高 お話を聞いているとより良い開発 れている React Hooks です。これはかな を達成しようというライブラリ設計者の り大きな転換点でした。ソースコードの 気持ちが伝わってきます。実際に仕事で 話し手 書き方も変わってしまい、登場した当時 も生産性などでメリットは感じますか？ うひょ （本名：鈴木 僚太 SUZUKI Ryota） は if 文の中にフックを書いてはいけないな うひょ 宣言的 UI、より具体的には React TypeScript と React を愛するフロントエンドエン どの独自のルールがあり、少なからず奇 の用意している API に関していうと我々、 ジニア。Web 標準も好き。技術記事を書くのが趣味。 異に感じたユーザーもいたと思います。 使う側に対してすごく設計を意識させて Twitter@uhyo̲ GitHub uhyo URL https://uhy.ooo/ 4 WEB+DB PRESS Vol. 125  Reactの何がエンジニアを夢中にさせるのか 第 2回 くれるところがあります。やっぱり良い 多言語化や翻訳も進んでいます。React 理論を検証するおもしろさ 設計をしてこそ React を使いこなせる側 のコアチームとしてもコミュニティに情 面があって、設計がおぼつかないと汚い 報を発信していく気持ちが強くなってき うひょ そうですね。ただ何回ベストプ React のコードになってしまう。きれい ているなと思っています。 ラクティス作っても React が天から新し な React らしいコードを書こうと頑張っ い設計を降らせてくるので（笑）。今だと Reactを取り巻く環境 ていると、いつの間にか良い設計が強制 React 18 のアルファ版の情報が出ている される、そういう意識を感じます。 日高 エコシステムが育ってきているん ので先にキャッチアップして、こうした 日高 逸脱しようとしても書き味が良くない。 ですね。実はもう一つ会話で気になって らベストかな？と考えることがあります。 結果、書いていて気持ち良くないみたいな いたところがあります。設計が良くても、 日高 やはり試行錯誤はあるんですね。 ところを開発者に気付かせるんですかね。 やはりパフォーマンスが伴わないと使わ うひょ おもしろい点は、React の場合 うひょ そうですね、無駄な処理がたく れないんじゃないかと思うんですが……。 だと情報を見るだけでも考察材料になる さん連なっていて良くないなと気付ける うひょ もちろん React 本体もパフォー んですよ。そこがまたすごいところだと ということがあります。 マンスにすごい力を入れているっていう 思うんですけども。だから情報を見て頭 自分は、すごく論理的にいろんなことを のは感じるところですけど、我々がパフ の中だけで考えてみて論理的に結論付け 突き詰めながら考えてプログラムを書くタ ォーマンスに力を入れるための道具をち てから小さいアプリケーションに落とし イプでして、そういうやり方には React が ゃんとそろえてくれているなーって印象 てみるってのが最近は多いですね。 マッチしているなと思います。React 自体 も強いですね。 日高 へー。なんとなくうひょさんの持つ論 が意志が強いライブラリというか 「我々が 日高 それは計測ツールとかですか？ 理的なプログラムが好きな性質とうまく噛み 考えたこの設計に乗っかればうまくいく うひょ そういうツールへのケアが厚い 合っている気がしてきます。結局、Reactのシ よ」 みたいな色が出ている気がするんです。 んです。何か作るとき、開発者が何も考 ンプルな設計って論理的に整合していない ですのでライブラリ設計者が用意した条 えなくても設計に沿えばある程度いい感 と成り立たないんじゃないかなと思いました。 件にのっとって自分のやりたいことを考 じにできてしまう側面があるんですが、 うひょ はい。将来の話になりますが次の えると、物事が整理しやすくなります。 本当に突き詰めようと思ったら自分たち バージョンでは Concurrent Rendering を React の良さを最大限活かすには、どう もパフォーマンスチューニングに取り組 実現したいって2 年前ぐらいから言ってい いう設計にすればいいかなと考えさせてく まないといけないんですね。 て、私はもう今か今かと待ち続けています。 れるんです。うまく乗っかれたときはメン そのときには道具をちゃんとそろえて コミュニティに理解してもらうには情報だ テナンス性やパフォーマンスという結果も くれているなというのが、React のパフォ けでも先出しが必要なので、必然的にこち ついてきます。そういうところはやってい ーマンスへの姿勢に対する自分の印象で らとしてもベストプラクティスの考察がや て楽しい、いいな、今どきだなと感じます。 す。Facebook が用意している DevTools りやすくはなるのかなと思っています。 日高 そのロジカルな設計の良さがあっ だったり、React.memoといった再レンダ たからこそ React は普及していったとい リングを最適化するための API だったりと うことでしょうか。 最適化をしたいときの手段も手厚い。 うひょ そうですね、理想としては 「良いも 日高 最適化のアプローチが API レベル のだから普及したんだ」 って言いたいところ で用意されていると。 ではありますが、コミュニティが頑張った うひょ React.memo だけではなく use 側面もあります。比較的最近にはコミュニ Callback、useMemo といったフックを ティに向けてドキュメンテーションを充実 使うんですが、我々開発者はちゃんと使 することにコアチームが取り組んでいます。 いこなさないといけない難しさがあって、 顕著に出ているのはReact 18というメジ コミュニティでもいろんな人がいるので ャーバージョンのアルファ版アナウンスの 議論が巻き起こります。しかし React は ときです。ディスカッション用のリポジト 限界まで突き詰めるための道具をちゃん リで Q&A を準備して網羅的に疑問を解消 と我々に与えてくれている印象です。 聞き手 してくれていたり、あるいはコミュニティ 日高 道具があってそれでパフォーマンス 日高 正博 HIDAKA Masahiro からの質問を受け付けたりとか。普及のた を突き詰める、とても楽しそうに聞こえま Android の開発者カンファレンス DroidKaigi や技 術書イベントの技術書典を主宰。技術の共有やコ めの活動をかなり頑張っているようでした。 す。実際に試してみて自分なりのベスト ミュニケーションに興味があり、ひつじがトレード マーク。 ここ 1〜2 年で React のドキュメントの プラクティスを見つけているんですか？ GitHubmhidaka @mhidaka Twitter URL https://techbooster.booth.pm/ WEB+DB PRESS Vol. 125 5  写真1 うひょさん（左）にはリモートで対応いただきました。 続いてほしいという思いがあります。 理想を実現する道具 日高 理解が進んだところで、はじめの 話題に巻き戻りますが、React の宣言的 UI という考え方と実現するための仮想 DOM の組み合わせはシンプルな設計の 最適解なんでしょうか？ うひょ 宣言的 UI が何を解決したいかと いう部分によりますが、スケーラビリティ なども対象だと思います。Web アプリケ ーションの複雑性を React ライブラリなど 日高 コアチームが中長期の計画も含め いう点は Vue などとはちょっと違う特徴 の中に閉じ込めてしまう。仮想 DOM やフ て情報を出してチャレンジして、結果を かなと思っています。もちろんエコシス ックはそのための道具という印象です。 取り込む、その背景が理論的に組み立て テムを無視するというわけではなく、API 日高 複雑な課題をシンプルになるよう られていて説明できるってすごい良いと クライアントライブラリのために最適化 設計に落とし込んでいるんですね。 ころですね。将来性も高そうです。 するためのキャッシュレイヤを React コ うひょ そうですね。設計っていうとア アに取り入れたり、ステート管理ライブ プリケーション開発者が頑張るものだと 宣言的UIの将来性 ラリも Concurrent Rendering が入ると 考えがちなんですが、React は良い設計 うひょ 私は React の将来性はめちゃく React Redux がちょっと壊れちゃうので のためのギプスとして機能していると思 ちゃ高いと思っています。最近はフロン useMutableSourceというAPIを新設した います。個人的にも React の設計の良さ トエンドの宣言的 UI のライブラリの分野 りと最低限の変更は入っています。エコシ は発信していきたいですね。 もまた群雄割拠になってきました。いわ ステムと協調するイメージです。これも設 日高 得てして設計の良し悪しは好みで ゆる 3 大フレームワークの React、Vue、 計を重視するReact ならではだなぁと。 語ってしまうことがあるんですが、言語 Angular に加えて Svelte のような手軽な 日高 私はモバイルアプリの開発者です 化されたパフォーマンスであったり生産 ものも出てきています。後発のライブラ が、宣言的 UI を取り入れたパラダイムが 性であったり、論理的な評価や会話がで リならではの良さもあるんですが、その どんどん普及してきていると感じます。 きるとめちゃくちゃいいですね。 うえで React は独自の良さを出し続けて うひょ モバイルアプリは詳しくありませ うひょ 今は React はかなり普及してい いけるというのが自分の想像ですね。 んが、きっとReact の APIがそのまま移植 て、いろんなレベルの人にも使ってもら 日高 それは何に起因するのかな……す されているわけではなくて設計の考え方や えているライブラリだと感じます。だか ごい気になったんで続きをお願いします。 エッセンスが他分野のエコシステムに影響 らこそ高い理想をバーンと出して俺につ うひょ これまでも宣言的 UI や React を与えている気がします。もしそうであれ いて来いではなくて、理想を追い求める Hooksといったブレークスルーを作ってき ば望ましいブレークスルーですね。概念で ことを手伝える、吸収してもらえるよう た実績を知っているので期待しているんで 新しいものを生み出せていればより広い範 に私も伝えていきたいと思います。 すが、React のコアが仮想DOM の実装に 囲で影響を与えてくれておもしろいなと。 日高 React を使っている当事者だから 特化しているなと感じています。周辺のラ 日高 フロントエンドではすでに起こりつつ こそ出てきた言葉という気がします。ほ イブラリはサードパーティのものが主流で、 ありますね。モバイル分野でも楽しみです。 かのフレームワークへも影響を与えてい ステート管理やルーティングライブラリ、 うひょ 変化の例ですが、Concurrent るところを見ると、いかに Web やモバイ ルーティングってのはURLと画面を対応付 Rendering を構成する具体的な要素に ルの体験を良くしていくかという大きな けることですね。あとは APIを呼び出す非 suspense があります。これは Vue のバー フェーズに変わってきているなと。 同期処理周りのライブラリも、基本的に ジョン 3 でも実験的に入っています。も うひょ 理解しようとがんばれば応えて Facebook の React コアチームは管理して ちろん具体的な API は違っていますが、 くれるライブラリかなと。React が Web いないんですね。 概念レベルでは同じゴールを向いている。 の中でそのような役割を担っていくと将 日高 周辺の部分に関与せずコアだけに このような影響力が出せているのは 来、良い体験につながっていくと思いま 注力していると？ React のすばらしいところです。宣言的 す。React の設計や先進性が伝わったな うひょ はい。コアな機能に集中すると UI だけでなく、今後もブレークスルーが らうれしいです。WDB 6 WEB+DB PRESS Vol. 125 漫画から学ぶマネジメント 第 4回 第 4回 『いいひと。』 から学ぶ マネージャーのスタンスと 強みの総和を生み出すヒント 是澤 太志 KORESAWA Futoshi mail [email protected] Twitter @sak0620 協力するために自分の営業成果すら譲ったりもする 主人公・北野優二 お人好しとも言える人物です。 また優二は、彼に悪意を向けてくる人間に対しても 北野優二（以下、優二）は大手スポーツメーカー・ 「先にオレが好きになる 態度を変えず平等に接します。 ライテックスにあこがれを持つ主人公です。学生時 から、向こうも好いてくれる」という考えが彼の中にあ 代にはずっと陸上をしていてライテックスの靴のフ ります。どれだけ他人から叱責されても自分を思ってく ァンになり、「ライテックスという会社に入社した れている言葉だと前向きに受け取ったり、叱った人の い」という夢を持つようになり、その夢を実現し北海 理由や立場を考えそれをくんで行動したり。常に前向 道から上京します。そんな優二の信念は、「私の周り きに相手を思いやりながら人に接することが、彼自身 の人の幸せが、自分自身の幸せ」だということ。 の行動原理となっています。結果として、優二に出会 優二はその信念に従って自分が面接に遅刻しそう った人たちの多くは彼のファンになり彼の支援者とな な場面でも他人にタクシーを譲ったり、道端で困っ っていき、それが彼の強さとなって逆境の中でも大き 「いいひと」なのです。 ているお年寄りを助けたりする な成果を紡ぎだしていきます。優二の信念に伴った行 自分がどれだけ窮地に立たされていても、他人を思 いは、彼自身の徳となり帰ってくることになるのです。 いやり他人を助ける行動をし、ときには他人の夢に このような優二のスタンスは、Drucker 注 1 のいうこ ところの「強みの総和」を生みだしていくマネジメン トのヒントになりそうです。 いいひと。 前進させる、 作者：高橋しん という責任の取り方 出版社：小学館 あるプロジェクトで、優二は上司から「オレのかわ 『いいひと。 』は1993 年か りにドロをかぶってくれんか…!?」と言われます。そ ら1998 年まで『ビッグコミ して優二は「進退伺い」ではなく、「進伺い」と書いた ックスピリッツ』に連載され 紙を提出します。それを受けた上司はなんだ？ これ ていた、一人の新卒サラリー マンの社会人生活が描かれた は……と「退」の字がないことに困惑します。優二は ヒューマンドラマ感溢れる作 「オレ、前に進むことしか考えてませんから！」と答 品です。あこがれだった大手 え、「退く気も、同じ所にとどまってる気もありませ スポーツ用品メーカーに新卒 ん。前に進ませてください！ それが、オレにできる 入社した主人公・北野優二。そんな彼は組織の思惑に流さ れた人事異動を受けることになります。しかし持ち前の前 責任のとり方だと思います。」と続けます。優二の中 向きさやホスピタリティをもって、その先々で出会う人た では、後ろに退くことが責任の取り方ではなく、最 ちをときには助けながら、ときには巻き込んでいきながら、 前線を突き進みドロ水があったとしてもそれをかぶ 組織におけるさまざまな課題解決をして成果を紡いでいく 物語が展開されていきます。 注 1 「マネジメントの発明者」とも言われる経営学者です。 WEB+DB PRESS Vol. 125 7  漫画から学ぶマネジメント りながら前進することが責任の取り方であるという 次に優二はリストラ対象者を呼び集めて、リストラ 考えがありました。あとに続く人たちのために自分 対象者自らがプロジェクトメンバーとして自分たちの が汚れることをいとわない姿勢とともに。 リストラ案を作りましょう！ という提案をしました。そ 社会人をやっていると責任を取って辞するという の際「リストラの責任をとれるのは自分自身しかいな 場面を目にすることはありますが、「責任を取るから い」 という考えと同時に、ここに集まった人たち自身が こそ現状を打破するまでやりきる」という優二の姿勢 リストラ対象者であるとも伝えました。当然全員が納 にはハッとさせられる人も多いかもしれません。 得することもなく、紆余曲折もありましたが、一部の 「誰かのためにドロはかぶることはできな また優二は 「ReSET」 人たちの協力を得ることができ （リセット） と いけど、自分の大事なもののためなら、ドロをかぶれ いう会社員人生をやりなおすという制度が生まれます。 ます」 とも言います。社会に出て働ている人の中には、 簡単に言うと、経験値を重ねて出世した人たちがもう 仕事はあくまで仕事でありそこまで自分が責任をとり 「自分のために 一度新入社員に戻れるという制度で、 犠牲になってまでやることはない、と思う人もいるか 自分で自分をリストラして自分を再構成する」 という思 もしれません。でも、現状を理想的な状態に変化させ 想です。当然キャリアがリセットされるので給与も新 たり業務などでの大きな壁を打ち破ったりするために 人同様となってしまいますが、退職金を分割して支給 は、誰かが最初に楔を打ちこまなければなりません。 するなどで補填するしくみなども考えています。 そこにはドロまみれになる覚悟と勇気が必要です。 この「ReSET」を使ったイチからやりなおせる選択 このような優二の責任への向かい合い方は、マネ 肢があることで、自分をクビにし第二の人生として ジメントに携わる方の責任に対する考え方のアップ 自分の新たな可能性を見つけることにチャレンジで デートにつながっていくでしょう。 きる。自分をクビにすることを恐れず、変化を楽し 自分をクビにする みチャレンジしていく人たちが多い環境こそ自律し ということの一つの解 た組織となり、より成長と成果が生み出される環境 となるでしょう。これはマネジメントが目指すべき 入社して 3 年目の優二は、副社長じきじきにある 一つの方向性なのかもしれません。 「リストラプロジ プロジェクトを任されます。それは ェクト」 。そのリストラ対象者は管理職がメインで、 『いいひと。』と僕 最優先リストには創業から会社を支えてきた社員も 「社員としてじゃな 含まれています。さすがに優二も この漫画と出会ったのは僕が社会人 1 年目のとき く、人間としてこういうことをしてもいいのか」と迷 です。当時は組織で働くという意義やキャリアに関 いもありました。しかし社会人生活の中で出会った しても迷っていて、自分がナニモノであるのかを見 多くの人たちと花見をしていたとき、その人たちの 『いいひと。 失いかけていました。そんなときに 』を読 笑顔を見て優二は決心します。リストラは誰かがや んで、自分の信念を持ちながら目の前にある課題に らなくちゃいけない?