vue.jsの基本！+お便り(フロントエンジニアへ思っていること)

vue.jsの基本！+お便り(フロントエンジニアへ思っていること)

「はい本日はですねフロントエンドの中でもビュージュエースというのをじゅんぺいが学びましたのでアウトプットしていこうのコーナーでございます珍しいじゅんぺいエピソード増えてきて個人的には嬉しいですね確かにいや心臓バクバクですね確かに毎週なんかやってるんじゃないまあちょっと暇でしたから」

「夏休みがあったわけねなのでちょっと色々勉強しててまあまあアウトプットしてさらに定着させようというところでリスナー向けと言われ僕のエゴでやってますねいや」

「リスナー向けですでも大事なところですよ深堀FMのいわしさんも言ってました僕が学びたいものをやってるだけですとなるほどねエピソードのチョイスは僕が学びたいバックログっていうのがあってそれを上から選んでやってるだけですスクラムいいと思いますよとはいえなぜビュージェイスなんですかっていうところで」

「これは今暇って言ってたんですけど待機しててあんまちゃんと話したタイミングあんまなかったですよねちょっとやめてほしい待機6月SESで6月いっぱいまで現場にいたんですけど7、8月は」

「その会社とか終わって自社に戻って要は勉強期間みたいな感じになってたんですよ大人の夏休みってこと?大人の夏休みしてましたすごいいいなそうなんですよ9月1日からまた別の現場に決まったわけなんですねおめでとうございますありがとうございますここら辺はちょっと改めてSESのエピソードを作りたいなと思ってるんですけど」

「それで9月からの現場でVue.jsを使いますと勉強しておいてほしいですっていう風に言われていて他にもNUXTとかTypeScriptも使うってことなんでそこら辺も勉強してくださいって言われてるんでそこら辺も今後エピソードで話せたらなという曖昧な宣言をさせていただいておきます」

「ちょうどタイプスクリプトの本マジですかノリさんも読んでましたよねいやあのねそれとは別件でツイッターでオライリーのやつで当たったやつがへーすごい検証マスターなんでなんかよく当たりますねもう結構当たりますね検証ハンターとしてはい」

「じゃあそれは寄贈していただいた後で今度寄贈するわじゃあそこでアーキテクチャの基礎に続き順平寄贈そんなこんなで勉強したわけなんでやっていきますと早速VUJSの方なんですけど今回は僕も正直深くやれてるわけじゃないのであれなんですけど」

「ハローワールド出力できるぐらいにみんながなってくれたらいいなと思っていて音声で?音声でやばいんじゃないの?でも本当にバックエンドで僕がバックエンドでフロントの方の技術触るってなったらやっぱハードル高いかったんですよけどビュージェイズ全然そんなことなかったよっていうのは伝えたいです一つ」

「本当かな全然そんなことなかったよっていうのを伝えたいですちなみにVue.jsの説明しなくていいですかしますVue.jsの説明させていただきますなんだろうなと思って聞いてる人ちょっといるかもなと思ってすいませんVue.jsはですねJSでついてるぐらいなのでJavaScriptでこれ過去にも多分エピソードフロントエンドの歴史のりさん言ってたと思うんですけど僕もJavaScriptのフォレワークの一つとしてあるもので」

「フレームワークの一つなんですJavaScriptここら辺はちょっとMVVMアーキテクチャパターンに基づいていますとここら辺ちょっと僕分かんないんですけどモデルビュービューモデルそれがどういうアーキテクチャパターンなのかちょっと理解してないんですけど」

「一応そういうものらしいんですねノリさんに喋ってほしそうですじゅんぺいがやば調べてみるMVVM見るたびに何があって思うモデルビュービューモデルとはですねビューが見た目モデルがデータ例えばツイッターって」

「Xだったらいろんなポストが一覧でバーって並びますよねあれの見た目の部分がビュー」

「実際に使われているそのポストの内容がデータですかねこのビューとモデルっていうのがあるんですけどもこれってそれぞれバラバラっていうよりも実は相互に密接に絡み合っててデータの状態変わったらビュー変わることとかもあるじゃないですか例えば入力フォームとかでエラーが起きた時になんか赤くなってワーってなったりしますよね」

「で要はそれってデータかもしくはビューの見た目の変化を監視するやつが必要なんですよの監視をしてそれぞれなんか反映するときに通知を行っているのがビューモデルらしいですねなるほどビュージェイス待ってこれこの後話すかちょっと分かんないですけどビュージェイスって結構なんかデータが変わったらもう一回画面をレンダリングしたりとか」

「してると思うんですけどその辺のチェックを行ってる部分がビューモデルなんじゃないかなっていう気がしますねなるほどありがとうございますちなみにレンダリングってえーと」

「レンダリングっていう用語が当時分からなかったんですけど今は微妙なんですけど例えばウェブページを表示した時に上から下に向かって流れる表示されるみたいなああいうのをレンダリングって言ってるので合ってます?読み込みみたいなイメージかな要はHTMLとかってテキストじゃないですかあれを読み込んで見た目作ってるところをレンダリングっていう気がしますね」

「見た目作っている状況みたいなあんまり深く考えたことなかったけどその読み込みのことをレンダリングって言っちゃってますね僕直訳すると描画とかですよねレンダリングってググると描くことって書いてますね画像とかやっぱりテキストファイルを読み込んでブラウザ上に見た目作ってるところをレンダリングって言うんじゃないですかねありがとうございます」

「すいません描くじゃなくて表現とか演出でしたINGなんで名詞でしたING英語の勉強レンダリングですねMVVCの話ですかMVVMかMVVMコントローラー出しちゃった急にベンチャーキャピタルそっちVCと言われるとベンチャーキャピタルですよ」

「そういうMVVMアーキテクチャパターンだそうですちょっと僕は怪しいんですけどここら辺それでそれに基づいていてコンポーネント思考というところでこのコンポーネントが部品ごとみたいな感じで結構独立した部品を何個も当てはめていくみたいなそういう書き方」

「ですかねそこがまあVue.jsの強みというかっていうところの一つにもなってるのかなと思っていて質問なんですけどだいたいコンポーネント思考じゃないですか関数とかクラスとか考えるとJQueryとかは違うかもねそうなんですねファイル分割できなくないですか多分JQueryとかだったらHTMLバーって書いてそのページにJQuery読み込ませてJSのところで」

「それぞれの要素を指定して関数とか書いたりすると思うんですけど多分Vue.jsとかは本当にこのフォームのファイルみたいな感じで作ってその中にHTMLCSSJS全部書くみたいなイメージあるんでそういうのをコンポーネント思考っていうような気がするちなみにリアクトとかもそうなんですかリアクトもそうですVueからそれが出てきてるからそう言ってんのかもしくは」

「大事な要素だからそんなコンポーネントを推してるのか推してる方かな多分なんかビューはリアクトも真似て作ったみたいなリアクトが先ですかねそこのコンポーネントとかを真似てるそうコンポーネントのいいところは」

「関係あるものを一箇所にまとめれるっていうところがポイントで今までの従来のJSだと1ページバーってあってその1ページ内にある機能を全部一つのJSにバーって書いてたんでどことどこがひも付いてるのみたいになっちゃうんですけどVue.jsとかReactだとこのコンポーネントで使う関数みたいな感じで1個のファイルにまとまってそれを別のとこで組み合わせてページ作ったりするんでえーとまあ」

「凝縮度が高いって言うんですかねこれフロントでいうっていう状態を作れて非常に管理しやすいよね2回目ですはいコンポーネント思考ありがとうございます説明じゅんぺんは昼休みアラームで管理してるんだね確かにバレました12時と1時にそうなんだ開始のタイミングもアラームで決めるんだ」

「ということでまた改めて言うとVue.jsはJavaScriptのフレームワークの一つでMVVMのアーキテクチャパターンに基づいていてコンポーネント思考ですというところになってますVue.jsの歴史みたいなところをちょっとちょろっと見ようと思ってこれはVue.jsは最近2014年にエヴァン・ユーさんという人がリリースしたそうですで」

「その人がアンギュラージェイスで仕事をしててなんかちょっとやりづらいところが多かったみたいでこのビュージェイスを開発したというところがルーツらしいですね本当にフレームワーク作る人全員尊敬してます意味わかんないよねフレームワーク使いづらいな作っちゃえってなんないもんねすごいどう作るんだよ2015年にビュージェイスオープンソース化されてGitHub上で公開されたみたいですと」

「最新版現在バージョンが3.3.4でビューの2Kバージョン2の方のサポートは今年2023年の年末12月31日に終了するとのことなんでバタバタしますよ今そうなんだらしいですねなんか結構ビュー3出た時って」

「めちゃめちゃ変わるやんみたいになって大騒ぎしてたのにもう2なくなるんだじゃあバタバタしますよやばいね相当すごいね大変ですよ大変だよ多分今はいまるらしいですね最新3.3.4ですってことですね歴史はこんなもんで終わりにしますでここから基本はハローワールドを出力できるぐらいになってほしいなっていうところで多分僕の体感」

「早い人で10分ぐらいで30分あればそれぐらいいけるんじゃないのかなと思っていてちなみにそんなかかるの?って言う人いる?そんなに?ハローワールドってなんかこうなんとなく5分ぐらいでできるじゃあ5分10分かもしれないですちょっと駆け出し目線だったら30分かかる人もいるかもと思っちゃってただなんか俺が思ってる作業の外の作業も入ってる可能性もあるなと思ってないですライブラリーインストールとかからとか」

「それにしてよく分かってないどっからどこまで話してるのかネットに落ちてるコードを書いてその場で実行してその画面を見れるみたいなやつあるじゃないですかローカルで開いてねサービスとして提供されるコードペンとか有名なやつあるんですかねコード書いてブラウザ上でも実行できちゃうみたいなやつですね」

「それはじゃあブラウザなんですねブラウザで出てるサービスPyzaとかも同じことできるかなPyzaよりPyzaコード書いて実行してその結果を確かめれるというコード書く画面も用意されててブラウザのウェブアプリってこと?ウェブアプリ上でそれができるってことですね書いたコードが実行されるランタイムとかも結構選べるみたいな」

「それで言えば5分5分ぐらいですねっていう感じで触るつつくぐらいでやっていきますコードの詳細の説明はなかなか難しいんでというところでビュージェスを学ぶにあたってメリットが大体3つ言われてることがかなっていうところで1つが学習コストが低いですと比較的初心者でも取り組みやすいですと取っ掛かりやすいちなみに」

「結構いろんな言語で言われてると思っててコストが低いってそんなことないか俺がコスト低いのしか見てないだけかでも確かに逆にコスト高いって言われるとCラストとかそういうイメージでもフロントの技術は低いって言われがちなイメージあります僕は」

「新しい技術でできてさなんとこの言語は習得しづらいですって言われたらテンション下がるもんねなんでって思うなんでそんなの作っちゃったのそうだよねそう考えたら必然的にそうなるわねまあでも一応言われてますとメリットと二つ目これもうちょろっと出てきた仮想ドムを活用することで早い」

「UIレンダリングが可能ですと仮想ドムですねこの説明難しいですよねガンダムの雑魚キャラみたいないやいやいや雑魚ドムってこと?仮想とか上層とかじゃないから説明難しいですよね仮想ドム?でものりさんが一回音声で言ってたことあったなと思って具体例でいいですか具体例で言うと」

「さっきのコードペンみたいなのをイメージしてほしいんですけどHTMLのファイルHTMLのタグとかを書くファイルの画面ありますもう一個JSファイルJavaScriptJS.jsにView.jsのコードを書くんですけどその2画面があってあとはその場で書いたコードを実行して出力を見れる画面が3種類あったとしてで」

「そのVue.jsのJSファイルに出力したいデータを書いておきますとそれをHTML側で読み込むようにそのデータをJSファイルのデータを見れるようなコードを書いておきますと出力される画面の方にはそのJSファイルに書かれている出力したい文字みたいなのが表示されますプラスその際に読み込むデータが」

「どうなったかみたいななんていうんだろうめっちゃむずいめっちゃむずいかめっちゃむずいかまああれですね仮想ドムっていうドムみたいなやつを用意することによってどこが変わったかっていうのはもともとのやつと比較できるようになるんですよね2個あるから比較できるじゃないですかその差分だけを反映するから早いよねみたいなのが仮想ドムだった気がしますね分かりやすい」

「ドキュメントオブジェクトモデルですよねドキュメントオブジェクトモデルっていうのはもともとあってUGSはまたそれと別で仮想ドームっていうのを作ってて何か変更があった時にその差分を見て差分だけを更新する早いイエーイ」

「仮想DOMがないときは毎回その大元のドキュメントオブジェクトモデルDOMを全部見に行ってもう一回表示し直すみたいな感じだったから遅いっていう感じなんですかねわからんDOMっていうワードのせいでよくわかんなくなってるんですけど要するに見た目ですよね多分画面に表示される見た目まるっとJavaScriptHTMLCSSまるっと指すんですよね多分ドキュメントオブジェクトモデルはねHTMLですね」

「CSSはCSSオブジェクトモデルみたいなのがあった気がしますそうなんですね要するに見た目の情報見た目の情報で次のページとかに遷移したときの話ですかね仮想ドームが活躍するのはというかそうかも結局SPAで作ったら次のページ遷移も実際のページ遷移ではなくなるのでっていうのでその差分が差分だけ変化させればいい全ページ読み込む必要がないからうん」

「生えよっていうそうですねちょっと最近出てくるフレームワークとか逆に仮想ドーム使ってないの多いですけどね例えばアストロとか何そのかっこいい名前のフレームワーク宇宙感ありますねなんか滑る手とか何それ何語?」

「最近出てきてるフレームワークは仮想ドーム廃止して逆に仮想ドーム確かに差分更新しかしないけど仮想ドームが重くねみたいな謎説が出てるよねどっちが早いかぶっちゃけ今俺は分かってないしかも使い方にもよりそうですねそういうのなんか確かに説明ありがとうございますなのでまあ」

「一応早いですよっていう効率的で早いですよみたいな話ですねで3つ目さっき出てきたコンポーネントベースなのでパーツごとなんで再利用性高い保守性が高いっていうところこの3つがよく言われてることかなとページ全体のフォームだけ色変えるとかやりやすいということですねはい」

「使い回しもできるか使い回しもできますメリットそんな感じで一応デメリットがあるとするとドキュメントがまだ少ないみたいな言われてますあんまり多くないみたいな言われてますねそうなんだJavaScript界で言うと最弱みたいなドキュメント量で戦ってんの」

「あとは大規模なプロジェクトには不向きそうなの?これはなぜなのか僕は分かってないですけど分かったわリアクトとかと比較してってことだよねそういう話だと思いますよなんでですか?この後出てくるかもしれないんですけどデータを確か双方向バインディングみたいなことしててあれなんですよね」

「リアクトって単方向バインディングといって親から子にしか状態渡せないんですよなんですけどVue.jsって両方違うな双方向バインディング別かなんかデータが双方向で移動するんで規模が大きくなるとそのデータの流れが複雑になって管理が辛いってなるらしいですねそれでも双方向データバインディングを使っているのはその状態変化を楽にするためなんですかね」

「自由度というか書きやすさはあるんじゃないですか複雑性は少なそうですねそっちの方がこれに限らず結構いろんな言語でそうですけどその」

「自由度高すぎて複雑になるみたいなのって結構あるじゃないですかありますありますそういうのを減らすために書き方絞られてるけどみんな誰が書いても結構いい品質になるよねっていうのがこうとかじゃないですかああいう感じで自由度とコードの汚さって結構比例するなっていう気がしててそうですね使い手によるみたいなところが出てきちゃうんでねうーん」

「そのトレードオフでビューは双方向を採用しててリアクトは単方向を採用してるのかなっていう感じしますねなるほどそれゆえ複雑だから複雑になっちゃいがちだから大規模だとそうね最初は双方向だから書きやすいけどでかくなってくるとその双方向がいろんなところにデータ行き来してデータわけわかんなくなるみたいな感じかなありがとうございます」

「っていうデメリットがありそうな感じですここからビューのもうちょっと具体的なところに入っていきたいんですけどまず用語的なところでデータバインディングというのがあってこの言葉ですねバインドが結ぶみたいな英単語だと思うんですけどこれは画面に表示したいデータ」

「例えばHelloVue.jsみたいなデータを表示したいとするとそれをJSファイルの方のデータオプションっていうのを用意するんですけどそこの中に書きますとテンプレート側がそれを参照するという形なんですけどそのテンプレート側っていうのはHTMLファイルの方に例えばインプットタグがあってその中に」

「Vue.jsの方を読み込むためのなんかディレクティブみたいに書くんですけどそういうのを含んだHTMLのタグみたいなのを一応テンプレートと呼ぶような感じですかねそれをHTMLがテンプレートと呼ばれててそれと同じとかそれの近くになんかデータを書く場所があって近くJSファイルの方に」

「データを書く場所があってそれのデータを参照して表示しているってことですねそうですそうですはいっていう結びつきこれがまあ大体これがデータバインディングみたいな呼び方をされてますとなるほどねテンプレートの中と表示する場所と実際の値が別々のところにあるけどそれを紐づけてるよねって意味でバインディングって使ってるってことですかはいわかります」

「で必要最低限のコードを若干説明するんですけどまずJSファイルの方に変数名みたいなのを宣言するようになって基本的にはconstで変数名イコールview.createupみたいなのを」

「呼び出すんですねアプリ作りそうですねこれもそういうもんなんですけどこれの中にさっき言ったデータオプションHelloVue.jsとかっていうのを用意する形ですねこのコンスト変数名イコールVue.createAppっていうのがあってその中にデータを書きますそれが一つの塊があって例えばその変数名をAppAppとしたときにそのAppはそのAppをなんかこう」

「使ってそのHTML側そのテンプレートと結びつけるんですよねマウントするというか例えばHTML側にLibタグがあってそこにAppというIDを振りますとそれはあれですかHTMLタグのクラスとかIDのIDですかKaiKaiはいそうですよねLib」

「dividゴールダブルコーティションappみたいなhtmlの方のタグにidを振ってでそのidに対してマウントする形になるんですけどjsファイルの方ではさっき変数名をappにしたんでappのapp.mount」

「でカッコでシングルクオテジョンでもダブルでもいいんですけどハッシュタグつけてAPPさっきのIDの名前を持ってくるみたいな形でそこのDIVタグのとこと今JSファイルで変数宣言したビューのインスタンスを紐付けるって形になるんですねなるほどねなんかタグが一個あってそこをビュージェイス化してるみたいな感じなんですかねああ」

「わかりやすいそうですねそうなりますねおそらくJSってぶっちゃけ何でもできちゃうじゃないですかドム作ったりとか消したりとか名前書いたりとかなんでそれをコントロールしやすいようにそこの一個のタグをオラビュージェスカーってやってその後中でJSでゴニョゴニョやってるんですかねビュージェスカーわかりやすいちょっとコードの話をしたんですけどそんな感じで一応紐付けるマウントで紐付けて中身を」

「データオプションに書き込んでいくっていう形ですなのでデータオプションにHelloVue.jsって書いておいて例えばそのHelloVue.jsにはキーバリューみたいな感じでメッセージっていう変数をもう一個用意してメッセージコロンハロービュージェスみたいな感じで用意しておきますでそうすると今度はHTML側そのDivタグの中ですねAppっていう風にIDを振ったその中で例えばPタグとかでそのメッセージ」

「さっき用意したHelloVue.jsのキーのメッセージを呼び出すんですけど呼び出すとそれを読み込んで画面にHelloVue.jsって出てくる形ですちなみにHTML側の書き方としては波括弧みたいな感じじゃないですか」

「並括弧を2個つけてメッセージ並括弧と字を2個つけるこれマスタッシュ公文って言われてるんですけど樋口マスタッシュ?ヤンヤンマスタッシュ樋口おひげ?ヤンヤン口ひげ並括弧が口ひげみたいな樋口そうなんだヤンヤンそうなんです樋口へえヤンヤンマスタッシュってタコが口ひげって意味なんですか樋口そう樋口アゴヒゲベアルトネヤンヤンヤンそうなんですか樋口アゴはそうなんですね樋口アゴヒゲと口ひげ違ったはずヤンヤンへえ樋口へえ」

「面白い話聞いた無種なヒゲだよねはいマスタッシュ公文で呼び出すというような感じみたいですねこれでもうHello!VJS出力できました秒ですね5分ぐらい5分10分一応一緒にメールの方でどのバージョンのVJSを読むかみたいなのはもちろん書かないといけないですけどSRCソースイコールみたいな感じではありますけど」

「文字を呼び出すだけだったらそんな感じで書けますとような感じですなるほどフロントエンドの話を聞いてていつも思うんですけどハローワールドをするのにパイル2個も書かなきゃならんのかっていうのはなんかねバックエンドエンジニアとしては思うけどしょうがないんですけど出るのはHTMLだからね結局面倒になって確かになー」

「あとまあ今のところデータが表示されただけなんで何が便利なんてちょっとハローワールドは常に多いですよねそうだよねはい」

「今のがデータバインディングみたいな結びつきを示すような一例でしたここからはもう一個大きな要素ディレクティブというのをやりたくてディレクティブは日本語で言うと指示みたいな感じですかねディレクターって指示出す人みたいな感じディレクションみたいな感じですねというところでこれは」

「特別な属性というか書き方としてはviewのvv-なんかいっぱいあるんですけど例えばvbindvifvshowv4とかいっぱいありますここはもう本当に実装するってなったらここら辺はいろいろ調べてこんなのあるんだっていう風にやっていく部分になると思うんで主にこういうのを書くことになると思いますその指示を出すっていう風な名前の通り今言った例えば」

「V-IFみたいなところでこのV-なんとかっていうのはHTMLの方に基本書くものです例えばPタグ小なりPV-IFイコールダブルコーテーションシングルコーテーションJSファイルの方で用意しておいた変数名」

「トグルとかしておいてJSファイルの方にそのトグルはフォルスなのかトゥルーなのかっていうのを用意しておきますっていうような感じでVなんとかっていうのはHTML側にいっぱい書いて想像つくと思うんですけどIFなんでそのトゥルーフォルスで表示するのかしないのかフォルスの時は画面に表示しないしトゥルーの時は表示しますとか」

「めっちゃ素人質問なんですけどフロントエンド触らなくなってしばらく経ちすぎて本当に超素人質問で恥ずかしいところなんですがJavaScript側で書けばよくねえかって思うんですがHTML側で書くメリットってなんかあるんですかあれじゃないですかJS側で書けるのって結局トゥルーかフォルスだけなんでタグを表示非表示とか表示させるタグ変えたりとかできないじゃないですか」

「HTML側のタグの操作ができないのかそれは確かにそうかもしれないいやでもそうかJavaScript側での出力としてHTML出すことはできないんですねできるじゃあそこでタグ変えれそうですよねだけどちょっとコード的には手続き的になっちゃうっていうのがあるんじゃないですかリアクトのメリットでもあったんですけどリアクトだっけ」

「リアクトとかもそうなんですけど基本的にその宣言的にコードを書けるっていうのがすごい便利で例えばH1タグ作りたかったらH1って書けばH1タグ書けるんですよJS上でもなんですけどもしそれをJavaScriptでやるってなったらなんかその親のクラスをドキュメント.getElementByIdみたいなのを取得してそれにCreateElementみたいなのでなんか要素を作んなきゃいけないんで」

「そういうの一気に書くとしんどいよねっていうところでVue.jsとかReactとか出てる感じはあるんでその宣言的なUIの中で条件分岐かけるっていうのがメリットなのかなという気がしますねそういう設計思想なんですね抽象化のレイヤーの切り方がそうなってるありがとうございますはいっていうのでもうディレクティブっていうのがありますとV-なんとかここはいっぱい調べて書きましょう使いこなしましょうって感じです一つの大きな要素で次もう一個」

「コンポーネントコンポーネントメソッドみたいなのがJSファイルの方で使うことができてこれは自分で命名できるタグみたいな感じですかねHTML側のタグオリジナルで作れるオリジナルで作れる例えばHTMLのHelloViewJSみたいなタグを作れちゃうそのタグを呼び出したときは」

「例えばもともとHelloVue.jsっていう風な文字を出力するみたいな中身を実装してそういうタグを作れるなんでタグをHTMLに書いただけで文字としてHelloVue.jsと出力されるみたいな別で作ったコンポーネントを読み込んでるみたいな感じですかはいそうですねJSファイルの方で作ったものをHTMLで読み込んでる」

「ウェブページがあったらヘッダーのコンポーネントとサイドバーのコンポーネントとメインの部分のコンポーネントを作っておいてそれを1個のページの中にそれぞれ3つ読み込んで表示させてるみたいなそんな感じで自分の使いたいものをあらかじめ用意して使い回しまくれますとコンポーネントこれも便利なやつで」

「エラーメッセージとか便利そうですねたぶん共通で使えますし仕様変更があったらまるっと一気に変えなきゃいけないページ読み込みくるくるとかあーなんて言うんでしたっけあれなんて言うんだっけくるくるって言っちゃうもんねはいっていう感じでも」

「ビュージェイス必要最低限これとりあえず取っ掛かりとしてディレクティブとコンポーネントそういうのあるよっていうぐらいで今日は終わりにしたいと思ってますあとデータバインディングですね質問いいですか20個ぐらいそうですよねダメですよ20個は許しませんよじゃあちょっとでいいんですけどじゃあまず」

「UJS今回勉強したじゃないですか最初どういう印象を持ってて実際にやったらどう簡単だったんですか学習コスト低いなみたいな話を最初にしてた気がするんですけどまずどういう印象を持ってたっていうまずJavaScriptも覚えてなかったんでうわぁいけんのかなっていうのをずっと思ってたんですよJavaScriptのフレームワークなんでだから」

「ちょっとむずいなと思ってフロントそもそもあんま好きじゃないし単純に言語を知らなかった的なところがハードルだったって感じですね実際やってみたらどうでした実際やってみたらこのなんかさっき言ったコンスト変数名イコルビュークリエイトアップみたいなもうこれみたいのがあってその中をある程度自由度高く書くみたいなだけだったんでなんかやること少ないみたいな感じでしたね種類はいっぱいあると思うんですけどうんうんうん」

「呼び出し方とかけどここしかいじらないんだみたいなご威力があれですけどこんだけでできちゃうんだみたいな感じですよね逆にちょっとJavaScriptの勉強をしたいなとも逆に思ってますどのくらい便利になったのかなって書きやすくなったのかなとかJavaScriptっていうかJQueryとかでやってみるといいんじゃない?」

「そうなんですか?まあJavaScriptでもいいかJavaに比べたら簡単な気がしますねJSは確かに正直前も言ったかもしれないですけどノリでやってきたんで僕はJavaScript急に触らなきゃいけなくなって急に触って短期間で終わってしばらく触らないっていうのを繰り返してるんで僕はなるほどねJSは僕結構好きですからねそうなんですねうん」

「あと何で学習しましたこれもお得意の動画でYouで見る学習して簡単なタスク管理アプリみたいなとかひたすらさっきのディレクティブのいろんな種類をバーっと触っていくみたいなっていう感じでしたねなるほどねちなみにこれからビュージェイスを学習していくという人に対して」

「何かアドバイスとかこの辺ちゃんと理解したら学習しやすくなるよみたいなのありますかいい質問しますねでしょすごいメンターだからさすがだわ勉強になりますやべえでもなさそう答えがなさそうとりあえず概要を知るだけなら午前中の時に終わるなと思ってであとはさっきのディレクティブどんなものがあるのかっていうのをこう」

「まず知ること覚えてなくていいと思うんですけどこういうのがあるんだっていうのは知っておくと覚えてなくても知ってたら調べてこれ使おうってなるじゃないですかそれができるといいなっていう風に思いましたなるほど概要してディレクティブをこんなのあるんだっていうので本当はその双方向バインディングみたいなのとかも使いこなせたりとかっていうのはあると思うんですけどうんうんうん」

「そうこうバインディングに関しては僕がちょっとまだ勉強しただけでどういうメリットが発生するのかなっていうのが理解しきれてなくてですねメリットねあんまり想像できてないんで具体的なあれなんですけどっていう風に感じましたなるほどありがとうございます」

「盛り上がりませんね全然ありがとうございます僕ちょっとビュージェイス苦手なんですよねそうなんですね苦手ポイントがまさにさっきじゅんぺいが言ってたディレクティブでディレクティブ覚えなきゃいけないっていうしんどさがめちゃめちゃあるんですよね僕の中であとVIFって何のVやねんビューのVじゃないのビューのVなんだけどただ長くなっただけだな別に競合してないんですかIFの」

「HTML上に書くなら別にいいんじゃないインターフェースと被るとかないか被んないんじゃないかな被んのかななんかもっとあったんじゃないかなと思いながらいつもVなんちゃら見てるんですけどディレクトルに全部Vって多分プレフィックスがついてるんですよねっていう思想なんでしょうねそう」

「ビュージェイスってビュージェイスのルールを学ばなきゃいけないっていうのが僕にとっては最大の難関でしたね他はないんですかリアクトはマジでライブラリなんで書き方はJSなんですよただ便利な関数が用意されててその関数使ったりしてうまく書いていくみたいな感じで独自記法なくて全部JSなんですよ文法はそうなんだそうそうそうそう」

「っていうのがあって個人的にはリアクトの方がすでに知ってるJSだからやりやすいなって思っちゃってるんですよねJSの他のフレームワークとかってどっち寄りなんですか独自規模のが多いイメージなんですけどなんとなく僕はそんな触ったことないんですけどJクリぐらいしかないなと」

「あれなんか言ってますじゃんけNEXTとか言ってますじゃんけNEXTはねリアクトと同じなんでリアクトをウェブアプリケーション用に作ってるのがリアクトを使ってウェブアプリケーション作りやすい形にしてくれてるのがNEXTJSですねうんうんうん」

「そうなんだな他だと僕はJQueryしか使ったことないんですけどJQueryも言うてライブラリなんで関数とかが別で定義されてる感じですねダラーとか使うじゃないですかJQuery書くときダラーセレクターみたいな感じで書いたりするんですけどあのダラーも別に関数なんですよダラーっていう名前のうーん」

「それによってJQueryのオブジェクトを作っててそのオブジェクトに定義されてるメソッドどれでも使えるよねみたいな状態にしてるのがJQueryなんであれも文法としては変わんないから分かりやすいなって感じなんですけどねなるほど結構僕はVue.jsから入ったんでそういうもんだと思ってたんですが違うんですねあれはねびっくりしちゃうそれはあるかもなそうですね」

「その観点なかったな他の言語でも言えそうですけどただ独自記法あるのなんかあるかなって思ったりしますね本当にちょっとはあるんですけどでもちょっとで済むじゃないですか大体確かにいい観点ジャバスクリプトあんま覚えてなかったからそこなかったですなるほどね」

「こういうもんだって入ってるもんねその方が入りやすいと思う多分別のフレームワークとかライブラリー触った時にギャップがあるかもしれないけどその時にのりさんの気づきがあるかもしれないねそこデメリットの一つかもしれないですねもしかしたら逆にそれが最初から受け入れられるなら書きやすいから作ってるっていうのはあるだろうしね抽象化してるってことですもんね本当はもうちょっといろいろ書かなきゃいけないのをVなんちゃらで済ませてるように」

「してるっていうのが多分ビューのストロングポイントだとしてると思うんで多分島を作ってねそこからねお客さん話さないようにする工夫かもしれないですね島を作ってそれはマーケティングのなんかですか島流しの流儀ですか島流しの時島作ってないだろあるとこに流すよ最初から確かにね沖の島とかねそうそうそう」

「沖の島ってどこですか?違う?沖の鳥島いやいやそれはあるでしょちっちゃい島でしょほぼコンクリートはいっていう順編のピューの話はいっていうので一応思ってるより学習コスト低いはずというのをとにかく伝えたかったですちょっと伝えきれなかったかな」

「これ現場で出てどういう感想になるか楽しみです気になりますね難しい実際こうこれ触りは楽だなっていう感じでも深く踏み込んだ時にむずくなる時あるじゃないですかだいたいそうですよねまあそうね本当にチュートリアルってやった感出るだけですよねそうそうそうそうこう言ったらあれですけどこの時何?みたいなのめっちゃあるもんなめっちゃあるうん」

「量も半端ないしねだからこれが実際現場出て甘かったってなるのか現場も楽勝でしたってなるのかこうご楽しみ絶対なりますよね僕ビュージェイスやってたんで入ってって他の人に教えてほしい確かに聞いてくださいね」

「絶対嫌だ双方向バインディングなんでどういうことやねMVVM最高っすね頑張ります頑張ってください新規一点楽しみアフタートークでできればいいですねそうねついにフロントの話できる人が増えたか」

「いいな頑張ってください自動テストとかもあるのかなあるんだろうなジェストかななんかわかんないですけどねサイプレスなんかなんかわかんないですけどねその辺も楽しみ確かにはいでは最後エンディングトークに移りますお便りたくさんいただいているので前エピソード読んでるみたいになってるかもしれませんがありがとうございます恵まれております」

「恵まれておりますというわけでラジオネームひまねこさんからのお便りですひまねこさん影響受けてるじゃないですか名前がおー確かにペットできましたね我々にいつも散歩中に拝聴させていただいてますかいちさんの走り力と言語化力のりさんのこぼけ力と知識力」

「順平さんの後輩力と伸びしろ力というお三方のバランスがすごくよく飽きのこないポッドキャストナンバーワンです嬉しい一言ですねBGMもいいんだBGMも良き勝手に読むで読めてくださいすいませんなんでさっきの部分読むんですか勝手にすいませんこれからも楽しみにしてますとお便りいただいてますありがとうございます順平はすごいね後輩力と伸びしろ力を全員に会う人全員に言われてるのはすごい」

「なんかポテンシャルが見えるっていうのはすごい確かにねこいつはすごい才能だって思われてるってことでしょ伸びるよそれしか言うことがないのかもそれでも言われてるときじゅんぺいさん伸びしろないですね言われたら終わりだから確かにそれはメンバーチェンジだ俺らからしたらそっちの方がいいかもしれないなるほどね」

「難易度高い方がやっぱねためになるからねはいっていうのでポッドキャストで話してほしいことお三方バックエンドエンジニアが思うフロントエンジニアへ思っていることかくよしやしなどがあればお聞きしてみたいですでこれだけは最低限知ってくれかくAPI関連とかこの人とは仕事しやすいなとかっていうお題いただいてますちょうどねフロントエンドの技術のエピソードやった後はい」

「いいテーマですね僕からいいですかあんまりないというかフロントとバックエンドでがっちり分けて仕事をしたことそういう現場だったこともないですし技術的なところも正直ちょっとよくわからないので本当話しやすい人だったらいいなっていう感じになっちゃいます僕は本当に」

「そうですねそんな感じですそれだけになっちゃいます僕は人柄超大事だよね超大事絡みづらいやつとかやだもんなじゃあ次僕いいですかはい」

「僕はコミュニケーション取りやすい人っていうのは順平と一緒なんですけどちょっと毛色が違くて情報のやり取りっていう意味でバックエンドとフロントエンドの間で情報のやり取りあると思うんですよ例えばバックエンド側からするとオープンAPIの設計書で叩くエンドポイントを明示的に示してあげるこれがないとやっぱりフロントエンド開発しづらいというのがあったり」

「じゃあそのオープンAPIのエンドポイントを設計するために必要な情報は何だろうかって思った時にフロントエンドのペーパープロトタイプだと思うんですよ僕はフロントエンドの画面案がこういう風になってる表示するデータはこれだじゃあデータベースにこういう情報を入れなきゃいけないしAPIはこういう情報を返さなきゃいけないなっていうのがあると思ってて」

「企画とか要件を定義する人と目に見える形でプロトタイプを作りそのペーパープロトタイプをバックエンドに展開できる人これが僕がいいなと思う人です具体的これがないとしんどいです僕はだからアンチパンダなんでいうとウィルもなくバックエンドの設計待ちの人はしんどいです」

「なぜならその時どうするかっていうとバックエンドの人がなぜか企画の人とやり取りをして画面をない画面を逆算して画面もちょっとイメージしながらはいえっとバックエンドの設計しなきゃいけなくなっちゃうんでそれで順番おかしくないかとか効率よく悪くないかって思っちゃいます僕は確かにちなみに開地の職場だとフロントエンドの人がその画面の見た目作ってるんですか」

「そうですねデザイナーいなくてあんまりUIデザイナーの人がいなくてフロントエンドエンジニアの人がデザインすることが多いですねなんでしょう結構ビーム系なんで僕うちはそんなデザイン凝ってないっていうのがまあ」

「良くも悪くもって感じですフロントエンド結構デザインも触らせられがちだけどあれって我々がコピー機直す壊れたって話しかけられる時みたいな感情なのかなってちょっと思ってたんですよねそんなことないと思いますよそうですね言うて叩き台を作らないですかフロントエンドって」

「僕前開発してた時は6年前とかですけどパワポの画面案があったんですねそれは企画の人が作ってたのかな当時僕は1年目とかだったんででもそういうのがなければどこに何配置したらいいかもよく分かんないしどこを何色にしたらいいかも全然分かんなかったんで少なくともそういうのがある必要があるデザイナーがいない時点でフロントエンドじゃないですか確かにバックエンドはやらんわな」

「企画の人にねあー忘れた流行ってるデザインツールフィグマ触ってもらうとかここですからねアドビエックスDとかやってもいいと思うんですけどここではあると思うのでフロントエンドかなと思ってますデザイナーがいるのが一番いいですっていうのが僕の思っていることなるほど」

「具体的逆に言うとバックエンドエンジニアはエンドポイント設計ちゃんとして綺麗な形で展開できないと刺されても仕方ないなと思ってますなるほどねノリさん僕ですね」

「質問ってなんだっけやりやすい人だっけ吉橋フロントエンドエンジニアに対して思ってることですね思ってること一個思ってるのはやっぱ大変そうだなってのはめっちゃ思いますねあーめっちゃ思う技術出すぎじゃねーみたいなそうね本当にそう思うキャッチアップやるのちょっとしんどいなっていう気持ちで見てるんで多分ネクストだけ取ってもなんか」

「13出ましたこんな機能追加されましたこれ破壊的に結構変わるじゃんみたいなのとかあったりするんで大変そうって思いながら見てますね僕もその観点あってテストが重い前も言いましたけどバックエンドよりもテストが重くて確かにそれも大変そうあるねブラウザもねバックエンドAPIなんてねクライアント1個で試せばいいんだけどフロントはChromeFirefoxSafari」

「めんどくさよねエッジしかもスマホもみたいなそう言わなきゃいけないしねなるほどiPhoneProとSEで画面サイズ違うけどどっちも見れるみたいなねあるわ大変そうしかもさ実機だけこれ動かないんだけどみたいな時のデバッグのしづらさある謎うん」

「そういうのは大変そうだなって思いますね確かにそうなんですよ僕はまず大変そうだなっていうのと感謝しておりますって感じですねそこには確かに本当に感謝しておりますこういう人だと仕事しやすいなって思うのは」

「なんかこうウェブサイトの表示の流れというかああいう仕組みまでちゃんと知ってる人がやっぱ嬉しいなって思いますねそれはなぜですか例えば開発途中というか新しくプロダクト作りますよってなってAPIとクライアントで分かれてますとでどっかで動かしててAPIが進みました開発進みましたとでクライアントの人がAPI叩いたけどエラー返ってきましたみたいな感じで質問くるんですけど」

「バックエンドの作業を進んでマイグレーションが必要だったんでマイグレーションローカルで実行しないと動かないじゃないですかそういうのとかって全体の仕組み分かってないと気づけない部分だなと思っててそりゃそうですよねエラー文見たら分かりそうですよね」

「このレコードねえよみたいなエラーが返ってきてるデータベースの500系のなんかわかんないですけどそうなんですよだからこうなんかまずバックエンドの知識も多少あってほしいなっていうのとあとはあれですかねhtml間違えたhttpとかちゃんと知ってほしいですかねどの程度ですかたまにこう使用書追いつかないときとかないですかバックエンドの人今手埋まってて使用書作れねえみたいなっていう時に」

「クライアントが先行して実装するじゃないですかという時にAPI仕様書を書いてほしいんですけど書けないみたいな人ってやっぱいるんですよねそれはあるかもしれないですね確かにあれって別にどっちが書いてもいいじゃないですか欲しいデータ書いてくれればそれで実装するしいいのかなと思ってるんですけどそれできないとちょっと」

「スムーズに進まないなって思っちゃいますねまあねできたらもちろんできた方がいいですね確かに」

「フロントの技術尖り散らかしてるっていうよりも薄くバックエンドまで知ってるよっていう人の方が働きやすいなって気がしますね開発プロジェクトに構成されるメンバーがあるあるかもしれないですね尖ってる人いた方が強いのは間違いないんですけどだいたい無難なシステム作ると思うんで無難なシステム作るにおいては便利屋の方が便利なんですよねそうなんですよ全体見えてこうやって動けばいいよねってのが分かってる人だとスムーズに進んで」

「仕事しやすいなって思いますねなるほどよくあるスキルの伸ばし方でいうT字型みたいな薄く広くできるものがあってどっかに尖ってるのを目指そうみたいなのをよく言いますけどそういうとこに通じるかもしれないですねそれです」

「その辺はねあの何でしょうじゅんぺいも含め皆さんみんなでそこ目指していこうって感じですねそうねなんかフロントならJSやってるんでなんかノードJSでサーバー立ててもいいのかなって思いましたねうんうんうんまあ言語は一緒ですからねJSだからねはいはいっていうのでじゅんぺいなんか気づきありました雑ですけど急にないかいや」

「響いてそうな雰囲気出してたんでそういう観点あるんですねやっぱすごいなそういう観点ってそういう観点などういう観点そういう観点フロントとバックエンドでちゃんと分かれてるって感じなんですよね職場がそんなこともないの?誰の?あかいさんものりさんもです」

「今の話とかの経験の時は俺は分かれてることが多くてただ染み出すことはあるって感じ結局チームのタスクを消化するのがチームのゴールだから染み出すことはあるって感じ僕のとこは分かれてるんですけど僕今ちょっとそのプロジェクト見てて」

「ララベルもネクストも全部一人しかレビューできる人がいないんで気合でやってますね全部しんどそうそれのりさんが全部レビューしてるっていう気合でやってますねそうですよねフロントの時死にそうになるけどねいや大変だなそれはまあなんかそうですねそういうフロントとバックエンドの掛け合いみたいなのが経験ないんで」

「そういうことねじゃあこれからできるわけだそれが次も別に分かれてるわけじゃないのか分かれてるというかみんなビューもパイソンも触るみたいななるほどねすごいよねでもやろうと思ってもなかなかそこにたどり着けない気はしますけどねだからすごいチームだと思いますよいやまあ確かにでも絶対どっちもできた方がそれはそうです間違いないですみんな全部できるのが理想ですスクラムチームとしても」

「僕の守備範囲ここをプーってやられるときついよねモチベーション下がりますその辺はやれるようになるといいですね勉強になりましたではお知らせですかはいお願いしますはいXですかねハッシュタグひまじんプログラマーでご意見質問感想ガンガンツイートしちゃってポストしちゃってください1日3回は検索してるんでね3回」

「はいプラスGoogleフォームですねお便りまだまだ質問お待ちしておりますのでガンガン読んでいきますよろしくお願いしますお気軽にどうぞはい今日はこんな感じですそれではまた次回バイバイ」