JavaScript PR

JavaScriptの環境構築と基本的な記述方法

  /
記事内に商品プロモーションを含む場合があります

この記事では、JavaScriptを自身のPC環境で利用する方法と、実際に記述していくための基本的に方法について解説しています。

JavaScriptは環境構築が必要ない

まず、JavaScriptを実装するにあたっての環境構築ですが、素のJavaScript（VanillaJSと言われることがある）を使う場合に、基本的には環境構築は不要です。

プログラミングを記述するためのテキストエディタ（VSCodeなど）とブラウザ（インターネットに繋がってなくても可）があればすぐJavaScriptを扱うことができます。

JavaScriptの記述方法

それでは、実際にJavaScriptを実装するための実装方法です。
HTMLにJavaScriptの記述方法ですが、下記のように<script>タグの中に記載することで記述していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  

  <script>
    //JavaScriptのコードを記述
  </script>

  
</body>
</html>

上記のように、<script>タグの中に記述することもできますが、これだと他のページで利用できないですし、コードが長くなって見にくいため、別ファイルとして記述していくのが一般的です。

JavaScriptのファイルは「〇〇.js（例ではmain.js）」というファイル名で作成し、HTMLファイルからは、<script>タグのsrc属性でディレクトリを指定することでJavaScriptを使用することが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  

  <script src="js/main.js"></script>

</body>
</html>

scriptタグの記述場所

HTMLにscriptタグを設置する場所については、headタグ内もしくはbodyタグ内記述する方法があります。

【headタグへの記述のパターン】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>

  <script src="js/main.js"></script>

</head>
<body>
  <div>
    <h1>JavaScript</h1>
    <p>テストです</p>
  </div>

</body>
</html>

【bodyタグへの記述のパターン】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  <div>
    <h1>JavaScript</h1>
    <p>テストです</p>
  </div>

  <script src="js/main.js"></script>
</body>
</html>

どちらの記述をすることも可能ですが、bodyタグ内の最下層部に記述することの方が一般的です。

なぜかというと、HTMLの記述は、上から順番読まれていくのですが、headタグ内にJavaScriptの記述をした場合に、JavaScriptでHTMLの記述を変更しても、その記述を後からHTMLの記述で上書きされてしまう場合があるからです。

例えばですが、<p>タグの”テストです”の文章をJavascriptで”JavaScriptで「テストです」の記述を修正”と書き換えてみます。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
 
</head>
<body>
  <div>
    <h1>JavaScript</h1>
    <p id="test">テストです</p>
  </div>

  <script>
    let test = document.getElementById("test");
    textContent = "JavaScriptで「テストです」の記述を修正";
  </script>
  
</body>
</html>

ScriptタグをBodyタグの最下部に設置すると、下記の様に「テストです」の記述を書き換えることができています。

次にScriptタグをHTMLの記述の前のheadタグに記述します。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script>
    let test = document.getElementById("test");
    test.textContent = "JavaScriptで「テストです」の記述を修正";
  </script>
</head>
<body>
  <div>
    <h1>JavaScript</h1>
    <p id="test">テストです</p>
  </div>

  
</body>
</html>

下記のように今度は書き換えができてません。

このようにHeadタグに記述することで、JavaScriptの記述のあとHTMLの記述で上書きされてしまいます。

こうした挙動を回避する意味でも、基本的にはscriptタグは、bodyタグの最下部に記述します。

コメントアウト

実際のコードに影響を与えず、コードの説明やメモを各コメントの記述方法を解説します。

コメントアウトは「一行のコメントアウト」と「複数行のコメントアウト」があります。

一行のコメントアウト

まず、コメントアウトは「//」と記述します。

なお、VSCodeでは、winは「Ctrl + / 」 mac 「Command + / 」のショートカットキーを使うことで行うことができます。

//コメントアウトされました

//実際のコードには影響をあたえません。

複数行のコメントアウト

複数行のコメントアウトは、「/* 　ここに記述　*/」と記述します。

なお、VSCodeでは、winは「Shift + Alt + A 」 mac 「Shift + Option + A 」のショートカットキーを使うことで行うことができます。

/*  コメントアウトされました 実際のコードには影響をあたえません。  */
「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



関連記事