JavaScriptの準備

Preparing JavaScript

ディレクトリ・ファイル構造

ディレクトリとは

ディレクトリという呼び方は主にLinuxというUnix系OS(オペレーティングシステム)で使われる名称で、WindowsやMacの場合はディレクトリではなく【フォルダ】と呼ばれます。
Web界隈で「ディレクトリ」という用語がよく使われるのは、Webサーバーも多くの場合、Unix系のシステム(Linuxなど)をベースにして構築されているため、この用語が引き継がれていると考えられています。

記述場所

記述場所は2箇所です。

  • scriptタグ内に直接記述
  • scriptタグのsrc属性で外部ファイルを指定
    scriptタグの場所は、headタグ内かbodyタグ内
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="script.js"></script> <!-- どっちか -->
</head>
<body>

	<script src="script.js"></script> <!-- どっちか -->
</body>
</html>

コンソールツール

コンソールツールを開く

  1. Google Chromeの右上の3点リーダーアイコン
  2. その他のツール
  3. デベロッパーツール
  1. 右クリック
  2. 検証
  3. コンソール

初めての1行

console.logはコンソールにメッセージや変数の値を表示するための機能です。
コードの動作確認やデバッグなどで頻繁に使用します。

console.log( 'Hello World!' );

書き方とルール

基本ルール

  • 上から下に読み込まれる
  • 原則、半角英数を使用する
  • アルファベットの大文字と小文字は区別して認識される
  • 一文の終わりにはセミコロンをつける

コメントアウト

どういった処理を行っていか、何を行っているかなどをプログラムの中にメモとして記述することができます、
コメントは実行されないので、プログラムに影響を与えることなくコードの説明や意図を記述することができます。
コメントには2種類の方法があります。

シングルラインコメント(1行コメント)

// 1行のコメント

マルチラインコメント(複数行コメント)

/*
	複数行のコメント
*/

エラーの見方

基本ルールを守らずに書いてしまった場合など、プログラムが動かないなどの問題が発生します。
コンソールツールにエラー内容が表示されるので、翻訳して内容を確認しましょう。
おおよその行数もわかります。
エラーは成功のための改善点を教えてくれるので、エラーは積極的に翻訳しましょう。