my-portfolio
Home.rkt
私が通っているデジタルハリウッド STUDIO by LIGでは中間課題というものがあります。こちらは主に野菜の産地直送サービス「すぐ食べ」のランディングページを、デザインからコーディングまで一貫して制作するものです。
私はこのコーディングについてReactを使って実装しました。本来デジLIGのカリキュラムではHTML、CSS、JavaScriptを使ったコーディングしか教わらないため、Reactで課題のコードを書いていくというのはとても挑戦的なことでした。
私がコーディングを好きになったきっかけ
そもそもなぜ私が「中間課題のコーディングをReactで実装するほどにコーディングにのめりこんだのか」について書いていきます。
教材を見ていくと「適切なマークアップをしましょう」とか「なるべく速い、パフォーマンスに優れたサイトになるよう構築しましょう」といったことを教わります。
私はそれに対してとても面白いなと感じました。
振り返ってみると、私のこれまでの経験が影響していると思っています。
私は大学生の頃、「〇〇に強い制作会社何選!」のようなメディアを運営している会社でインターンをしていたことがあります。内容は記事の入稿で単純な作業ではありましたが、「ユーザーの目線に立つこと」と何度も言われてきたので、それを考える癖が付いていたということがあると思います。
また、サッカーの経験もコーディングを好きになったきっかけにつながっていると思います。
私のタスクは「点を取ること」でしたが、中盤に降りてきて「攻撃の組み立て」も行っていました。そのため、どこにどんなパスを出したらこちらに有利な展開になるだろうといったような、私の仕事のその「次」を考える習慣が身についたと思っています。
ただコードを書くだけでなくそれがその先のユーザーにどう影響を与えるか、そしてそれが顧客の課題解決につながることにやりがいを感じ、コーディングが面白いと感じたのだと思います。
最初はHTMLのimgタグに「loading=“lazy”」をつけたり、pictureタグを使うなど、少しでも最適に近いコードを書くように調べては実践してみることを繰り返していました。
調べるときは「令和のHTML / CSS / JavaScriptの書き方50選」のような記事を見て、疑問に思ったことなどはAIに聞くなどして学習を進めました。AIに聞いているうちに「ReactやNext.jsなどを今後触ってみるといいかもしれませんね」と言われました。実際この段階でXでエンジニアの方などをフォローしていたので「React」という言葉は目にしたことはありました。AIにReactとNext.jsどちらが難しいかを聞いてみると、まずReactを触ると良いとのことでした。また、「私は基本的なHTML、CSS、JavaScriptは勉強したけど、Reactを勉強するにはまだ早いですか」と聞いてみると、それならReactを勉強するべきだと言われ、早速触ってみることにしました。
はじめてReactを触った感想
結論から申し上げると、かなり大変でした。
当然、Reactはスクールのカリキュラム外の内容であるため、当時スクール内にReactを使っている先生もおらず、誰にも聞くことができず、一人でやっていくしかありませんでした。
とはいえ、つべこべ言っても仕方ないです。中間課題は卒業制作の開始に間に合わせなければならないため、学習を開始するしかありません。そこで私は以下のYouTubeの動画を見て学習をしました。
一回動画の通りにコードを書いた感想は、正直「俺、React無理かも」でした。
useState...? Hooks...?なんのこっちゃわかりませんでした。「Propsってやつで、なんか親から子に値を渡すってことだけはわかった気がする...！！」みたいな感じでした。
中間課題の実装
そこで私はAIと壁打ちをしながらひたすらキャッチアップし続けました。
当時仕事をしながら学習をしていたため、基本仕事終わりと休みの日に課題を進めていたのですが、仕事の休憩中にAIに、「useStateについて教えて」とか「Propsってもしかしてこういう考え方であっていますか?」など、聞くようにしていました。
また、わからないことはVS Code上にコメントで残すことにしました。少し恥ずかしいですが「Propsむずい」とかも書いていました。
特に難しいと感じたのは、コンポーネントをimportするところでした。importにミスがあると、真っ白な画面が出たりします。何回も真っ白な画面を見て、心が折れかけました。
正直エンジニアの皆さんからすると「いやimportがわかんないって、どういうこと？」と思われるかもしれませんが、当時の自分にとってはそれすらも苦戦しました。
Propsも本来便利な機能なのに、ものすごく不便に感じてしまっていました。
気付きとまとめ
しかし、この経験から間違いなく得た気づきがあります。それは知識のキャッチアップも当然大事だけれど、とにかく手を動かすしかないということです。
実際に「Reactっていうのはコンポーネントをimportしていってサイトを組み上げていくんだ」と知っていても、触ってみないとその感覚は全くつかめません。
私は中間課題でTailwind CSSも使っていました。「style.css」と「index.html」を何度も行き来していた私にとって、これに関しては結構すんなり「これは便利だ!」と思えましたが、これも使ってみないとわからなかった気づきです。
結果、Reactで中間課題を実装しきることには成功しました。正直、大変ではありましたし、今見るとなかなかひどいコードではあるものの、何より「調べる・知識を得る」→「手を動かしてみる」→「わからなかったら調べる（AIに聞いてみるなど）」
という学習フローを確立したことも、これまでコードをたった1文字も書いたことがなかった自分にとってはとても大きかったです。
とはいえ、この試行錯誤の最中に、現役のエンジニアの方からある言葉をいただきました。
「独学でできることには限界がある。本当のスキルは実務で揉まれないと身につかないから、早く現場（会社）に入りなさい」
正直、Reactのコンポーネント分割やProps、後の卒業制作などに四苦八苦していた自分にとって、この言葉は重く響きました。
それまで中間課題で「わからないなりに手を動かし、形にする」という泥臭い経験をしたからこそ、その言葉の真意がとてもわかった気がします。
中間課題の実装、これを乗り越えたことはかなり今の自分のためになっています。
ぜひこれからも自分がギリギリ超えられるくらいのハードルを設定していって、レベルアップを続けていきたいと思っています。