新現場のエンジニアがハマる落とし穴をかいちの経験から学ぶ話(React編)

「楽しそうですねアフタートークいいですか?はいどうぞさっきの話の」

新現場のエンジニアがハマる落とし穴をかいちの経験から学ぶ話(React編)

「じゅんぺいくん僕転職したんですよ実は何度も言ってますけどねちょっと前のエピソードで開発現場入って1週間でPythonのバックエンドを2機の」

「コミットしたぜって話をしたんですけど多分順平は聞けてないと思うんだけどね聞けてないですねしたぜっていう話をしてで今スプリント1個終わって1週間スプリントでで2週目に入ってるわけなんですけどなんと2週目フロントエンドをやってますえ?びっくりした俺もびっくり?そんなスピードで技術変わるんすか?使う技術なんでしょう」

「システム全体をやってるんで割り当てられたタスクが割り当てられたタスクっていうか余ってたチケットがそれだったというかなるほど先週というか前回のスプリントでやってたPythonのチケットがなかったからフロントエンドをやらざるを得なかった気持ち的にはどうなんですかやりたかったいやまあまあまあまあいいかなまあまあまあどっちみち後からやるだろうしあとなんならまあそうねその」

「1月はJavaScriptの練習勉強してたので今回TypeScriptReactで開発をしたんですけど僕バックエンドのキャリアが長くてインフラとかね全然わからないよね」

「全然わからんっていうのでただこういう新しい現場に行って新しい技術で急に1機能実装しろって言われることって全エンジニアにあることだと思うんですよね僕も今まで何回もやりましたただ今回やっぱり強くてニューゲームじゃないですけど7年もエンジニアやってねーわ5年か4年くらいエンジニアやってるんですけど」

「さすがに板についてきたじゃないですけどだんだんとね正解までいかないにしろそういうキャッチアップ&自走するみたいなところの流れがある程度形式化してきたかなと思っているので素晴らしいすごい」

「まだまだなんですけど1年目とか2年目の時の俺カイチに向けて届けたいエピソードをちょっとお話しします本日はまずバックエンド畑のカイチがどうやってフロントエンドの開発を全く知らないやつを1週間スプリントで多分終わるほぼほぼ終わったどうやってキャッチアップと実装を進めたか聞きたいあとはリアクト」

「の思想みたいなところをちょっとお話しさせていただきますいいですね思想なんですね思想めっちゃ抽象化するとね機能の話しませんもちろんでもそこもポイントでね思想って言ってるのがポイントですね知りたいですね一応一応ビューボク使ってますからそこら辺気になりますはい」

「ちょっとしか話さないかな今回は全然全然まあちょっとボリュームがいっぱいあったんでリアクターの思想って話だとねこれはまあ時を置いてもう少し別のエピソードにさせてもらえればなと思いますはいはいじゃあ最初にからじゃあちょっと行きますお願いします逆にですねはい僕あのこうやってキャッチアップしましたっていう話をするんですけどうんじゅんぺーからこうやった方が良かったんじゃないっていうのがあったらマジで欲しい」

「マジでですねマジで欲しい分かりましたこれはブラッシュアップしていこうっていう話ですし僕も結構リスキーな話なんでこれこいつキャッチアップ下手だわって思われるかもしれないんで確かにめちゃめちゃ勇気ある行動だと思ってそうですね確かになのでちょっと本当に何かあったらブラッシュアップのためにコメントくださいはいじゃあもうあの」

「隅々までいやらしい言い方で全然それでお願いします見つかんなそうちょっと前提の整理ですけどさっきリアクトタイプスクリプトとか言いましたけどそもそもタイプスクリプトって何ぞやって話めちゃめちゃ簡単に言うとJavaScriptをちょっと派生というか発展させたやつで型」

「定義ができる肩当ての縛りがめちゃめちゃ厳しいjavascriptがまあタイプスクリプトですねまあこんなんで終わりしますねはいでもう一個リアクトはいリアクトは何かというとjavascriptを使ってuiと見た目の方のアプリケーションを作るためのライブラリーフレームワークじゃねっと俺は思ってるんですけどなんかライブラリーって言うらしいですねですね」

「でこれはの今一番人気で2022年10月時点ではまあそのjavascriptのライブラリーui作るライブリリッパーあるんですけど1リアクトにビューでビューに4倍の差をつけている圧倒的に使われているのがリアクトですねでこの今回のちょっと」

「仕事の実際にやってる中の壁にぶち当たって乗り越えるっていう話もするんですけどその中でリアクトな話もするんですが今日話を聞くとこれが理解できるようになりますコンポーネントのステートをフックでコントロールするんだっていうだから」

「血吐きました今コンポーネントのステートをフックスでコントロールするんだっていうのを理解できるようになるのが今日の話ですありがとうございますよく分かんないけどこれが分からないとリアクトで機能作れませんほうほうほうマジでここに苦労しました僕はえ」

「3つの単語が特に分かんないですかねコンポーネントステイとフックス順平に伝わるか分かんないんですけどFF13っていうゲームがありましてめっちゃ好きですよライトニングファルシュのルシオをコクーンでパージするっていうワードが当時バズりましてそうなんすか何言ってんのっていうねいや懐かしいそう」

「FX13やってない人からするとマジで何のことか分かんないんですよ確かにファルシのルシオ虚空でパーティーするのね懐かしいなめっちゃやってましたよコンポーネントのステートを複数でコントロールするのはこれに相当するんじゃないかよかった順平に伝わった伝わりましたリスナーの人3割ぐらいにしか伝わらないと思うんですけど3割伝わるからまあまあまあぐらい意味わかんない今日はだからこれが分かるようになりますありがとうございます」

「僕は事前にJavaScriptやったって言いましたけどTypeScriptほとんどやってないんでリアクトもマジでやってなかったんでヒーヒーやってましたと開発開地君よろしくと言われました自分もそう言われたと思って想像して聞いてほしいんですけど僕がやるタスクそもそもなんだっていうとペーパープロトタイプを確認して」

「お手本ですねこういう見た目になりますっていうのを確認してコードを実装していってなんでいいですかってPOにレビューして良さそうだわってなったら自動試験実装していってコードレビューしてもらってプッシュするマージするみたいなタスクを1週間でやるというのが今回のタスクでなるほどいやいけるかこれと思ったんですけど1週間ですよねレビューまで終えるんですよねそうそうそう」

「でマージされてCICDでデプロイされると早っ早いよね意外にどうにかなるんですけどまあだからやばいめっちゃ負けてやんなきゃっていうのでゴリゴリ進めていったわけですいやースピード変わりますねまずコードの把握から始めるんですよもちろんですよね僕はちょっと前のエピソードでもお話したかもしれませんがリポジトリっていうのかなコード全体の構造を把握していきます」

「そのために一つの機能を追ってみるということを僕はいつもするんですけどどういうことをやるかというと多分今回は何々の一覧を実装するみたいな感じだったんで他の画面で何とかの一覧実装してるやつないかなとまず探しますで探してみてこれ機能近そうだわと思って追ってきますとJavaScriptのアプリケーションって大体」

「なんだろ、App.js、Main.jsみたいな、そのすべての支えのとなる、ソです、みたいな、元となるソースコードです、みたいなやつがいるんで、そいつからルーティングされて、各ページのパーツが呼ばれていく、みたいな感じになるんですけど、そういうふうに大元から一つの機能をたどっていって、たどっていって、どのような流れになっているかなとか、どういう風に」

「どういうファイルいじんなきゃいけないんだろうかというのを把握していきます一通りこれでこうやっていじるんだなというのを把握したらどういうことやっていかなきゃいけないんだろうというその把握はちなみにどのくらいの時間でいけました1時間2時間くらいかな」

「いやそんなかかってないかな1時間くらいかもしれないちゃんと読んでないですこの時はざっくりな流れですよね本当に大事なのはどこのフォルダディレクトリに何のファイルが入ってるかとそのファイルが何をやってるファイルなのかをなんとなく知るただ正確に知る必要はないと思ってます僕はそれをどっかメモとかに書き出しておくみたいなとこはしてます頭の中だけでスケッチ書いてる」

「絵描いてる字じゃなくて何図でしたっけER図そんなちゃんとしてないもっと丸と矢印みたいなやつあいやいやあんなのそうでっかい丸の中にこの丸があってこの丸とこの丸に矢印ついてベンズ?ベンズって言うんでしたっけ数学のベンズでもないなベンズってあれでしょ集合でしょ集合ほんと丸矢印どこにかぶってるエリアみたいなそうそうそう本当にそんな感じ簡単なやつ」

「構造を本当に作れればいいぐらいだからねなるほどはいざっくり把握しましたでじゃあ実装に移るわけですよ僕ここで一つ落とし穴があると思ってますそしてこれは過去の俺に言いたいこと既存の機能をまるっとコピペして一部分変更して機能を実装しようとすることないですかとしますかつての僕はそうでしたけど似たものを見つけちゃったらしますねこれ良くないんですよ」

「これ良くなくてですねこれをやると何が起きるかというとコピーしてなんとなく多分こうやろうって変更して動かすとエラーがボロッと出てきますと出てきますいっぱいねこのエラー解決してこのエラー解決してよし今度動くはずだってやるとまた別のエラーが出ますと」

「そうして本当に進んでるのか進んでないのかよくわからないエラーのドツボにはわっていくということが発生するんですよあるなそうすると良くないと思ってて何が良くないかっていうとまず進んでる実感がないので精神的にしんどいのが一つとあと学びがない構造を把握しづらくなると思っててだからちょっとずつ進めるべきですこれはもう」

「新人時代の僕に届けたい急がば回れ急がば回れまさしくなのでフロントエンドの開発ってだいたいねリクエスト受け取ってパックエンドのAPIと通信して返すっていう流れになると思うんですけど例えばAPIの通信をハードコーディングにしてハードコーディングって言っているのはAPIのレスポンスっぽいやつをただただストリングで返すようにしてでちょっとずつ実装していく」

「っていうのが大事だと思うんですね本当にそれは最初はAPIの通信もそうですし他のファイルじゃないな他のライブラリというか関数とかを呼び出す処理も全部ハードコーディングで一回やってみるとかなんならレスポンスというか最初の処理とか全部書かないでそのままの文字列返すとかうん」

「そこから始めてだんだんと実体のものというか実際のものに変えていくということが大事なのかなと思ったりするんですがただ想像上これでうまくいくなと思ったんですけど僕はリアクトという壁にぶっちゃけますここでこれはとんでもないとまずそもそもですよフロントエンドの開発って何するのかもよく分かっていなくてバックエンドってJSON回数の方がゴールなんですよ」

「だいたいですねフロントってHTMLCSSって書いてあるのがゴールなんですね僕それを理解してなくてそもそもページの情報じゃないなページを解説するんだっていうのからまず理解始めますこんなのは気づくか気づかないかだけなんで今日の本質はまた別なんですけどリアクトの壁」

「僕がさっき言ったコンポーネントのステイトをフックスでコントロールするんだという話で激詰まりして実装ができなかったのでコードを見てていろいろなメソッドありますけどそのメソッドをググるとこういうコンポーネントがとかステイトがみたいなのが出てきて言ってる意味わからんとなるわけなんですよまずいこれはまずい」

「よしちゃんと勉強しようというので僕はリアクトの公式ドキュメントと技術書をリアクトの公式ドキュメントを業務時間中にざっと読み始めるんですね本日の情報ソースなんですけどここでリアクトの公式ドキュメントとあとはリアクトっていうひらがなでリアカタカナでクトの技術の同人誌かな多分」

「でちょっと本を参考にしながらお話しさせていただきますリアクトリアクトの間に点があるんですかいやないひらがな方かなあーそういうことかはい2のでまず最初ちなみに公式ドキュメントは」

「日本語で読んでる日本語のものが用意されてるあるリアクトの公式ドキュメントでめちゃめちゃ綺麗だしめちゃめちゃ分かりやすいなんか聞きますねめっちゃ充実してるっていうめっちゃびっくりしたあんまないコミュニティがでかいからそうなんだね多分ユーザーも多いからなんだろうけど面白いしかもちょっとふざけてるというかユーモアユーモアがあるユーモアがあって読みやすかったいいな」

「いいですねどういうとこ見たかっていうと公式ドキュメントってさめちゃめちゃいっぱいあるけどクイックスタートとあとチュートリアルチュートリアルはい僕は何に触るにしてもざっと読むようにしますねそこを見ると大体の使い方が大体わかるっていう感じなんで一つポイントですねなるほどな」

「っていうのでそこで僕はさっきのコンポーネントやらステイトやらフックスやらっていうところをちょっと理解していくわけなんですよはいはいはいっていうのでちょっとコンポーネントのお話に移りますはいコンポーネント英語で直訳するとパーツとかそういうニュアンスですね要素とか要素とかでこれはですね何かというと見た目ですねホームページというかウェブページってHTMLとかCSSで書かれてるわけなんですけども」

「わかりやすくどうしようツイッターのツイッターって言わないね今ねXXのモバイルアプリの画面をなんか想像してもらってですねやべ今スマホ手元にないからわかりづらいんですけど想像で言うとヘッダーがあるんですよねヘッダーって上にね何ヘッダーじゃないですかなんかXって書いてね」

「ヘッダーがあるわけですけどとかあとなんか下の方にねホームとか検索とかフッターって呼ばれるパーツとかであと真ん中にタイムラインが四角いポコーンってありますけどああいうなんかそういうパーツパーツそれぞれをコンポーネントと呼んでますなんかhtmlcssで言うとまあdivタグとか何だか分かんないですけどまあタグで分けられるようなパーツパーツそれをコンポーネントと呼ぶわけなんですけど」

「このリアクトにおいてはこのコンポーネントを書くときにJSXって呼ばれるまたJavaScriptとはまた違う書き方で書くんですねへーこれも混乱要素でねドットTSとかJavaScriptのファイル書いてるのになんだこの書式はとえ?え?」

「拡張子がJSX?拡張子じゃないJSX.ts?違うえっとねむずいんだけどこの後出てきます?いや出てこない普通にそのリアクトのアプリを書いてる中でその書式を使うだけえー急にえーわかりづらそうなんですねまあなんか今ちょっとどうやら調べたら」

「JSXというかコンポーネント単体でファイルを書くときは.jsxっていう風に書くらしいんですけども僕が今やってるところとかだとタイプスクリプトなんでタイプスクリプトのファイルに普通に書くJSXスタイルでスタイルというか書き方でこれは本当にHTMLみたいなものでHTMLをXMLのファイルっていうのXMLの書式あるじゃないですかはい」

「あんな感じで書けるんでHTMLよりは割とシンプルに書けるような書式ではあるんですけどJavaScript書いてると思ったら全然違う書き方が出てきてめちゃめちゃ混乱しましたそれは確かにそうなんだなのでリアクトっていうのはそもそもページの見た目とロジックを割と一緒にして」

「書いていくMVCみたいに分かれてるんじゃなくて機能単位で機能単位で割とビューとあとロジックが一緒になってるみたいな書き方になるんですねはいはいなるほどちなみに前提としてリアクトだと基本的にはもうSPAシングルページアプリケーションみたいなイメージであってます?」

「そうじゃないときもある物によるんじゃないかな割とシングルページアプリケーションが多いって感じがするけどね多分SPAとかの方がコンポーネントとしては想像しやすいなと思ってちなみにシングルページアプリケーションはあれですね本当に1ページTwitterのアプリとかもそうなのかな」

「1ページまるっとダウンロードしてで画面の中の一部分だけを切り替えて動作していくようなもので多分ツイッターもそうだしページ繊維がないって感じ古いウェブページとかだとまるっとページロードして別のページ飛びますからねそういうのがないようなウェブアプリのこと言いますけどそういうのを作るのに向いてるライブラリー理解ですにはなってますね」

「今までちょっとコンポーネントの話色々してきましたけどたださっき言ったようにコンポーネントって場合によってちょっと表示の仕方変わったりしなきゃいけないんですよ例えばで言うとTwitter思い出返してもらえるとツイートしましたツイートした後に」

「ツイートしましたっていう出ますよねそういうのをインタラクティブに出すっていうらしいんですけどユーザーのやった操作に対して会話的というか対話的というかそれに応じて画面側がどんどん表示を変えるただそういうことをやらせるためになんとここでステイトを持たせる必要があるんですね」

「コンポーネントに日本語だと状態とかですかそうそうしかもこのコンポーネントって今コンポーネントって言ってはいるんですけど見た目関数なんですよコードの見た目だとただ関数と違う部分に関してはステイトを持つことができるというのがポイントになりますはい出ました今2つ目のステイト出ましたねこれが2つ目ですこれもねバックエンドにあまり出てこない概念なんですけどうん」

「バックエンドってステイトレスな動きをするって言われててあんまりその状態を持たない常に同じ入力をもらったら同じ出力を返すずっと一定というかわかりますはいただフロントエンドってそうじゃなくて同じ入力だったとしても違う出力を返すことがあるわかるわかるビューの気持ちでもこれだからフロントエンドはって思うことあるんですけど僕は」

「まあでもねこれによってユーザーにとってはね見た目がいいそのさっきのさツイートしましたとかそんなのさだってツイートしましたなんてタイムライン言ってるだけじゃんそれってアプリを起動した時と変わらんわけですよアプリ起動した時もただタイムライン言ってるだけだしツイートし終わった後もただタイムライン言ってるだけなんですよ確かにでも同じことやってるはずなのにツイート成功しましたとか言うんですよこいつ便利なことにすごいな確かにそういうことをやるためにはやっぱステイトっていう別概念を持ち出す必要がありますはあ」

「なるほどなそのステイトを変形というかステイトでコントロールすることでインタラクティブになるっていうかそうそうそうなんですよこのステイトっていうのはコードの中ではステイトっていうワードとして出てくるんですけどワードとして出てくるんですね変数名とかリアクト標準のメソッドとかにも出てくるんですけど」

「ステイトなんてよく使うじゃないですかワードとしてだから僕が最初見た時にステイトって言うんだなって思ってたんですけどまさかコンポーネントをインタラクティブに動かすためのステータスというか変数というものだと思ってなかったから大混乱ねなるほど一般的な用語かと思ってでもやっぱりそうやってリアクトのドキュメント読んでいくとステイトってコンポーネントをインタラクティブに動かすためのものなんだと理解ができるわけなんですねなるほど」

「ステイトなんてただググってもそんな深く出てこない見た目上変数なんですけどただ変数持たせるにもステイトってただレッドとかコンストイコールステイトで変数を定義したらいいわけじゃなくてステイト専用の定義の仕方があるんですねそういう風にちょっとお作法もあったりするんですけどなおかつそのステイトって」

「なんか呼び出しましたでじゃあ明示的にifこの処理が成功したらステートをこういう風に変えるみたいなステートイコールなんとかっていう風に代入するんじゃなくてじゃなくて別の方法でやりすぎるんですよそれがフックスなんですねあーはいはいはいなるほどリアクト独自の概念だと思うんですけどこのフックスっていうのがステートを変更したりするやつわかる」

「俺はわかってしまうビューをやってるんだねでもむずいですよねこの概念これねなんとね僕最初になんだってなったときコンポーネントなんだってなったときにステイトというやつが出てきますとステイトってなんだってなるじゃないですかステイトというやつなんだって調べるじゃないですかなんかフックスっていうのが出てきますといやいやと」

「ラビリンスじゃないかみたいなねラビリンス?やばいわからない迷宮?あーそういうこといつまで経ってもゴールにたどり着かんラビリンスですねはい確かにわからんねーって思いながらまあめげずに公式ドキュメントをちょっと読み進めてたわけなんですけど」

「このステイトを操作するためにやっぱフックスが出てくるわけなんですねこれは関数コンポーネントの中で状態とかライフサイクルページ閉じたらどうのとか開いたらどうのみたいなそういったところに接続するフックするための特殊な関数としてフックスというのがあります接続するフックする引っ掛けるみたいな感じなんですかねしかも今お気づきかもしれませんけど」

「リアクトって関数やんっていうものに対していっぱい名前がついてるんですよなのでこの辺のワードを理解しないとググって出たブログとかの理解がマジでできないんですよこれもねちょっと苦労したポイントではあるんですけど結局は関数の一部でフックスも命名規則が決まってるんですね本当にフックスって関数と同じなんで名前括弧で呼び出すんですけどうん」

「フックスについてはユーズなんとかっていう命名規則が決まってますはいはいはいユーズなんとかって言ったらフックスこれは自分でも定義ができるんでフックスじゃないものに対してユーズなんとかって名前つけると怒られますへー」

「でリアクトにもともと組み込まれているフックスもいっぱいあるんですけどもその辺のいくつかのフックスを使ってさっきのステイトを操作してそれによってコンポーネントでツイートが成功しましたとかツイートが失敗しましたとかツイートを予約投稿しましたとかはたまたコメントにリプライがつきましたみたいなそういう通知というかいろいろな状況に応じて動くものを実装できるとわー」

「すごいかっこいいなこれを理解して進めないとマジで実装できないんで僕は1年目の頃の僕は一旦全力で動かしてからエラーもなんか分かんないけど潰してなんか動くようになった」

「よしテストもかけたからプッシュしちゃえって言ってやってたんですけどもうちょっと今はアプローチが変わって今自分が作るものってどういう風な構造でどういう思想でこうなってんだろうっていうのを理解することによってかつての僕は次の機能を作る時にも同じことをするんですよ似てるような機能を探してその機能のコピペをしてそこからエラーがいっぱい出てきて地道に変えて変えて変えて実装するってことを進めるんですけど」

「今の僕はもっと違くて構造を把握してリアクトの思想とか考え方仕組みを理解して進めることによって次の機能はもっとスムーズに機能を実装することができるようになるというのでちょっと駆け出しというか始めたて全員そうかもしれないですけど一旦僕の状況としては体系的に理解するぶつかった壁に対して真正面にぶつかるんじゃなくて」

「今見えてる情報プラスアルファそのさらに奥にある情報を取りに行って分からない要素をつなげて作り終える」

「っていうことをやってほしいいやーすごいなー僕もう公式ドキュメントの段階でめげそうだなフックスなんやねんって3つ目くらいですもんねそこめげそう俺わかるわかるわかるいやそうめげるんよめげるんよねーはいわかるっていうのでちょっと今の話を聞いて思ってもらいたいのはコンポーネントのステイトをフックスでコントロールするのがリアクトなんですねはいはいはいはい」

「UIの状態をFUXでコントロールしてるからインタラクティブな今時のアプリが作れるっていうそんなリアクトの触りの触りの紹介ですけどもありがとうございますこれがねバックエンドで全く存在しない概念なんでないっすね全くないんでこの頭の切り替えがね若干大変でしたないっすねCっていういや違うのかななんかなんて言うんでしたっけあれどっちだっけオーバーライド引数を」

「もともと2つしか渡してなかった関数を我々としては引数3つ必要にするみたいのは若干ステイトを変更しているっぽくないですか無理やりですけどそんなことないですから基本ない概念ですよねそうそうあとワードもあんまないですからねちなみにステイトとかフックスとかコンポーネントはフレームワークによって違う言い方があったりするんですかビューはコンポーネントって言うよねビューコンポーネントって言いますで」

「ちょっとごめんなさい僕の知識曖昧なんですけどなんかこのステイトとかフックスを会話の中で使うんですよそれって一般的に使ってるんじゃないのかなっていう気がしててビューとかは同じようなことはしててどっちかというとこっちは監視するみたいなイメージで例えばステイトが変数の中」

「画面に変数を表示してた変数の中に入ってる値を表示してた時にその変数に入ってきた値が変わったらそれを監視してるところが機能して動いて値変わったよって言ってフロントに変わった値を再度表示するみたいな動きなんですよなのですごい似てるなと思いつつそのステイトとかっていう言葉はなんか一般的なビューの言葉ではない気がするちょっと曖昧ですけどまあまあまあでも今の話は」

「ビュートリアクトの違うところで双方向データバインディングの話なんですけどリアクトは双方向じゃなくて単方向だったりするんですけどその辺の話はまた次回ということでこの辺の話もねちょっとやると面白いなと思いつつ今回ちょっとやりすぎると大変だなっていうのでコンポーネントのステータスを複数コントロールするというだけを伝えるのにフォーカスしてるのでリアクトのその辺の話はちょっとまた」

「別の回でやらせてもらえればと思いますなるほどありがとうございますつまりUIコンポーネントがUIのパーツUIパーツをインタラクティブに動かすためのステイトをフックスするフックスするフックスで操作するフックスという名の関数でフックスはもうフックスですねフックスというものでそうという関数で操作する」

「っていうので多少はちょっとクリアになったんですかね多少なると思います僕の本当に今マジで入社して2週間なんですけどもうちょっと経ったか3週間いかないぐらいなんですけど2スプリント目ですよマジですごいリアクトのタスクアサインされて1週間ちょっと仕事して今喋ってるんで」

「このチャレンジ精神を誰かに褒めてほしい深井:いやめっちゃすごいです普通なんかそのその感じってなんか入社して2ヶ月3ヶ月ぐらいしたらその感じになりません?樋口:そうなのかちょっとその入社してっていう感覚をもう覚えてないから深井:即戦力ですもんね樋口:そうね深井:すごいな樋口:いやでもまあ頑張ってると思うわなんかねその」

「前回のPythonというかFastAPIの仕事も頑張ってキャッチアップはしたけどFastAPIだったんですね別にVV回せるわけではないから意味は分かってるし思想もある程度分かったけど別にそっちもまだやりたいよって思いながら慣れないままちょっと次フロントでってなったんでいやいいっすねびっくりはしちゃったんですけどまあでも久しぶりになんか追い込まれながらガーって急いでキャッチアップした感があって楽しかった楽しいうん」

「ちなみにちなみなんですけど自動テストも書くって言ってたじゃないですかあれは何で書いてるんですかサイプレスプレイライトやっぱそっちかそっちの方が人気っぽいですねそうなんだ僕かつて書いてたツール何書いてたっけなセリニウムとキューカンバーで書いてた気がするキューカンバー」

「それに比べて圧倒的に書きやすいえーまあもう俺の言ってんのって6年前とかの話だけどね今もあるのかなあるのかもしれないですけどあとフロントエンドのテストねむずいむずいなって思ってて何点でしょう」

「なんかむずいって言ってるのはどこまでをチェックするのかっていうのがすごい難しくて単体テストとかその前の結合テストとか一位テストって段階があってで上に上に行くというかより全体のテストになると細かくチェックしなくていいよねみたいな」

「考え方があったりあとフロントエンドのテストって動かすのにも時間がかかるんでバックエンドの単体テストに比べてめっちゃ細かく検索するとすごく時間かかったりだとかあと細かく何回もテスト回せないとかあるんでねそうなんかどこまで見ればいいんだろうがねめちゃくちゃむずいいやーそうですよねこの辺の観点ちょっと勉強したいけどでもなんかそういうのまとまってる情報とかあんまり見たことないくて」

「テストって調べるとさ境界値とか同地分割とかさそういう一般的なことは出てくるけど今の俺ってこれどこまでやるべきなんだっけみたいなSPAとかだとどこの画面が今回実装した内容が」

「このコンポーネント今回実装した内容のテストを書いているときにこのコンポーネントが画面に表示されていればOKみたいな書き方とかしません?するするそこをどこまでチェックするかって話ですねでその内容は何が表示されているのかをどこまで見るべきかとかねわかりますはいむずいそうまあちょっと自分なりにやってなおかつコードレビューもやってもらうわけだからある程度妥当にはなっているんだと思うけどうん」

「とはいえ単体テストに関しては結構自分なりの意見があるんですよでもなんかそういう画面のテストについてはそういうのまだ持っててないなっていうのが今の課題感かななのでぜひおすすめの本というか情報ソースというかそういうのがあったら教えてほしいありがとうございますまだちょっと入ったばっかなんでこれからもさらに届けられる話あるかなと思うので学びがあったらその都度吐き出せればなと」

「楽しそうですねアフタートークいいですか?はいどうぞさっきの話の」

「テストJSのテストサイプレスプレイライトとかの話なんですけど僕の自社の方だと今サイプレス使っててプレイライトの方が人気っぽいなって話が世間でそれってどうやって判断したんだろうなって思った時にどうやらGitHubのそのライブラリリポジトリの」

「なんかスタースってあるじゃないですかあれの数とか見てなんかプレイライトの方が盛り上がってそうだそっちの方が多いから数が確か6万とかに対してサイプレスは5万とか4万台とかだったんですよねってなったらプレイライトの方が多分人気なんだろうなってなって」

「めっちゃいいね」

「っていう感じですなんかその順平はまだないのかもしれないけど開発プロジェクトを始める時って何の技術使おうかなって選べるタイミングがあるんですよはいでその時ってやっぱりさっき順平が言ってたようなスター数とかも参考にしますし他にもいろいろあるんですよ見るべき観点がはいはいはい気になるちょっと全部は言えないかもしれないですけど」

「例えばバージョンアップデートの頻度がどのぐらいあるかとかメジャーバージョンがそんなにポンポン上がるとリプレイしなきゃいけなくなるのである程度枯れた技術にしたいとか確かに逆に最新すぎるのもそうそうそうそう」

「バージョンアップがすぐ出ちゃったりするかもしれないしそうそうそうそういう観点があったりとかあとは自分たちの技術セットもあるかもしれないですしね技術セット駆動で選ぶのも大事ではあるんですけどどっちかっていうとなんかぶっちゃけ開発してれば慣れるっちゃ慣れるんでなんか」

「いかに生産性高くなるかっていう方をちょっと選んだ方がいいかもしれないですけどねうんうんうんであと例えばなんだろうねドキュメントの自動生成機能がフレームワークにあるとかうんCICDのこのツールとの連携が良さそうとか」

「あと公式ドキュメント見た時に情報が日本語があるとかないとかメンテされてるされてないとかなるほどGitのイシュー見た時に解決されてるのがどんだけあるとかないとかすごいななるほどなでもそれって結局今まで自分がやってきたプロジェクトの中で苦労してないとその観点ってあんまり身につかなかったりするんですけどなんかそういうのを見ながら技術選定をすることがあるので」

「一従業員の観点で言ったらまあぶっちゃけGitHubのスター数だけでもまあ十分かもしれないねそのスター数も結局新しすぎるやつはまだ少ないからねある程度広く使われてるとスター溜まってくから減ったりしないしね多分ね一回つけたらつけっぱだから使ってる人がどんどん増えるとそれだけ増えていくものだと思うんで」

「そういう観点で見てみると良いんだろうねなるほど技術選定とかできるレベルになったらもっと楽しくなりそうだな超楽しいよめっちゃ楽しいかっこいい技術選定楽しいんだよねそれもタイミングとキャラ付けだと思うので」

「そういうところに食い込めるようになるとまた一つエンジニア楽しくなると思いますそういう観点で俺はアーキテクチャーアーキテクトより楽しそうだなって思う確かになるほどこれも夢の話ですけどやっぱりアジャイル超生産性高い開発シーンも作れるようになりたいこういう技術」

「使ってこういう風にパイプライン組んでこういう風にやったら多分毎週毎週コミットしてそのままリリースできますよっていう下地を技術前提から整えてさらにその基礎となる」

「GitHubのワークフローなのかそういうパイプラインとか組んでこの上でみんなで返していきましょうって言ってチームが回ったら超気持ちよさそう気持ちいいすごいやん超気持ちよさそうかっこいいなそれ超気持ちよさそうだなっていうのを夢見て今勉強してますめちゃくちゃいいな目指したいそう技術前提というかその辺の楽しさに気づいてくれたのはじゅんぺいの成長を感じますね」

「まだまだいきますね本当にかけだしたんでありがとうございますはいというので終わりますねハッシュタグひまじんプログラマーでSNSのXでフィードバック募集してますのでそうですねリアクトのこんな話してほしいのか僕の」

「業務のキャッチアップの仕方についてちょっとご指導ある方は優しくお伝えいただけると本当にありがたいですいやめっちゃ参考になりました公式ドキュメント忍耐強く読みますちなみにファストAPNの時も公式ドキュメントでやりましたうんうんうんでリアクトもね本読もうと思ったんだけどうんこう言ったらあれだけどちょっと良さそうな本僕は見つけられなくてうん公式ドキュメントにしてまあ後悔はしてないうん」

「あとは番組説明欄からGoogleフォームでお便り募集してますので番組の感想質問何でも募集してますお気軽にお願いいたしますお気軽にお願いします各種ポッドキャストプラットフォームでのフォロー高評価もお待ちしてますのでぜひフォローと高評価お願いいたしますぜひぜひポッドキャストのフォロワーの方がねやっぱツイッターより全然多いでスポティファイですら1000運百いってますよね」

「結構いってるやんと思って1400だったかなちょっと忘れちゃった4桁で終わるインフルエンサーですねもうあれねフォロワー出ないからね他の人がもっとあるかもしれないけどねお願いしますリアクションについて勇気を出してしゃべってみましたありがとうございます今後も身を削っていきたいと思いますのでお願いいたします勉強になりましたバイバイ」

「初めて触ったMacBook手がいっぱいのチーム開発再起動したら治った謎のバグ僕たち私たちは卒業します駆け出しエンジニアを卒業したいあなたへひまじんプログラマーの週末エンジニアリングレッスン各種ポッドキャストで配信中」