開発環境の準備

エディタの選び方（VS Code, Sublime Textなど）

JavaScriptのコードを書くためには、コードエディタが必要です。代表的なエディタとしては、以下のものがあります。

Visual Studio Code (VS Code): Microsoftが提供する無料のエディタで、多くの拡張機能や優れたデバッグツールが使えることから、多くの開発者に愛用されています。
Sublime Text: 軽量で高速なエディタです。シンプルで使いやすいですが、より高度な機能を使用するためには追加の設定が必要になることがあります。
Atom: GitHubが提供するエディタで、カスタマイズ性に優れています。
Brackets: Adobeが提供するエディタで、特にウェブ開発者向けの機能が豊富です。

初心者には、拡張機能や設定が簡単でコミュニティも充実しているVS Codeをおすすめします。

ブラウザの開発者ツールの使い方

JavaScriptのコードを実際にウェブページで動作させる際には、ブラウザの開発者ツールが非常に役立ちます。ほとんどのモダンブラウザ（Google Chrome, Firefox, Edgeなど）には開発者ツールが組み込まれており、これを使ってコードのデバッグやページの状態を確認することができます。

開発者ツールの起動方法: キーボードの F12 キー、または Ctrl + Shift + I（Macでは Cmd + Option + I）を押すことで開発者ツールを開くことができます。
コンソールタブ: Console タブでは、JavaScriptのエラーメッセージを確認したり、自分でコードを入力して実行することができます。
Elementsタブ: Elements タブでは、HTMLとCSSの構造を確認・編集でき、ページの外観やレイアウトを変更することが可能です。

開発者ツールを使うことで、リアルタイムでコードの動作を確認しながらデバッグすることができます。

JavaScriptの実行方法

JavaScriptのコードは、ブラウザ上で直接実行することができます。最も簡単な方法は、HTMLファイルにJavaScriptを埋め込むことです。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptの実行例</title>
</head>
<body>
  <h1>JavaScriptの実行方法</h1>
  <button onclick="sayHello()">挨拶する</button>

  <script>
    function sayHello() {
      alert('こんにちは、JavaScriptの世界へ！');
    }
  </script>
</body>
</html>

上記のように、<script> タグを使ってJavaScriptのコードをHTMLファイル内に記述することで、ブラウザで実行することができます。また、ブラウザの開発者ツールのコンソールに直接コードを入力して実行することも可能です。

本格的な開発においては、JavaScriptファイルを外部ファイルとして分けて管理し、HTMLからそのファイルを読み込む形式を取ることが一般的です。

html

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

このようにすることで、コードの再利用性や可読性が向上し、管理が容易になります。