初心者は技術ブログのここで行間にハマる 体験記
概要
React初見者が1週間でクラスメソッドの若槻さんのこちらを作って、子ども向けイベントで体験会してきました。
楽しめて、いい思い出になって、だいたいみんなが笑顔になれるプログラムでした。
今回は、初心者が技術ブログのどこで行間にハマるのか、体験したからわかるダサいポイントを書いていきます。
"初心者"のスペック、背景
当該技術、フレームワークを使った最近の開発手法はすべて初見。
大昔にシステム開発やったり、基本情報と応用情報とセスぺ取ったりしているけど、ここ10年以上ほぼ開発していない。
過去に、AWSコンソール上から Amazon Rekognition を使って、プログラミング教室の子たちと顔分析の体験会をしたことがあり、これをももっと手軽にやりたかった。
きっかけとなったのは、 四国クラウドお遍路 2024 in 高知 で発表されたこれ ↓ 。やりたいーと思った。
けどここまで作りこむ技術も時間もないので、いろいろ探して見つけたクラスメソッドの若槻さんのエントリされた構成を目標にさせていただいた。
前置き
大前提です。
ここから、わたしがハマったダサいポイントを書いていきますが、あくまでハマったのは読み手＝わたしのスキルレベルや、技術ブログの外側の要因にあるので、参考にした技術ブログそのものは全く悪くなく、むしろ丁寧だと思います、ということをここに宣言させていただきます。
ではさっそくハマってまいりましょう。
ハマる その1：アーキテクチャなんもわからん
Amazon Rekognitionでイメージの顔検出による感情分析を行う には、サンプルソースコードが載っていて、ソース読んでみると何となく雰囲気はわかる。
が、これは何のコードで、どこで、どうしたら、動かせるのか が、わからん。
モダンなアーキテクチャがわからないと、この第一歩がわからん。
これ1枚どこかにペロッと置いて動くもんじゃないことだけはわかる。
対応 その1：アーキテクチャなんもわからん
とりあえずこの記事を読み、「先日投稿したエントリのReactアプリ」がベースになってることを理解して、そこから過去投稿をたどって、4部作であることがわかった。
- react-webcam + TypeScriptでカメラ撮影をしてみた（デモあり）
- react-webcamでビデオ映像を非表示とした状態で撮影をする
- react-webcamで撮影した写真をAmazon Rekognitionで顔分析する
- Amazon Rekognitionでイメージの顔検出による感情分析を行う
そして、よく聞く React というものであることが分かった。
しかし React というものがわからん。
ということで、とりあえず、手元にある React 本の 1～3 章（環境準備、JSX、コンポーネント）を写経した。
急がば回れ。言語や環境が違う時は基本のリファレンスを押さえるのが一番理解が早い。
おかげで、React の開発環境とローカルでの実行環境ができた。
ここまでで2日が経過した。
ハマる その2：.tsx が無い
気を取り直して、4部作の1つめから始める。
React 本で React の練習用プロジェクトを立てたが、 react-webcam + TypeScriptでカメラ撮影をしてみた（デモあり） で表示されている「.tsx」という拡張子のファイルが存在しない。
Node.js で React で Typescript ってどういうことだ。
まだまだ漂う「オフチョベットしたテフをマブガッドしてリットを作る」感。
対応 その2：.tsx が無い
React で Typescript という記事をザッピング。なんとなく概要だけわかった気になる。
プロジェクトを作る時に、Typescript だよ、という指定をしてやれば念願の .tsx が手に入りそう。
過去は捨てて、npx create-react-app myapp --template typescript でプロジェクトを作り、4部作の1作目が無事に動いて喜んだ。
3日目が終わった。
この時点で、この初学者は「まだ間に合う」と思っている。
ハマる その3：@material-ui/core/styles' またはそれに対応する型宣言が見つかりません。
意気揚々と4部作の2つめに進み、すぐにハマり、けっこうハマった。
エラーの内容は @material-ui/core/styles' またはそれに対応する型宣言が見つかりません。
Material-UI は入れたはずなのに。
いろいろ試してもできない。
この辺でわりと焦って絶望した。
頭の隅で、イベントに持っていく別のコンテンツ（簡単で確実に間に合い、楽しめるもの）も考え始めた。
解決できないまま1日経った。
対応 その3：@material-ui/core/styles' またはそれに対応する型宣言が見つかりません。
ふとした拍子に、 material-uiとMUIという書き方が混在している違和感に気付く。
この違いをググる。
結果、コピーしたコードは Material-UI v4で、素直にインストールした最新版は v5 だとわかった。
バージョンが違う。
ならば対処はできるぞ、と思ったところで次のハマりポイントとのコンボが発生する。
ハマる その4：Material-UI の v4 がインストールできない。
Material-UI の v4 がインストールできない。
本当にできない。
対応 その4：Material-UI の v4 がインストールできない。
いろいろと調べたところ、これもバージョンの依存関係によるものだとわかった。
2024年時点で新たに環境構築したので、React のバージョンは18。
React 18 には Material-UI v5 が必要。
ソースコードは React17 と Material-UI v4。
Material-UI v4 には React17 が必要。
React 18 で Material-UI v4 という組み合わせは成立しない。
React 18 と Material-UI v5 という組み合わせで動かすには、v4 をベースに書かれたコードを書き換えなければいけない。見たことも書いたこともないのに？
これが「さんすくみ」というやつか（たぶん違う）
- 4部作の先のコード
- Material-UI v4 と v5 の違い
- React18 を 17 に変更する方法
- 残された日数
を総合的に考慮した結果、
- 新しいプロジェクトを作成して
- React17 にバージョンダウンさせて
- Material-UI v4 を入れる
であればそれぞれに手順として参考にできる情報が存在したので、この方針に決めた。
そして再び、過去を捨てて新しいプロジェクトを作成することになる。
この時点で5日目。イベントは明後日。
その後
この後、5日目でなんとか4部作を走り切って、6日目に多少のアレンジも加えて、もっとアレンジしようと欲を出したらエラーが出たのであきらめて、着手から1週間で、なんとかローカルで動くβ版的なものをイベントに持ち込むことができた。
ハマった原因と対策
書きながらふりかえると、それぞれのハマりの原因は、こんな感じだったと思います。
- その1：スキル不足
- Reactわからない
- その2：スキル不足
- Typescriptわからない
- その3：鮮度
- 3年前の記事で、最新バージョンとの相違点がある
- その4：鮮度とスキル不足
- 3年前の記事で、最新バージョンとの相違点がある
- Material-UIわからない
その3と4は、参考にした記事の鮮度（記事がいつ書かれたものか）によるものでした。
記事の方にはちゃんと、「この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。」と表示されているので、悪くないです。
記事を参考に自力実装ができる程度にスキルがある方であれば、読み替えて実装できると思います。
対策
ハマった時、どうやって解消したかというと、基本は検索しつつ（最近はGoogle検索でもAIが作文してくれる）、生成AI に相談したりしました。
ただ、生成AI が示してくれるコードや手順は、技術ブログと同じで、行間にハマります。
わかる人にとってはわかるんだろうけど、どこまでが正解で、どれが虚妄なのか判断がつかない。
検索結果からたどるサイトも、同じ状況であったとしても、1から10まで丁寧に書いてくれているサイトはあまりなくて、知りたいところがわからーん（わかるほどのスキルが無ーい）、ということもありました。
王道の対策としては、やはり、使いたい技術のリファレンスを読み込んで理解をして、ステップバイステップで取り組むことです。
でも今回は短期間で作って持っていきたかったので、じっくりステップアップしている時間がなかった。
リファレンスでざっくり理解して、全体像を押さえて、あたりをつけて、調べて試す。という感じでした。
大昔にやってた経験と勘に頼って、理解することより動くことを目的とした、力技だったかなと思います。
まったくの初心者の方がやるのであれば、やはり、ステップバイステップで習得を進めて、時々チャレンジしてみる、といった進め方の方がよいだろうなと思いました。
あと、「気になるハンズオンは、さっさとやっておけ」です。
初心者ほど、ちょっと変わったりしたときに対応できない。
公開されて、やってみたいなと思ったら、さっさとやりましょう。
そんな知見を得ました。
ちょっとだけ後日談
GitHub のローカルリポジトリとリモートリポジトリというものも初めて使ったのですが、Dependabot alerts が来るようになりました。
初めて現場で開発に参加して、自分が書いたコードがバグった時に「ああ、このバグわたしが作ったんだな」とうれしかったのですが、Dependabot alerts もまた「ああ、Dependabot alerts が来るようなものを作ったんだな」とちょっとした喜びを感じています。
Discussion