見出し画像

プログラミング学習「ググる力」の正体とは？

ぴかそ

＜自己紹介＞

こんにちは。初めてnoteを書いてます。ぴかそ(@web_art_picasso)です。今年に入ってプログラミング学習を始めたばかりの新人です。みなさんプログラミング学習の進み具合はどうですか？効率よく進んでいる方も、なかなかうまく行かず、すっきりしない日々が続いている方もいると思います。

まず最初に断っておきますが、僕はライティングのプロではありません。だから読みづらいところもあるだろうし、心が震えるような文章も書けません。ですが、今までの僕の経験（経営コンサルタント）に基づいた、プログラミングにおける「ググる力」の正体を、分かりやすく、かつ簡単な言葉で、読者のみなさまにお伝えできるように頑張ります。

また、このnoteは、具体的な学習の手順を記述したものではありません。Progateやドットインストール、YouTubeなどに多くの教材がありますが、それらの使い方などについては触れません。具体的な学習手順などを知りたい方はこれ以上読まないで、学習のロードマップに関するnoteを探してください。


このnoteは次のような人に向けての記事になります。

・プログラミング学習がなかなか思うように進まない。

・模写をしているがこのまま進めても終わる気がしない。

・エラーを解決するまでに時間がかかることが多い。

これらの悩みは、「ググる力」を底上げすることで一気に解決できます。

自分はプログラミング初心者ではない、ググり方の説明なんていらない、そもそも新人が生意気言ってんじゃないよ、と思われる方は対象ではありません。エラーの解決に勤しんでください。


✔︎ このnoteのテーマ

プログラミング学習における「ググる」とは

単なるネットサーフィン時の検索とは違う、プログラミング学習での「ググる」という言葉の意味を掘り下げて説明していきます。


✔︎ このnoteを書こうと思った3つの理由

僕がnoteを書こうと思った理由は3つあります。

1. 「プログラミング学習のロードマップ」や「サイトを模写する教材」は充実しているのに、プログラミング学習で挫折する人が非常に多いから。

2. 時間の割りに学習が進んでいなくて、非常にもったいない人がいるから。

3. 僕のアドバイスで数名の方が驚くべき速度で成長したので、少しでも多くの人に正しい「ググり方」をシェアしたかったから、です。


✔︎ このnoteを読むメリット

プログラミング学習における「ググり方」を理解すると、エラーを解決するまでの時間を短縮することができます。そもそもエラーを解決したいのに、その手段を見つけることに時間を消耗してしまっては本末転倒です。このnoteを読んで「ググる」の本質と「ググり方」の正体を理解してもらえたら、プログラミング学習のスピードは格段に上がると思います。

また「ググる」という行為は、プログラマーである限り、一生付き合わなければならないスキルです。途中でプログラミング学習を諦めてしまう人の1番の原因は、ググってもググっても、問題を解決出来なかったことではないでしょうか。「ググる」をきちんと理解することで、プログラミング学習を挫折する可能性をも下げることができるのです。

以下本編に入ります。


第１章　「ググる力」が重要視される理由

ここではプログラミング学習において、「ググる」ことがなぜ重要視されるようになったのか、僕なりの仮説を書いておきます。
その前に前提として知っておいて欲しい単語があります。Twitterでプログラミングに関する情報収集をしていると、必ず見かける「インプット」と「アウトプット」という2つ単語です。それをこのnoteでは以下のように解釈します。


✔︎ インプット

“インプット”とは、

①プログラミング初心者が新しい言語に触れること
②コードの書き方を覚えること
③コードの使い方を学ぶこと

基本的には以上の3つを指していることが多いです。

代表的な教材には、Progateさんやドットインストールさんなどがあります。


✔︎ アウトプット

“アウトプット”とは、
その発信者が学習・習得している言語によって異なりますが、

・Webサイトの写経・模写
・Webサービスの開発
・オリジナル作品の制作など

以上のように「何かを生み出す」ことを指した言葉となっています。

代表的な教材には、
くりのすけさん(@kurinosuke32)の「コーディング練習①~⑥」


とだこうきさん(@cohki0305)の「Slack風アプリ」


「ググる」の発生タイミング

アウトプットをする時は、もちろんインプットした知識を使うことになります。ですがここでサクサクアウトプットできるほど、プログラミングは甘くないんですよね。どこかでエラーが出る。そんな時に「ググる」という行為が発生します。ですから「ググる」とき＝自分が主体となって問題解決に向かっているときなので、プログラミング初心者が1番成長できる瞬間である。このような解釈がされているわけです。

要するに、プログラミング学習者が、受動的な学習から能動的な学習に移り変わるとき、必ず「ググる」というイベントが発生します。能動的な学習が出来ているのか？それを客観的に評価できる要素の一つが「ググる」ということなのでしょう。そこから「ググる力」はプログラミング学習において重要だ、という考えにつながっているのだと思われます。


第２章　「ググる力」＝問題解決能力

第１章で説明したように、「ググる」というイベントが発生する時、プログラミング初心者は主体性を持って問題解決に挑むこととなります。つまり、プログラミング初心者にとって、問題解決をする主体的な行為が「ググる」という行為なのです。ここに気づけていない人が非常に多いため、「ググる力」に差が生じます。気づけていないと、「ググる」＝答えをネットから拾ってくるという認識になりますから、拾ってきた答えが違ったときに、メンタルがやられてしまうわけです。

例えるなら、クラスの中の天才がテストのとき隣の席で、チラッとカンニングして分からない問題を埋めたのに、それが間違えていた。みたいな状況下のメンタルです。

では、問題解決能力とは何なのか？まず問題解決能力において1番大切なことは、実は問題を解決することではありません。ん？お前何言ってんだと思われるかもしれませんが、コンサルティング業界では周知の事実です。問題解決において最重要なのは、【根本原因を特定する】ことです。原因を知らずに解決できるわけないですからね。


つまり問題を解決する手順は、

① 原因追求のために仮説を立てる。

② 仮説を検証する。

③ ①と②を繰り返して原因を特定していく。

④ 原因を絞り込めたらそれに対する解決策を実行する。

これを前提知識として、プログラミング学習における「ググる」を考えていこうと思います。



第３章　 プログラミング初心者の頭の中

第２章で「ググる力」＝問題解決能力としました。これをプログラミング学習に照らし合わせていきたいと思います。ここではTwitter界隈で1番学習者が多い、HTML / CSS を例にして説明していきます。まずプログラミング初心者が実際に「ググる」時、その検索パターンは２つに分かれます。

①　そもそも検索するキーワードが思い浮かばないからイメージをそのまま言葉にして検索する。

②　実装したいイメージから使うコードはある程度分かるから、特定のタグやプロパティをキーワードの１つに指定して検索できる。

この2パターンを見てどちらの方がエラーの解決に時間がかからないと思いますか？圧倒的に後者ですよね。前者に当てはまるなあと感じる方は、インプットの方法を変えなければなりません。

前者はこのように検索することが多いです。

・CSS　要素　中央寄せ
・HTML　画像　読み込めない

これだとヒットする記事が多すぎますし、コードによっては解決しないことの方が多いです。

僕の英語学習での実体験なのですが、Good Luckという表現の使い方にびっくりしたことがあります。おそらくすぐに頭に浮かぶのが、幸運を！のようなニュアンスですよね。ですがこれ、ネイティブは皮肉った使い方をすることが多いんです。例えば、普段口だけの友人が、「俺マジで超勉強してきたから、今回のテストはお前らより点数とるかんな」こんなことを友人に対して言ったとき、その友人が鼻で笑いながら、「Haha, Good luck.」こんな感じで使うんですね。「まあ、頑張ってください」日本語で表現するとこんな感じでしょうか。

なので「Good Luck＝幸運を」で暗記するのではなく、プラスのニュアンスで使う時と、マイナスのニュアンスで使う時があって、プラスはこういう場面、マイナスはこういう場面で使われる。このようにしてインプットしないと、全く使えない知識を覚えただけになってしまうのです。

プログラミング学習でも同じで、インプットをする時に、どの場面で使うのか、どんな条件があるのかをセットで覚えることで、前者の問題点は解決します。〝flexbox〟を例に考えてみましょう。〝flexbox〟と聞いて何をイメージして、どのような性質を持つか説明できますか？

僕だったら「Webサイトのレイアウト」に使うのが〝flexbox〟で【子要素を横並びにする】【親要素にdisplay: flex; を指定する】これらがすぐに頭に浮かびます。flexboxを知っている人からしたら、それはそうだわって感じると思います。これはおそらくですが、現役コーダーの方もこのようなイメージに近いはずです。インプットする時にちょっとだけ意識を変えれば、①のキーワードが思い浮かばない人も、徐々に浮かぶようになってきます。

これは僕なりのインプットの方法なのですが、人に教えるように声に出してインプットしています。特にJavaScriptをインプットするときは必ずやってました。現在JavaScriptの学習でつまずいている方は、ぜひトライしてみてください。（ちなみに勉強方法についてのnoteも書こうと思ってます。その時はまた宣伝させてください。）


後者でも実はエラーが解決しない時があります。それはエラーが発生していると思われる箇所を思い込みで勝手に決めつけてしまい、本来エラーが発生している箇所と全く関係ない箇所についてググっている時です。つまり、仮説自体が間違えているパターンです。この現象が発生するタイミングは、ある程度決まってまして、新しい知識を初めてアウトプットした時です。このケースがほとんどだと思います。

Bootstrap（まだ学習されていない方はCSSの学習が終わり写経や模写が１つ終わったら、たにぐち まことのともすたチャンネルで確認してみてください。非常にわかりやすいのでオススメです）を勉強中だった、あおいさん (@Aoi___n___) が実際に書いたコードを参考にその実例をみていこうと思います。（あおいさんをぜひフォローしてみてください。本業をこなしながら、学習を進められている方なので、サラリーマンの方や主婦の方は、非常に参考になると思います）


あおいさんのエラーコードです。

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
   <div class="container-fluid">
       <a class="navbar-brand" href="#"><img src="img/logo.png"></a>
　　 </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navberResponsive">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Service</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Connect</a>
            </li>
         </ul>
     </div>
</nav>


あおいさんは「今この状態で、画面幅狭めるとハンバーガーメニューにはなるんですけど、クリックしてもリストが出ない。って状態です！」と質問をしてくださいました。ここでポイントは、「ハンバーガーメニューは実装できている＝その部分にはエラーコードは存在しない」ということです。にも関らず、コード全てを検証してしまうんです。実際この時、あおいさんは

ハンバーガーメニューが開かない、解決方法がわからない
↓
「Bootstrap　ハンバーガーメニュー　開かない」でググる
↓
解決しない

これで解決する記事を探していたそうです。ここでもう一度状況を確認します。エラーが存在する可能性があるのは、「クリックしてもリストが出ない。」ここですよね。つまり、クリックに関するコードだけ検証すればいいということになります。このようにコードを細分化して検証する癖を必ず付けてください。現役のエンジニアの方々は、このやり方でエラーの箇所を特定していきます。ではクリックに関するコードだけ見ていきましょう。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navberResponsive">

こちらですね。さて、みなさんは気付きましたでしょうか？今回のエラーの原因は「IDのスペルミス」です。〝navbar〟が〝navber〟になっていたんですね。こんな単純なミスでも立派なエラーです。

さて本題はここからです。なぜこのミスに気づかなかったのでしょうか？まず本人の意識の問題があります。新しいことを学習すると、それまでに習得した知識への意識が薄らぐ傾向があります。これは当然のことです。「Hello, World.」とブラウザに初めて表示させた時の緊張感と同じ緊張感で、みなさんは今もHTMLファイルを作成して、ブラウザで表示させますか？違いますよね。新しく得た知識に対してはある程度の緊張感を持って臨みますが、何度も経験していることには「慣れ」が生じますので、そこにミスはないと決めつけがちになります。


そしてもう1つの原因は、ググればエラーは解決すると思い込んでるところです。みなさん、最近ググった内容を振り返って欲しいんです。ググって記事が出てきて、見出しを読んで、これで解決出来そうだなと判断して、その記事をクリック。その記事を開いて、中にある説明を読んで、あーそうそう、今まさにこんな状態。なるほどな、ここをこうすれば解決する感じか、よし、コピーして、自分のエディターにペーストして、実行。

あれ、解決しないぞ。もう一回自分のコードとネットのコードを見比べて、、うーん、間違えてないな。そしたら他の記事を見てみよう。。。

こんなことありませんでしたか？ググっても解決してないんですよね。これを何度も何度も繰り返しているから時間だけが失われていくんです。では、諸先輩方の言う、ググっている時が1番成長すると言うのは、具体的にはどういうことなのでしょうか？これについては次章以降で掘り下げます。


第４章　 初心者の最適な「ググり方」

これまでの章で、「ググる力」について深く掘り下げて説明してきました。プログラミング学習における「ググる力」＝問題解決能力と解釈させていただきました。この章では、プログラミング初心者にとって最適な「ググり方」を解説していきたいと思います。

はじめに第５章と何が違うのかをお伝えしておきます。これは僕自身の考えなのですが、言葉の定義というのは、発信者によって異なりますし、さらにはその受け手によっても変わるものだと思っています。現役エンジニアの方が初心者に対して、エラーでつまずいたら「ググれ」ばいいんだよ。その時が1番成長を感じるんだから。とアドバイスすることがあります。この時の「ググる」は、僕は初心者にとっての「ググる」とは違うものと考えます。

現役のエンジニアの方が発する「ググる」は、主観的なものですから、初心者である僕たちが言葉通りに受け取り、見様見真似でググっても、今まで説明してきたように空回りするだけです。エンジニアとしてのスキルと、プログラミングスキルを初心者に教えるスキルは、全く異なります。スポーツで名をあげた選手が、必ずしもいい指導者になるわけではないのと同じことです。

では、プログラミング初心者は何から始めたらいいのでしょうか？もちろんまずはインプットです。前述した通り、新しく覚えたいコードは、どの場面で使うのか、どんな条件があるのかをセットで覚えることが重要となってきます。そしてここから、初心者が「ググる」出番がやってきます。インプットしたその知識で、具体的に何ができるのか？をググるのです。

例で出した〝flexbox〟は、確かに「Webサイトのレイアウト」に使うし、
【子要素を横並びにする】【親要素にdisplay: flex; を指定する】もちろんこれらを理解しておかなければなりません。でもこれだけじゃ弱いんです。周辺知識を「ググる」ことで新しい知識を自分の物にできるんです。試しにflexboxをググって見てください。justify-contentとか出てきたと思います。それを暗記する必要は全くありません。ただこういう使われ方があるんだと知っておくことで、最初の〝flexbox〟の基礎知識が固まっていくんです。木の幹だけで木の種類を覚えるより、その木が付ける果実や咲かせる花も一緒に見ておいた方が、頭に残るのと同じことです。

要するに、プログラミング初心者は、自分の作品を制作するため、もしくはエラーを解決するための「ググる」より、新しく得た知識を強化するための「ググる」を積極的に使うべきなのです。


第５章　「ググる」の正体　


結局、「ググる」ってどういうことなのか。今までの章から「ググる」という言葉のニュアンスを3つに分けて整理できると思います。

１.　プログラミング初心者の「ググる」

これは第４章で説明した内容です。問題解決に使うより、むしろ知識の深めるために「ググる」べきだと考えます。

２.　脱初心者の方が初心者に向けて使う「ググる」

個人的にこれが1番よくないと思っています。「プログラミングを効率よく学びたいならアウトプットを中心に学習しよう。自分が作りたい物を決めて、それを作り上げるにはどうすればいいのかを考えてググりながら制作していくのが1番いいよ。」

このように、脱初心者の方は初心者にアドバイスしますが、それは自分の中でこれは確実に正しいという知識を持っているから、こういうことが言えるんです。少なくともこういうコードは使うよなって理解しているから、ググってヒットしたコードと比較・検討できるんです。初心者は、その軸となるようなコードが頭にないから、いきなりググっても比較・検討が出来やしないんだから、適切なコードなんて判断がつくわけがないんです。

要するに、脱初心者が使う「ググる」は、基礎知識をもとに周辺知識を「ググる」ことで、自分の表現の幅を増やしていくことや、問題を解決したい時に、別の代替案がぼんやりと頭に浮かんでいて、その使い方をはっきりさせるための「ググる」ことを指しているのです。


３.　現役バリバリのエンジニアが使う「ググる」

ここでのエンジニアの定義は、基礎知識に加え、周辺知識も何度も実務で使用していることから、自分の実装したいイメージとそれに使うコードがすぐさまリンクできる状態にある人のことを指しています。この方々は、インプットした知識を日々アウトプットしていますので、そもそも検討違いなコードを書くことが少ないです。この領域の方々は、デバックでエラーの原因を特定して、自分の持っている知識を運用して解決できることがほとんどです。

ではどのタイミングで「ググる」のか。これは僕がひよっこなので、想像の範囲でしか説明出来ないのですが、おそらく今までほとんど使ったことがないコードの検索や、外部ライブラリの中身を検索するときに「ググる」のだと思われます。

ちなみにこの方々は、僕の印象ではTwitterでは安易に「ググりなさい」と言いません。おそらく感覚的に、これまでの説明内容を理解されているのかと思われます。


最終章

ここまで読んでいただき、ありがとうございます。僕自身まだまだ未熟者ですから、noteの執筆は迷いました。ただ自分の経験から、おそらくTwitterの「ググる」を勘違いしているから、プログラミング学習を挫折する人が多いのではないか？と仮説が立ったのです。プログラミング初心者の助けになるのであれば伝えるべきだと考え、このように書かせて頂きました。

そして「ググる」という、当たり前の言葉をここまで掘り下げてきましたが、発信者が異なるだけでこれだけ違いがあるんだなと、改めて情報発信の難しさを痛感することが出来ました。

このnoteが、プログラミング初心者の学習の助けに、少しでも貢献出来たら、それほど嬉しいことはありません。これからも一歩踏み込んだ内容を発信していけたらと思います。

／
ここまで読んでくださった皆様に、お願いがあります。
＼

このnoteを読んで、役に立った！と思った方は…

■ noteの感想・ご意見を、ぴかそ（@web_art_picasso）を入れてツイートしてください！Twitterは必ず見ます。リプやリツイートも励みになります。noteのコメントもお待ちしてます。また、noteやTwitterでもご紹介させていただきます。

最後まで読んでいただき、本当にありがとうございました。

終わり。













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