只今、PHPを学習しております

JavaScript学習を始める環境構築

トッド

JavaScriptを学習するための環境を整えよう。

javascriptを学習する環境を構築するのに難しいことは何一つありません。(クライアントサイドのJavaScriptにかぎっては…….)

ということで、まずは「エディター」を調達しにいきましょう。

エディターとはスクリプト(ソースコード)を記述するためのメモ帳のようなモノと考えてください。

エディターには、たくさん種類があります。ここでは無料で使用することが可能な「Visual studio code」を使用して学習環境を整える方法を紹介します。

まずは、公式からVisual Studio Code エディターをインストールしましょう。

参考 Visual Studio CodeMicrosoft Azure

インストールが済ましたらエディターを開いてください。

開くと、スタート画面が開くのでデスクトップ画面で左クリックを押して、新規ファイルを作成してください。

ここでは、「Lesson」という名称で作成していますが、どんな名前でも構いません。好きなように名付けてください。

そしたら、先ほど作成したファイルをドラッグ&ドロップでエディター内へ開きます。

すると、分かりづらいかもしれませんがファイル名がエディターの上部に記述されていることが確認できるかと思います。

ここでは、「Lesson」とファイル名を付けたのしっかり表示されていますね。↓

今のところ新規ファイル「Lesson」のなかは、空なので何も表示されません。

次に、ファイルの拡張子が「.html」「.css」「.js」で終わる、左から「HTML」「CSS」「JavaScript」ファイルを作成します。

すると、下記の画像のように作成したファイルが追加されていることがわかります。

ここでは、「Lesson.html」「style.css」「main.js」とそれぞれファイル名を付けましたが、こちらもtest.htmlなどのように好きな名前を付けてください。


それでは、HTMLから基本的なマークアップを施していきます。

Visual Studio Code はデフォルトの状態でEmmet記法(省略記法)が使用できます。

どういうことかと言いますと、HTMLでリストを記述することを考えてみてください。

そのような場合、通常であればタグレベルで1つ1つ記述する必要がありますが、Emmet記法を使用することで手間を省くことができます。

例えば、項目が3つあるリストを作成しようと思ったらEmmet記法では

ul>li*3と記述すると

リストの例
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

上記のように反映してくれるという記法です。

Emmet記法が気になる方はコチラのサイトに詳しく書かれています。↓

参考 EmmetチートシートEmmet

ということでEmmet記法を使って、先ほど作成したLesson.html内でエクスクラメーションマーク(!)を打ち込んでみてください。すると、入力補完が機能して以下の画像のように基本的なHTMLがマークアップが記述されます。(便利でしょ!)

そうしたら、次にCSSとJavaScriptファイルを読みこむ為のコードを記述します。

CSS(stylesheet)を読みこむ場所は<header>~</header>の末尾に以下の内容を記述しましょう。

CSS読み込み
<!-- CSS 読み込み↓ -->
    <link rel="stylesheet "href="style.css" />

JavaScriptの場合は<body>~</body>の末尾に以下の内容を記述しましょう。

JSの読み込み
<!-- JavaScript 読み込み↓ -->
    <script src="main.js"></script>

どちらの読み込みも、作成したファイル名に則って記述を変更してください。

読み込みコードを全て記述した後のHTML文書が以下の画像のようになっていればOKです。

初めに入れておきたいプラグイン

「Japanese Language Pack for Visual Studio Code」は、vscodeを日本語化してくれるプラグインになります。英語が苦手という方は入れておくといいでしょう。

特に気にしなければ入れなくても良いですよ。

次の「Live Server」は、必須と言っても過言でないぐらいに重宝するプラグインになります。使い方は、左クリック経由のOpen Live Server。もしくは、⌘L押してから⌘Oでショートカットできます。

LIve Serverは、ブラウザーでHTMLのプレビューを表示してくれるモノです。

Visual Studio Code – 2020おすすめテーマ集

最後に、

ここまでのHTML文書をLive Server で開いてみてください。何にも書いてなかったら真っ白です。

あとは、ブラウザ側でデベロッパーツールを開きながらの作業になります。↓

試しにJSファイルに以下のコードを記述してみてください。

JSファイル内へ記述
let str = "Visual studio code";

console.log(str);

すると以下のようにコンソールに値が出力されます。

ちなみにコンソールはココ↓

という感じで、JavaScript学習を勉強すると良いでしょう。

デベロッパーツールの開き方は、Chromeの場合に限定されますが左クリック→検証で開くことができます。

コメントを残す

メールアドレスが公開されることはありません。