00:16
こんばんは、kkeethこと桑原です。
この番組では、なるべく皆さんが役立つ情報を届けさせることを目指して配信していきたいと思います。
第2回は、私がコミッターをしているRiot.jsというライブラリがあるんですけど、
こちらについての紹介をしていきたいなと思っております。
なんでこの話をするかというと、
私がそのRiot.jsというライブラリがありまして、
これの商業紙を書いているという話をいろんなところでしていると思うんですけど、
今月、つい昨日なんですけど、
出版社の3回の構成が終わりまして、
印刷所へのデータアップロードが終わったというところなんですよね。
なので、このまま印刷されて出版されるまでの流れがひたすら待つだけという形になりました。
ここからは私は本の修正もできませんし、
そのところで出版社としては対応できませんという話になりますので、
何か誤字脱字とか誤植とかありましたら、
それは別途、サイトというかGitHubなんですけど、
それ用のリポジトリを用意していますので、
そちらに変更内とか修正内容を追記していきたいと思うんですけども、
この後以降はそれに関しては置いておいて、
ひたすら宣伝をしていきたいなと思っておりますので、
まずそもそも僕が書いたRiot.jsというものについて、
皆さんに知っていただきたいなと思ってお話ししていきたいと思います。
ちょっと軽く歴史的な話をお話ししたいと思いますけど、
特にRiot.jsというと、名前がついていると、
JavaScriptのUIライブラリーです。
ですので、フロントエンド的な、
もとよりJavaScript限定の話になってしまうかもしれないですけど、
それの歴史的なお話をしていきたいと思います。
JavaScriptのフレームワークってもちろんいっぱいあるんですけど、
ライブラリーもそうなんですけど、
フレームワークと言われる、
本当にちゃんとアプリケーションを作るためのベースのあるツールというのの
歴史をしゃべっていくと、
どうやったってまず真っ先にJQueryが出てきますね。
JQueryは皆さんの名前も多分ご存知だと思いますし、
現代でもなんだかんだ一番使われていると言っても、
おそらく過言ではないライブラリーの一つではないかと思います。
もしかしたらReactかもわからないし、
ローダッシュかもわからないし、
Moment.jsとか時間管理するライブラリかもしれないし、
ちょっとわからないですけどね。
Webpackかもしれないですね。
Webpackっていうバンドラーですね。
バンドル用のライブラリかもわからないですけども。
いろんなものがあるんですけど、
その中でちゃんとアプリケーションを作るメインのライブラリ、
ツールとしてはJQueryって当時一応あったんですよね。
そのJavaScriptよりちょっと書きやすくなったりとか、
ルールとか仕切りがあったりするっていうものだったんですけど、
これが出たおかげで、
03:01
結構JavaScriptは進化したと言っても過言ではないのかなと思います。
今もJQuery用のプラグインが生まれまして、
そのプラグインが毎年毎年出てまして、
多分もう1000ぐらい超えてるはずだと思います。
本当の数はわからないですけど。
皆さんがこんなツール欲しいとか、
こんな機能欲しいみたいな。
あとこれだけは別途実装したいなっていう話があったときに、
それでJQueryのプラグインできるよってか、
JQueryのプラグインそもそも誰かが作ってるよって話があるので、
別途実装しなくてもいいよみたいな話は結構あったりするんですね。
というところでJQueryは生きてるんだって話なんですけど、
歴史的にはそのJQueryが先に来たって話ですね。
その次に出てきたのがバックボーンですね。
バックボーンJS。背骨ってことですね。
背骨のJSっていう通り、文字通り背骨なんですよ。
ちゃんとしっかりとした軸があって、
それに乗っかってアプリケーションを作っていきましょうっていうような。
本当に先駆けになったようなフレームワークがありますね。
このバックボーンJSができてから、
その後に当時のGoogle社が作ったフレームワーク、
AngularJSっていうものがあるんですね。
一般的にはAngular1って言われてるものなんですけど。
このフレームワークができて、そこからJavaScriptのフレームワーク、
みんながいっぱい作りたくなったというか、
これが主流になってきたっていう流れが結構ありますね。
ちなみにその当時のフレームワークっていうのは、
双方向データバインディングが特徴機能の一つだったんですよ。
なので、HTMLを拡張する形になってしまいますね。
なので、HTMLがそんなに汚れてしまうのがいいのかどうのかっていうのは別の話でして、
当時としてはそれが一番流行ったっていう感じですね。
ちなみに今言ったバックボーンJSと、
Google社が作ったAngularJSというフレームワークと、
もう一個ですね、ノックアウトJSっていうのがあったんですよ。
この3つが当時すごい人気で、よく話題に出てたんですね。
それが当時の三大JavaScriptフレームワークっていう風に言われてたんですけども。
っていうのがあって、そういう流れがずっとあったんですね。
それはみんな双方向データバインディングの仕様というか、
それの流れに乗っかったようなフレームワークだったんですけども。
そこにですね、Facebook社がリアクトっていうコンポーネント志向のUIラブルを発表したんですよ。
開発しましてですね。
これがとても素晴らしくて、特に設計思想が素晴らしかったんですよ。
リアクトの影響で世の中のJavaScriptフレームワークとかライブラリーは一変するんですね。
動きとして一気にこれがコンポーネント志向という、
今現代でいうと当たり前のような話ですね。
皆さんコンポーネントってよく言ってると思うんですけど、
特にフロントエンジニアの方々。
そのコンポーネントって言われてるもののメインに作っていこうっていう志向になったのが、
リアクトっていうものができたからって言われますね。
先駆け的な話です。
あくまでUIというかエンジニア的なところ、
ビューですね。いわゆるMVCで言うとビューのところですけど、
06:01
ビューはあくまで機能メインというわけではなくて、
UIを分けるためっていう話ですね、特に。
コンポーネントに分けて、しかも機能機能にスコープをぶった切って、
放出性とか拡張性を拡張するとか、
席もしっかり分けるとかいう話よく出ると思うんですけど、
そのためのものでしかないと。
それに対してロジックを組み合わせていくっていうのが、
UIライブラリ、コンポーネント志向の特徴ではあるんですけど。
これって言うとはっきり言うと、
今のアプリケーションの開発と結構似てるわけですよね。
iPhoneもAndroidもどっちでも一緒だと思うんですけど、
まず、ストーリーフォードっていうペダリッチの画面の中に
コンポーネントというかパーツをどんどん置いていくわけですよね。
テキストラベルだったりとか、インプットフォームだったりとか、
あとはボタン用途だったりとかっていうのを置いて、
それに対してイベントハンドラーをセットしていくと。
それをごにょごにょがんばって、いろんなところに画面を作って
組み合わせしたりとか、データアクセスするとか、
APIのコールするとか、いろんなことをやって、
最終的にアプリケーションの完成するんですけど、
それって今のフロントエンドってそれも当たり前ですし、
アプリケーションも元々そういうことやってて、
結構アプリケーション開発にフロントエンドも似てきたんだな
っていう話にもちょっと言えますけどね。
そういう流れになってた感じです。
この話を戻すと、リアクトの設計手法はとても素晴らしくて、
世の中のJavascriptのライブラリフレームワークも
そこに乗っかってきたって話なんですけど、
Liott JSっていうのもぶっちゃけそれに乗っかってきたわけですよ。
今のLiott JSはバージョン4なんですけど、メインバージョンがですね。
メインバージョン4まで来たんですけど、バージョン2ですね。
当時のバージョン2を開発する際にそのコンポーネント手法に
Liott JSも乗っかりまして、
今の現代のUIライブラリっていう立ち位置まで来たって感じですね。
Liottっていう名前ですけど、
Liottって名前的に暴動っていう意味なんですよ、英単語で言うと。
結構荒々しい名前なんですよね。
これは理由がもちろんありまして、
いろんなJavaScriptのフレームワークとかライブラリが
いっぱい生まれたんですけど、
どのツールを使うとしてもやっぱりそのツールに従って
開発しなきゃいけないとか、
そのルールが意外と従来のウェブページを作ってきた
ウェブアプリケーションを作った方からすると
ちょっと特殊な仕様だったりとか、
インターフェース的になれないなみたいな感じが
いっぱいあると思うんですよ。
いろんな機能も加えたりとか、なんやらかんやらってありまして、
結局現代のJavaScriptのフレームワークとかツールって
複雑で難しくなってしまった傾向が正直あるんですよね。
というところで、その難しさとか複雑さに対して
いや、もっとシンプルに作りましょうとか、
本来のウェブ標準のような標準として
そこに拡張するとか、便利な機能を付け加えたっていう
ほんとそれだけ。
もっとちょっとだけ皆さんのウェブアプリケーション開発を
サポートするためだけのライブラリっていうのが
LiotJですね。
なのでその複雑さとか難しさですね、現代のものを
09:00
一回元に戻すというか、シンプルにしましょうよっていう暴動ですね。
そのための暴動という意味でLiotっていう名前なんですよね。
なので名前的に荒々しいんですけど、実は蓋開くと
ウェブ標準に乗っかりたいっていうので
荒々しい名前に見せかけて結構優等生というか
真面目な感じのライブラリになりますね。
ですので、ものすごくシンプルで結構
簡単なシンタックスだったりするんですよね。
見た目的にはちょっと他のライブラリとかと一緒で
ちょっと特殊な見た目をしている可能性はありますけども。
ただ見てみたり書いてみたりすると分かると思うんですけど
割とシンプルかつ簡単なというふうに
皆さんも思っていただけるんじゃないかと思います。
そして分かりやすいですね。
従来のウェブアプリケーション開発の書き方に結構乗っかって
ウェブ標準に従って作られていたっていう設計にもなりますので、
割と見たことあるよう、既視感のある書き方をするなというふうに
皆さんも感じられているんじゃないかなと思っていますし、
もし触ったことない方は見ていただけると
確かにって思うかもしれないですね。
Nyota.jsですけど、利用状況的に言うと
やっぱり現代のJavaScriptのUIライブラリとフレームワークって
もちろん3つあるんですよ。
現代のっていうことですね。
昔の三大フレームワークは先ほど申し上げた通り
backbone.jsとangular.jsとノックアウトなんですけども
現代の三大フレームワークというかライブラリですけど
リアクト.jsとview.jsとangular.jsですね。
この3つになります。
angular.jsを入れていいかどうかは個人的には
そろそろ微妙かなと思ったりしています。
3大というか2強だと思ってますけどね。
ちなみにこのangular.jsって言ってるのはangular2の話をしています。
angular2って言うと怒られるので皆さん気を付けてください。
angularですね。
angular1のことangular.jsに公式入れているので
そこは気を付けていただければと思いますけど
今言った僕が2強って言ってるトップ2ですね。
view.jsとリアクト.jsですけど
この2つは文字通り桁が違うんですよ。
angularとjQueryのGitHubのリポジトリのGitHubスターの数ですね。
分かりやすい指標としてそのスターの数が圧倒的なんですよね。
本当に文字通り桁が1つ違ってですね。
10万桁を言ってるんですよ。
リアクトのビューも確か。
なのでこの2つがやっぱり圧倒的に強いかなと思いますね。
で、じゃあriotはって言うとですね
riotは本当に1桁下なんですけど
それもさらに数字が若くて
若くては小さくてですね。
今のとこ1万4千ちょいだったと思います。
一応JavaScriptのライブラリーの中では
そこそこ数字稼んでいるとは思うんですけど
さすがにその他の奴らと比較すると全然少ないんですよね。
細々と根強い人気のままやっているって感じになりますね。
さらにですね。
NPMのダウンロード数を見てもなかなかそんなに多くはないですね。
毎日毎日爆発的に伸びているわけではなくて
12:01
毎月ですね。
1月の集計をしたところで約3万ダウンロードされているくらいのものなので
そんなみんな大人気でたくさん使われていてもではない感じにはなりますけどね。
歴史も結構長くてですね。
長い歴史を誇る割には割と使われているというところがあって
僕は結構これがIoT.jsの特徴のひとつかなと正直思ったりはしていますね。
さっきも言ったときには歴史が長いという話をしますと
IoT.jsって実はですね。
先ほども言ったリアクトの誕生とほぼ同時期に開発がスタートしたライブラリーなんですよ。
ちなみに厳密に言うとリアクトが開発スタートした半年後にライオットもスタートしていますね。
ちなみにリアクトの一番最初のファーストコミットといわれるもの
一番最初のコミットは2013年の5月30日ですね。
ライオットはそれの約半年後なので
2013年の9月27日。
本当にほぼ半年かな。
かれこれそのままいろんなことがあったり機能開発されたりとか
仕様見直されたりとかいろんなことをやっておきながら
かれこれ5年、5年じゃないですね。
2020年なので7年ですね。
厳密に言うと。
もう続いているというので本当にこれはすごいことですね。
と思います。
なかなか抜本的な仕様変更したりとかも
ライオットには実はあるんですけど
それでもなんだかんだずっと使われ続けて
今に至るというのはなかなかすごいことですね。
ソフトウェアの中で7年間続いて
でもいまだに使われているものっていくつありますかみたいな話が
いっぱいあって
それぐらいに長く使われているものって本当に珍しいんですよね。
ていうのでそんな栄光生成激しい中
これだけ使われているのはやっぱり
強い人気があるんだなって思いますし
私もずっと知ってからずっと使っている感じですね。
僕はもう5年ぐらい使っているんですよ。
なかなか素晴らしいと思いますし
結構好きではあるので今広めているわけですけども
ホンちゃんの実際の案件でガッチリ使うかというと
それはちょっと難しいところで
個人開発で使うとか
ちょっとちゃんと簡単なもの
ちっちゃいアプリケーションを作るためだけだったら
全然いいと思うんですけど
なかなか大規模とか
大規模なんじゃなくても中規模レベルの
ちゃんとしたアプリケーション開発としては
僕はもうそうです。
皆さんもやっている通りだと思うんですけど
あんまり向かないかと思いますね。
サクッと早く作るものとか
簡単なものに関してはいいのか
入門的にも全然ライオウトありと思いますけども
それよりももっとでかいものを作るようになったら
ライオウトから卒業して
VueだったりReactだったり
使ってみて開発するのがいいかなと思っております。
そんなところですかね。
とにかく最初の
JavaScriptの開発の入門として
使っていただくのが
僕的にはいいのかなと思ってますし
あまりフレームワークとしての機能は
そんなに多くないんですよ。
15:00
APIの数も少ないんですよね。
ですのでしっかり設計を考えるとか
いろんなものを工夫しなきゃいけないとか
考えなきゃいけないことがいっぱい出てくるんですけど
それってやっぱりプログラマーとしては
大事な能力、資質基準ですので
それをサポートするという意味で
ライオウトを使うのが素晴らしいと思ってます。
ですので結構教育的というか
一度ライオウトで開発してみて
いろんなことを足りないねって思いますけど
その足りないねっていう感覚が結構大事で
それを身につけてもらう意味でも
ライオウトを使う意味が価値があるかなと思っているので
もし皆さん
今日の話を聞いて
興味を持っていただけたなら
使ってみていただけたらなと思います。
というところで
今回の収録は長くなってしまいまして
申し訳ないですけど
以上となります。
何かご質問等ありましたら
ぜひぜひ投げていただければいいと思いますし
ライオウトに関して
何か思うところあったら
投げていただければ大丈夫です。
ライオウト使えねえじゃんみたいな話も全然OKですし
それに対しては結構建設的な話をしていきたいなと思ってますので
ただ何かこんな話をしていきたいなっていうのが
ありましたら
言っていただければ
また何かお話ししていきたいと思いますので
よろしくお願いします。
では今回の収録は以上となります。
バイバイ。
