みなさんこんにちは。
ずっと見ないふりをしていた自宅のエアコンの故障疑惑を、認めざるをえなくなった虎の穴ラボのおっくんです。
みなさん、熱中症にはお気をつけください。
今回は、桑原 聖仁さん(@kuwahara_jsri)が書かれた、「Riot.js で簡単 Web アプリ開発」を読んだので、感想を共有していきたいと思います。
基本情報
| タイトル | Riot.js で簡単 Web アプリ開発標 |
|---|---|
| 著者 | 桑原 聖仁 |
| 発行者 | 池田 武人 |
| 企画協力 | 湊川 あい |
| レビュアー | 須永 夏子 / 井上 暢己 / 勝谷 元気 / 竹本 雄貴 / 中島 凛 |
| 発行日 | 2020/07/01 初版発行 |
| 発行 | 株式会社 シーアンドアール研究所 |
| ISBN | 978-4-86354-311-9 |
| 紹介ページ | [株式会社 C&R 研究所 - Riot.js で簡単 Web アプリ開発](https://www.c-r.com/book/detail/1350) |
手に取るまで
著者の桑原さんと数年前のとある LT 会でお会いし、その際に Riot.js のステッカーをいただいて以来、個人開発で Riot.js を使用していました。(ステッカーは、今でも私物の端末に貼ったままです。)
今回桑原さん自ら、Riot.js に関する書籍を執筆されるとのことを twitter で知り、手に取りました。
構成
本書籍は、以下の章立てになっています。
- CHAPTER01 Riot.js について知ろう
- CHAPTER02 Riot.js の基礎
- CHAPTER03 初めての Riot.js でのアプリケーション開発
- CHAPTER04 Giphy API を利用したアプリケーション
- CHAPTER05 Riot.js でのスタイリング
- CHAPTER06 CMS の開発
- APPENDIX 今後の開発に向けて
CHAPTER01
このチャプターでは、主に他のフレームワーク・ライブラリを交えながら Riot.js の立ち位置と 、設計思想・利点を大掴みに解説しています。
前半は、React や Anguler,Vue.js,Svelte など との比較を交えながらフロントエンドフレームワークの歴史的経緯について解説されます。 その中で、Riot.js の立ち位置・意義学習コストについて述べられています。 本書の最後でも触れられる部分ですが、著者曰く、「Riot.js を礎として基礎を身に付け、いろいろなフレームワーク・ライブラリを用いて Web アプリケーションを開発していく」、その学習プロセスを示されます。
後半は、Riot.js の設計思想「シンプル、簡単、わかりやすいを追求したライブラリーを作ろう」に触れながら、軽量かつパワフルな Riot.js をサンプルコードを交えながら、学習コストやヒューマンリーダブルな点を紹介してます。 後半の締めとして、「書いていて楽しい！」という段があります。 フレームワーク・ライブラリにこれから入門したい方、これまで扱ってきたフレームワークやライブラリをきっかけに苦手意識・挫折感がある方にも本書へのワクワク感が高まる内容ではないかと思います。
企業導入事例の一つとして、デイリーポータル Z 様が掲載されております。 こちらの導入経緯が Qiita に掲載されていますので、合わせて読んでみるのもいいかもしれません。
CHAPTER02 CHAPTER03
CHAPTER01 で高まったワクワクを残したまま、実際に手を動かしていくチャプターです。
前半は、オンラインエディタを用いながら、Riot.js のお作法を学んでいきます。基本的な操作を学び進めるわけですが、「お作法であれば、ドキュメントを読めば良い」と意見もあると思います。 本書の解説は、公式ドキュメントより少し踏み込んだ解説になっていると感じます。理解を深めるにあたり公式ドキュメントも読みながら進めるとよりわかりやすいのではと思います。
後半は、Todo アプリの作成(どのフレームワークの入門としても頻出ですね)を作成していきます。 本書の良い所として、はじめにまず 1 コンポーネントに機能を詰め込んだ Todo アプリの開発を行い、続いてリファクタリングしながら、各機能単位ごとのコンポーネントに分割していく手順を学んで行ける点だと思います。 学習の礎として、Riot.js という紹介があるわけですが、他のフレームワーク・ライブラリに扱うものが変わった時にもこの考え方は生かして行けるものと思います。
CHAPTER04 CHAPTER05
このチャプターからは 単純に Riot.js 利用するだけではない API との連携やスタイリングを中心に学んでいきます。 またこのチャプターより、オンラインエディタを利用した開発から、バンドラを使用した開発に移っていきます。
入門者が次を目指すに当たっての崖ともなるバンドラ周りの解説があり、単純に Riot.js を解説している訳ではない点も本書の特徴だと感じます。本チャプター以降、Parcel を使用しますが、普段 webpack を使用する方は、webpack でセットアップして進めればいいでしょう。 そのための参考資料の記載もあります。
後半のスタイリングのチャプターでは、スタイリングの解説の入り口として CSS リセット や CSS フレームワーク、AltCSS などを解説しており、こちらも単純な Riot.js の解説の範囲には収まらない内容を取り扱っています。 スタイリングの一環として数ページを割いてアニメーションの導入についても解説があります。 CSS フレームワークの導入では、Riot.js 用に CSS フレームワークを使ったコンポーネントライブラリ Semantic UI Riot の導入を入り口に、Riot.js との連携を行っていない素の Material Design との組み合わせが解説されます。
この組み合わせ方については、学びが多かったです。 普段何の気無しに CSS フレームワークを導入した時、スタイル調整のためにフレームワークから提供される class を書いていることが多かったのですが、これまでのチャプターで解説のあったコンポーネントの分割をうまく使っていくことで、スタイルを適用したコンポーネントに分割することができます。 再利用性も高まるので、Riot.js を扱うときに限らずに使える思想だと感じました。
CHAPTER06
CMS の開発を題材に、冒頭は SPA を作るためのルーティングを解説しています。これまでに触れた事柄をまとめた総仕上げとなり、より実践的で実際にありそうな内容です。
この中で、ログインの機構を実装するにあたり、状態管理ライブラリの実装も解説があります。
外部の状態管理管理ライブラリを Riot.js のプラグインとして導入します。状態管理ライブラリに限らず外部ライブラリを取り込んでいくときに応用できだろう内容です。
APPENDIX
本書では、Parcel を用いてバンドルを行ましたが次のステップとして webpack の利用や SSR などを解説しており、次へのステップアップにつなげる付録です。
まとめ
今回、Riot.js は初見ではない私ではありましたが、改めて Riot.js の内容を確認できました。
そして Riot.js の解説として閉じていない学びのある内容でした。
他のライブラリを使っていて、Riot.js の使用を検討をしているわけでは無い方が読んでも、学びがある一冊だと思います。
P.S
虎の穴ラボ主催LT会開催！
虎の穴ラボ主催のオンラインLTイベントを 8/26（水）19:30〜 開催します！
今回もフリーテーマとなっており、ITに関連する内容であれば、何でも大歓迎ですので、初心者の方も練習の場としてお気軽にご参加ください！
connpassにて参加受付中です！
9月採用説明会開催決定！
9/11(金)には、採用説明会を実施します。 虎の穴ラボへの転職を考えている方やちょっと話を聞いてみたい方など、ご参加をお待ちしております！ yumenosora.connpass.com
その他採用情
虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。
カジュアル面談では虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今期何見ました？」といったオタクトークから業務の話まで何でもお応えします。
カジュアル面談や採用情報はこちらをご確認ください。
yumenosora.co.jp
