![[自己紹介] 普段こういう事をしている者です #1](https://d3t3ozftmdmh3i.cloudfront.net/staging/podcast_uploaded_nologo/40099822/40099822-1703446638242-81ae2a51d954c.jpg)
VGeekラジオの始まり
はい、VGeekラジオ、VGeekを始めていきたいと思います。
このラジオは、私、しのがみーにと、つくすりなの2人がお送りする、
Vで活動している若手のエンジニアが話すというラジオになっております。
第1回目なので、はじめに自己紹介をすると、私がしのがみーにと言います。
VRチャットとクラスターでエンジニア作業飲み集会という、エンジニアがVR上で集まるというコミュニティを運営しています。
本業では、Webアプリケーションのフロントエンドのエンジニアをやっていて、
リアクトとかタイプスクリプトとか書いたりしています。
まだまだ駆け出しで、いろいろと勉強中という感じです。
では、りなさん、自己紹介をお願いします。
どうも、つくすりなです。
バーチャルYouTuber系フリーランスエンジニアです。
普段はフリーランスエンジニアで、主に同じくWeb系なんですけど、
全然他のこともやったりやらなかったりしている、割と何でも屋さんです。
駆け出しというにはちょっと年を超えているので、
若手というラインでやっていきたいなと思います。
お願いします。
よろしくお願いします。
VR空間内での撮影とワールドの説明
このラジオは、今こちら見てわかる通りVR空間内で撮影をしておりまして、
こちらはVRChatというVRのプラットフォームで撮影をしています。
このワールド、こういう空間のことをワールドと言うんですけども、
このワールドは、普段私が毎週金曜日に開催している
エンジニア作業のみ集会というイベントのワールドを使って、今撮影をしております。
第1回目なので、どんな感じに進めるかみたいなのを考えながらやってるんですけど、
こんな感じでね、VRChatだったり、あとはVRChat以外にも
レゾナイトとかVR空間、VRSNSのプラットフォームがあったりするので、
そういうところでこんな感じで、若手の2人で雑談をしてみたいな、
そういうのを配信するラジオとして定期的にやっていこうかなと思っております。
よろしくお願いします。
画面のことは耳で聞いている皆さんにはあまり関係ないかもしれないですけど、
YouTubeで流している動画にはVR空間の映像が流れてますよということでお願いします。
はい、お願いします。
ということで、そうですね、こういう時にね、1回目なんでね、
何の話からするかっていうところをちょっと迷うんですけど、
そうね、なんかそうだな。
何も考えてないんですね、我々。
そう、何も考えてないですね、確かに。
そうね、なんかそうだな。
まず多分、これ、聞いてくださっている方で、
多分文脈を理解されていない方とか向けにちょっと解説をすると、
まず、こういうVR空間でいろいろとエンジニアが集まるコミュニティが、
最近結構いくつかイベントがあったりとかして、
自分が毎週金曜日にエンジニア作業のみ集会っていう名前で、
エンジニアが集まるみたいな感じのイベントをやってて、
大体ここにね、皆さんどういうふうに遊びに来るかっていうと、
今自分がやってるみたいにVRのヘッドセットを被ったりとか、
あとはWindowsのPCとかがあると、
VRチャットのアプリをSteam経由でダウンロードして、
で、そのダウンロードしたアプリ使って、
こういう3Dの空間に遊びに来るみたいな、
そういうふうにして、
いろんな人がこの中で交流をしてみたいなことをね、
やってたりしてて。
で、このラジオはそうですね、
後ろにもね、あんな感じでポスターが結構いろいろ貼ってあるんですけど、
この辺でみんな食べるっていう感じなんですけど。
そうそうそうそう。
こんな感じで、
このラジオはYouTubeでは、
エンジニア作業のみ集会っていうYouTubeチャンネルで配信をするんですけども、
そこに過去の動画とかでも、
LT会とかの動画があるんですけど、
ここで集まっておしゃべりしたりとか、
あとは技術の話題で盛り上がったりみたいなことを
結構やってたりします。
あとね、この集会の特徴としては、最後に進捗共有会っていうのがありますよね。
飲んだお酒や飲み物も進捗に数えてよしっていう、
結構緩い、
何話してもいいよっていう、
1週間こんなことやったよみたいなのを話せるっていう、
そういう会をやってます。
そういう謎の集まりを。
金曜日だからね。
みんな結構お酒飲んでくるので、
面白いかも。
で、リナさんとはね、
その会で交流があって、
で、その交流の中でラジオやりたいよねって話になって、
今このラジオに繋がってるっていうところですね。
自分がね、あんまり今活動できてないんですけど、
YouTube、VTuberというか、
あとTwitchとかで配信とかしてるので、
なんかPodcastやりたいなみたいなのがあって、
話が始まった感じですよね。
Podcast始めてみたいな、みたいな気持ちとしてはあったので。
話してたもんね。
元から話があって。
ラジオの内容と配信の方針
結構これからこの配信どうしていきたいかみたいなことを、
ちょっと考えてるんですけど、
結構このVRのイベント通じて、
いろんなエンジニアの方とかとすごい交流があったりするので、
そういう方をお呼びして、
ここでみんなで話すみたいなことができたらいいな、
というふうに思っていますね。
基本的につよつよポッドキャスターの方とかと比べて、
めちゃくちゃ最新のニュースを配信するみたいな感じよりは、
もっとちょっとゆるくね、
こういうことをやってるよとか、
これについてどう思うとか、
最近こんなんやったよみたいな、
そういうのを気楽に共有するポッドキャストみたいな感じで、
やっていけるといいかなというふうに思っている。
たまに詳しい人を呼んで、
いろいろ質問したり聞いてみたりみたいな、
そういうこともやるといいよね。
聞いている人的には、
そういうのもあるのかみたいな感じで、
ゆるくね。
仕事中とかで聞いてても、
意識をそがれすぎないくらいのゆるさでやらせてもらうかなと。
分かる。
思いますね。
そうだよね。
情報盛りだくさんだと、
それはそれで、
ちょっとそっち聞こうってなるよね。
めっちゃ面白いポッドキャストって、
逆に仕事中とか作業中聞いてるとそっち行っちゃう。
分かる。
ありますよね。
分かる分かる。
だから、
ゆるいゆるさでやっていきましょう。
やっていきますか。
お互い普段やってることの話します?
お互いもエンジニアだけど、
普段何触ってるとか、
どんな感じの環境ですよみたいな。
もしも自己紹介がてらやってみたらいいかな。
確かに。
良さそう。
りなさんはどういうライブラリとかを触ってるんでしたっけ?
自分から質問の仕方がちょっと面白いな。
どのようなライブラリを。
ライブラリ。
面接かな?
何かの面接かな?
そうですね。
自分はウェブ系なんですけど、
最近はやっぱ滑るとですよね。
滑るとか。
リアクトとかリオはもう古いと。
こういう話をするともうポッドキャスト1個作れちゃうんですけど。
あかんあかん。
滑るとないしは滑るときっと。
マフラーの人がやってて、
あとバックエンドも触るんで、
バックエンドだと色々触るんですけど、
リプスクリプトが多いのかな。
エクスプレスのやつだったりとか、
デノで最近は書いたりとか。
いいですね。
以外にも全然仕事だとJavaとかGoとか、
色々触ったりはしますね。
割と何でもいけるですね。
あとデスクトップアプリとか、
そういうのも全然やったりしてるんで。
デスクトップアプリ。
結構りなさんめっちゃ幅広くやりますね。
広いのかな。
JavaとかJavaScript、
TypeScriptをメインかな。
基本的には。
なるほど。
それ以外でも全然。
モバイルアプリもちょっと触ったことあるし、
IoTみたいなものも若干、
Pythonとかで触ったりとかもしたことはありますね。
すごい。
AIも、AI自分は全然分かんないんですけど、
機械学習の案件にもいたんで、
少しは分かるよという感じですね。
すごい。
めっちゃ色々できる。
広いのかな。
環境としては普段は、
マイクなかった。
VRの弊害として、
マイクの位置が把握できないっていう問題があって。
なるほどね。
VRとかいるんで、
Windowsなんですけど、
ちょっと今ね、
これもまた後で話すんですけど、
Linux環境にしようかなとか思ったり。
仕事が全部WSLでやってるんで、
じゃあもうLinuxでいいやないかという感じがしてますね、
最近は。
なるほど。
りなさんもLinux鍵派になっていくんですね、
こうやって。
全部Linuxでいいやんって。
名前からしてLinux鍵派なんで、
Linuxクスでございます。
やばいな。
Linux鍵派の、
りなさんとは別のLinux鍵派の人と話したことがあって、
Windowsって、
Windowsで何やんの?
それ全部Linuxでできるやんって。
できるやん。
アーチリナックスでもう全てできるやんみたいな。
アーチリナックスでできます。
だからWindowsをぶっ壊して、
もうアーチリナックスに変えちゃおうみたいな、
っていう話をされたことがあって。
そう思います。
やばい、まじか。
りなさんもそっちの人間だったか。
そう思います。
NVIDIAの対応ぐらいです、あとは。
実際どうなんですか?
自分前に使ってた2070Superが載ってるWindowsのゲーミングPCを、
Windowsぶっ壊してアーチリナックスに入り替えるってのをやってみたんですよ。
古い方のパソコンなんで、ぶっ壊してもいいかなと思って。
何だっけ?ワインだっけ?
Windowsのアプリで動かすやつですね。
それ入れてVRチャット起動するところまで行ったんだけど、
音声周りがよくわからなくて。
ワインを素で入れました?結構。
自分もその辺詳しくないんですけどまだ。
Steam経由だった気がするな。
今SteamがWindowsのゲームを全部リナックスでできるようにSteamさんが頑張ってくれてて。
ワインを拡張して。
名前を忘れちゃった。
Steamがやってて。
それの大きな理由としてはSteam Deckって出たじゃないですか。
あれって実は中身アーチリナックスなんですよ。
そうなんだ。
なのでリナックス向けにWindowsのゲームを遊べるようにいって、
9割以上のゲームがほとんど対応してるんじゃないかな。
そうなんだ。
Steam経由で今やったらもしかしたら結構楽かも。
じゃあもうアーチリナックスでいいじゃん。
そうなのよ。
Windowsでしか使えないアプリって何かな?
アドビーだけですね。
アドビーか。
アドビーはリナさんめっちゃ使いそうですよね。
使うんだけど、ないならしょうがないかって感じ。
そこはアドビーに依存してなかったか。
プレミアプロとかエフェクトとか使いたいんだけど、
ちょっとリナックスで使えないのがどうしても痛すぎる。
なるほど。それは確かに。
NVIDIAのドライバーの対応ですかね、リナックスの課題としては。
NVIDIAのドライバーの対応っていうのは、それは何ができないんですか?
NVIDIAとAMDのドライバー
できないわけじゃなくて、NVIDIAも最近はリナックス向けにドライバーを出してくれてるんですけど、
アーチリナックスとかリナックスってオープンソースの世界観じゃないですか。
そうですね。
NVIDIAのドライバーってオープンソースしてくれないんですよ。
カタクナにやらないで、とりあえずビルドだけしたから使ってね、みたいな感じで出してくるんですよ。
逆にAMDのRadeonとかのドライバーってオープンソースになってて、
リナックスカーネルに組み込まれたりとかしてるので、割と問題なく使えるという感じです。
そうなんだ。じゃあRadeonだったら問題なくリナックスでも使える。
気になることないと思いますね。
そこまでガチャガチャやってないのでわかんないですけど、たぶんAMDだと大丈夫みたいなのよく見るんで。
なるほどなぁ。
こんな感じです。
リナさんはアーチリナックスメインでやってるんですか?
さっき言ったようにVRとかやるのはまだWindowsなんですけど、
ノートパソコンとかは今エンデバーOS入れていろいろいじってて。
エンデバーOS。また新しいのができた。
エンデバーOSとアーチリナックスのインストール
今アーチ系で一番熱い。アーチリナックスってインストールがめんどくさいんですよ。
そうですよね。
聞いたことあるかもしれないんですけど。
アーチリナックスやって。
やりました?
そうそう。やったのでめっちゃめんどくさいなって思いました。
USB挿すまではいいんですけど、ISO入れて。
コマンドでインストールするじゃないですか。
はいはいはい。
CUIしか用意されてないんで。
そうですね。
エンデバーOSはインストーラーがUbuntuみたいに。
インストーラーがあって、アーチリナックスでだいたいこういうインストーラーするよねってパンとやってくれるんですよ。
すごい便利だ。
最初からGUI環境で使えるアーチリナックスが完成するけど、
本当に最低限しか入れないから、アーチのシンプルさも保っているっていうOSですね。
なるほど。
リナックスサーバー上での開発とタスク管理アプリ
このアーシスは後でしようと思ってたんだけど。
最近はエンデバーOSでHyperlandっていうタイル型のウィンドウマネージャーを入れて色々設定してみて。
はいはいはい。いいですね。めっちゃいい。
どうですか?ユニちゃんは最近は?
最近か。最近そうですね。
最近私はそうだな。
結構自分まだ、エンジニアとして働き始めて今3年目なんですよ。
3年。はいはいはい。
まだ2年とちょっとって感じで。
今自分が働いている場所がリアクトタイプスクリプトを使っているところなんですけど。
まだ今働き始めて1年とちょっとみたいな感じで結構自分まだ浅くて色々と。
それで結構ウェブの勉強ってことでね。
色々と個人開発とかで色々アプリ作りながら勉強とかをしてて。
最近はね、Next.jsを使ってタスク管理アプリを自分が便利に使えるタスク管理ツールを作るっていうのを最近はやってますね。
で、仕事で使ってない色々なものを使ってみようっていうので。
Next.jsを使ってみたり、あとチャクラUIを導入して遊んでみたり。
あとはそうだな、結構何かデザイン何も分からない。
作り始めてデザイン何も分からないってなって。
Googleが出しているマテリアルUIのガイドみたいなサイトがあって。
あれをちょっと読んでみながら、このコンポーネントどんな風に作ってみようかなみたいなのをゴネゴネやったりとか。
あとは勉強目的で作ってるから、せっかくだったら色々とフロントエンドのテスト周りとかも色々自分で書けるようになりたいなって思って。
ジェストでコンポーネントのテスト書いてみたりとか。
あとはストーリーブック導入してみて、コンポーネント単位でデザインと機能を作って開発してみるみたいなのをやってみたりとか。
そんな感じで色々とそういうのをコネコネしながら遊んでるって感じですね。
OSとかは、リナさんよりはどちらかというと結構ウェブのフロントエンド周りで結構遊んでますね、最近だと。
NEXTっていうのがREACTのスーパーセットのフレームワークなんで、REACTメインで色々遊んでみてるって感じですよね。
環境はWindows?
環境はそうですね、WSLで開発してっていうのをやってますね。
やっぱREACTSでいいんじゃないですか。
やばい、やばい、REACTS。
WSL使ってるんですよね。
そうね、そうね、そうね。
そういう話になっちゃうんでね。危ない、気をつけて下さいね。
実際そうで、普段自分が使ってるアプリケーションがLinuxで動くんだったら、メインで使うOSをLinuxにしてみればちょっと興味はある。
が、ちょっと私はどうなんだろうな。
自分なりの使い方してる時に問題が起きた時のトラブルシューティングが自力でできるかどうかみたいなところがちょっとまだ不安で。
まだガッツリOS遊びしてる人間じゃないんで、やるんだったら自分の普段使いのPCとはまた別の閉じた環境でちょっと入れて遊んでみて。
それで慣れてったらちょっとずつそっちに移してってみたいなっていう感じかなって。
バーチャルマシンとかね、ノートパソコン古くなったやつとかでもいいし。
あとね、ちょっと一個ね、それに関してでやりたいなって思ってるのが、
おうちにおうちワークステーションを作ってみたいなっていう要望があって。
おうちワークステーション、あーなるほど。
私結構自宅のデスクトップPCで作業したりとか、外出先ではノートPCで作業したりとかってやるんですけど、
毎回毎回自宅のPCの環境と外出先のノートPCの環境がずれてるから、
外出するときにノートPCの環境をちょっと維持して、
自宅のPCのほうではあれ入れてたけど、ノートPCのほうではあれインストールしなかったな、今のうちインストールしないとカタカタっていうのがめんどくさいから。
じゃあ自宅に一個開発用のLinuxサーバーを立てておいて、開発の作業をするときにはそこに入るっていうふうにやっちゃえば、
いちいちパソコン違うから環境を合わせないとって、やんなくてええやんみたいなっていうのがあって、
そういうのできたらいいなみたいな野望がちょっとあるんだけど。
そういうとちょうどいい話があって、以前この周回とかでは話したんですけど、
Linuxサーバー上に今あってVSコードのサーバーを立てれるんですよ。
おそらく普段使ってるのはVSコードだと思うんで、
VSコードのサーバー立てとけばブラウザのVSコードから自分のサーバーの環境に入れる。
っていう機能が実はありまして、これは全然Linuxサーバー立てなくても、
例えばデスクトップ付けっぱでデスクトップのいつも使ってるVSコードをサーバーにするっていうのもできるんですけど、
サーバーにするとデスクトップ消してもいいっていう状態になるんで、それでやってみると便利かもしれないですね。
iPadだけ持ってノートパソコンと同じくらい開発できるっていう風にしたので結構おすすめですね。
ノートパソコン持って行ってガッツリ開発するぞっていうのは全然いいんですけど、
ちょっと外出たいとき、そんなに開発目的じゃない外出のとき、暇なとき開発したいじゃないですか、我々みたいな。
分かる。
でもそんなに重たいノートパソコン持ち歩きたくないし、電源もできればType-Cの普通の充電器しか持ち歩きたくないし。
分かる。
iPadだけ持って行って、ブラウザでVSコードを開いたら自宅の環境を使えるっていうのを設定しましたね。
いいですね。それにもやりたいな。
おすすめですよ。
やりたいなそれ。
でもVSコードのサーバー起動しておくだけだったら、わざわざ別にPC用意しなくてもいいのかもな。
自宅の。
用意しなくてもいいし。自宅のパソコン付けっぱなしだから。電気代金っていう人は。
まあ確かに。
グラボがね。
別にちょっと外出するときに付けっぱにするのと、家にいて付けっぱにしてるのとそんな変わんないっしょみたいな。
まあ確かに。
そんな24時間365日付けておくわけじゃないから。みたいなのはありそう。
セキュリティとかは大丈夫なんですか、そうくれって。
セキュリティがね、これすごくて。サーバー立てると、サーバー上でMicrosoftアカウントかGitHubアカウントの認証が走るんですよ。認証させられるんですよ。
ほうほうほうほう。
で、終わるとサーバー立ちましたよってなって、もうサーバーはそれで終わりなんですよ。ポート開放とかなし。ポート開放とかしないんで、まあ攻撃されづらいよと。
ほうほうほうほう。
で、外から開くときはブラウザでVSコードを開いて、自分のサーバーの名前、サーバー立てるって登録されるんでそのサーバーの名前を入れてあげて、
で、そうするとまたブラウザ上で認証してくださいって言われるんですね。GitHubしたらGitHubで認証すると、トンネルを作ってくれて。
トンネルを作ってくれて、そこをP2P状態にしてくれるので、そこのアカウントさえしっかりしてれば基本的にはセキュリティ大丈夫そうって感じですね。
おお、なるほど。ちなみにそれってCLIから叩いたりとか、あとはVSコードのリモートエクスプローラーか。
あれとか使ってブラウザのVSコードじゃなくて、アプリケーションのVSコードから繋げるみたいなこととかってできるんですか、それって。
それもできます。
できるんだ。
リモートエクスプローラーの機能の拡張なんですよね。
P2Pで繋いでリモートでVSコード開けますよっていう感じで。
なので普通にアプリのVSコードでも使えますね。
めっちゃいいな、それ普通にやりたいな自分も。
しかも驚いたのが、多分使い勝手はGitHub Codespacesを使っている人だったらほぼそれですって感じなんですけど。
GitHub Spacesみたいに例えばVSコードをサーバーに繋げて、そこでVSコード上のターミナルでPNPMデブみたいな感じでサーバー立てるじゃないですか。
ウェブ系のことをやるんで。
サーバー立てるとローカルホストで立っちゃって、ポート開いてないんで外から普通は見れないじゃないですか。
それもVSコードが勝手に認識して、このポートをトンネルしますかみたいな。
入って押すと別のタブが開いて、そのサーバー上で立っているはずのウェブサーバーにアクセスできるようになるんですね。
すごい。
しっかりウェブ開発できる用途で。
本当にサーバーとかデスクトップ上でVSコードのサーバーを立てるだけで全部完結しちゃうっていうね。
いいな。ちょっとやり方調べてみよう、それ。自分もやりたいな。
また言われれば教えます。
やったー、嬉しい。
あとはさっき言ってたトゥーアプリの話を掘っても大丈夫なんですか?
いいですよ。
どんな感じで使いやすい?自分が使いやすいアプリって言ってたんで、他のやつだと使いづらいところがあったとか。
そうですね。なんかね、自分普段タスク管理にTodoistっていうアプリを使ってて、単純にタスクを一覧で管理するアプリなんですけど、
それと一緒にToggleっていう、自分が何にどれくらい時間をかけたかっていう、時間を測るアプリを両方一緒に使ってるんですよ。
で、私そのタスクの管理はTodoistでやって、そのタスクにどれくらい時間がかかったかっていうのをToggleっていうアプリで管理してっていうので、
アプリケーションを2つ使ってるんですけど、これ機能一緒にしたいよなっていうふうに思って。
確かにめんどくさい。
そうなんですよ。で、一応TodoistにToggleのボタンを追加する拡張はあるんですけど、なんか使いづらいのと、
あとなんかどうやら、これメーテルされてんのかなみたいな感じ。ちょっと若干ハギーな感じなんですよね。
Todoistのタスク管理アプリの開発
で、それだったらちょっとこれ、なんか自分でこのTodoistのタスク管理いい感じにできるのと、
そのToggleの時間測れるのをいい感じに一つのアプリにしたいよなって思って、
それでじゃあ時間が測れるタスク管理ツールを作ろうみたいなふうに考えて作り始めた。
あとはもう単純になんかウェブアプリ作るネタがちょっと自分欲しかったんで、
勉強8割みたいな感じの目的でやってますね。
いいんじゃないですかね。意外と有名なやつで、機能としてあるものはあるかもしれないけど、
使いやすいかって言われると。
結構、拡張機能でそういうプラグインを入れればそういうことできるよみたいなパターンはあるけど、
そっちにフォーカスされててっていうアプリケーションはあんまないなっていうのもあって、
そういう意味では作るモチベーションになってるかなみたいな。
個人開発にちょっと個人開発の話があるんですけど、
個人開発するときって自分が使うものじゃないとモチベーション保ってなくないですか。
わかるー。
作り上げるまでいってもなんか自分が使ってないとメンテ絶対しなくなりますよね。
しない。
絶対ね、個人開発をしようと思っている人は自分が使いたいものを作るべきだなと。
そうね。
でもむずいのがさ、なんか自分が使えちゃってるからいいやみたいな感じで、あんまり作りこなかったりとかもするから。
それはあるかも。でもそれはそれでいいような気もするし、
公開してそのフィードバックが来るんだったら、
それを自分で咀嚼して直すなり直さないなりでもいい気もするし。
まあ確かに。
オープンソースにするなら多分勝手に直してきてくれるだろうし、いいような気もする。
そうね。いやーでもそうか。ちょっと自分が今作ってるやつ頑張って、公開して他の人に使ってもらうまでやってみたいな。
今のところ、そう今のところ自分個人で使うしか考えてないからマジで結構適当で、
個人開発に対するモチベーション
なんかデータの置き場とかもインデックスDBに置いてるんですよ、データを。
だからもう完全にローカルで動くアプリケーションって感じで、
そうなんかデータベースとかもないしみたいな。
だからなんかデータベースない分、なんかじゃあリリースしますってなった時にデータベースのこと考えなくて、
まあいいみたいなのはあると思うんですけど、
ただなんか機能追加しようとかってやった時に多分インデックスDBのいえる、
登録されてるデータ吹き飛ばしてっていう話になっちゃうような気がするんで、
なんかサービスとして公開するってなったら、パスク管理ツールのデータが吹き飛ぶのがまずいじゃないですか。
あれ何積んだっけってなるから。
いやだからって考えると、まあそういいか。最初は。
ちょっと消えることあるよみたいな感じで。
逆になんか下手にクラウドに上げてみたいなことをやり出すと、お金とかもかかっちゃうし。
そうなんだよね。
それはプレミア機能とかで後々やり尽くして、インデックスDBとかだったり、
なんかローカルで映像化さえできてればいいのかなと。
スベルトフレームワークの特徴
結構ね、なんか作りながら思ったのが、
結構そのウェブのアプリケーションって、
いえる通信環境が悪かったりとか、
今通信環境が悪くてオフラインになっちゃったとかってなった時に、
必要なデータが取ってこれないみたいな、そういうパターンが結構あったりするじゃないですか。
別にそういう意図なしにインデックスDBで作ってたんですけど、
あれこれ普通にデータベースにポストする機能を付けた後でも、
インデックスDB側にデータを持っておくっていうのは、
これはこれでそのまま残しておくと便利なのではみたいなと思ったりとかして。
だから結局そのポストしたときに、
ポストをしてOKって処理が返ってくるまでのラグがあったりするじゃないですか。
だから先にそのインデックスDB、そのローカル側に、
ローカルのインデックスDBにデータを置いて、
いわゆるデータベース側との同期はその後非同期的にやるみたいな、
そういう感じにできると、
ウェブアプリだけどよりデスクトップアプリライクな挙動にできていいかもな、
みたいなことをちょっと思って。
ただあんまりそこらへん複雑な仕組みどういう風に実装しようかみたいなのあんまり考えられてない。
ブラウザ閉じたときにどういう挙動になるのかみたいなのがあんまり自分はよく理解してなくて。
基本はその考えでいいかなと思ってて。
あと同期を全く別のタイミングにしちゃってもいいみたいな、
オートセーブみたいな感じで勝手に開いたときとか操作した後動かせるときに動かして、
基本はインデックスDBとかローカルのデータベースで管理しますよみたいな感じでやるのが結構よくあるかな。
そうなんだ。
シングルページアプリケーションにすれば最初の1回だけ読み込めればとりあえず動くし、
ローカルのDBで管理して、たまに非同期で勝手に同期してあげるみたいなのはありそう。
なるほど、そうか。
たまにそれで思うのが、例えばアクセスしてるデバイスが1つだったらいいのよ。
もう別のデバイスからアクセスしてってなったときに、別のデバイスではローカルのデータベースないわけじゃないですか。
新しく開くから。
クラウドで動いてるデータベースの状態と、別の端末でアクセスしたときのローカルのインデックスDBの状態が違うってなったときに、
そこをどのデータを正しいものとして持ってくるなり、同期するなりみたいな処理をやるんだろうな、みたいなのが自分はまだ想像ができてない。
最終更新日時とか、それで取ってくるとか。
普通の最初からそれが前提のアプリとかだと、最終更新日を見比べて、新しい方を生徒して、クラウドの方が新しかったらダウンロードしてくるみたいな感じのが自然かな。
ツーブリストとかのアプリだと。
その辺り考えると面白いんだけど。面白いんだけど、面倒くさそうだなって。
時間もかかるし、お金もかかるし。
でもそこら辺をうまく作れると楽しいよねっていうのはある。個人開発。
そういうアプリだともしかしたら、Electronとかタウリでデスクトップアプリ化しちゃって。
あー、確かに。
もういいかも。それだったらIce Cube Liteとかで継続化できるし。
でもいいかもしれない。
それ良さそうだな。
Electronもやってみたいんだよな。とりあえず簡単なチュートリアルだけはやったことある、Electron。
リアクトで動くみたいなのを見て、リアクトでやってみるかって言って一回やったことがあって。
ネクストでも動くんだろうけど、まだネクストで動かすのは試したことないな、Electron。
ネクストでも良さがあんまりないかも。
あ、そうなんだ。
ネクストどこまでネクストの機能なのかわからないんだけど。
私は基本スベルトなんで。
スベルト過激派なんで。
いちいち過激派になっちゃって。
ちなみに聞いてみたいんですけど、なんでスベルトを選んでるんですか?
なんでスベルトを選んでる?
スベルトがどこが良いのかみたいな話ですかね。
一言で言うと、シンプルですね。
今までのリアクトとかVueに比べるとシンプル。
バニラのJavascriptの方がシンプルだよみたいな話はもしかしたら。
今ある有名なフレームワークとしてはリアクトがあって、
それより全然シンプルで、かつ遜色ない機能が使える。
なんならもっといっぱい機能があるみたいなイメージがあって。
その大きい理由の一つに、リアクトとVueは仮想ドムのシステム。
仮想化して仮想ドムをいじるっていうアーキテクチャなんですけど、
スベルトは仮想ドムじゃないんですよ。
リアクティブな値も扱えるんだけど仮想ドムじゃなくて、
何をしてるかっていうと、スベルトって実はコンパイラなんですよ。
スベルトで書いてコンパイルすると、
生JSで動くアプリケーションができるっていう仕組みなんですね。
だからコンパイラである分、自由度も高いし、
コンパイラさんが吸収してくれちゃえば自由に書けるわけじゃないですか。
仮想ドムってランタイム状態で動くんで、制限が結構あるんですけど。
あとコンパイルしちゃって生JSになってるんで、
動作も仮想ドムより速い、おそらく速い。
そういう理由もあって。
そもそも書き方がシンプルで、
リアクトだとコードの中に急にドムが現れるじゃないですか。
そうですね。
JSXとかタイプスクリプトで書いてもそうだけど。
とか、ビューだと、
例えばリアクティブに扱いたいデータがあったとします。
変数がありますってなると、
オブジェクトの中にデータっていう名前のオブジェクトがあって、
その中に変数名コロン、変数名と値の対応付けをさせて、
扱うときは、
なんだっけ名前、ちょっと忘れたんですけど、
関数の中で使わないといけないみたいなのがあるじゃないですか。
スベルトって変数宣言したらそれがリアクティブに扱えるんですよ、変数が。
そのままHTMLの中に変数名を書けば、変数が代入されたときに変わるっていう。
すごいシンプルに書ける。
そうなんだ。
だから戻りたくないと思って。
例えばリアクトとかだと、
例えばユースエフェクトとか使って、
この変数が変わったら、
現状のドームの状況と比較して変わってるところがあったら再レンダリングするみたいな、
そういうのあったりするじゃないですか。
スベルトとかだとそこって、
特にそういうのとかなしに変数定義して、
変数の値が、
何らかしらのフックで書き換わったら、
そこだけレンダリングするみたいな。
そう、フックっていう感じもない。
その変数がどこかで書き換わったら変わる。
そうなんですか。
なるほど。
ちょっと一瞬、
びっくりしすぎて。
なるほど。
そうなんだ。
逆にそれ、
編集で出しておきます。
リアクトとスベルトの比較を。
スベルトの公式サイトにリアクトビューとスベルトの比較があるんですけど、
そうなんだ。
確かリアクトだと、
2つのテキストボックスに数字を入れて、
その足し算した結果を表示するっていうコンポーネントを書いてみましょうっていう例があって、
リアクトだと結構長くなるじゃないですか。
1つのコンポーネントにしようとすると、
50行くらいになりますよね多分。
それから30行くらいかな。
なると思うんですけど、
ユーズエフェクトとか使って。
でも、ビューのコンポーネントでも多分データとか、
この値とこの値を計算した結果をこの名前の変数に入れますよみたいなのを書いて、
それをDOMに書くんで、
多分ビューでも20行もいかないかな。
15行くらいだと思うんですけど、
スベルトだと変数宣言して、
その変数をテキストボックスに紐付けて、
その変数と変数の足し算をボンって書けば終わるんで、
15ぐらいで済むっていう例があって、
すごいシンプルなんですよ。
確かに最近JavaScriptの人気投票みたいなサイトがあって、
そこで見てるとリアクトよりも最近スベルトの方が技術者の満足度が高いみたいな。
そうなんですよ。
データがあるのを見て。
リアクトよりもシンプルなんですか、スベルトは。
めちゃくちゃシンプルです。
むしろリアクトは古いんじゃないかみたいな。
リアクトは古いんじゃないか。
ビューは仮想DOMでもだいぶ頑張ってるよ。
でもスベルトは強すぎるよみたいなイメージがあります。
おーなるほど。
おー面白いな。
あとはリアクトとかビューって仮想DOMだけど、今ってNode.jsの環境で書いて、
スベルトの開発体験と状態管理
結局コンパイルというか、バベルとかいろんなあれでコンパイルするじゃないですか。
Bitとかありますけど。
はいはいはい。
コンパイルするじゃないですか。
ちょっと前だとWebpackとか。
そうですね。
結局じゃあ書いてコンパイルするじゃん。
そうですね。
ってなるんですよ。
でも仮想DOMじゃないですか。
そうですねはい。
スベルトはコンパイルするっていう前提だけど、
でもそれって開発体験変わんないんですよ実は。
結局今までやってたんで、スベルトでもコンパイルしてそれを上げるっていう。
開発体験変わんないけど、
仮想DOMっていうのも排除して、
生のJSに勝手にコンパイルしてくれて動作も早いよっていう違いもありますね。
へーなるほど。
そういう違いがあるのか。
結局じゃあなんで仮想DOM使ってるのって。
結局Node.js上で書いてコンパイルしてるやん。
仮想DOMになる意味は一体。
スベルトで良くないですかっていう感じですね。
へーなるほど。
いやいいですね。
スベルトの熱い思いが。
いやーちょっとね、リナさんがスベルトいいぞって言ってるのもいいけど、
最近自分もスベルトちょっとなんか一回触ってみようかなーみたいな気持ちには若干なってる。
実はスベルトは、スベルトの公式のまずサイトがあるんですけど、
それも有志によって全部日本語化されてます基本的に。
へーそうなんですか。
最近ちょっと新しく変わったんで若干間に合ってないんですけど、ほとんど日本語化されてます。
へー。
スベルト.jpかな。
スベルトのホームページってサイトの中でチュートリアルとかあとレプルがあるんですよ。
だからグラフ座上でスベルト書いてこう書いたらどうなるかなーみたいなのをめっちゃ試せるんですよ。
えーいいですねそれ。
チュートリアルもあるんでチュートリアル通りに進んでいけばスベルトのことだいたいわかったって言える。
はいはいはいはい。
なんだったら今リアクトとかビューより学習コストも低くない?みたいな。
へーすごい。
そうなんだーすごいなー。
とりあえず公式のサイトを見とけばわかるっていうのがそれも好きポイントですね。
ほんとだ。
リアクトとかビューって公式サイトドキュメントなんか見づらくないですか?
そうねー。
昔ながらのドキュメントって感じはある。
なんか最近NEXTとか、いやNEXTも違うか。
今手元で立ち上げてるんですけど、
learn.svelte.jpってところ。
普通にブラウザーページ開くともう普通にVSコードみたいなのが出てきて。
メディターが出てきて。
へーってなってる。
今風のチュートリアルって感じがする。
今風のね。
いいですね。
リアクトとかビューって今もうプラグイン前提じゃないですか。
そうですね。
状態管理のプラグインが絶対ほぼ必要だったりとか。
なので一箇所でわかるページってないんですよ。
記事とかいろんなドキュメントとかを見ないと扱えなくて。
svelteって全部そこに一旦あるんで、
ここを見れば大抵できるよっていう状態になるんですよ。
それに付随すると、状態管理でリアクトとかビューだと別のプラグインじゃないですか。
UXとか。
最近は何か出てきたのかな。
何だっけ。
最近、自分もこれ勉強中なんですけど、
最近は割と外部のプラグイン使わずにリアクトで提供されている状態管理の機能を使ってみたいな。
ユーズコンテキストっていうのがあって、それを使って状態管理してみたいな流れがあって。
前とかはリダックス使うとかリコイル使うみたいなのがあるんですけど、
結構リコイルとかも最近メンテナー周りでちょっとトラブルがあるみたいなことが起きたりとかして。
分かれてるとね。
本体のバージョンについていけないとか。
ありますよね。
だから最近はリアクトとかでもリアクトが提供しているユーズコンテキストとかを使って状態管理をしようみたいな、
そういう話があるみたいなんですよねっていうのはあって。
だから、いろいろライブラリーに依存しすぎるとそういうことが起こるっていう。
ところがどっこい。
ソフトさん、状態管理の機能持ってます。
あるんだ。
似たような機能ですかね。完全に同じ使い勝手ではないんですけど、
さっき言ったような多分コンテキスト扱うのがまず1個ありますと。
セットコンテキストとゲットコンテキストっていうので使えるんですけど、
あとはストアっていう機能があって、
ストア型オブジェクトにすることでその値の変更をどこでもサブスクできる。
監視できる。
普通の変数はリアクティブになるって言ったんですけど、
それってそのコンポーネントの中だけの話で。
外出ちゃったりとかすると使えないんですよ、当然なんですけど。
それをストアっていうオブジェクトに入れ込んであげると、
DWとかライタブルっていう名前のオブジェクトがあるんですけど、
これに入れてあげると外でもちゃんと監視してくれるようになる。
じゃあそのグローバルな状態を保持しておく場所が、
Svelteで言うところのストアっていうのがあるっていう。
場所とか型にしておけば使えるよっていうのが。
なるほど。
スベルトの効率的な学習方法
ストアに入れるか入れないかみたいなのはコンポーネントで書くときに選べるみたいな感じなんですかね。
選べます。
そのコンポーネントの中で管理するのか、それともグローバルに値を持たせたいのかみたいな。
管理のしやすさですけど、大体はグローバルで管理したい値がもしあったら、
グローバルのところで宣言ライタブルとかDWって入れてあげて、
それを外から呼び出してあげれば使える。
あとこれが実はコンポーネントの中だと、
普通だとそういうのって関数、メソッドをやらないと代入できないとかあるんですけど、
Svelteはコンパイラーなので、そこも自由度が高くて、
ストアの名前の頭に$を付けると、
イコールで入れても勝手にそこを吉野にしてくれますと。
そうなんだ。
それもすごい便利というか、すごいシンプルに書ける理由の一つなんですけど。
なるほど。
それが実は次のSvelte、これは全然別の話なんだけど、
Svelteのバージョン5がそろそろ来そうなんですけど、
バージョン5はRuneっていう機能が追加されて、
えー、Rune。
はいはいはい。
これがね、めっちゃ強力そうで、
ストアとかもう使わなくなっちゃうんじゃないかと思うぐらい、
すごい超リアクティブな変数みたいなのが作れちゃうらしい。
これはまた次のバージョンの話なんでまだ全然わかんないんですけど。
でもなんかググったら出てきた。
へー。
はい。
あー、こんなのがあるんだ。
それを使うとなんかさらに、なんだろうな。
今までってBWライタブルっていうストアっていう別のオブジェクトにしないといけなかったんですけど、
その使いたいオブジェクトそのものとして扱えるんですよね、Runeの。
ふんふんふんふん。
ふーん。
なるほどな。
なんか、逆にちょっとその周りの話聞いててちょっと気になったのが、
リアクトで状態管理ってどういう設計がベストプラクティスとされてるのかなって。
結構状態をなんでもかんでもグローバルに持たせるって結構危なかったりするじゃないですか。
そうですね。
別のここのコンポーネントをリファクタリングしたいのに、
リファクタリングした結果、そこでその管理してる状態っていうのがグローバルな値だから、
別のところにも影響があってみたいなのって結構あるある話じゃないですか。
だからそこら辺滑ると、こういうデザインパターンがあってみたいなのとかってあるんですか。
それでいうとそこは基本リアクトと一緒で、グローバルには基本持たないようにしましょうっていうのが割とありますね。
あ、やっぱそうなんだ。
だからそのストア型で作ったオブジェクトをコンテキストに入れる。さっき言ったセットコンテキスト。
自分のコンポーネント、入れたコンポーネント、宣言したコンポーネントの子供でしか使えないみたいな。
なるほど。じゃあちゃんと影響範囲が限定できるっていう。
限定できる。そんな感じで限定できる。
スベルトの利点とリアクトとの比較
基本はそっちに入れましょうみたいなのがありますね。
そうなんだ。なるほどなるほど。
じゃあ本当それこそリアクトのユーズコンテキストと同じだな。
ほぼ一緒。リアクトでも基本はそっち使いましょうになると思うんですけど。
そうですね。最近はそっち使うやり方が結構流行ってるらしいっていう風に自分も聞いてる。
そうなんだ。最近は戻ってきたね。面白いね。
そうそうそう。ちょっと私もなんかユーズコンテキストの存在、私もなんか最近知ったので、あ、へーっていう感じなんですけど。
なるほど。そう。最近はそう。
でもなんか日本の案件探すとリアクトの案件ばっかりで、リアクトの案件あるかななんて最近思ってるんですけど。
そうね。まあまだリアクトは多いんじゃないかなと思っている肌感。
ただマジで滑るといいんで、これから新規の案件の方はね、ぜひ滑るとを一向いただきよろしくお願いいたします。
実際なんかその、いわゆる本番で滑ると使ってるみたいな事例って結構あったりするんですかね。増えてきている?
自分がやってる案件は最近滑るととか滑るときって使ってて、まあ自分が選んで入ったとかしてるんですけどね。
例えばですけど、スタートアップだけど結構大きめのスタートアップも名前が大きくなってきている。会社はまだちっちゃいけどねみたいなところだと滑るときって使ってて。
そこは実は滑るときっとがバージョン1になったのが去年とか。
はいはいはいはい。
スベルトキットの方ですね。スベルトキットっていうのは、リアクトに対するネクストみたいな、ビューに対するナクストみたいな感じのスベルトに対するスベルトキットっていうのがあって。
はいはいはいはい。
スベルトキットのバージョンが1になったのが去年。
うーん。
そうちょうど去年か。
そうなんだ。
ちょうど1年前ぐらいのはず。
うーん。
じゃあほんとまだまだこれからってことですね、スベルトは。
はい、そうなんです。
へー。
でもスベルト自体は結構もうバージョン5がそろそろみたいな感じなんですけど。
あーなるほど。
スベルトキットがねだいぶ成長してきたんで、多分来年だいぶスベルトを採用してくれる企業も増えるんじゃないかなとは思ってます。
なるほど。
あーはい。
いやーちょっと今、ちょうど手元でState of JS見てて、スベルトキットどこら辺にあるんかなみたいなのをちょっと眺めていた。
そう、State of JSっていうJavaScriptのライブラリに関するアンケートをグローバルにとっているサイトがあって。
うーん。
そう、ちょっとそこを見てた。結構やっぱそうね、スベルト、なんか22年のデータ見てるんですけど、結構なんか評価も上がってきてて、みたいな感じで。
そう。
今から新規でやるならマジでスベルトだと思います。
あーなるほど。
まあ好みはあるかもしれないですけどね。
そうね、まあいろいろとちょっとそうだな、なんかまあ触ってみるに越したことはないと思うので、なんかあれだな。
それはそう思います、はい。
自分が今作ってるアプリはNextで作ってるけど、じゃあスベルトで作り直してみたらどういう風になるのかなみたいなのをちょっと試してみたいなと思ってます。
そうそう、それはいいと思います。
うん。
すぐできるしね、スベルトマジで。
あ、そうなんだ。
ブラウザ上でも試せるし。
うん、まあ確かに。
環境コーチがそもそも簡単なんで、npm create スベルトってやるだけでできるんで。
はいはいはいはい、あーいいですね。
試すのもね結構簡単にできるんで、どこでもやってみるといいかなと思いますね。
やってみるかー。
いやーなんか個人開発のアプリがあると、なんかそういう感じでちょっとじゃあこれ、このライブラリで作り変えてみようみたいなのが結構気軽にできるから、なんかデータが1個あるといいですよ。
個人開発はできるだけ興味のある技術を新しくやってみたいですね。
うん、わかる。
で言うと、さっき言った案件の話で言うと。
うん、はいはいはいはい。
ビューからスベルトへの書き換え
まあこれも少人数の案件だったんですけど、ビューで結構途中までそこそこ作られちゃったやつ。
はいはいはいはい。
作られちゃったって言うと申し訳ない。
作ったやつ。
はいはいはいはい。
もう途中から全部スベルトに書き換えるっていう案件でやりましたね。
えー、逆になんでビューで作ったものをスベルトに書き換えるっていう意思決定になったんですか、逆にそれって。
なんかどういう展開でビューで作った資産をスベルトに書き換えるだけのメリットがスベルトにあったってこと?
自分はそう考えてて、まあビューでめちゃくちゃ作られたわけじゃなくて、2、3ヶ月ぐらいビューで作られた。
あー、なるほどなるほど。2、3ヶ月ぐらいだったらまあ。
これからもう2ヶ月ぐらいで割と形にしたいですみたいなわけに。
はいはいはいはい。
でもビューで結構複雑になっちゃってて、すでに。
あー、なるほど。
そんなにできてないんだけど、その共通部品がだいぶ複雑になっちゃってて。
あー。
みたいな感じだったんで、だったらスベルト今やっちゃった方が後々楽じゃないみたいなのを自分が推し進めて。
はい。
じゃあ自分が1人で3日でやりますっつって3日で。
すげー。
やったのが、その数理と関しましてね、はい。
すげー。
あー。
その後の開発がだいぶシンプルになって。
あー、なるほど。
やりやすかったですね。
いいですね。
まあでもそうか、スベルトとかだったら別にリアクト触ってる人とかビュー触ってる人とかからしたらキャッチアップはそんなに手間はかかんないから。
全然全然、むしろリアクトよりちょっと楽だな、ビューよりちょっと楽だなぐらいの感じで、なんか全然書き方違うではないですね、本当に。
まあ別にビュー書いてたところからスベルトに変えてって言っても、なんかそのエンジニアの自想主的にスベルト慣れてる人がいないからどうのみたいなことにはならないのか、なんかビュー触ってるから同じように使えるみたいな。
そうそう、で、やってる間、公式サイトでチュードリアルやっといてって言えば全然扱えるんで。
うーん、なるほど。
スベルトについての話題
そうか、そんなもん、そうなんだ、なるほど。
はい、ちょっとスベルトの話になっちゃいましたけど。
いい、いい、いい。
ちょっと自分も興味のある話題だったので。
なるほどな、スベルトはやっぱ触ってみようかな、まあまあとりあえずなんか手元のアプリを1回Nextで完成させた後にちょっとスベルトに書き換えるってのをやってみようかな。
ちょっとね、まあ1つのコンポーネントだけやってみるとかでも。
確かに、え、1つのコンポーネントだけスベルトにするみたいなことできるんですか?
それを実行することはできないけど。
まあ書き換えてみて、やってみてどうなるかなみたいな。
なるほどね。
できますね、簡単に。
良さそう。ちょっとやってみるか。
あとまた、スベルトの回、スベルトで1時間喋る回もやってもいいんですけど。
いやーちょっとスベルトについて色々と教えてもらう回をやるか。
今日はだいぶね、ふわふわなあれで喋ったので。
確かに。
下調べして。
そうね。
めっちゃ分かりやすくできたなみたいな思いますね。
そろそろ結構1時間くらい喋ったんじゃない?これ。
1時間くらい喋った。全然まだ喋っていいっすけどね。
まだ全然。
後でカットするんでどうせやれば。
ああ確かに。
体力がある限りいいですよ。
体力がある限り。
いやーちょっと普通に明日お仕事あるから。
確かに明日月曜日ですね。
今日のこれ撮ってるの12月15?
17ですね。
17の日曜日なんで。
良さそう。
になろうとすることになって。
良い感じ。
じゃあそろそろ終わりますかねこの回。
そうね。そろそろ切り上げてしまいましょうか。
というわけでお互い普段何のことやってどんな技術を使ってるのかみたいな話ができたんで。
自己紹介になったら良かったかなと。
そうですね。確かに。
ちょっとじゃあ最後に宣伝なんですけど。
毎週金曜日VRチャットとあとはクラスターっていうプラットフォームで
エンジニア作業のみ集会っていうイベントを毎週金曜日にどっちかのプラットフォームでやってます。
大体20人ぐらいエンジニアが集まってわいわい技術系の雑談したりとか
お酒飲んで技術に関係ない話題で盛り上がったりとかっていう感じの緩い技術コミュニティをVR上でやってます。
もしエンジニアとおしゃべりしたいとか自分こういう技術触ってるんやけどみたいな話をしたいって人は毎週金曜日にイベントやってるので
良かったらぜひ遊びに来てください。
ということでじゃあ今日のラジオはこんな感じでここで終わりということで。
はい、ではありがとうございました。
ありがとうございました。また次回お会いしましょう。
また次回。
