コード詩を書くことによってコーディングすることを学ぶ

2008年に、私はデザインの勉強を始めました。そして、コードの純粋な光景が私をどのように脅かしたかをはっきりと覚えています。 私はいくつかのコーディングクラスを持っていましたが、事前のコーディング経験がなかったため、最初に接触したコードを理解するのに苦労しました。 突然、私が英語で慣れていた言葉（「新しい」、「戻る」、「投げる/捕まえる」など）は、まったく新しい意味を帯びました。 不可解な構文、セミコロン、角かっこ、および完全に新しいルールは、私にとって物事を簡単にするものではありませんでした。

JavaScriptを初めて使用する場合や、JavaScriptをスキルセットに追加するのに苦労している場合は、これらの障壁を克服するためのアプローチがあるかもしれません。 あなたは間違いなく一人ではありません、そしてあなたはコーディングを学ぶことは難しいことだと考える権利があります。

なぜコーディングを学ぶのはとても難しいのですか？

人々がJavaScript（または任意のコーディング言語）を学習したり興味を持ったりするのに苦労していると思う理由についての誤解のいくつかを次に示します。

• コードは不可解で、純粋関数型で恐ろしいものです。
• コードはマシンのみを対象としているため、人々は対処されたり関与したりしているとは感じません。
• コードは完全に異なるユースケースを持ち、以前に見たものとは非常に異なって見えるため、言語として扱われません。
• 人々はステレオタイプ（邪悪なハッカー、おそらくいくつかのMatrixの男）について考えているので、それで自分自身を識別しません。
  

開発者は、コードを非常に特殊な方法で処理することが求められます。まったく異なる（そして非常に論理的な）方法で考えることもできます。 コーディング言語は非常に厳格で不寛容です。 1つの文字を使用すると、マシンが意味を理解できなくなり、アプリケーションがクラッシュする可能性があります。 人間の言語を話したり書いたりすることで知っている特定のことを無視して無効にすることが期待されます（ちなみに、これは新しい人間の言語を学ぶ場合にも当てはまります）。

しかし、Web上のすべてのプログラミング言語、ドキュメント、またはビデオチュートリアルが、この「人間からプログラミング言語への移行」を念頭に置いて作成されているわけではありません。 もちろん、そうする必要はありません。 結局のところ、コードの主な目的は、マシンに何をすべきかを指示することです。

それでも、その目的のために、比較の機会が単に失われ、あなたが話す言語（語彙とルール）はプログラミング言語を学ぶのに役に立たないように見えます。 JavaScript言語には「愛」という言葉はなく、「愛しています」と言っても意味がありません。 マシン（またはブラウザ）は、単に愛を知らないか、気にしません（まだ？）。 この「完全に新しい」「どこから始めればいいのかわからない」という気持ちは、地獄のように恐ろしいものになる可能性があります。

これが私がここにいる理由です。 人間の言語の知識を保持し、JavaScriptを他の人間の言語と同じように扱うことで、JavaScriptをはるかに簡単で芸術的な方法で学ぶことができると思います。 小さな例でデモンストレーションしましょう。

おもしろい事実：一部のプログラミング言語は、実際にはあるプログラミング言語から別のプログラミング言語への移行を念頭に置いています。 これが、1つのプログラミング言語を学ぶだけで、多くのプログラミング言語を学ぶことが非常に簡単になる理由です。

小さな例

多くの場合、JavaScriptコードを実行するときは、たとえばHTML要素を操作できるように、「ドキュメント」（基本的にはWebサイト、ユーザーは訪問ごとにダウンロードする）を準備しておく必要があります。 純粋なJavaScriptでは、次のようなことに遭遇する可能性があります。

 (function() { // Your code goes here })();

（うん！この場合、関数は角かっこで定義され、すぐに最後に別の角かっこで呼び出されます。これはIIFEと呼ばれます。）

または時々このように：

 if (document.readyState === 'complete') { // Your code goes here }

最初のスニペットには間違いなく説明が必要ですが、2番目のスニペット（そしておそらくいくつかのファンタジー）では、それを見るだけで何か他のことが起こるように満たす必要がある条件があることを理解できます。

ただし、次のようなものを想像してみてください。

 onceUponATime(function () { // Your code (story) goes here })

「昔々」は子供でも理解できるものです（あえて言うと）。 理論的には同じことをしながら、開発者に（子供の頃の思い出を参照して）対処します。 これは、私が「人間からコーディング言語への移行を念頭に置いている」ことを念頭に置いていることです。

「関数」に関する簡単なメモ：関数は基本的にスキルであり、呼び出すまで休止しています。 「読む」はスキルfunction read() { … }であり、次のようなものを読みたいときに呼び出されます： read() 。 「匿名関数」と呼ばれるものもあります。つまり、 "function() { … } （上記のスニペットのように名前はありません）」です。これは基本的に、スキルとは見なされない「1回限りの/カジュアルなアクション」です。 、「ボタンを押す」など。

テーブルを回す：メッセージから基本へ

それでは、このアイデアをもう少し進めましょう。 上記の理由と誤解を取り上げて、それらを逆さまにしましょう。

小さな詩。

JavaScriptで書かれています。

人間のために作られました。

二人の愛について。

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

機能していません。 現在、マシン向けではありません。 それはあなたが読んで理解するためのものです。

詩のメッセージを受け取った場合、実際にはJavaScriptコードの一部を理解していることになります。これは、英語と比較した可能性があります。

今、あなたは自問するかもしれません：私はこれを理解していますが、なぜそれはこのように書かれているのですか？ この言語の規則（文法）は何ですか？ 「私」（技術的な意味で）の意味は何ですか、そしてなぜこのコードは英語にとても似ているのですか？

ルール、語彙、および変数

プログラミング言語を学ぶときに理解する最も重要なことの1つは、変数の概念です。

すべての人間の言語には、その規則（文法）と多くの語彙（事前定義）があります。 明らかに、言語を話すことができるようにするために、これらの両方を最初に学ぶ必要があります。

JavaScriptには、他の多くのプログラミング言語と同様に、独自のルールセット（たとえば、単語間の.やifステートメントの記述方法）と独自の語彙（ if 、 document 、 window 、 Eventなど）が付属しています。 これらのキーワードはJavaScript（およびブラウザー）によって予約（または「事前定義」）されており、それぞれに特定の目的があります。

しかし、先に述べたように、英語で知っている単語や文を比較する機会は、同等のものがないため、一見欠けているようです。

これが変数の出番です。 あなた（開発者）は、マシンと開発者に何かが何を意味するのかを理解させるために、変数を定義することができます（または定義する必要があります）。 変数はさまざまな形をとることができます（そのため名前が付けられています）。変数は、単語と文字のチェーン（文字列）、数値、アクション（関数）、またはコレクション（配列）にすることができます。 あなたはそれに名前を付けます。

すべての言語で、おそらく愛の言葉があります。 あなたはそれが何を意味するのかをちょっと知っていますが、それはとても主観的であるため、実際にはそうではありません。 しかし、それでも、それについての言葉があります。

しかし、JavaScriptには、あなたが言うまで「愛」はありません。 それはあなたが望むものなら何でもかまいません。

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = {色： '紫'、持続時間： '永遠に'、loveTarget： '犬'、};
 //変数式でもあり、love2（定数）、//再定義/完全に上書きすることはできません：// love2 = undefined; // =>は機能しません
//（「undefined」は事前定義されたjavascriptキーワードであり、//基本的に「値がありません」と言っています）

JavaScriptで事前定義されているもの（JavaScriptのルールと語彙）と、開発者が実際にカスタム定義しているもの（「アプリケーションロジック」または「ビジネスロジック」とも呼ばれます）を区別できることが重要です。

上記の詩に戻る：

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

これらの式は、次のJavaScriptボキャブラリー/ルールセットに由来します。

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

より大きな例：インタラクティブなコード詩

これが私の個人的なプロジェクトLoveBitsが生まれた経緯です。 LoveBitsは、コード学習/ストーリーテリング体験です。

それは人々にJavaScript /コーディングに興味を持ってもらうことを試みます：

• 読みやすさと人間の言語を最優先します。
• コードとアートを組み合わせると、読者はすでに精通しているかもしれません。

ストーリー的には、それは約2ビット（長方形の存在）です。 ビットの1つ（blueBit）はロマンチックなもので、JavaScriptの愛の詩をもう1つのビット（purpleBit）に書き込みます。

LoveBitsを起動すると、複数の愛の詩（JavaScriptで記述）の1つを選択できます。 各詩には、プログラミングに精通していない人でも理解できるように書かれたコードスニペットがあります。 唯一の要件は英語です。

たとえば、「一目ぼれ」（実際にはLoveBitsの詩の1つ）は、blueBitが基本的に「あなたの位置に十分近づくと、「気持ちをinLove: trueに設定」します。 inLove: trueです。」

これらの詩の特別な点は、下の「再生」ボタンを押すだけで「実行」または「再生」できることです。 「一目惚れ」の場合、青と紫の長方形と数字が表示されます。 すでにお察しのとおり、これらは詩で言及されている2つのビットであり、blueBitの下の数字は、実際にはblueBitとpurpleBitの間の距離です。

詩が示唆しているように、それらの間の距離を縮めることによって、blueBitをpurpleBitに恋させたいと思うかもしれませんね。 それで、あなたは何ができますか？ blueBitを操作してドラッグし、恋に落ちるようにすることができます。 ただし、注意してください。結果が1つだけではない場合もあります。

あなたがここの機械であると実際に言う人もいるかもしれません。 あなたは、2人のデジタル生物が恋に落ちるのを助けて行動できるようにするためにJavaScriptコードを解釈する必要がある人です。

ここからどこへ行くの？

苦労している開発者の場合は、JavaScriptを人間の言語のように扱ってみてください。実際に実行するのではなく、コードスニペットが最初に実行することになっていることを理解してください。

これは私が次にすることをお勧めすることです：

• ルール、語彙、変数を組み合わせてアプリケーションロジックを形成する、アプリケーション全体の例とコードをまっすぐに進めることを常に好みます。
• アプリケーションロジックは、上記のコード例のようにギャップを埋めるのに役立つストーリーを伝えます。 コードライブラリとlodashなどのユーティリティは、JavaScriptコードを読んで理解した後に役立つ新しい語彙のみを提供します。
• 既存のコードを確認し、それらが何をするかを反映する名前を持つ小さな関数に分解してみてください。 人間と機械の両方に対応するコードを記述します。 文のように読めるようにコードを書いてください。 必要に応じてコメントを使用してください。 考えてみてください：これを人間の言語で（別の開発者に）どのように表現しますか？

結論

コードをエイリアンが発明したものとしてではなく、人間の言語として扱い始めると、コードの学習が容易になります。 言語機能（組み込み）とアプリケーションロジックの変数/カスタムコードを区別する方法を学ぶことは非常に重要です。 アプリケーションロジックを理解できると、言語機能を知らなくても、物事を改善および変更するための強力な立場に立つことができます。

基本の前のメッセージ：コードスニペットのメッセージを理解すると、JavaScriptの基本が自然に続きます。 「私はその言語を理解しているが、まだ話せない」と誰かが言うのを何回聞いたことがありますか？ これは自然なプロセスであり、人間の言語とコーディング言語の両方を学習するために適用でき、おそらく適用する必要があります。

また、コードには明確な機能目的があることを常に念頭に置いてください。ただし、必ずしもそのようにする必要はありません。 人間の言語でさえ、かつては純粋関数型でしたが、その後、まったく異なる方法で人々をつなぐ詩や歌（JavaScriptの歌、誰か？）が登場しました。 ここでも同じことが言えると思います。

常にコードプロジェクトを探索し、おそらく自分で詩を書いてみてください（おそらくあなたが精通している別のプログラミング言語でさえ）？ LoveBitsプロジェクトの作成を楽しんだので、以下のコメントであなたのアイデアのいくつかを見てみたいです！

参考文献

• 「ヘミングウェイがJavaScriptを書いたとしたら」、アンガス・クロル
  これは、LoveBitsの後で実際に偶然見つけた私のお気に入りの本の1つです。 それは、いくつかの有名な詩人や芸術家、そして彼らがJavaScriptコードスニペットをどのように書いたかについてです。 陽気です！