Aozora FM 第4回目 第4回目は引き続き ゲストにくわはらさんをお呼び
しています くわはらさん よろしくお願いします
よろしくお願いします
よろしくお願いします それでは 軽くでよいので 自己紹介のほう
をお願いします
はい くわはらと申します ツイッター ではくわはらunderbarJSRIでやって
おります 仕事柄 フロントエンジニア をやっております そんな感じで
よろしくお願いします
はい ありがとうございます 細かいというか 詳細な自己紹介
は第3回のほうでだいぶ話しました ので そちらを聞いていただければ
なと思いますが 今回は趣味の話 ということで 楽しいところをお
聞きしていきたいなと思うんですが まず最初はriot.jsのほうをちょっと
聞いていきたいなと思います
そもそもriot.jsって ざっくり言う と何なんですかね
ざっくり言うと UIに関するライブラリー ですね
JavaScriptの中でもUIに重きを置いた ライブラリーですね
MVCで言うと Vに特化したライブラリー ですね 一応 ライバル的には React.js
が多分ライバルになりますね
そうなんですね Vue.jsじゃないん ですね
Vueも一応ライバルっちゃライバル なんですけど Vueは公式サイトが
フレームワークって言っている ので そこは僕は厳密派なので違う
なっていう話ですけど 工技で言う とライバルです
そうか ライブラリーとフレームワーク で違うっていうところがまずあるん
ですね
そうですけど 僕的に言うとVueって 別にフレームワークじゃないなっていう
気はしてますけど 結局Vueに特化 したものじゃないのかなって触った
結果思いましたね
なるほど
多分 ライブラリーとフレームワーク の違いっていっぱいありますけど
僕の基準として 今のV2以上のアンギュラー ですね いわゆる
はい
余談ですけど アンギュラー.jsと アンギュラーは別物ですので そこは
皆さんご理解いただければと思います それは公式が言ってます アンギュラー
2以降のことをアンギュラーと呼び ます 1のことをアンギュラー.jsって
呼んでくれっていうふうに書いて ありますので そこだけ
なるほど
で アンギュラーはいろんなライブラリー とか加えてないはずなんですよ
大体 アンギュラー1本ガンとインストール したら そのまま使うことが多くて
Riot React Vueは それら周辺のサード パーティーが作ったライブラリー
とか いろんなものを組み合わせて 一つの環境を作って開発するの
が主だと思うんで そういうものは ライブラリーと呼んでます 僕の中で
なるほど そうすると Riot.jsを使う ことで 助かるというか 楽になる
部分だったりとか 便利になる部分 っていうのがあると思うんだけど
いわゆるツール的なところって 具体的にどんな感じなんですか
これ だいたいVueに言われている ことなんですけど 学習コスト低い
のと ヒューマンリーダブルなところ と ものすごいシンプルなAPIですね
結構 いろんなところでしゃべ ってるんですけど JSの初心者の方
もしくは もしデザイナーの方が JSのことを書かなきゃいけない
なってなったときに触るんだったら 僕はRiotをお勧めします そのまま
ステップアップしたりとか もっと 規模が大きくなったり 複雑な
ことをしたくなったときにVueを 触るのがいいんじゃないかなと
僕は思ってます
おだしょー なるほど 何だろう 強み のところをちょっと深掘りして
いきたいんですけど そうだな 学習 コスト低いっていうのと リーダブル
読みやすいってことですよね 結構 近しいかなと思うんですけど 実際
どういうところが初心者に入り やすいというか コストが低い感じ
なんですかね
三沢 リアクトとかVueとかって なんだかんだライブラリに沿った
書き方をしなきゃいけないっていう のがすごくあると思うんですよ
このライブラリはこういうふう に書いてね みたいなのがあると思
うんですけど Riotって従来のHTMLの中に ヘッダー上のほうにCSSとかスタイル
を書いて もしくはJSのスクリプト 一番下のほうに書いて 真ん中に
HTMLのドームがあるっていう 書き方 があるんですけど Riotはそれをその
まんま書けるっていうのが一番 強いです
三沢 めっちゃ分かりやすいですね
三沢 コンポーネント化でもちゃんと するんです あくまでコンポーネント
志向のUIライブラリですけど 一つのHTMLの中にホゲタグとか作って
その中に独自の機能を付け加え たい場合は ホゲ.タグみたいな
タグっていう拡張子のファイルを 作るんですけど その中身はまた
同じようにHTMLとCSSとJSを書いて 終わりなんですよ なんでRiotって
暴動って名前なのかっていうと 今のいろんなJSに関するライブラリ
とかフレームワークが乱立した 中 その辺のシンタックスに従わ
なきゃいけなくて その複雑化した ものに対する暴動なんですよ もう
一度シンプルに考えようぜっていう のがRiotです
三沢 アンチ複雑さみたいな
三沢 そうですね 本当に だから シンプルさが一番最初にRiotをバージョン
1から作った人たちの思想にあります ね
おだしょー 結構 プログラム全体 でもシンプルなほうがいいっていう
のは
三沢 そうですね やっぱり っていう のは その代わりシンプル
なので大規模とかになると全然 向かないですね なので流行らない
と思います
おだしょー はい
三沢 なるほど いわゆるJake Eddy とかVanillaJSもそうなんですけど
ロモを直接いじるってあったら 結構 やり玉に挙げられる感ある
じゃないですか Riot.jsはその
三沢 そこにちょっとしたルール をつけて 交通整理した感じですね
だから その代わりJake Eddyとの全然 競争もよくやりますね
おだしょー そうなんですね
三沢 私は割と高いかなと思って て ある意味で捨てやすいライブラリー
ですね
おだしょー でもいいですね 捨てやすい
三沢 で その代わりLogicはそのまま そのJavaScriptを書いて使うので Logic
そのまま扱って DOMはもう1回別の ものに切り替えればみたいなとこ
はあります
おだしょー なるほど いいですね 乗り換えるコスト高いってすごい
辛いじゃないですか
三沢 そうですね Riot1回試してみよう かっていうので 作ってみて ある
程度方針決まったけど ちょっと フェーズ変わってきたなってなったら
別に乗り換えればって感じですね
おだしょー なんかある画面だけ使う とか 社内向けの管理画面の一部
だけとかっていう導入の仕方が しあっていったのがすごい魅力
的ですね
三沢 そうですね 画面数小さかったり ちょっとしたルーティング使った
SPだったら 全然Riotでサクッと 作ってもらえればいいんじゃない
かなと思ってます
おだしょー なるほど あとJS的な 話の文脈でいくと 読み込む順番
によって追われるとか 読み込む 順番どうなんだ的なところがよく
言われるかなと思うんですけど その辺りって工夫されてるとこ
とかあるんですかね
三沢 工夫ないかな 一応Riotの もろもろの周辺 サードパーティー
のライブラリーありますけど 結局 その辺はRiotにそもそも引っ張ら
れるので 本体を一番最初に読み 込んであれば あとはほぼほぼ順番
は関係ないです
おだしょー じゃあJPG的なとこと あんまりそこは変わらないですね
三沢 そうですね あと 今は何だかんだ Webpack使うことがほとんどなので
その辺は吉那にマンドルでやって くれるでしょっていうとこはあります
おだしょー なるほど フレームワーク 的な方法的なところが少ないが
ゆえに 他のモドラリーとか技術 の卓球を借りられるっていうのは
すごい良いメリットですね
三沢 そうですね 取捨選択はしやすい けど その代わり一から自分たち
で開発環境を作らなきゃいけない ってなると辛いっていうのがよく
聞きますね
おだしょー エガヨットJですか
三沢 そうですね 公式のCLIもあるん ですけど クリエイトリアクトアップ
とかVue CLIみたいにコマンドとして newとかcreateってやっても開発環境
は作ってくれないので
おだしょー 私はJQueryしか使った ことがないので 開幕環境がそもそも
いるっていうのが今 ピンときて なかったんですけど 単純にライブラリー
としてscriptタグで読み込めばいい みたいなイメージでいたんですけど
そういうんじゃないですかね
三沢 基本はあってます 基本は それであってますよ それは多分
Vueも一緒だし Reactも多分そうな ってるはずです ただ その吉谷に
いろんなものをWebpack使ってバンドル したりとか テストしたりとか そういう
構図 なんかな ディレクトリ構成 とか 決まったものとテンプレとか
ボイラープレイとかしたものを 作ってくれるっていうのは 他の
ライブラリーのCLIにはありません ライオウトにはないよって感じ
です
三沢 その決まりきったscriptタグ だとか 他のライブラリーとかを
手で全部入れていけばそういう のはいらないけれど 当然 チーム
とか開発する画面数 規模によって はそんな管理できないから その
後には助けよう そういったCLIを 使ってやるって感じの話ですね
三沢 そうですね あとはプロジェクト 一番最初とかもありますね 一番
最初の開発環境を作るときもCLI で吉谷にやってくれたものに乗っ
かって 後から自分たちで手加え ようとかのときも やっぱ楽かな
と思います そっちの
三沢 そうですよね Excel手順書を見て 1から作ってねっていう時代でも
ないですもんね
三沢 ないですね みんなで好きな やっぱNodeのライブラリっていっぱい
あるし どれ使うかって人それぞれ だってしますね
三沢 そっか そうなんすよね 結構 レガシーな環境にずっといた
もので ライブラリを使うっていう 文化が 結構長い間エンジニアやってる
わりには 最近何か触れてるかな って
三沢 最近のJSはそれが特化して 強くなりすぎて JSは難しくない
けど 環境が難しいってのはよく 聞きますよね
三沢 なるほど 今メイン 私 スマホ アプリの開発をやっていて
三沢 アンドロイドを今メインで やってるんですけど
三沢 いや まだJavaなんですよ 結局 今の会社も7年ぐらいやってる
アプリで アンドロイドは結構レガシー な感じなんですよね
三沢 なるほど
三沢 っていうところで 結構 ライブラリ の選定とか 今 使ってるライブラリ
の将来性とかもいろいろ考えられて いて
三沢 はい
三沢 なるほど どこも同じぽい 悩みはやっぱりありますね
三沢 まあ ありますよね その辺の
三沢 そうですね JSは今 複雑化 したって言うけど 別にJSそのものは
何も複雑化してないよと思います ね
三沢 正直 一人で書くんだったら 別にウィークエリーでも むしろ
何も無くても書けちゃうし
三沢 全然いいんじゃないですか 本当に サクッと作れてちゃんと
運用できるんであれば 何も問題ない ですよ
三沢 意外とライブラリ ライブラリ っていって いろいろ入れ込んで
いくと 今度 ロードというか 通信 が当然重たくなったりしたりする
とか
三沢 とかもありますね
三沢 意外とそういうところを見落とし がちじゃないですか っていうところ
もあるんで いたしかよしというか らしいなって思いますね
三沢 そうですね
三沢 なるほど
三沢 なるほど あとRiot.js使って 黒田さんが何か 仕事でも趣味でも
いいんですけど 使ってるアプリ とかサービスとか場面とかあったら
ちょっと聞きたいなって思うん ですけど
黒田 そうですね 仕事では 一応 前職で一個作ったけど 確かそれは
公開しちゃダメって言われてる ので 言えないで 今の仕事ではさすが
に入れた事例はないですね ちょっと 規模が大きい案件ばっかりなので
自分としてもこの仕事にRiot.js 入れるのはつらいなって思ってる
ので 僕たちの会社の他のチーム でいくつか使ってるものもあるん
ですけど それも多分公開できない 気がするな 個人として作ってる
ものは実はないんですよね これは 申し上げないが 一応 作りたい
ものは何個かあって それは今年のToDoに入れた結果 もう今年終わるんです
けど 一応 作りたいものは大きく三つあって 一つはRiotのCLIとして
他のライブラリと同じような ちゃんとサポートするCLIがっつり
作りたいなっていうのが一つですね イメージ的にはCreate React Appにちょっと
色付けたRiot漫画作りたい 二つ 目は サードパーティーを全部一覧
化できるようなウェブページを一つ 作りたい それももちろんRiot使った
まま作りたいですね
サードパーティーっていうのは 何のサードパーティーですかね
しばやん こちらはRiotの公式 としてRiot RootとかRooter周りとかも
あるんですけど ReactだったらRedux だったり VueだったらVuxっていう
ストアを管理するライブラリが あるんですけど そいつらはFacebook
とかVueの公式でやるんですけど Riotはその公式のものがなくて 別の
Uしか作ったものとかもあったり するんですよ アニメーションとか
のRiot用のライブラリもあるし CSSフレームワークのRiot特化した
版も結構あったりして そういう の 実は意外にRiot使ってる人たち
って知らなかったりするんですよ そういうのがいっぱいあるんだよ
っていうのを一覧でパッと見れる ようなサイトをRooting使ったもの
としてやりたいなって思ってました 寺田 うーん すごい便利ソース
ですね
しばやん そうですね 今後Riot使う 人たちのための助けにもなるかな
って思ってて 僕はRiotのコミッター と言っときながら お前使ってねえ
じゃんって言われたらもう何も 言えねえわって思ってて 本当に
おっしゃるとおりで何も言えないん ですよ なので さすがにそこは
改善したいなと思ってますね 三つ目が何だっけ あれか HNPWAっていう
のがあるんですけど
寺田 HNPWA
しばやん はい これはPWAのデモ サイトを各ライブラリーとかフレーム
ワーク使ったものの一覧のサイト なんですよ
寺田 ああ なるほど
しばやん そこにRiotがないっていう のがちょっと悔しくて
寺田 ああ はいはいはい
しばやん 作ってる途中段階でいろいろ 本業が忙しくなって止まってる
んで もうそれもいい加減作り終 えて さっさと公開したいなって
思いますね
寺田 なるほど CLIはちょっと開発 環境の話なんで ウェブじゃない
って言い方までですけど ウェブ サイトとしてはあれなんですけど
放射2つだと結構やっぱ規模的には 数画面 10画面いかないぐらいの
規模なんで
しばやん そうですね
しばやん これぐらいがスイート スポットというか いい感じの規模
感なんですか
しばやん そうですね 10が結構個人的 には限界かな 10もちょっと多い
かもしんないなと思ってますね
寺田 うん まあそうですよね 2桁いくと
ちょっと大とかあります
しばやん ただまあとはいえRiot その本体が
結構軽いので
寺田 ああ そうですね
しばやん 多分圧縮して10キロバイト ちょい
なので
寺田 ああ いいですね 軽いのは
しばやん そうですね WJSの3分の1ぐらい
だいたい
寺田 うーん
しばやん ここだともっともっと 小っちゃいですね やっぱり
寺田 うーん
しばやん やっぱりスマホに読み 込ますJSのライブラリーの量が
大きいってやっぱつらいだろう ってそもそもって思ってるので
寺田 そうですよね
しばやん 小っちゃけが小っちゃい ほうがそれは
もちろんいいと思ってるのでRiot かなと
一応それより小さいものとして ちょっと前に流行ったというか
話題になったのがハイパーアップ ってものがあるんですけど ハイパー
アップはですね キータのサイト に使われてますね
寺田 そうなんですね
しばやん キータがちょっと前に 結構大リニューアルをしたと思
うんですけどデザインが その時に インクリメンツが内部で作った
ライブラリーですね
寺田 へー
しばやん はい 一応そのライブラリー バージョン
2も内々で開発が進んでるらしい けど いつ来るんだろうなと思い
ながら楽しみに待ってます
寺田 へー 結構フロントエンド界隈 興味ある
感じなんですね
しばやん そうですね なんだかんだ見える
ものを作るほうが好きかなとは 思ってますけどね
寺田 なるほど
しばやん とはいえバックエンド もちろん好きなんでね CUIは好き
なんで コマンドライン大好きです 僕は
寺田 なんか業務アプリが長かった ので ついバッチ処理的なイメージ
が
しばやん バッチももう死ぬほど やった感じはありますね バッチ
というかCSV連携とか在庫関係の バッチを結構やったので
寺田 分かります 事前集計を回 しておいてとかありますよね
しばやん 前のバッチ終わらなかったら どうするんだとかするとか 日時
バッチと終時バッチがあってみたいな 何時に実行してくるのみたいな
ことをやったりとか ログ入った りとか まあまあやりましたねみたいな
はいはいはいはい 流れが完璧すぎて あー確かに BGMもほんと素晴らしいですからね
あの 結構ゲームの曲どれが一番好きかってすごい悩むと思うんですけど
すっげえ悩む 悩むんですよね 時の回廊は僕の中でかなり上位に来ていて
あーなるほど 大好きなんですよね 曲
いやーサントラもやっぱりそっちも クロノトリガーもサントラ買って持ってるんですけど
いや1位は決めづらいけど僕は世界変革の時ですね あー
あのラスボスの曲がやっぱりなんだかんだ カッコイイっすもんね
ちなみに2位はスペッキオです あー
あののんびりした感じがたまらんなって感じですね
意外と辛い強さというか辛いボス戦闘の時にも流れますからねあれ
そうなんですよね
いやーでもスペッキオ好きだな スペッキオってなんだっけ
スペイン語かドイツ語か忘れましたけど 鏡って意味なんですよね
そうなんですね 語源があるの初めて知った
スペッキオは鏡って意味なので 主人公が強くなれば鏡だから強くなるんですよね
うーん なるほど そうなんですね
へー ちょっとクロノトリガー話がまじで最悪ないんでちょっと次
確かに
クロノトリガーの話をしていて おって思ったところがあって
はい
刺さった言葉の話のところで 生きてないだけ死んでいる
死んでないだけで生きてないだけっていう流れで
ファイナルファンタジー9につながるとこあるなってちょっと思ったんですよね
あーはいはいはい
ファイナルファンタジー9で出てくるビビっていうクロノトリガーのキャラが
生きてるってことを証明できなかったら 死んでいるってことなのかなみたいな
はい 言いますね
っていうのがちょっとつながりを感じて お!って思ったんですけど
いやーあのゲームの主人公はビビでしょ
いやーほんといいっすよね
はい いやもうビビなくしてあのゲームは完結しないんですよね
なんかビビのその成長とか 一生って言っちゃうとちょっとあれなんですけど
体験してるところもあるじゃないですか
そうですね
いや衝撃でしょ 自分の出生とか宿命とかがこうなってたんだって知った瞬間
結構自我崩壊するんじゃないかってぐらいショックですよあれは
すごい気投げで結構仲間がそういう目に合ってるみたいなところも見つつ
そうですね なんなら戦うしなみたいな
そうなんですよね
クロノワルツって出てきますから
3号ぐらいまでいましたもんね
そうまあワルツですからね
そうなんですよ いやーほんとに
そのクロマドーシたちの村に行きますからね