00:03
はい、みなさんこんばんは。 keithことくわはらです。本日もやっていきましょう。 keithのエンジニア雑談チャンネルです。この番組ではウェブ業界に関すること、エンジニアについての雑談など、様々な情報を発信していきたいと思います。
今回第14回目ですが、第14回もゲストトークになります。今回のゲストの方は、OSSクリエイターをされている、ゆうせんさんです。
ゆうせんさん、よろしくお願いいたします。 いつも通りですが、簡単に自己紹介いただければありがたいです。
ウェブエンジニアを11年くらい前からやっているんですけども、
いろんな仕事を点々としてきまして、 今月の後半からOSSの作成が本業になりまして、
今年いっぱいはその仕事をやる予定になっています。 なので、肩書きがついにOSSクリエイターになったと
思っております。 ありがとうございます。ちなみに作ろうとされているOSSって言える範囲で、どんなものを作っているのか聞きたいんですけども。
データベースの周りのアルゴリズムですね。 それがちょっと特殊なものなので、
モジュール化して、それをシステムでどうしても必要な機能なので、 それが作れる人が
見つからないので、 自分なら作れるっていうことが示せたので、
半年時間いただいて、それで作ってくださいということになりますね。 なので、今それまで無職だったんですけど。
無職とは言わないんですけど、やってることはあったんですけど。
なるほどですね。 結構サーバーサイド側の言語とかでやったりするんですか?
そうですね。SQLが得意で、 遅いシステムを速くするのに快感を覚えるタイプですね。
パフォーマンスチューニングって大好きみたいな感じですかね。 そうですね。大きな企業でもいくつか実績があったので。
例えば管理画面で、 ページをめくるたびに2分半かかってたシステムがあったんですけど。
それはめくるのに1秒に詰めたっていう。 その時の会社が広告のデータを扱ってて、
レコードが毎月めちゃくちゃ多かったんですね。 1ヶ月で8億レコードあって、それをサマリーにして3億レコードにしてたんですけど。
03:04
それが、クエリが極端に遅くてですね。 そのシステムを改善した経験があった。
他にもチャットのアプリとかで、 重いクエリを直すとかね。そういう仕事を業務の中でやってきましたね。
いやー、遅いクエリってよくありますよね。 僕もなった経験はありますけども。
でさ、それをどうやって改善するかなんですけど、 例えばクエリだけで頑張る人がたまにいて、
他はインフラを強化して頑張るみたいな。 あーなるほど。金の力で解決。
いろんな解決方法あると思うんですけど、 まともな成功法っていうのは、クエリを早くすることだと思うんですよね。
まあまあ、そうですね。
やっぱり経営者からすると、それに頑張るよりも お金で解決できるんだったらお金で解決しましょうみたいな。
いやー、特幹作業すぎるなぁ。
普通にあれですよね。クエリチューニングとか、 クエリログを吐き出してみるとか、
それに実行計画を出してみたら結構スパッと見えたりすること、 たまにありますけどね。
そうですよね。だから、よく分かっている人に 1回見せてやればいいと思うんですけど。
そうですね。
で、なかなかですね。あ、すいません。私、自己紹介が ちょっと足りてなかったんですけども、今年でも50を超えてるんですね。
今年で55歳になるんですけど。
なので、いろんな会社でお世話になることが 多いんですけど、出番がなかなか回ってこないっていうのがありまして。
55歳って、まだ現役でバリバリやられてるって 結構少ない事例かなと思っているので。
そうですよね。私の年齢だと組込み系が 前世紀の頃のプログラマーさんが多いんですけど。
なかなかそっちからウェブ系に移っていく人が そんなに多くはないみたいですね。
そうですね。すごいですなぁと。 バイタリティ溢れてますね。もう尊敬しますね。
でも、若い頃にC言語とかですね、 RISPとか、低レイヤーの言語を勉強したので。
おかげで今の高級言語と言われるやつですね。 Javaから始まったオブジェクト式ですか。
そういうのが体力が持ったという感じですね。
なるほど。
06:01
思考の体力、考える力。
そうですね。そっち大事だと思うんですけど。 なかなかC言語と、RISPも触れてたってすごく懐かしいですね。
これできるんですけど、活躍の場所がなくて、どこで使えるのか。
ちょっと使うことはないですけど、僕結構プログラミングの勉強とか、 アルゴリズムの勉強とかというところで、関数型の言語みたいなところがあるので。
発想とか考え方っていう意味での学びになるから、 っていう意味でお勧めしたことは何とかありますか。
RISPっていうのは元祖関数型みたいなところありますよね。
ありますよね。初めて見た時は本当に衝撃でしたけどね。
見た目にまずインパクトがあって。
すごいカッコがブワーッときて斜めに。
あれちょっとNESTに慣れないと。
最初驚きましたけど、見慣れてしまえばなるほどって感じですけどね。
あの頃はIDEみたいな便利なのもなくて、
メモ帳ぐらいのレベルのエディターでやってました。
インテントも手打ちですかね。
はい、ですよね。
今のIDEとかですね、いろんな便利ツール、例えばGitとかもそうですけど、
あれがあるおかげで今仕事できてるのかなっていう気はしてますね。
そうですよね。
僕もでも始めた頃はもうすでにエディターはそこそこ揃ってたし、
Eclipseとかあったとかですね。
バージョン管理もSVNがあったときぐらいから僕スタートしてるので。
それはいいですね。
ない時代は本当にお話しか限り大変そうだった。
朝からやった作業を覚えていないと戻れないみたいな。
そうですよね、履歴がないから。
たまにですけど昔コンセント抜ける事件みたいなのもあって、
朝からの作業がみたいな悲鳴が半年に1回ぐらい。
そういう中でやってたので、思考の体力がついてて、
それで今でも仕事にギリギリついていけてるのかなっていうのは感じてます。
とても素晴らしいですね。
定例からやられてる方っていうのは理解も深いし、
安心はしますね、そういう方の方が任せて。
なるほど。
ポインターを知ってるので、参照渡しとかが当たり前に分かるんですよね。
09:05
参照渡し系はJavaScriptから入った分かり方は多分1回つまずくというか、
あまりにするかもしれないですね。
なんでこのオブジェクトが勝手に書き換わってるんですか。
そうそう。
大事故になりますよね。
ありますね。
私もC言語から入ったので、最初、その後PHPとかJavaScriptに移ってきたんですけど、
気持ち悪かったですね、Cから入ったので。
宣言しないし、肩はないし、へへって思いました。
その辺、そうですよね。
一つだけメモリ管理しなくていいんですかっていうのは、
ちょっと表紙抜けするけど楽でいいなっていうのはあったと。
そうですね。
Javaの場合はガーベージコレクションで勝手にスマートして取れるし。
そうですね。
ちょっと昔にiOSアプリ作るときのObjective-Cっていうのがある頃に、
あれの初期の頃に参照の管理を自分でやるっていうのがあったんです。
やってましたね。
途中から新しい仕組みが導入されて、やらなくて良くなったんですけど、
それまでiOSのアプリ作ってた人はすごく選ばれし戦士みたいな人たちばっかりだったんですよ。
鍛えられてはいますよ。
その頃、私Androidの方をやってた。
今から11年ぐらいぐらいかな。
だからカップケーキって分かりますかね。
Androidのバージョンの名前の。
分からないですね。
バージョンで言うと1.6になるんですけど、OS1.6。
あの頃からアルバイトで作ってたんですね。
今Androidのバージョンが11まで来たのかな。
そうですよね。
だからもう夢のような世界に変わってますね。
そうですよね。
バージョンはでも本当に最近セマンティックに上がることが当たり前になってきてるので、
半年もしくは1年に1回自動で上がるみたいなのが。
時間で上げるんですよね。
ある意味区切りがついて分かりやすくていいかもですね。
そうですね。Windowsが失敗してる感じが。
そうですね。
Windows98からMillenniumになったりとか、
あの辺の辺りのVistaになったりとか。
はいはいはい。
今やっとWindowsも判断して世間の標準に合わせつつあるみたいですけど。
12:04
そうですね。
ありがたいですけどね、開発性に乗っては。
はい。
OSやらブラウザやら使用やらがバラバラなのがやっぱ辛いので。
そうですね。
iOSはバージョンも対応が、
ハードの対応が積極的にやってくれるので楽なんですよね。
うんうんうん。
OSの前のバージョン、2つ前まで対応すればいいっていうのが多くて。
そうですね。弊社もそれぐらいが多いですね。2つぐらいしか見ないように。
本当は1つ下でも見たくないけど。
アンドロイドの方が大変で。
アンドロイド大変ですね、アンドロイドは。
バージョンが違うと、なくなるメソッドとかクラスとか山ほどあって。
ありますね。アンドロイドは。
弊社でもね、お客さんによってはアンドロイド、OS未だにバージョン4.4とかのスマホを使われているお客さんがいるので、
してほしいっていう要望をたまに受けます。
4.4か。
もう良くないって思うくらい古いんですけど。
そうですよね。権限周りがちょっときついんですよね。
権限っていうのはアプリごとにカメラを写していいかとか、フォルダ触っていいかとか、そのパーミッションを付与するのが4.4だと一括になってもらうんですね。
へー、なるほど。
ダウンロード時一括になるのか。
なるほど。
6.0から後ろは、カメラにアプリが触ろうとしたら確認をしろっていう仕様になる。
うーん。
だからアンドロイドアプリの作り方は全く違う内容になってしまうんですね。
はいはいはい。
アンドロイドのアプリエンジニアの負担がめちゃくちゃ高いっていうか、できれば6より前は捨てたいなっていうのはありますけど。
そうですよね。
海外の人とかがOSバージョンどれぐらいのパーセントで使われてますかっていう統計取ったりするので、
そういう数字を出してお客さんにはもう6は良くないですかみたいな話はしますけど、
やっぱり日本のユーザーだけ、世代がだいぶ古いのか、昔のバージョン使われてるお客さん結構いるんですよね。
特に年配の方だと10万円もするスマートフォン買ったら、6年8年使うのが当たり前みたいな。
15:00
うん、なっておりますしね。
一方で年配者の方の方が有福な方とか、他のハブ利用買ったりするみたいなところがあって残してるっていうお客さんもごく稀にいたりするんですよね。
なるほど。
新しい端末でいろんなものが変わってしまうと、使い方も今から学ぶのも億劫だみたいなところがあって。
なるほど、そうですよね。
気持ちはよく分かりますけどね。
その点、iOSの方、iPhoneの方がうまくやりましたよね。
iPhoneはもう買い互換もしないって割り切りがすごいですからね。
そうですね。でもついに最新バージョンで、ウィジェットに対応してフォーム画面がAndroidに寄り始めたっていう。
Appleにしては意外な進化をし始めたなっていうので。
そうですね、今までカタクナにあのフォーム画面、あのスタイル変えなかった。
そうですよね。
開発者は楽しそうですけどね。やることが。
確かにな。
アプリ開発、AndroidもiOSも業務経験はあるんですけど、それとは別にバックエンドの仕事とかフロントエンドの仕事もやってて、一周した感じがしますね。
そのケースそこまで僕全然やってないので。
ネイティブ側は?
そうなんです。iOSはちょっと自分で勉強して、Swift 3かなだけやって。
ストアに出したこともないので、知ってるよぐらいなんですけど。
Androidは僕Javaを戦力で逃げ切ってて、大学時代なんですけど。
そうなんですか。
Androidだけは本当に文外観なので。
コトリンは結構楽しそうだなって思ってて、来年コトリンやろうかなって思ったりはしてますけど。
コトリンはいいですよ。Swiftとちょっと似てるとこもあって。
後発言語だけあって、いろいろリッチなものもあれば、モダンな感じがするなっていう。文法だけ軽くなめたんですけど。
Javaよりは安心して書ける感じがしましたね。
なるほど。
ヌルの扱いですね。
はいはいはい。
ビルドの段階でそういうのがクリアされてるから。
うんうん。
ということなんですかね。
それを言うと、我らがJavaScriptは。
はい。
やっぱり難しいんですかね、プロトタイプ継承の言語っていうのは。
あの思想をプラスティックに変えるのは結構コアなのかなと。
JavaScriptそのものの言語をそんなに深く読んだことがないので。
18:01
そうなんですよね。
そうなんですね。
あれですね、だいぶ前にエクマスクリプト4ではだいぶプラスティックに使用変わるような策定はされていましたけどね、結果破綻されましたけど。
民主的でいいんですけどね。
いやまあね、でもあの時個性的片付けとかオブジェクト執行みたいないわゆるクラスとかの概念がちゃんとインターフェースが入ってたら面白かったなといまだに思ってますが。
まあまあマイクロソフトが止めに全力でかかったからしょうがないなと思いつつ。
その時点でタイプスクリプトも開発入ってたんですかね。
ちょっとね少なくとも構想には入ってたと思うんですよね。
で結局MSがDSを作るっていうのがなんか上手いことを描けたんだなと思いながら。
まあでもそのマイクロソフトさんが作っていただいたVSコードは非常にありがたいですね。
そうですね。僕最初やっぱりマイクロソフトさんなのでちょっと毛嫌いして使わなかったんですけど。
僕はサブライムテキストを使ってましたね。
そっちの方ですね。
もしくはAtomも良かったんですけど、Atomは重かったしよく落ちてたんで使わなくなって。
そういえば私もしばらく使ってたけどそんな印象ありますね。
で素直にVSコードを使ったら全然良いなっていうので。
プラグインもいっぱいあるし。
同じ同じ意見です。
なんかちょっとIDEっぽいところもあって。
そうですよね。
特に定義ジャンプっていうのはしっかりしてるなと思って。
いやーそうなんですよ。あれが本当に魅力的ですね。
そうですよね。
Javaを最初に学んだ時、メモ帳で作ったんですね。
え?
JavaならEclipseで良かったんじゃないかと思いながらメモ帳だったんですかね。
一番初めの頃だったんで。日本話を見てた頃。
なるほどなるほど。
で、もう全ファイルの全クラスがどこにあるか頭に置いてやるっていうのが。
はいはいはい。
あれが辛くて。
その頃って桜エディだとかなかったんですかね。
ひでまるとかはあった。
あーひでまるか。ひでまるあったな、確かに。
本当は21世紀入った当初のあの頃の感じです。
ひでまるはでもすごく根強かったイメージありますね。
僕の先輩がたぶんみんなひでまる使ってましたね。
そうですね。なんか開発者が意欲的にどんどん機能を拡張してくれてたんで。
若干ね、Emacs使ってる人もいましたけど。
あ、ビムとあの両打ラフでよく広げてる。
私はビム派でした、ちなみに。
21:01
あ、そうなんですね。
ビムのほうが軽いのでスパッと起動しますし、
全然ビムRCをかけば色々拡張ができたので。
はいはいはい。
ビムはサイズ好きですね。
ビムはキーストロークが1つなので、
あ、1つが多いので。
小指が疲れないっていう話が。
面白いしそうだ。なるほど。
コントロールキーを頑張って押さなくていいと思う。
あーはいはい、なるほどなるほど。そういうことか。
えー。
面白いな。
僕逆にキーを重いほうが好きなんで。
あ、そうなんですか。
はい。
じゃあキーボードもストロークが深いやつを。
そうですね、そもそも軸が重い黒軸使ってたんですよ。
あーすごいですね。
一番重い、ちゃんと反応があるやつが好きで。
えーそうなんですね。
好きというか握力のトレーニングになるのかなとか、
変な脳筋疾走で。
どこを鍛えますかね。
アホやなと思いながら。
私逆でしてね。
はいはいはい。
これ、キーを押す深さが浅いほうが早いんじゃないかっていうのをちょっと。
それはそうか。
本当にタッチパネルみたいなやつでサクサクやったほうが
高速に打てるんじゃないかというちょっと疑いを持ってて。
はいはいはい。
ただ押した感がないから指が全然反応しない。
はいはいはいはい。
なるほどですね。
やっぱ静電容量の軸が結構合うかもしれないですね。
そうですね。
だから今のMacのマシンの薄い感じはすごくありがたいんですけど。
えー。
僕これが嫌いなんだよ。
あーなるほど。
また思想です、これ好みが。
特に指も持ち上げないので。
はいはいはい。
キーに引っかかるような打鍵なんですよね。
うんうんうん。
なるほどね。
キーボードカバーつけるとゴムに引っかかって止まるっていうのが。
なるほど。
将来その辺キーの感覚なくすとかやってもらえないかなみたいな。
一枚の板みたいな。
iPadでやればいいかなと思って。
はいはいはい。
前なんかレーザーのキーボードとかありましたね。
そういえば海外の人が作ってましたけど。
あーはいはい。
でそこを触ったみたいなのをレーザーの画像認識をしてるかな。
で触ったという認識でやるっていう。
すごいですね。
本当に俺触ったかどうか判定むずいと思うんですけどね。
触った感がないとやっぱり無理そうですけどね。
無理そうですよね。
あそこが面白かった。
24:00
私のキャリアの始まり19歳ぐらいから27までプログラマーをやってたんですね。
C言語とか組込み系の。
その時に最後の方でMS-DOSが出てきて、Windowsですらなかったっていう。
なるほどね。
あの時にコントロールキーのストロークを覚えてて。
だから今なんかVimとか、
ああいう感じのCUI的なエディターも結構懐かしくて。
特にMacだとですね、バックスペースをコントロールHで入力できるのはこれいいなとか。
あとEnterキーもCtrl-JとかMで代用できる。
これは非常に便利で、
ホームポジションから両手が全然動かずに作業できる。
それはそれで確かに良さそう。
MS-DOSの時代もそれでやってたんで、すごく懐かしくて。
何年ぶりかって。
その時点で20何年ぶりでした。
キースさんの一生の半分以上です。
そうですね、僕今34ですからね。
でも今の時代でITの仕事ができるっていうのは、その30代でね。
なんか羨ましい気がしますけど。
今本当に良い時代ですけど、
中学生とかでプログラミングが結構普通にやってたよって子が増え始めているので、
学生の間でいろんな企業のアルバイトで仕事をしたとか、
フリーランス的にお仕事を手伝っている人も増えたりとか、
すごい時代なので、私は焦ってますね今は。
なるほど、同じ同票に立てないかもしれないっていう感覚です。
そうですね、新しい言語とかフレームワークを勉強するにしても、
そういうのをやったことある学生にはもう速攻で勝てないなっていうか、
彼らはものすごいスピードで学んでいるので、
要は色々一緒に学び始めても追いつけないなと思っちゃいます。
それは自分もよく感じるところであります。
ただ経験値とかこういう癖とか勘どころみたいなのは、
こっちの方に一律の長が経験値としてあるかなというので、
なので実際にプロダクト開発するとかなると勝負できるかなみたいなところはありますけどね。
業務レベルの作業でしたね。
27:02
とかですね。
それで言うとこの前、データベースの設計の話をすごく若い人としていたんですね。
はい。
その2人めちゃくちゃ優秀なんですけど、
旧帝国大学出身みたいな。
はいはいはい。
なるほど、なるほど。
そのメンバーに私1人混じって、
設計の作業をしてたんですよ。
はい。
やっぱりその時に感じたのは、
自分が勝負できるとすれば、
失敗したことをたくさん知ってることだなって思いました。
はいはいはい。
それもありますね。
例えばアンチパターンがなぜダメなのかとか、
はいはいはい。
そういう回り道を山ほどしてきたので、
それを伝えることでその存在感が得られるなみたいな。
それはありますよね。
引き出しの量っていうのは確かに絶対的にありそうですね。
だからその間違った設計をしないで済むその速度ですかね。
将棋でいうとここはこういう手は刺さないもんだみたいなね。
うんうんうんうん。
そうですね。
ただやっぱり脅威を感じたのは、
その話、例えばアンチパターンですよって話を指摘すると、
一瞬で理解して一気に追いついてくるんですよ。
そうそうそう。
頭の出来の違う人はほんまにすごいなと思いましたね。
はいはい。
だから彼らが失敗のパターンをたくさん習得すると、
もう自分の出るマークもないなとかそんなことを思ってました。
はい。
僕もそう思ってますね、いまだに。
ですけど僕はもうどちらかというとマネジメント系とかチーム組織を作る方にシフトしたので、
むしろ彼らがバンバン活躍できるフィールドを作っていくのがいいんだろうなっていうところですね。
やっぱりあれですよね、自分の勝負できる場所、土俵っていうのはどこかで決めないと。
そうですね。
僕はもう勝負することは諦めたので、違う土俵に行きますっていうか。
いやでもこの前出版されたダイオットの入門書も、
あれはあれですかね、マネジメントに移る識別の思い出みたいなもんですかね。
いや、あれは本当に僕個人の好みで、やっぱりあのライブラリーが好きすぎてですね。
ミス子の魂100までじゃないですけど。
はい。
そういう、JavaScriptを本格的にちゃんと勉強し始めたときに、
知ったライブラリーがそれで、こんだけ入門的に識が低いライブラリーがあるんだっていうので、惚れ込んでしまってですね。
30:03
そこからずっと、もうちょっと流行ってほしいなっていうのがあるんですけど、なかなか日本語の書籍っていうのがないし、海外の英語版もあるんですけど。
でので、知り合いのツテから出版社にお話、企画書を出したらいいんじゃないっていうところで書かせていただいたんですけど。
すごいですね。
いやでも、書き始めて実はですね、2年ぐらい僕がちょっとグダグダしてしまいましたね。
そうなんですか。
おかげさまでもメジャーバージョンが上がって仕切り直しになったので、バージョン4を対応したよっていうので結構良かったんですけど。
ここに。
すいません、ありがとうございます。お買いがきっと入れて。
本当にあるんです。
今、資金が低いという話をされましたけど、私は2003年ぐらいからHTMLの世界、ウェブの世界ですね。
はいはい。
転校しまして。
はいはい。
そこでやっぱり感じたのは当時、お父さんが日曜日に作ったホームページみたいなのが。
はいはい。
ウェブ上にもういっぱいあった時代なんですね。
うんうんうん。
お父さんの日曜大工ならぬ日曜ITで作れたっていう。
なるほど。
あの時期の低さっていうのが今もうすっかりなくなってしまって。
すごいかもしれないですね。
あの頃だと例えばCSSもそんなに難しくなくて、専門学校に行って出てきた人が即仕事で即戦力になれたみたいなね。
そもそもHTMLとかCSSをやれる人が少なかったっていうのが当時多いかもしれないですけどね。
それが時を経て18年ぐらい経ったら、それはもう当たり前で。
はい。
HTMLとCSSが綺麗に描けても仕事にならないっていうような風潮がちょっと生まれつつある。
今はそうですし、HTMLとCSSも多分デザインツールとかFigmaとか何かで作ったデザインをそのままHTMLに吐き出すっていうのが技術的にどんどん出始めているので、
そもそも描かない時代が来るんだろうなっていうのが恐ろしい時代が来たなと思いますけど。
本当ですよね。これはプログラミング言語で例えたら、やっぱりメモリ管理をしてた時代からこういうのを気にしなくていい言語に変わったみたいな。
さらに肩まで書かなくてよくなった、PHPとか。
そうですね。
という進化に似てるのかなと思ってますね。
結局今肩に揺れ戻しが来てますけどね。
そうですね。
なんだかんだ。
JavaScriptのいいところを台無しにする可能性も秘めてて、自由度が高いことがいいか悪いかなんですけど。
33:09
そうですね。自由度が高い分コーディング規約とかをしっかり決めるとかしないと、個々人でスパッと高速に回転とりわけ出すっていうのがいいですけど、
やっぱりチームで書くとみんながみんなの好きなように書かれると、コードの統一性とか可動性も下がるしみたいなので。
意味でいくとちゃんとルールがあるって意味でTSは僕は悪くはないと思ってます。
開発速度下がりますけど。
フロントエンドの世界は、アンギュラーJSの登場から要素が一変してしまって。
そうですね。懐かしいですね。
アンギュラーJS来てマックボーンとかノックアウトで始めた時代とかですよね。
そうですね。
まさにあの時期。
JQueryがその前に君臨してたわけなんですけど、今もかなりの存在感を示してますね。
まだまだ生き続けますよ、彼らは。
本当ですね。
JQueryはすごいですね。
JQueryの書式が自分の好みじゃなかったというか、もっとかっこいい書式で書きたいという思いがありまして。
それでJQueryを代替するライブラリを作ろうって決めたのが2015年ぐらいなんですね。
JQuery代替か。
もっとスマートに書けるように。
発想としてはDOMのオブジェクトを掴んだ変数があったとして、その変数からJQueryのモジュールは使えないんですよね、直接は。
直接はそうですね。
まずJQueryモジュール、ドルマークで始まる。
そいつにDOM要素を仕込んでやって初めてJQueryとして使える。
それが周りくどいなっていう。
なるほど。
それで考えたのが、DOMのモジュールそのものに拡張してやったらいいんじゃないかっていう。
はいはいはい。
そいつにJQueryの機能があれば、例えば従来の勉強する人たちでDOMのMDNとか見に行って、
はい。
例えばAddEventListenerとか見るわけですよ。
まあまあそうですね。
InnerHTMLとか。
はいはいはい。見ますね。
そういうのを覚えてもJQueryだと一切出てこないんで。
そうですね。
覚え直しになってしまうんですよね。
まあそれは確かに。
36:02
でもそのDOMオブジェクトの横にJQueryのメソッドが並んでれば、
それらも使えた上で同時に使えるんじゃないかっていう。
はいはいはい。
それでJQueryのスマートなライブラリを作ろうと思ってやってたんですけどね。
まあ完成はしたんですよ、それ。
はいはいはい。
その時に入った会社で、今はVueとかReactとかフレームワークの時代だからみたいなことを教えていただいたんですね。
ああ、はいはいはい。
なんか倒そうとしていたJQueryはすでに倒れていたみたいな。
まあそうですね。仮想DOMとかを使ってやる感じになってたので。
はいはいはい。で、それちょっと勉強してみたら、あれこれなら今作ったライブラリで置き換えられるんじゃないかってひらめきまして。
はいはいはいはい。
それで作り始めたのがXNinjaっていう。
そこに繋がるんですね。
はい。
なるほど。
元々はライブラリでJQueryを倒すために作った。
なるほどですね。
いつXNinjaの話を振ろうかと思ってたけど、そこかなと。
すみません、ナチュラルに入ってしまいました。
全然大丈夫ですよ、本当に。
はい。
まあそういう緩い雑談会なので。
それで最初はVueのお尻を追いかけ始めたんですね。
うんうんうん。
Vueでできること全部できるなら、JQLのできることも全部できるから、追い越せるんじゃないかっていう。
なるほど。
最終的にですね、現時点の到達点なんですけど、
はい。
リアクトの書式に似た形でも書けるようになったんですよ。
そうなんですね、今は。
Vueのような書式でも書けるし、リアクトのような書式でも書けるという。
今公式サイト見たら、JQueryプラスVue.jsがXNinjaって書いてましたね。
なるほど。
はい。
これちょっと、examplesのこのページをちょっと見てもらう。
XNinjaの公式サイトなんですけど、
はい。
ここでモーダルダイアログの例を使って。
これっすね。
ほんとだ、Vue.xNinjaとリアクトのスタイル。
そのコード、全部動くコードは動くんですけど、
これのですね、下にコードがあって、これ開いてもらうと、どういうふうに書くかっていう。
39:07
はいはいはい。
リアクトスタイルだと。
こういうことか。
はいはいはい、確かにリアクトっぽい感じもある。
テンプレートのとこ開いた?
これはVueですね。
こっちがリアクトスタイル。
灰色のとこをクリックすると開くんですけど、
テンプレート開くと、そこに。
JSXみたいな。
そうですね、これ文字列なんですけど。
まあまあそうですよね、これ。
オブジェクトの中身だから文字列ですよね。
はいはい。
リアクトっぽく書けるという、
フォールバックスを入れて。
これがリアクトスタイルですかね。
はいはいはいはい。
Vueの方は、上がテンプレートで。
そうですね、はいはい。
それをテンプレートとして、
Vueスタイルモデルっていうのを使って、
スロットで入れてるのかな、これ。
多分スロットっぽいですね、これ。
はい。
この書式も何とか実装できたということです。
これがネームと照らし合わせる感じですね。
はいはい。
はいはいはい。
これがVueっぽく書いたらこんな感じかなっていう。
なるほどですね。
さらに認知波がもうちょっと特殊なんですけど、
これがテンプレート開くと、
これ全部書いてあるんですね、コードから。
全部書いてある、本当だ。
つまりですね、
オンクリックリスナーとかコントロールする要素っていうのは
HTMLには書けないんですよね。
もちろんオンクリック属性を使えば書けるんですけど、
それだけだと、
DOM要素同士の連携っていうのがものすごく複雑になって、
そこに書き切れないっていうのがあるんですね。
それでこれは文字列だけで
DOMの関係性まで含めて閉じ込めてしまえるっていうのが
X Ninjaの最初目指した姿だったんです。
DOM間での値の操作とかはたまになんだかんだやるんで。
これ何がいいかって話なんですけど、文字列なので、
42:03
例えばローカルストレージとかに保存しとけるんですね、このまま。
そうですね、確かに。
このまま保存して、このままボディタグに突っ込めば
そのまま動くっていう仕組みになってます。
なるほど。
で、これコンパイルとかインフレートするとか
その辺のやつ裏で全部やってるのがX Ninjaのモジュールなんですね。
発想面白いな、なるほどな。
ステート回るのもなかなかいいですね。
これはステートの関連ですかね。
ステートは普通のオブジェクトっていう感じで。
面白い、コンポーネントもはやテキストにして
どこでも操作で使えるよっていうのはなかなか。
そうですね。一番いいのがAPIで取っていくの文字列ですけど
そのまま突っ込めばバグも出ない。
なるほどな。
そっかそっか、それはそれで確かにメリットありますね。
特にローカル数字に保存しとけるっていうのは
コントローラー付きのHTMLをスナップショットで取っておけるみたいな感じなんですね。
例えばですけど、マイクロCMSとかとすごく相性が良くて。
そうなんですね。
HTMLをマイクロCMSで書いてそこにコードも書いとけるのが
簡単なコードであればですね。
そういうことか、そういうことか。それはそうだわ。
環境コーチとかなんとか煩わしさが全部解放されるっていうね。
はいはいはい。
ちょっと低レイヤーと言いますか、今の時代と逆行した感じですけど
だから扱いやすさはありますね。透明性も高いし。
これ気に入らない人はリアクトスタイルでも書けますんでって言って
そこに入る。
こういう感じになると。
ただでもあくまでHTMLが他の文字列だっていうのは変わらないので。
そうですね。これも解決策というか将来の拡張でですね。
ここだけにJSXを適用すれば納得してもらえるかなと。
そうかもしれないですね。
確かにね。
あと面白いのがですね、オートアクティベーションっていう呼び方で言ってるんですけども
文字列でDOMツリーに入れた瞬間に
アクティベートっていうのが自動で走ってですね
45:02
そこに書かれたコードをコントローラーとかリアクティブなコードっていうのを
裏で自動で作ってくれるんですね。
どういうことかっていうと、これモードRのエグザンプルですけど
その都度文字列をボディタグに入れてるんですね。
終わったら閉じるボタンでDOMから抜いてるんですよ。
そうなんだ。
次使うときまた入れればいいんで。
自動でアンバウンドみたいな処理をしてくれてるんですね。
はい。
なので、昔のJQueryでフレームワーク作ったらこんな感じになるんだろうなっていうのを再現したんで。
そうかそうか。
もっと面白くなってきたのかな、どうですか。
あとはですね、今時々HTML、ウェブページを作るアルバイトみたいなのしてるんですけど
例えば4枚ぐらいのランディングページやったらすぐ作れるんですけど
例えばそこでヘッダー要素っていうのが共通で使われます。
そうですね。
でも4枚ぐらいやったらコピーしてはい喜んでですもんですけど
30枚とか80枚になるとヘッダーをコピーするだけで大変。
そうですね。
といってランディングページ、静的なページなので、スタティックなページなので
PHPとかNode.jsみたいなバックエンドのパワーが使えないんですね。
うんうん。
でもこのXNinja使うとそれが実現できるんですよ。
XImportっていう処理がありましてね。
これソースコードって見られます?
右クリックして。
なるほど、そういう意味。
Elementsからいきます。
これだと変換後なんですけど、そこにコメントアウトしたヘッダーってありますでしょ。
これですか。
右側のペイン。
これですね。
そこにXImportっていうの見えるでしょ。
ありますね。
そこにユニッツの下のSPAヘッダー.htmlっていうのを指定すると、
それが上のヘッダーになってるんですね。
はいはいはい。
これ右クリックしてソースコードを表示ってやってもらうと、
そっちじゃなくてこっちですね。
48:00
こっちのほうですか。
こっちで右クリックして、ソースコードの表示。
ページのソースを表示ですね。
あ、それ。
ちょっとボディタグのすぐ下行くと、
リンクとか。
ボディタグ。
あ、これベースか。
ボディタグこれか、ヘッダー。
あ、ほんとだ。
これ。
あ、それですね。
これが入ってるだけなんですよ。
はいはいはい。
ユニッツの下のSPAヘッダーっていうのがHTMLで作られてるんですけど、
そいつが置き換わるようになってるんですね。
なるほどです。
これが全ページ、これを取得だけで、
その修正がですね、
SPAヘッダーっていうファイルを直すだけですっていう。
いわゆるコンポーネント化するイメージですよね。
そうですね。
ヘッダーコンポーネントをHTMLとしてってことですね。
なるほどね。
だからコンポーネントの一歩手前の、
そのHTMLのレベルでモジュール化してるっていう。
はいはいはい。
HTMLのインポートはWebコンポーネンツの方とかでも話は普通にあるから。
あったんですけど、一回無くなったんですよね。
そうですよね。
今のあれですね、
ちょっと使用させてどうなってるか僕追ってないんであれですけど。
はい。
今はインポート文でHTMLとかCSSファイルも読めるようにしよう
っていう動きになってるみたいですね。
なるほどですね。
でもその一歩前にですね、
HTMLベースで例えばデザイナーさんが、
私コードなら書けますよって人がいると思うんですけど、
その人にNPMとかの環境構築をしないでも
こういう分割作業ができるっていう。
そうですね。
ここからが規模なんですけど、そのままデプロイできるんですよ。
でもそうか、HTMLだから。
つまり納品した状態でそのままデプロイしておけるので、
次デザイン変更があった時にそのままお返ししてそのまま直して、
そのままデプロイするっていうのが理論上可能なんです。
はいはいはい。
その間、プログラマーの出番がないという。
なるほど。
純デザインを直すだけだったらですね。
そうですよね。
これが2000年頃の開発風景というか。
まあまあまあ。
確かに。
昔はある意味そうだったものです。
51:01
いやー、なるほどな。
これはこれで全然確かに価値はありますね。
これ実はアルペン・ジェースっていうフレームワークがあるんですけど、
あれがですね、
XNinjaがやってるオートアクティベーションっていうのと同じ手口を使ってるっていうのがわかりますね。
へー。
結構ウケてるんですよ。
でも、アルペン・ジェースを見て作ったわけじゃないんで、
全く別湖に見つけた、全く同じ海だったんですけど。
ただ面白いことに、アルペン・ジェースの方は大規模開発には向きませんって宣言してしまってるんですよね。
あれもったいない。
ソースコードも見てみたんですけど、
これじゃダメなんだって一目でわかります。
この仕組みだと大規模無理だなっていう。
多分XNinjaがもっと表に出ていった時に比較されると思うんですね。
すごく似てるんで。
ただ先ほどのXImportの話もそうですけど、
SPAがもうできてるんですよ。
XNinjaの仕組みとして。
公式サイトがそれで作られて、ドキュメントのところがそれで作られてる。
SPAですよね。
バックキーで戻ると、前のメニューと前のページに戻るみたいなのが、
ドキュメントのところはもうできてるんですね。
確かに。
アルペンJSの方はSPAがまだできてなかったのかな。
まだアルペンJSは出たばっかりなんですか?
そうですね。いつかは追いついてくるのかなと思いながめてるんですけど。
投稿してる時にOSS化する準備は進めてはいたんですけど、
新しいOSS作ってくれっていう仕事が舞い込んできてしまってですね。
ものすごい割り込みになってしまったんですね。
どっちもOSSですけど、お金稼げるなって感じですよね。
そうなんですよ。お金が当面課題でもあったんで。
今度注文してくれた企業さんですけど、
守備よく完成してリリースまでこぎつけたら、X忍者のCMもしてくれるっていう話になってました。
54:04
そうなんですね。嬉しいですね。
そうなんですよ。だから長い付き合いになるっていうのもありましてね。
はいはいはい。
だったら今X忍者の話も全部引っ込めて、こっちに全力を尽くそうと。
なるほど。
X忍者がすぐに金になるもんだったら見捨てはしませんけど。
まだ認知度的なところもありますしね。
はい。なので積極的な宣伝値の全くしてない状態でして。
でも思想的に先ほどの文字列で全部勝負するとかですね。
あと先ほど説明してなかったんですけど、NPMっていうのを、
すいません、環境構築か。
デザイナーさんがコードを書くっていうときに環境構築をしなくても作れてしまうんですね。
全部HTMLベースなんで。
そうですね、わかりやすく。
ヘッダーのパーツとかフッターですね。
その辺のパーツも全部ブラウザで確認できるんですよ。
HTMLなんで。
なのでその段階で確認して納品してくれればそれでOKっていうことね。
最終的にプログラマーさんがXNinjaのコントローラーを連結させればそれで実装終了になる。
もちろんDOMの構造が間違ってたりしたらなおさんといかんのは同じですけど。
リアクトとかですと、デザイナーさん兼コーダーさんが触れないという弱点がずっとあるんですよね。
ありますね。
Viewもその辺はちょっと似てるところがあるんですけど、.Viewファイルっていうのがシングルファイルコンポーネントの。
.Viewファイルがやっぱりビルドしないと動かないもんなんで。
CDNとかでViewを読み込んでればって感じはありますけど。
そうですね。
それだと1枚ページで全部コード詰め込まないといけないっていうのがあって。
プログラマーさんが嫌がるかな。
そうですね。
そちらとしては嬉しくないんで。
その辺を全部踏まえて、コーダーさんとデザイナーさんが活躍できる場所を残しつつ、
57:00
プログラマーも納得できるぐらいの開発ができたらいいなという。
それをXindaで作ってみたっていうことです。
なるほど。
だからおそらくですけど、違う役割を担えるんじゃないかと思ってますね、今までのは。
そうですね。
そういう思想もあるから、XNinjaはNPMとかにまだ出てないって感じですか?
NPMはありますね。
あれもありますか?
あります。NPMには公開されてるんです。
出てこないんだよな。
なんでか。
すいません、紹介。
NPMサイトで。
これです。
検索すると、出たわ。
出てきた出てきた。
0.0.7って感じですか?
1.0からOSSにしようかなと思ってます。
なるほどですね。
それまではCDNで使うように作ってます。
あれですね。
ホームページのURLがこれだと。
NPMへの公開したときの多分、ホームページURLがHTMLで解釈できなさそうですね。
これ多分画面休止したほうがいいかもしれないですけど。
普通に今このページ来てて、ホームページっていうのがここにアクセスあるんですけど、
これがドットアスタドットのシャープリードみたいな。
今、非公開でやってますね。
そっかちですね。
そういうことであれば。
公式サイトを貼ってる人がまだマシかな。
公式サイトも今軽く見てるんですけど、
テンプレートのいきなりXFlashのところ、FlashDirectのところなんですけど、
本当に日本語読んでいくと、
以下のコード例では、点の後に何たらがのいきなり。
何だろうなと思って。
ドキュメントタイトルが展開されてっていう。
はいはい。
虫タッシュ公文が。
これか。
多分解釈されたけど出てないから何も入ってないっていう感じになってるのかな。
すいません、バグを見つけていただいて。
一応他のページのところもこんなものが来るのかもしれないですね。
本当だ。
いやーちょっと。
ありがとうございます。
サイドバーもそういうことなんですか。
これは。
はい。
1:00:00
そうですね、多分マスタッシュインポーテーションって書いてるから。
これはこういうものなのか。
マスタッシュインポーテーションとか。
はいはいはい。
これはアングラJSとかの呼び方と、
Vueなんかも、私ひげ公文って呼んでるんですけど。
よく聞きます、ひげ公文。
この辺は既存のフレームワーク真似して作りましたね。
そうですね。
それは多分正しいというかいいと思いますね。
万が一転校してきてくださる場合にそのまま使える方がいいかと。
そうですね。
ここが似てるなっていうのがあるとそれだけ入りやすさというか印象も良くなると思いますからね。
はい。
ナビゲーションのところか。
右にちょっと見えてるんですけど、右の開発者モードのところですね。
はいはいはい。
ナビのとこ開いてもらうと。
ここはナビ、ナビ、ナビ。
メインの上のそいつですね。
はいはいはい。
そこにですね、ULっていうのがコントローラーになってて、
そこにデータを直接渡してるんですね。
うんうんうんうん。
なるほどね。
開くと、もちろんリストがあるけど。
うん。
うんうんうんうん。
もう下か。
もう一つ下のULがあるんですけど。
もう一つ下、これか。
その下ですか、そいつですね。
こいつがコントローラーになっていて、
で、SPAのトリガー、ルーターってありますでしょ。
ルーターあります。
コロンコロンルーターってやつ、そいつです。
はい。
そいつがコントローラーの下なんですけど。
はい。
で、このULタグ自体がコントローラーになってて。
はい。
で、SPAのリンクの管理をしてるんですね。
はいはいはいはい。
面白いのが、このコロンコロンルーターを入れないとMPAに変わるんですよ。
ああ、普通の画面遷移になるってことですね。
はいはい。
はいはいはいはい。
なるほどね。
だから、デザイナーさん兼コーダーさんは、
それを入れない状態で画面遷移するところまで作ってくれたら、
なるほどなるほど。
エンジニアがそれ入れれば、それでもうデプロイのデプロイができる。
そうですね。
という構造になってますね。
はいはいはいはい。
Xinjaらしくは、ULタグにベタベタ書いてますけど。
1:03:03
ツイッチXコロンとか。
確かに。
これが左のメニューバーのやつがですね、
これ、ドキュメントのページが20ページくらいあるんですけど、
それ全部にこのメニューを入れないといけないんですね。
はいはいはい。
ドキュメントのページに。
どのページから入られても、
SPをしないといけないんで、
このメニューを共有化しないといけない。
そうですね。確かに。
その関係で、
Xインポートで入れてるんですね。
その上にあるのかな。
その上に名残が見えてますけど、
それですね。
これかこれか。
ヘッダーの下。
ヘッダーの下です。
こっちの方か。
はいはい。
これで共有化をしてるっていうことです。
なるなるなる。
これ実際そのURLにアクセスしたら多分見られると思うんですけど。
そのファイルの中。
units-spa-htmlですか。
はい。
これは直下のかな。
ゴーグの下。ゴーグの下。あそこです。
そこでunits-spa-html。
ほうほうほう。本当じゃん。
呼ばれた先からデータをもらって下半分を書いてるんですね。
なのでこれ自体は書くっていうところまでが仕事で。
受け取ったやつを書くっていうのが仕事になる。
そういう意味で作ってある。
まあそうだよ。
これはまあそうだよ。
これMPA的に動いてるっていう。
なるほどなるほど。
なので結構複雑な処理にはなってしまってはいるんですけど、
HTMLベースで開発するっていうところだけはキープしてるんですね。
そうですね。
そこがそのコアな思想というかフィロソフィーですからね。
何よりビルド時間ゼロなんでやらないから。
そうそうそう。
これ手伝ってくれてるエクスペリエンジャーの天才の相棒っていうのがいるんですけど、
彼曰くですね、マシンがうならないって言ってましたね。
そうですね。
ビルドしないからすごい静かだっていう。
開発するときはライトサーバーみたいなやつを起動しとけば。
ああでも普通にいらないのか。
1:06:00
単純にブラウザにとにかく置いておく。
実はそれがVSコードのライブサーバープラグイン入れると、
これで使えてしまうんですよ。
だから開発環境はVSコードをダウンロードして、
ライブサーバーだけ入れてくださいっていう。
ライブサーバーなくても普通にブラウザに置いても動かないですかね。
それでも動きます。
手動更新すればそれで動きます。
手動更新が楽ですよね。
なのでデザイナーさん兼コーダーさんが、
勉強しなくてもすぐに戦力として使えるっていう。
そうですね。
何が起きるかというと、
フロントエンダーさんが結構楽になるんじゃないか。
そうですね、これは。
なるほど。
HTMLの逆行はでも、
だからこそみんなできるっていうのはとてもいい話。
はい、そうなんですよ。
だからHTMLプラスCSSで止まってる人たちが、
全部その戦力として数えられる。
そうですね、これは強いな。
そうするとフロントエンダーという括りすらいらなくなる可能性があって、
バックエンドの人が片手間にコードだけ書くっていうのだったら、
HTMLの知識もいらない。
もちろん、必要最小限は必要。
それはそうですけど。
ただデザインからHTMLを書かなくていいっていう、
開放だけはできるんじゃないかと思ってます。
逆もあるかなと思ってて、
デザイナーさんの方でコードも書ければ、
自分たちのプロダクトが作れる、アプリが作れるっていう需要があるので、
その意味で意義の低さがあるっていうのはデカいかもです。
多分デザイナーさんがHTMLさえ書けたら、
SPAまで入れる可能性はありますね。
ありますよね。
ただ複雑なロジックですね、
例えばAPI投げて裏で取ってきてみたいな、
そういうとこだけエンジニアさんに任せて、
そこはむしろエンジニアの領域ですね。
コントローラーが拡張できるようになってましてね、
コントローラーは準クラスでできてて、
クラスを拡張するのは、
エンジニアさんなら造作もないことだと思いますので、
カスタムコントローラーを作るっていうのが、
X Ninjaにおけるエンジニアさんの仕事になる。
なるほどね。
1:09:00
でも全部自分でやりたい人用にですね、
文字列で全部勝負するっていうのを用意してやって、
なるほど。
これが発想できたのは単なる偶然ではあるんですけど、
形にできただけ良かったかなと思ってますね。
そうですね、これは。
この実績もあったんで、
OSS作ってくれって仕事も得られましたんでね。
いい話ですね。それはかなりいい話です。
どっかの会社、また就職しないといけないなみたいな、
瀬戸際だったんですけど。
はいはいはい。
しばらくしなくてよくなりました。
毎日8時間好きな開発できるっていうのは夢だったんで。
それは本当にそうですよね。好きなことだけで生きていけるっていうのは。
すいません、この話ちょっと本当は止まらなくなるんで、
この辺にしておきます。
それはむしろ別の日とかでまた聞けたら面白いと思います。
ぜひ興味ございましたら、どういう開発ができるかっていうのを、
真髄をぜひ紹介したいと思います。
それはそうですね。
また第2回とかお呼びできたらと思っちゃいましたね。
第2回ですか。
今んとこ皆さんの第1回止まってしまってるんですけど。
半年くらい先でも。
本当はこれ面白いものができたなと思っておりまして。
あとはやっぱり舞台があるかどうかですね。
そうですね。
公式サイトをほとんど英語で書いたのも、
外国人のエンジニアさんに見てもらうという気持ちでやってまして。
そっちのほうが分母多いですね。
彼らは私がどんな年齢であったとしても、
どんな極悪人であったとしても関係ないですから。
関係はないです。
その技術が良いか悪いかっていうのを見てもらえると思うので。
そうですね。
それでいくんであれば、
聞いたとか前とかでX忍者のことを書いてみて、
記事をどんどん書いていったらいいのかなと思いました。
宣伝するターンになったらそれをやっていこうかなと思っています。
アルペン・ジェースの使い手からすると、
書式までほぼ一緒だみたいなこと言われるかもしれない。
それは、もしかしたら権利回りの話がなくもない気がしますね。
ディレクトブがXで始まるっていう。
1:12:01
それはかなり似てますね。
たぶんアルペン・ジェースの方は、
未知数のXの意味でやったと思うんですよね。
うん、なるほど。
忍者の方は手裏剣のXなんで。
はい、なるほどね。
手裏剣の意味なんですね。
そうですね。最初は同じVハイフォンでビューと同じにしてたんですけど、
途中でそこの文字何でもいいっていう仕様に変わりまして。
はいはいはい。
それならX手裏剣って面白いなと思って。
まあオーソドックス手裏剣は確かにXというのはありかもしれない。
忍者っていう名前にしたのはほとんど外国人アピールのためなんですけど。
日本製っていう意味もありますからね。
そうですね。我々は忍者ネイティブですからね。
なんちゃって忍者じゃない。
将来使ってくれる人がいるかどうかは置いといてですね。
こういうものを作ったっていう実績としてOSSの一端に残していこうと思います。
いや、とても素晴らしい。
真剣に検討してくださるならですね、たぶんポテンシャルは十分あると思ってるんですよ。
どこの企業さんかわからないけど。
例えば社長さんがHTML書けますっていう人だと、でもコードは書けないんですよねって人だとちょうどいいんですよね。
そういう意味でいくとスタートアップとかまだ起業したばっかりみたいな会社さんがあるかもしれないですね。
そうですね。これちょっと大規模に耐えるかどうかっていうのも含めて検証がまだ必要なんで。
理論上は大規模開発いけるんですけど。
理論上は。実際は大規模やってはないと思いますので。
そうですね。だからバックエンド、APIをバンバン叩いて更新するような仕組みを一回デモで作ってみようかなと思ってます。
それでもし軽く動作するっていうのがわかったらそれだけで十分かなと。
そういうわけでいろんなフレームワークがありますけど、個性は出せたかなと思ってるんで、これを多分来年から本格的に推していくことになると思います。
1:15:07
はいはいはい。でもそれはそれで楽しみですね。
間に合わなかったというか、もっと大きい仕事が入ってきてしまったっていう。
それはそれでまた。
やっぱりJavaScript大好きなんで、これが仕事になったらいいなとずっと思ってたんで。
それはそうかもですね。来年から宣伝とかもっと本格的に動いていくっぽいんで。
オープンコレクティブとかで募金してもらってもいいかもですね。
オープンコレクティブですか?
オープンコレクティブっていうのがあって、いわゆる投げ銭のシステム。
あーなるほど。
こちらにもいろんなライブラリーがすでにあるんですよ。
リアクトはあるのかな?リアクトもあるかな?
ビューアビューだと思うんですけど、リアクトはさすがにないか。
Facebookだしな。
でもその周辺ライブラリーは結構あります。
そうなんですね。
最近世界的には流行って、日本ではまだ浸透しないSvelteとかもここにあるんで。
Svelteは前もって最適化したコンパイルするので、早いは早いですね。
やっぱそうですよね。発想が面白いというか。
ただXinjaにも隠し仕様があって、まだ実装してないんですけど、
それが実装できたら多分Svelteに追いつけるという見込みがあります。
なるほど。それはちょっと未来がありますね。
今JQueryだとIDを振っておいて、DOMとDOMの関係っていうのをIDを返してしかつなげられないんですよね。
そうですね、今は。
あれを自動でつなげばいいんじゃないかと思ってまして。
コンポーネントがした中身っていうのは、VueとかReactだとコンパイルしてるので、その瞬間に一瞬で直接つながる仕組みが作れるんですけど、
Xinjaの場合はブラウザ上でいろいろやってるんで、それがちょっと難しかったんですね。
ただ最後の研究で、一回その構造をスキャンした後で直接つなぐ方法っていうのを見つけまして、
それ実装すればSvelteレベルに追いつけるかなと今考えてます。
なるほど。
1:18:00
仮想DOMを使ってない分、やっぱり有利なんですよね。
そうそう、そこは本当に大きいですよね。
アングラJSが最初、DOM3を一個ずつ追っかけていく方式で作ったんですけど、あれがやっぱり重量級で。
そうそう。
それを後でつなげてしまえば、一瞬でデータバインディングが。
MVVMってやつですかね。
そう。
それがReactiveなんかが実現できるんじゃないかと。
それが来年早々の課題になりますけど。
それがもし本当に軽くなったら、そこで勝負できるなと思ってますね。
そうですね。
おかげさまで、Xinja作るためにVueとかReactiveすごい必死で勉強したんで。
だから今ならそれでも仕事を受けられるかなっていうぐらい。
それはそうかもしれないですね。
業務経験としてはVueしかないんですけど。
いけそうですね。
何か極めておけば、いろんな仕事につながるなと思いましたね。
そうですね。他にも通用すると思いますので。
Node.jsの仕事なんかも、JavaScriptに本当にやり込んだんで。
ついていけるレベルまでいつの間にかなってましたね。
全然Node.jsもいけるんじゃないですかね。
あとは非同期処理をとにかく何とかするだけだと思う。
はい。そうですよね。
いやでも非同期処理は本当に何度もやって、やっと頭に入ってきたところです。
プロミスが大変なんですよね。
はい、そうですよね。
いつか、どういう形でもいいので仕事で関われたらなと思います。
それは確かに面白いですね。
どういう形かは分かりませんけど。
確かに。一応僕副業もしてるんで、そこでもしかしたらからの可能性もゼロではないか。
そうなんですね。
その話ちょっとこれ終わってからじゃなくて。
ぜひよろしく。ちょっと最近は副業の方まで時間が足りてないので。
そうなんですね。
ちょっと開発とかストップしてますけど、またそうですね。
コードを書かないとストレスたまりませんか。
それはありますね。
今は勉強用としてコードを書きながら覚えているものはいくつかあって。
最近はテイルウィンドウとかやったりしてますけど。
1:21:01
テイルウィンドウと、あとですね。
なんか外部ライブラリーで、何て言ったかな。
ちょっと待ってくださいね。
これのこのリンク送りますね。
コミュニティで教えてもらったライブラリーがあってですね。
何ですか。
U-Hooksって書いてますけど、正しくはUじゃなくて多分MUだと思うんですけど。
MU-HooksっていうリアクトのHooksがあるじゃないですか。
リアクトHooksライクなHooksを導入させてくれるっていうライブラリーができてるんです。
これはビュー用なんですか。
いや、これどんなやつでも行けます。
マジですか。そうなんですね。
これがあって、これが僕の所属するLiottのコミュニティでこんなのを使えばLiottでもHooksできるぞっていう事例を。
すごいですね。
これ嬉しいなって思って、僕はちょっとこれに期待をしてたりします。
そうなんですね。
最初はLiottにもHooks欲しいなっていうのは僕は思ってたんですけど。
そうか。Liottは今開発者さんが、メンターさんが数少なくなってしまったんですかね。
だいぶそうですね。もともとが少ないっていうのももちろんあるんですけど。
もともとが少ない。
本当の最初は6人ぐらいで始まったんですけどね。今は全然って感じで。
そうなんですね。そうか。
U-Hooksですね。これちょっと覚えた。
これ忍者で覚えたら悪い顔しますよ。
見栄えになった。
全然いいんじゃないですか。結局VueもVue 3でコンポジションAPIっていうのが出たので。
思いっきりHooksパクってんじゃんって感じですけど。
そうですよね。LiottもJSXが忍者の構文を受け付けないので混ざれないっていうのが今ちょっと悩みの種なんですけど。
JSXのとこに忍者の構文を書けばLiottそのままでも理論では動くんですけど。
コンパイルの時点でX-とか許さんみたいな。
あれ何かホワイトリストが何かないんですかね。その辺まで調べられなかったんですよ。
そこは調べたことないです。なるほどな。カスタムディレクティブか。
あと先ほどのX忍者のLiott風構文とVue風構文ってあったと思うんですけど、
あれのJSX風の文字列の中にVueみたいな構文も書けるんですよ。
1:24:01
だからすごく直感的に作業ができて楽なんですよね。
いつかいろんな人に話だけでも聞いてもらいたいですね。
そうですよね、これは。
でもキースさんはこういうところをフラットに見ていただけるので本当はありがたいと思ってます。
いえいえ、新しいものを好きですし。
書いてみたり触ってみたらいろいろ好き嫌いは多分生まれると思うんですけど。
できればどのツールもフラットで見て、その中での良し悪しとメリットデメリットみたいなところを把握して、
強化をしていきたいなとは思います。
上に立つ人の考え方だなと思って、本当に尊敬しています。
そんなことはないし、僕はそういうの作れない側なんで、そもそも作ってる時点ですげえなと思っちゃいますけど。
いやいや、見てる場所が違うかもしれませんけど。
こういうのが作るのが好きなだけでっていうね。
僕はそうっすね。
やっぱりあれですよ、シンキングとかJavaScriptをピュアな状態でしか書いてなかった時代がずっと長かったんですよ。
10年ぐらいやってたんですよ。
はいはいはい。
だからなんかその辺に強くなったのでこれ作れたのかなっていうのはありますね。
いやでも、
JQLすら使わずにDOM触ってたんで。
まあそうですよね、本当に直接。
ドキュメントオブジェクトとかウィンドオブジェクトからどんどん追っていくみたいな感じですよね。
はい、だからMDAの内容ほとんど頭に入ってますね。
いやすげえ、それはすげえ。
ビューとかリアクトやってたら全くその知識関係ないんで、本当に寂しくなるんですよ。
まあ意識しなくて良いっていうのは本当に良い時代かもしれないですけど。
そうですね、だから今の人たちで二重に覚えないといけないのかなと思って。
あれです。もうほんと覚えなくて良いと。覚えるんだったらそのライブラリとクレーマークの仕様を覚える。
要は使う側の人間にしかやっぱならないんじゃないかと思います。
作る側になったら絶対そこにたどり着きますけど。
だからなんかロマンチックさに欠けるなっていうのはあるんですよね。
外国人がホイホイライブラリ作っていくんですけど、
そういうとこに日本人が全く食い込めていけてないっていうね。
そうですね。
言語でRubyの松本さんぐらいが外観を示してますけど。
そうですね。あとはJenkinsとかかな。
確かあれも日本初だったと思いますけど。
なるほど。でもなんか便利なフレームワークの大通りに誰も手が届かないっていう。
1:27:07
そうですね。なかなか行かないですね、そこには。
そうなんですよね。なので全然違うテイストでアプローチして、
世界中のエンジニアにこれどうですかって聞いてみたいんですよね。
それは面白いのでぜひやってほしいです。
それでもし世界の人が投票で25%でもこれいいよって言ってくれたら10%でいいやん。
そしたら日本人も外国人はこれがいいと思ってるんだみたいな思ってくれるかなっていう。
そうですね。ぜひぜひそれはやっていただければですね。
私は残り寿命も短いもんですからね。
いやいやまだまだでしょ。
何かやり遂げたって感じがあるなら生きてる実感もあるっていうね。
若いエンジニアさんとは考えないようなことも考えてますね。
若いエンジニアさんほんと今からですしどんどん新しいのが出始めてるから
どんどんまずキャッチアップすることの方が必死なのかもしれないですけど。
そうですよね。だからなんか大変だなと思ってますよ。
HTMLも深掘りできないままフレームワークを覚えていかないといけない。
仕事にならない。
そうですね。
特にCSSって一体誰が面倒見てるんだって不思議になることあるんですよね。
CSSもフロントエンドのエンジニアが面倒見てると思います。今は。
だからリアクトをやる人ってすごいスーパースターみたいな人しか慣れないのかなっていうね。
いやそうでもないと思いますね。
あとはCSS in JSが今は結構主流っぽいので。
はい、あの辺ですね。
かつコンポーネントでスコープが切れるじゃないですか。
なのでこんな複雑化するCSSを書かなくてもまだ良くなってきたっていうのがあって。
ウェブバインティングみたいに命名とか規則をしっかりしなくて良くなったのも大きいですし。
実はこれ、まだちょっと割り込みで戻りますけど。
いいですいいです。
今度にもすでにXscopeっていう、これまだドキュメント書いてないんですけど。
なるほど。
スタイルタグに対してX-scopedって書いておくとscopedになるんですよ。
はいはいはい。なるほどなるほど。
しかもコンポーネント化してない2のタグがなるので、
本当に純コーダーさんがそのまま使えるっていうか。
1:30:00
なるほどね。それでも素晴らしいですね。
これがそこまで含めてコーダーさん専用のテンプレートエンジンとしても使ってもらえるかなっていう。
いいんじゃないですかこれ本当に。
多分そこはマーケットというか人口が一番多いところだと思ってて。
デフォルトでscopedにするわけにはいっても確かにいかないのか。
はい。だから2種類用意して、このdivタグの中だけに効かせたいみたいな時に2のタグでできるっていう。
いいって話ですね今の。なるほどね。
なのでいつかフルセットでケイスさんに見てもらいたいですね。
そうですね。僕も久しぶりにXninjaのホームページ見てあれちょこちょこ変わってるなっていうのがあるので。
バグも見つけていただいて本当にありがとうございます。
いいえいいえ。久しぶりに触ってみたくなりました。
もし触るときがありましたら、私しばらく高速時間がなくなるんで。
はいはいはい。
もちろん仕事はするんですけど、いつ仕事してもよくなるんで。
わからんことあったら聞こうと思います。
はい。ぜひぜひ。
気づいたら1時間半も喋ってる。
本当だ。すいません。
全然大丈夫ですけど。
一旦クミーミーにしたいかなと思いますので。
はい。
ありがとうございました。
最後に宣伝とかあればここでお話いただければと思います。
宣伝か。
Xninjaの話にまたなってしまうんですけど。
本当は今年の夏にOSSで活動を始めようと思ったんですが、
時間がなくなってしまいまして。
来年からOSSにするのは来年からということになりそうです。
ただ完成度として最後の1個の修正が残ってて、
それが終わった時点でドキュメントだけは書いていこうかなと思います。
なのでXninjaこれから活動は細々と始まりますので、
ぜひ興味ありましたら眺めておいていただければと思います。
はい。ありがとうございます。
今日の収録はこれで以上ですね。
1:33:00
ゲストにOSSクリエイターのゆうせんさんとしてのお話でした。
はい。ゆうせんさんありがとうございました。
ありがとうございました。
