学習のロードマップ

1. JavaScriptの基礎を理解する:

   • 変数とデータ型: 文字列、数値、ブーリアン、オブジェクト、配列など。
   • 演算子: 算術、比較、論理演算子など。
   • 制御構造: if文、forループ、whileループなど。
   • 関数: 関数の定義と呼び出し、引数と戻り値。

2. DOM操作を学ぶ:

   • HTMLとの連携: エレメントの選択、変更、イベントの追加。
   • イベントハンドリング: ユーザーのアクションに応じた処理。

3. JavaScriptの概念を学ぶ:

   • 非同期処理: コールバック、プロミス、async/await。
   • クロージャーとスコープ。
   • 高階関数とコールバック。

JavaScriptとは

JavaScriptは、複雑な機能をWebページに組み込むために使用される軽量で解釈されるプログラミング言語です。もともとはWebブラウザで動作するクライアントサイドのスクリプト言語として開発されましたが、その後、Node.jsの登場によりサーバーサイドでの開発にも使用されるようになりました。

JavaScriptは、HTMLとCSSと共に、Webページを動的かつインタラクティブにするために不可欠な技術の一つです。HTMLがページの構造を、CSSがスタイルとレイアウトを担当する一方で、JavaScriptはページの動的な要素を制御します。例えば、フォームのバリデーション、ドロップダウンメニューの動作、画像のスライドショーなどがJavaScriptで実現されています。

JavaScriptは、「イベント駆動型」の特徴を持っており、ユーザーのクリックやキーボード入力などのアクションに応じて特定のコードが実行されます。また、非同期処理をサポートしており、サーバーへのリクエストを行いながらもページのリロードをせずにコンテンツを更新できます。これは、AJAX（Asynchronous JavaScript and XML）と呼ばれる技術を通じて行われます。

JavaScriptは様々なライブラリやフレームワークにより、さらに使いやすく、強力な言語へと進化しています。例えば、ReactやAngular、Vue.jsなどはJavaScriptを基にしたフレームワークで、インタラクティブなWebアプリケーションの開発を容易にしています。

環境構築

1. Node.jsのインストール
   • Node.jsの公式サイトhttps://nodejs.org/にアクセスします。
   • 推奨版（LTS版）をダウンロードしてインストールします。
2. vscodeのインストール
   • VSCodeを開きます。
   • 拡張機能ビュー（左側のアイコンまたは win:Ctrl+Shift+X mac:Cmd+Shift+X）を開きます。
   • 以下の拡張機能を検索し、インストールします：
     • ESLint: JavaScriptコードの構文エラーやスタイルの問題を検出します。
     • Prettier: コードフォーマッターとして動作し、一貫したコーディングスタイルを維持します。
3. ESLintの設定
   • どこでも良いので作業用のディレクトリを作成する
   • VScodeから作成したディレクトリをワークスペースとして読み込む
   • win:CTR+` mac:Control+` でターミナルを開く
   • ESLintの初期設定を行うことでVSCode上からリアルタイムで構文チェックしてくれます。

$ npx eslint --init
# 下記９この質問をされる。自分はとりあえず全てデフォルトの選択肢を選んだ

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

試しにコードを書いてみる

sample1.jsというファイルを作成し、下記コードを書いてみる

var name = "John";  // varで宣言
let age = 30;       // letで宣言
const pi = 3.14;    // constで宣言

そうすると、VSCode上でエラーがでます。カーソルを合わせると、'pi' is assigned a value but never used.eslintno-unused-varsとエラーがでます。
これは、定義した変数がどこも使われていないと、ESLintが指摘してくれます。

var name = "John";  // varで宣言
let age = 30;       // letで宣言
const pi = 3.14;    // constで宣言

console.log(name);
console.log(age);
console.log(pi);

今度はエラーがでなくなりました。ターミナルから下記のように実行すると結果が返ってきます。

$ node sample1.js
John
30
3.14

まとめ

環境構築と簡単なコード実行までできました。次回は変数とデータ型について学びます。