コーディング方法を学ぶのが難しいのはなぜか(そしてそれについてどうするか)

2014年の秋、私はWeb開発の学習に向けて長く苦痛を伴う旅を始めました。

私は日中の仕事を持っていたので、このプロセスが私の夜と週末を消費することを知っていました。そして、以前にオンラインで技術的なスキルを学んだことはなかったので、途中でheadい頭を立てる想像を絶する挑戦がたくさんあることを認識していました。

しかし、ここに私が予想できなかったものがあります。何百ものビデオ、インタラクティブなチュートリアルを使用した後、オンラインで技術的なトピックを教える方法は信じられないほど原始的であることがわかりました。

オンラインコーディングチュートリアルの現状

数万年の集団的経験を持つ開発者によって、HTML、CSS、およびJavaScriptについて毎年書かれた数千のチュートリアルがあります。さまざまな教育方法とインタラクティブなツールを備えた豊かなエコシステムがあると思うでしょう。

そうではありません。代わりに、コーディングチュートリアルでは、20世紀の教育技術と21世紀の技術を単に再パッケージ化します。

ビデオチュートリアルは、ホワイトボードを使用した教室のレッスンを模倣しています。または、インフォマーシャルから購入できる教育用DVD。

書かれたチュートリアルは、本の章のように機能します。

インタラクティブなチュートリアルは、80年代から大学で使用されているコンパイラのように機能します。

毎晩新しいトピックを学び、テストプロジェクトでそれらを試した後、私は何か間違ったことをしなければならないと思った。それで、私は友人たちに私が違うやり方をするべきだと思うことを尋ね始めました。

大学で教育を受けたコンピューターサイエンス専攻の学生から、「W3 SchoolsやMozilla Developer Networkのドキュメントを読んでみましたか?」

他の起業家は私にこう言った。試したときにそれを学ぶことができませんでした。」

独学のWeb開発者が私に尋ねました。「なぜ私と話しているのですか?ウェブ開発を学びたいなら、何百時間も残っています。」

ドキュメントを読む。あきらめる。さらに時間をかけます。それらは私の選択肢でした。

フルスタックのWebアプリケーションを構築できるようになるまで、私は何時間も費やし続けました。少なくとも1年はかかりました。これらの時間は、「見た」ように感じるまで、チュートリアルの再視聴、再読、再実行に費やされ、プロジェクトでコンセプトを試しました。

私は大学で使用しなければならなかった苦痛な学習習慣から本当に進歩していないように感じました。他の何千人ものWeb開発者がこの旅を完了する必要があるのは衝撃的でした。

それで、なぜこれらの技術的なチュートリアルが何時間も混乱を招いた理由を見つけるために着手しました。私は認知心理学の分野の本や論文を読み、一般的な説明の戦術を見て、自分のコーディングチュートリアルのシリーズを書きました。

インターネットのコーディングチュートリアルで満足のいくレッスンを提供できなかった5つの理由を以下に示します(そして、より良い方法)。

間違い1:コードスニペットを表示して教える

コーディングと料理を比較しましょう。どちらも、合理的な出力が必要な場合は、一連の指示に従う必要があります。どちらにもエラーの余地のない厳しいルールがあります。

何らかの理由で、チュートリアル作成者は、初めてコンセプトを説明した後、すぐにコードのスニペットを画面に配置するのが大好きです。彼らは、それが十分であるかのように、コードの行ごとの説明を提供します。

上記のコードスニペットの異なる行の間には、Node.jsの中間開発者であり、HTTPサーバーの記述方法を知っている場合を除き、明確な関連付けはありません。

ソースの作り方を教えようとした場合、これは、ソースの各成分の写真を準備された形で見せて、そこに到達する方法を見せることと同じです。あなたはそれを理解することができますが、それは多くの試行錯誤がかかります。

これはさいの目に切った豆腐ですか?玉ねぎのみじん切り?さいの目に切ったフェンネル?チャンクはどれくらいの大きさですか?それらをさいの目に切るにはどのツールを使用すればよいですか?

もちろん、熟練した料理人になりたい場合は、タマネギを何度もさいの目に切る方法を学びたくありません。一度か二度教えて、玉ねぎ全体からさいの目に切るまでの小さな一歩ごとに独立して思い出せるようにしたいと思います。

これは料理教室に行くのと同じくらい近いです

HTTPサーバーの作成方法を学習するためのマルチステッププロセスがある場合(上記の例のように)、コードスニペットは最後の部分である必要があります。最初の(または全体の)プロセスであってはなりません。そして、文脈全体を一緒に教えなければなりません。

これは、脳が連合を介して海馬に長期記憶を保存するためです。海馬には、関連する概念とともに新しい概念を保存するためのコンテキストが必要です。この場合のコンテキストは、個々の説明を含むコードの隣接する行ではありません。

代わりに、新しいWeb開発者は、HTTPサーバーの概念を既に理解しているものに関連付けることにより、HTTPサーバーの概念を保存する可能性がはるかに高くなります。脳は、新しい挑戦的な概念をうまく保存するために、豊富な接続ネットワークを作成する必要があります。

脳がHTTPサーバーのコンポーネントをよりよく理解できるいくつかの方法を以下に示します。

  1. コードブロックのさまざまな部分を説明し、既存の関係を使用してこれらの新しい関係を説明する類推。
  2. アプリケーションのライブ状態を表示するコードスニペットのインタラクティブバージョン。行を変更すると、リクエストに何が起こったのかがすぐにわかります。

間違い#2:80/20ルールを考慮しない

Web開発教師または10人の新しいWeb開発者にインタビューすると、同じ課題について何度も耳にするでしょう。 CSSポジショニング。フロート。コールバック。これらは過去10年間で最も一般的な課題でした。

ただし、何らかの理由で、チュートリアルでは各コンセプトを同じ時間にわたって教えます。 CSS入門のレッスンが10レッスンで構成されており、合計5時間かかると予想される場合、各レッスンの長さは約30分です。最も難しいトピックについては十分に文書化されたコンセンサスがありますが、簡単なものは厳しいものとまったく同じ長さで教えられます!

卵を割る方法と、鶏の胸肉を注意深く焼く方法を教えるようなものです。どちらも素晴らしい食事を作るために同様に重要ですが、一方はより多くの練習を必要とします。しかし、鶏の胸肉を調理することは、外からは簡単な仕事であるように見えるので、それらも同様に難しいと信じているように思われるかもしれません。

新しい開発者は、この問題をいくつかの方法で解決します。

  1. 彼らは愚かなものだと仮定し、あきらめます
  2. 同じトピックに関する他のチュートリアルを参照してください。これは、繰り返しが多く、品質が低い場合があります。 「スプレーアンドプレイ」アプローチ。
  3. 彼らは「後でそれを図解する」という仮定で次のトピックに進んでください

他の分野の教師は、80/20分析を使用して、自分の努力に再び焦点を合わせます。これは、新しい概念の20%が学生の学習時間の80%を消費することを意味します。

サンプルCSSトピック

美しいWebサイトを構築するには、6つのCSSトピックも同様に必要かもしれません。しかし、それらは同じように簡単に学ぶことはできません。何人かは何時間も苦労します。

理想的な世界では、CSSの完全なカリキュラムには、これらの共通の困難なトピックに関する2〜3倍の教材が含まれます。積極的な励まし(「誰もがこれに苦労しています!」)と追加の練習の機会が含まれます。しかし、これはまだ起こっていないので、ほとんどの一般的なサービスで起こるとは思っていません。

あなたは何時間も新しい概念を学ぼうとしているときにこのわだちに立ち往生していることを知っています、そしてあなたはまだあなたがコードの1行を微調整するならば何が起こるか予測できません。ファインマンテクニックを使用して、完全に理解していないトピックを判断できます。

  1. コンセプトを選択してください
  2. 幼児に教える
  3. ギャップを特定し、ソース資料に戻る
  4. レビューと簡素化(オプション)

間違い3:経験豊富なエンジニアの視点から教える

多くの入門コーディングチュートリアルは、10年以上の経験を持つエンジニアによって書かれています。どうやって知るの?気づくまで、チュートリアルを何度も何度も見たり読んだりしなければならなかったので、「彼らはこの重要な概念を説明しません!続行するには、インターネットで説明を検索する必要があります。」

これは、実際には「知識の呪い」と呼ばれる十分に文書化された認知バイアスであり、すべての技術分野で発生します。

画像ソース:CommunicateHealth

その意味は次のとおりです。教師が技術的な主題について長年の経験を積んでいる場合、教師はすでに主題に対する深い理解を築いています。彼らは自分の脳のつながりに目がくらんでいるので、初心者が新しい素材をどのように見ているのか理解できません。

脳が上からの記憶を保存する方法を思い出せば、これは実際に生物学的基盤を持っています!教師の海馬は、学生の脳にはない連合を形成しました。

この課題を克服するために、私は独学のWeb開発者が同様の立場にいる他の人のために書いたFreeCodeCampのようなツールをお勧めします!自主学習者がハードルを克服するのを特に支援するための完全なカリキュラムがあります。

間違いその4:神秘的な新しいシステムのようにコードを教える

料理の比較に戻りましょう。ほとんどの人は一生何かを調理しているか、両親から基本を教えられました。彼らは、長年の試行錯誤のすべての基本的なツールにすでに精通しています。だから、もしあなたがプロの料理人になるように人に教えていたら、あなたはすでに基礎を築くことができたでしょう。

しかし、学習Web開発の「基本」バージョンはありません!過去にRまたはJavaを学んだとしても、引き継ぐ多くのレッスンはありません。

それで、ほとんどのオンラインチュートリアルはこれをどのように考慮しますか?それらには、素晴らしい新しい世界のようにコードを教えるレッスンが含まれており、HTTPサーバー、洗練されたブラウザー、非同期イベントが満載です。これらの複雑な部分は、後の高度な学習の基盤であるように機能します。

調理が入場にこのような高い障壁を必要とする場合を想像してください。私たちは皆、電子レンジの食べ物を食べます。クッキングは五感すべてに関係し、正しい手順と間違った手順があなたの脳にすぐに突き刺さります。人間の脳は、複数の感覚をつかむときに最もよく学習します。さまざまな刺激が良い対悪いを明らかにするとき、それはシステムを理解することができます。

今、私はこれが不可能に思えます。すべてのコードはブラウザまたはサーバーで実行されるため、どのように感覚に接続できますか?また、CSSプロパティを切り替えている間に、画面をズームする

を見ているわけではありません。それは学習を奨励しません。

また、数学の虚数は人間の感覚に結びつけることは不可能だと思っていたでしょう。 i、i²、i³、i⁴を覚えていますか?あなたがちょうど適用するために暗記する必要がある新しいシステムのようです。

代わりに、BetterExplainedのKalid Azadは、x軸とy軸を持つグラフを使用して、「想像上の」次元を視覚化するのに役立ちます。現在、虚数の概念は、馴染みのある概念と直接結びついています。暗記は必要ありません。

間違い5:即時フィードバックの欠如

表面的には、Web開発にはすでにフィードバックのための完璧なシステムがあるように思えるかもしれません。結局のところ、ブラウザーを更新するか、コンソールに「npm start」と入力すると、すぐに応答が返されます。

料理の例えで、食事のために鶏の胸肉を完璧に調理しようとしているとしましょう。代わりに、あなたはそれを燃やします。何が間違っていたのでしょうか?

  1. そもそも薄すぎた
  2. 熱を上げすぎた
  3. 遅めに鍋に入れます
  4. 鍋に入れすぎた

最後に焼けた製品は、何が悪いのかについての手がかりを与えません。長年の経験または試行錯誤を使用した無数の試みのみが、何が間違っていたかを理解するのに役立ちます。

これがコマンドプロンプトで発生した場合に表示されるエラーメッセージは次のとおりです。

それはデバッグの助けにはなりません!数時間後にあなたがそれを理解するまで、試行錯誤による学習を奨励します。代わりに、各決定の影響を警告するフィードバックシステムが必要です。

上記のビジュアルは、ステップ2の「最高温度」で、出力を台無しにする何らかの問題が発生したことを示しています。

可能な決定のこの豊富なネットワークは、すでに熟練したシェフの脳に組み込まれています。また、中級のWeb開発者でもエラーメッセージを読み、スクリプトの一部にデバッグ作業を集中させることができます。しかし、初心者には似たような本能がなく、今日では、断続的なフィードバックを伴う試行錯誤の時間から学ぶだけです。

繰り返しますが、これはテキストエディターやCodePenのようなオンラインエディターで実行することは不可能に思えるかもしれません。しかし、Bret Victorの有名なエッセイであるLearnable Programmingは、新しいプログラマーが入力されるとすぐにスクリプト内のすべてのコード行についてフィードバックを得るためのフレームワーク全体を既に概説しています。

独学の学習者が最も傷つく

あなたが高校または大学にいる場合、あなたは教育の準パーレベルに対処することができます。次のテストの準備が必要で、仲間の学生のサポートネットワークがあります。あなたは、実生活でスキルを練習するために報酬を得ることができるかどうかではなく、テストでスコアを得ることができるかどうかで評価されます。

しかし、独学のWeb開発者であれば、おそらく異なる状況に直面するでしょう。時間が限られているため、実際のアプリを構築するか、就職の面接中にテストに合格することで、スキルセット全体を証明する必要があります。テストのために勉強し、次に進むという概念はありません。

オンライン教育業界が成長し、より多くの成人がオンラインで新しいスキルを学ぶことを余儀なくされるにつれて、私は学習者に力が移ると予測しています。オンライン教育会社には、学習体験そのものを改善するよう圧力が高まっています。最高の教育戦略は、数十万人の有料購読者に報われます。

Web開発の新しい方法を作成しようとしています。チュートリアルへの記憶に残るアプローチを確認したい場合は、CodeAnalogies.comにアクセスしてください。そして、他の人がこの物語を楽しんでくれると思うなら、拍手してください!