見出し画像

数学が2だった私が、どのようにウェブ制作の勉強をしているのか

うぇびん

高校の頃の私は、勉強嫌いの文系でした（今もですが）。国語の成績は5段階で満点の5でしたが、数学は2、英語は3でした。
三角関数は今もわかりません。英語は中学英語レベルなら読めますが、会話は一切できません。

そんな私が、30年後の今ではウェブ制作の最新の技術・数種類のCMSのテーマ制作を習得し、PHP・JavaScriptも簡単なアプリを作成できる段階まで理解できています。50歳近くになった現在もReact・TypeScriptを勉強しているところです。

「勉強が嫌いなのに、どのようにウェブ制作の勉強をしているのか」ということをこれまでなかなか言語化できなかったのですが、今期の月9ドラマの「女神[テミス]の教室」を観ていたら、説明できそうな気がしてきたので即戦力講座の記事の一つとして紹介します。すごく真剣に見ているわけではないので、非常に曖昧な解説になることはご容赦ください。

はじめての方はお読みください↓↓

二人の先生とふたつの学習方法

「女神[テミス]の教室」は法曹界を目指す人が通うロースクールを舞台とした大人向け学園ドラマです。
このドラマには二人の対象的な講師が出てきます。「司法試験合格」を第一とする藍井先生と、「事件に関わる人への理解」を第一とする柊木先生です。学生たちは二人の先生の師事を受け、さらに身の回りに起きる小さな出来事を経験して人間的に成長していく…という話です。

どうでもいいのですがトンカツ弁当を2つ食べてもモデル体型を保っている柊木先生に嫉妬してしまいます。

学習のようすを構図にすると、このような感じです。

紹介だけを見ると、無機質で厳しい学習を課す藍井先生より、優しくじっくり教えてくれる柊木先生の方がはるかに良いように思えます。
ですがウェブ制作の勉強においては、柊木先生と藍井先生の学習方法の両方が必要です。図の下に書いてある「周囲の出来事」も重要な要素です。
少なくとも私は、藍井先生３割、柊木先生６割、周囲の出来事１割です。

実際このドラマでも、柊木先生が主導しているように見えて藍井先生が活躍していたり、学校外の出来事が生徒たちのスキルアップのきっかけになっていたりします。

二人の先生の学習方法をひとことで表現すると、藍井先生が「インプット」、柊木先生が「アウトプット」です。

ウェブ制作の勉強の3要素

先ほどの構図をウェブ制作の勉強に当てはめるとこうなります。それぞれ説明していきます。

インプット

私のウェブ制作の学習は基本的に、藍井先生の方法＝インプットから始まります。インプットの目的は「覚えること」ではありません。学習しようとしている対象の用語、世界観に「脳を慣らす」のです。また、今実際に現場で何が求められているのか、頻出する関数やライブラリは何かを知っておくことも目的です。

ドラマの中でも藍井先生は「これは何十年も試験に出ていないから覚える必要はない」「柊木先生のやり方は効率が悪すぎる」と発言しています。乱暴な言い方ですが間違ってはいません。脳が慣れていないうちから理解しようとしても時間がかかってしまいます。

インプットは基本的に、覚えようとしている技術のチュートリアル記事をどんどん読みます。最近では家事や趣味の編物をしながら技術系YouTuberの動画を流しています。これらは覚えたり真剣に聞いたりせず、用語に慣れたり、よく使われている技術を把握します。

重要になってくるのが特定の個人・媒体に偏らず「意識を客観的に持つ」ことです。勉強を始めたばかりの頃は不安ですが、できるだけ何も考えずにいろいろ読んだり観たりします。

特定のYouTuberの動画をある程度観たら、他のYouTuberの同じ段階の動画を探します。これを繰り返していると人によって手法が違うこともわかってきますし、特定のメンターにハマってお金もないのにサロンに入ってしまう失敗ルートを避けられます。
YouTuberの皆さんには申し訳ないですが、本当に参考になった動画以外は高評価しないようにしています。おすすめが偏るからです。

本も一応買いますが、最新、かつ実用性があるものの作り方を解説した本を求めます。関数などのリファレンスはウェブ上で調べた方が確実だからです。今回はとりあえず図書館で一冊借りました。最近の図書館は大学がある都市であれば、ウェブ関係の書籍も良いものが置いてあるところが増えています。

アウトプット

人によって手法が違うと書きました。ここで「なぜ手法が違うのか」という疑問が出てきます（解説してくれるYouTuberさんもいますが）。だいたいはどちらも間違いではありません。向き不向きとか制作環境によることが多いです。この疑問を解決するには、実際に自分でもコードを書いてみるのが一番です。柊木先生の方法＝アウトプットです。

アウトプットでは、まず小さな目標と、そこに到達するまでの全体の流れを考えます。難しい表現だとロードマップといいます。
例えば、今、私はReactを勉強しています。最初の目標として「クリックしたら切り替わるチェックリスト」を作ることにしました。これだけでも複数個あるチェックリストの表示、それぞれのオン・オフの受け渡し、useStateというフックの使い方を理解する必要があるとわかります。

先ほども出てきましたが「なぜ？」が出たらすぐ調べます。JavaScriptを書くためにChromeを立ち上げているのですから、すぐに新しいタブを開いて検索します。検索はインプットでもあり、アウトプットでもあります。

エラー文、用語、フック名、片っ端から検索します。「Reactの海外サイトのサンプルの写真の、Katsukoという年老いた日本人女性は誰なんだ」という理由で調べたこともあります。

「なぜ？を考えた」ということが重要であって、解決できたことが重要ではありません。その考えでいないと解決できないことが多くて心が折れます。

ひとつできたら「少しずつ違う、なにか」を作ることを繰り返します。さっきはクリックでチェックが入るようにしたので、同じ要領でクリックで裏返るカードが作れる…とかです。環境を作るところでつまずいてしまうのであれば、CodePenやCodeSandboxを使う手もあります。

そして最後に、Twitterなどでいいので「勉強したこと」を簡潔に説明したものとスクリーンショットを投稿します。

これがアウトプットの最終段階です！
やっていない人があまりにも多いです！！

ドラマの中でも、柊木先生は生徒たちに頻繁に意見を言わせています。模擬裁判も重要な節目になっています。
言語化することで、脳を慣らし、手を動かした結果が定着してくれます。

インプットとアウトプットをこのような流れで繰り返して、私はウェブ制作の新しい技術を学習しています。

周囲の出来事

私たちは一日のうちに、何十ものウェブサイトやアプリを見ています。このバナーはきれいだな、このサイトの演出はどうなっているのだろう、このサービスはとても使いにくいな、という感想が出ることがあります。ウェブ制作の勉強にとって、それらはすべて「周囲の出来事」となります。

ウェブ制作の素晴らしいところは、スマートフォン専用でなければ、ほぼすべてのコードが読めるところにあります。気になるサイトを見かけたら、すぐChromeなら右クリックして「検証」をします。
HTMLタグの中のテキストを書き換えてみる、CSSのプロパティを変えてみる、アニメーションの値を変えてみる…などはとても勉強になります。

さらに、それが自分が制作・運営しているサイトであれば好きなようにできます。仕事の受注のためのサイトだけではなく、推しを熱く紹介するのでも、イラスト置き場でも良いので、複数のタイプが違うサイトを作って実際に運営してみることをお勧めします。
私は複数のCMSのテーマ制作を習得していると書きましたが、新しいCMSを勉強したときは必ず何らかのサイトを作っています。

SNSなどで、同じ分野の人と意見や情報を交換する（単に励まし合うのではない）のは、周囲の出来事の中でも特に収穫が大きいです。かえって不安や迷いが出ることもありますが、停滞するよりは長期的に見るとずっといいです。
そういえばドラマの中でも、5人の生徒たちのうち、一番みんなと会話をしていた向日葵さんが成績を伸ばした反面、交流することが少なかった雪乃さんが伸び悩むというわかりやすいシーンが出てきました。

この手の情報交換といえば、小規模の勉強会でした。ここ数年はコロナ禍で全国的に開催が少ない状況となっています。今年こそ以前のように活性化してくれることを願っています。

ゲームという原点

おわりに、文系だった私がプログラミングに興味を持った原点について書いておきます。30年近く前に買った「RPGツクール Super Dante」というスーパーファミコンソフトです。

RPGツクールシリーズはコントローラー操作でRPGを作っていきます。宝箱を開けたことがあるか、おじいさんに話しかけたか、魔王を倒したか、という流れはすべて、IF文と真偽値の積み重ねでできています。私が実際にウェブ制作を始めるのはずっと後のことになりますが、このときの経験は今も勉強の下地になっています。

あなたが勉強しているのがHTMLであれば選択肢をたどると結果が変わるノベルゲーム、プログラミングであればカードゲームや文字だけのバトルゲームを作ってみるといいです。まあ実用性は今ひとつですが、ゲームを作るのはとても楽しいし、モチベーションが上がりますよ。

この記事が気に入ったらサポートをしてみませんか？