【英語のJavaScriptチュートリアルビデオを解説】 Visual Studio Codeを使って速攻でWebページを作る

今回から本格的な開発ツールを使ってコードを書いていきます。JavaScriptはWebサイトのページ内に書いていくパターンから始めるので、まずはWebページを作成します。使うツールはVisual Studio Code。インストールが済んだらちょっとした操作で早速Webページを実際に作ってブラウザで表示させるところまでいきます！

セクション１：Visual Studio Codeのインストール

JavaScriptを書く場合、前編でやったブラウザの検証ツールを使うこともできますが、あくまでも検証のためのコンソール画面です。きちんとしたプログラミングをするには開発ツールが必要。ここではVisual Studio Codeを使います。次のビデオリンクの箇所から聞いてみてください。このセクションはNodeの説明をするところまでです。

ここまでです。

まずはこのセクション、この説明から始まります。

In order to write JavaScript code, you need a code editor.
JavaScriptコードを書くには、コードエディタが必要です。

「～するには」は単にtoを使えばよいです。

To write JavaScript code, you need a code editor.
JavaScriptコードを書くには、コードエディタが必要です。

ここはビデオ解説で、多少フォーマルなしゃべりになるので、このin order toという表現を使っているだけです。フォーマルなプレゼンでも使います。カジュアルな会話では特別理由がない限り使いまっせん。

ということでJavaScriptを書くエディタの例を挙げていますが、ここではVisual Studio Code（VSCodeと略します）を使います。

VSCodeはmy favorite（私のお気に入り）と言っていますが、それを使う理由をこう言っています。

It's very simple, lightweight, cross-platform and powerful...

simpleとpowerfulは分かると思いますが、lightweightは「軽い」、つまりサクサク動くということです。そしてcross-platformというのはそのままだと「プラットフォームを超えて」ということ。つまりどのプラットフォームでも動くということです。要はMacでもWindowsでもLinuxでも使えるツールということです。このcross-xxxはほかにもよく使われる表現があります。

例：We need to do some cross-team collaboration.
   チームを超えた協力が必要だ。

VSCodeのインストールは以下のサイトからできます。先ほど説明した通り、MacでもWindowsでも使えます。

Visual Studio Code - Code Editing. Redefined

参考までに、VSCodeはそのままだと英語版です。もしメニューなどを日本語にしたい場合はこのWebサイトを参考にしてみてください。ただし、Moshさんのチュートリアルはすべて英語で進むので、英語のインターフェースのままでやることをおすすめします。

VSCode（Visual Studio Code）のインストールと日本語化

そしてもう一つインストールしてもらいたいのがNode（ノード）というものです。

Node.js

Technically you don't need node to execute JavaScript.
技術的には、JavaScriptを実行するのにNodeは必要ありません。

ここでは文字通り「技術的には」です。ただし、このtechnicallyはちょっと英語らしいニュアンスがあります。

I paid a full amount. Technically, it's not illegal.
僕は全額払ったんだよ。ちゃんとみれば違法じゃない。

払うべき金額を遅れて払ったのでしょうか。事情はともかくとして、「とにかく払うべきお金は払ったんだから、そこを厳密に見たら違法行為なんかじゃない」といった主張です。ここは「技術的には」という意味ではなく、「真正面から解釈すれば」「その事実だけをみたら」ということです。場面としては「こじつけで自分の正当性を主張する」際に使いますね。つまりこれを使うときはちょっとやましいことがあるというケースが多いかもしれませんね。

Technically, she's not my girlfriend!
厳密に言えば彼女とは付き合っていないんだよ！

このニュアンスもちょっとは分かってきませんか？

ということでNodeはサードパーティのライブラリというものを使うためにあったほうが便利だということと、後半ではJavaScriptをローカルで走らせるNode.jsについてちょっと説明するのでダウンロードしておいてくださいという説明をしています。Nodeのサイトでは左のRecommended for most users（たいていのユーザーにお勧め）という左側のボタンをクリックいしてダウンロードしてください。

ダウンロードが終わってインストーラーを立ち上げたら、すべて英語の画面ですが、基本的にすべてNextをクリックして最後にInstallボタンをクリックすれば完了します。

セクション２：Webページを作って表示！

VSCodeがインストールできたら、まずはWebサーバーをインストールして、超簡単なWebページを作ります。Webページを作ったことがない人は初めてのHTMLコーディング作業です。以下のリンクをクリックするとまずはフォルダを作成するところから始まります。ここはHello Worldと文字が表示されるWebサイトを作るところまでです。

ここまでです。

まずはこのチュートリアルで各コードを保存しておくフォルダを、js-basicsという名前で作ります。このフォルダはどこに作っても構いません。そしてこう指示します。

Drag and drop this folder into Visual Studio Code.
VSCodeにドラッグアンドドロップしてください。

こうするとVSCの中の左サイドにフォルダが表示されます。これはVSCの中でフォルダを指定しても同じです。この場面でMoshさんはこういいます。

Now we've got this folder open.
さてこれでこのフォルダを開いた状態にしています。

このgetの意味と使い方がわかりますか？ まずget this folder openという表現を理解してください。ただ単にopened（開いた）と言うこともできます。

We opened this folder.
このフォルダを開きました。

ただ、get this folder openというほうがもっと「開いた状態にする」というニュアンスが出てきます。別の例を見てみます。

I can get this project done by the end of this month.
今月末までにこのプロジェクトを終わらせられるよ。

これを、I can do this project by the end of this month と言うと「今月末までにプロジェクトをやる＝手がけることができる」ということで、完全に終わらせることができるのかどうか曖昧で、ちょっと意味が弱くなります。はっきりと「完了させせられる」という場合はget this project doneと言わないといけません。

この基本動詞getの使い方は拙著『ITエンジニアが覚えておきたい英語基本動詞30』で詳しく解説していますので、ぜひ参考にしてみてください。

ITエンジニアが覚えておきたい英語動詞30

そして次の作業です。

Let's add a new file here. Index.html.
ここに新しいファイルを作りましょう。index.htmlです。

js-basicsというフォルダ名の右側にいくつかアイコンが見えます。一番左が新しいファイルを追加するものですので、それをクリックします。そして名前にindex.htmlと入れます。これがWebページのファイルです。名前を打ち込んだらEnterキーを押してください。

さて実際のコーディング作業です。

In this file, I want you to type an exclamation mark, and then press TAB.
このファイルで感嘆符（！）を入れて、TABキーを押してください。

すると右サイドにドバっとHTMLコードが現れます。

HTMLを勉強したことがある方は大体何が起きたかわかりますが、初めての方はこのHTMLコードがWebページを作っている実際の裏側の姿です。これがどうしてWebページになるのか次のステップで分かります。

ここでMoshさんが言っているのが、

This generates some  basic HTML boilerplate.
これで基本的なHTMLのボイラープレートが生成されます。

まず動詞のgenerateは「生成する」ですが、この boilerplateは聞いたことがない人が多いのではないでしょうか。ITの現場ではよく使われます。意味としては「鋳型」ということですが、例えば文章を作る時の「ひな形」がボイラープレートです。いつも使う「決まり文句」を登録しておく場合、これもボイラープレートです。ここではHTMLコードの超基本形、つまりどんなWebページを書くにしてもこの部分は必ず書くというものをあらかじめ登録しておいているのがこの！＋TABで出てくるコードのひな形です。

そしてSave the changesというので、ファイルを保存しましょう。Cntl + S、つまりコントロールキーとSキーを押せばセーブできます。

そしてHTMLコードをブラウザで簡単に表示させるツールをインストールします。左端にあるアイコンの最も下にあるExtension（拡張）というアイコンをクリックします。すると今までファイルが表示されていた左のエリアにずらっと何かが表示されます。

上の検索ボックスにlive serverとタイプすると、Live Serverという項目が表示されます。表示されたらそれをクリックし、右側の詳細部分にInstallのボタンがあるので、それをクリックしてインストールします。

インストールしたら右下にVSCodeを再起動（Restart）するよう指示するウィンドウが現れるので、そこで再起動を選択します。

再起動したら、index.htmlのところで右クリックし、Open with Live Serverという項目を選択します。

こうするとブラウザが立ち上がって真っ白なページを開きます。何のことだか理解できないかもしれませんが、これは皆さんが作ったWebページ、index.htmlなのです。「あのごちゃごちゃしたHTMLコードはどこにいったのか？」と思うかもしれませんがまずは気にしないでください。ただ、ちょっとみておいてもらいたいのがアドレスです。

ここにindex.htmlとあるでしょう？これがまさに皆さんが書いたファイルなのです。

This will open up Chrome or your default browser, and point it to this address.that's where our Web application is served from. 
これによってChromeあるいはお使いのブラウザが開き、ブラウザでこのアドレスを開きます。そこでは作ったWebアプリがホストされているのです

まず、pointというのは「仕向ける」「指す」ということです。そしてthis addressというのはWebアドレスのことで、先のスクリーンで示した番号のことを指します。つまり、このアドレスでブラウザを開くという意味です。

真っ白いページでは何が何だか分からないので、ここでは何か日本語を表示させてみましょう。

Here in the Body section, let's add an h1, and type Hello World.
ここのBodyセクションで、h１と入れて、"hello world"とタイプします。

h１と入れてEnterキーを押すと自動的に<h1></h1>が出てきます。これは見出しレベル１のテキストを指定するためのHTMLタグです。HはHeader(見出し）のHです。ここでは好きな日本語を入れてください。

入れたら先ほどと同様、Live Serverを立ち上げます。

おおっ、出てきました！

入力したテキストが大きな文字で表示されています。これが見出し１の大きさなのです。

今回のまとめ

振り返ると今回はJavaScriptは何も書いてません。ただ、JavaScriptを書く場所がWebページ内なので、まずはWebページを作る基本のHTMLをちょっとは理解しておかないといけないわけで、それを説明するのが今回のセクションでした。これまでで皆さんのスキルは、

✅ Visual Studio Codeという開発ツールが使える。
✅ 超基本的なHTMLコードが書ける（！＋Tab)
✅ VSCodeからWeb ページを立ち上げられる（Live Server)
✅ HTMLで見出し１（H1)のテキストを表示させられる

ということができりょうになっています。これだけあればHTMLのプログラミング学習は十分スタートさせられます。

では次回はJavaScriptを書いていきますので楽しみにしていてください。