英語とプログラミングを一緒に学習！英語のJavaScriptチュートリアルビデオを見ながらプログラミング体験！【初めてのJavaScript編】

「英語のJavaScriptチュートリアルビデオでプログラミングを学ぶ！」シリーズの第２弾はLet's See It！（実際に見てみよう！）ということで、まずは簡単なJavaScriptを書いてみます。でもツールとか面倒な設定は不要。ChromeブラウザがあればそこでJavaScriptコードが書けてしまうのです！

セクション１：クイックデモ

まずはこのビデオのリンクをクリックして、Let's see JavaScript in action!（実際にJavaScriptを見てみよう！）のところから見てください。今回はChromeブラウザのコンソール画面を出すところまでです。

この画面まで。

まずはquick demo（クイックデモ）という表現が聞こえましたか？ これは文字通り「まずはデモをしてみるので見ていてね」ということ。こだけでこの部分のポイントはわかります。ただ、その前に説明していたこの文章を理解してください。

You can easily write JavaScript code here without any additional tools.
ここで簡単にJavaScriptのコードが書けて、他にツールは何も必要ありません。

easilyは「簡単に」

例：I can easily understand such thing! 
   そんなの簡単にわかりよ！

つまり、JavaScriptを体験するにはブラウザだけあればよいということです。そう、何かツールが必要なわけではないのです。ならば即スタートできますよね。そこでその手順を説明していますが、ここでの表現に注目してください。

Open up Chrome, 
Right click on an empty area, 
and go to Inspect.

 クロームを開いて、
何もないところで右クリックし、
Inspect（検証）に行きます。

この手順でChromeブラウザ内で使える”開発ツール”が出てきます。まさかブラウザにそんなツールが存在していたとは…と驚く方も多いと思います。

ただ、ビデオで見たように上下に分かれて検証画面が出てこない場合があります。その時は画面右上に縦に並んだ点三つのアイコンをクリックしてください。画面をどのようにスタックするか選択できるので、上下に表示するアイコンを選んでください。

そしてConsoleをクリックします。もし画面にごちゃごや警告などが表示されていたら、このクリーンアップのアイコンをクリックするとすべて消えてきれいになります。

そこで次の文章が聞き取れましたか？

You can write any valid JavaScript code here.
ここでちゃんとしたJavaScriptコードが書けます。

validは「正しい」という意味です。

例：Is there any valid reason why you use the function?
   その関数を使うのにきちんとした理由はあるの？

この文章のおおまかな意味は分かったと思いますが、validが分からなかった人もいると思います。ただ、この単語の意味が分からなくても、「ここでJavaScriptが書ける」ということを掴むことができれば十分です。多少単語が分からなくても理解度には全く影響しないことも多いので、細かいところは気にせず聞き進めていってください。

セクション２：初めてのJavaScript

では最初のJavaScriptを書いてみます。So...から始まる次のリンクから聞いてください。ここはコンソールにHello Worldの文字が表示されるところまでです。

ここまで。

最初に書くJavaScriptはこれです。

Console.log('Hello World');

この一行のコードを説明する英語に注目してください。

"Console", dot, "log", put a single quote here, and then "hello world". Put another single quote to terminate. Close the parentheses, and add a semicolon at the end. 
（Console、ドット、log、ここに引用符を入れて、そしてhello worldと書きます。引用符をもう一つ入れて閉じます。括弧を閉じて、最後にセミコロンを加えます。

日本語で「括弧を入れて…」と言いたい場合には、英語はputとかaddを使っていることに注目してください。簡単な表現ですよね。でも実際に自分でコードを説明するとなるとこんな簡単な動詞でもなかなか出てきません。

terminateはターミネーターのterminateですが、殺伐とした意味ではなく、文章や引用を「閉じる」という時に使います。Closeではないの？と思うかもしれませんが、もちろんそれでも構いません。実際そのすぐ後に「括弧を閉じる」はcloseを使っています。

さて、一行のコードを書いたら、Moshさんは、

Don't worry about it for now.
それは今は気にしないでくださいね。

for nowは「今は」。

例： Let's not discuss that for now.
   そこことは今は議論しないでおこう。

つまり、このコースを受けていくと、ここで書いたコードが何をしているのかきちんと理解できるようになるよ、と言っています。そこで一言「心配しないで」。なので、コードの意味は気にせず次を聞いてみましょう。

Now press Enter.
そこでEnterキーを押してください。

Enterキーを押すと確かにHello Worldと表示されました。

ここはHello Worldではつまらないので何か日本語を入れてみてください。

コード内に日本語を入れても、同じ言葉が表示されます。いろんな文字を打ち込んで何度も試してみてください。

セクション３：計算や警告表示も

コンソール画面でもうちょっと遊んでみます。足し算をやる場面を聞いてみてください。次のリンクをクリックすると該当箇所からスタートします。ここはYo（よー！）と警告ウィンドウを出す下の画面のところまでです。

まずこの表現から始まります。

We can also write mathematical expressions here.
ここでは計算式も書けます。

mathematicalは「数学の」、expressionは「表現」で、「数学の表現」つまり「数式」のことです。そして簡単な２＋２をやっています。

2 plus 2. We get 4.
2足す２で、４になります。

日本人なら間違いなく、Two plus two equal Fourみたいな英語になると思います。ここでさらっとWe get fourとgetを使うのはなかなかできないと思います。

続けてちょっと面白いことをします。

Or we can do something like this.
あるいは、こんなこともできます。

something like thisは「このようなこと」。

例： You can write something like this.
   こんな感じで書けるよ。

そこで書くのがこの一行。

alert('Yo!');

"alert", a parenthesis, a single quot, "Yo!". 

ここはコードの各文字をそのまま言っているだけなので、パーツの名前がわかれば理解できます。ところで括弧はparenthesisですが、これが発音しにくい！パーレンテスィスみたいな発音ですが、面倒なのでparen（パーレン）と短縮して言う時が多いです。

ここもYoではつまらないので、何か日本語を入れてみてください。

確かに警告のウィンドウが出て日本語が表示されます。ちょっとはプログラミングをしている気分になりますよね！

このセクションのまとめ

ここではChromeの検証ツールを使ってJavaScriptコードを走らせてみました。特別なツールがなくても簡単なコードならこんなこともできるのです。コードを書いてやってことはこの３つ。

✅ 文字を表示させる
✅ 数式の計算
✅ 警告ウィンドウの表示

文字の表示や四則計算はつまらないのですが、自分の書いた日本語でウィンドウが表示されるのを見ると、ちょっとはコーディングしている気分が味わえます。実際にブラウザでもメッセージウィンドウが出てくることがあります。タブを閉じてよいかどうかを確認するウィンドウ、マイクのアクセス許可を尋ねるウィンドウなど、なじみの場面があると思います。普段アプリケーションで見かける現象とプログラミングがちょっとつながった感じがすればこのセクションの目標は達成です！