my.code(); Logomy.code();
JavaScript-0.JavaScriptへようこそ

my.code(); Logomy.code();

  • C++
    • 0.C++の世界へようこそ
    • 1.型システムと制御構造
    • 2.データ集合とモダンな操作
    • 3.ポインタとメモリ管理
    • 4.関数と参照渡し
    • 5.プロジェクトの分割とビルド
    • 6.クラスの基礎
    • 7.クラスを使いこなす
    • 8.継承とポリモーフィズム
    • 9.テンプレート
    • 10.STL ①:コンテナ
    • 11.STL ②:アルゴリズムとラムダ式
    • 12.RAIIとスマートポインタ
  • JavaScript
    • 0.JavaScriptへようこそ
    • 1.基本構文とデータ型
    • 2.制御構文
    • 3.関数とクロージャ
    • 4.'this'の正体
    • 5.オブジェクトとプロトタイプ
    • 6.クラス構文
    • 7.配列とイテレーション
    • 8.非同期処理①: Promise
    • 9.非同期処理②: Async/Await
  • Python
    • 0.環境構築と基本思想
    • 1.基本構文とデータ型
    • 2.リスト、タプル、辞書、セット
    • 3.制御構文と関数
    • 4.モジュールとパッケージ
    • 5.オブジェクト指向プログラミング
    • 6.ファイルの入出力とコンテキストマネージャ
    • 7.例外処理
    • 8.ジェネレータとデコレータ
  • Ruby
    • 0.rubyの世界へようこそ
    • 1.基本構文とデータ型
    • 2.制御構造とメソッド定義
    • 3.すべてがオブジェクト
    • 4.コレクション (Array, Hash, Range)
    • 5.ブロックとイテレータ
    • 6.クラスとオブジェクト
    • 7.モジュールとMix-in
    • 8.Proc, Lambda, クロージャ
    • 9.標準ライブラリの活用
    • 10.テスト文化入門
    • 11.メタプログラミング入門
  • Rust
    • 0.Rustの世界へようこそ
    • 1.基本構文と「不変性」
    • 2.関数と制御フロー
    • 3.所有権
    • 4.借用とスライス
    • 5.構造体とメソッド構文
    • 6.列挙型とパターンマッチ
    • 7.モジュールシステムとパッケージ管理
    • 8.コレクションと文字列
    • 9.エラーハンドリング
    • 10.ジェネリクスとトレイト
    • 11.ライフタイム
  • TypeScript
    • 0.TypeScriptへようこそ
    • 1.基本的な型と型推論
    • 2.オブジェクト、インターフェース、型エイリアス
    • 3.関数の型定義
    • 4.型を組み合わせる
    • 5.ジェネリクス
    • 6.クラスとアクセス修飾子
    • 7.非同期処理とユーティリティ型
my.code(); Logomy.code();

環境構築不要、その場で実践。

ut-code / my-code

Copyright © 2026 ut.code();

ut.code(); について
公式ウェブサイト公式 𝕏 アカウント

第0章: JavaScriptへようこそ

本章では、JavaScript(以下JS)がどのような思想で設計され、JavaやPython、C#といった他の言語とどう異なるのか、その全体像を把握します。また、学習に必要な環境構築と最初のコード実行を行います。

JavaScriptとは?

JavaScriptは1995年、Netscape社のBrendan Eichによってわずか10日間でプロトタイプが作成されました。当初はWebページに軽い動きをつけるための言語でしたが、現在ではECMAScript (ES) として標準化され、フロントエンドからバックエンド、モバイルアプリまで幅広く利用されています。

経験豊富なエンジニアが押さえておくべき特徴は以下の3点です。

  1. 動的型付け (Dynamic Typing): 変数は型を持ちません。値が型を持ちます。コンパイル時ではなく実行時に型が決まるため、柔軟ですが、実行時エラーのリスク管理が必要です(現代ではTypeScriptで補うのが一般的です)。
  2. マルチパラダイム: 命令型の手続き記述はもちろん、関数型プログラミング(第一級関数、クロージャ)や、プロトタイプベースのオブジェクト指向をサポートします。クラスベースの言語に慣れていると、ここの概念モデルの違いに驚くかもしれません。
  3. シングルスレッド & ノンブロッキングI/O: JSのランタイムは基本的にシングルスレッドです。しかし、イベントループという仕組みにより、重いI/O操作(ネットワーク通信やファイル読み込み)を非同期で処理し、メインスレッドをブロックせずに高い並行性を実現します。

実行環境: ブラウザ vs Node.js

JavaScriptはどこで動くのでしょうか? かつてはブラウザの中だけでしたが、現在は大きく分けて2つの環境があります。

  • Webブラウザ (クライアントサイド):

    • DOM (Document Object Model) 操作により、HTML/CSSを動的に書き換えます。
    • window オブジェクトがグローバルスコープです。
    • セキュリティ上の制約(サンドボックス)があり、ローカルファイルへの直接アクセスなどは制限されています。
  • Node.js (サーバーサイド):

    • ChromeのV8 JavaScriptエンジンをブラウザの外に取り出したランタイムです。
    • OSの機能(ファイルシステム、ネットワーク)にアクセス可能です。
    • DOMは存在しません。Webサーバー構築やCLIツールの作成に使われます。

言語仕様(コア機能)は同じですが、「何ができるか(API)」は環境に依存するという点を意識してください。

他言語との比較

あなたが既に知っている言語とJSを比較してみましょう。

特徴Java / C#PythonJavaScript
型システム静的型付け (強い型付け)動的型付け (強い型付け)動的型付け (弱い型付け)
並行処理マルチスレッドマルチスレッド (GILあり)シングルスレッド + イベントループ
OOPクラスベースクラスベースプロトタイプベース (class構文はシンタックスシュガー)
実行方式コンパイル (JVM/CLR)インタープリタJITコンパイル (多くのエンジン)
  • Java/C#ユーザーへの注記: JSのclassは見た目は似ていますが、裏側の仕組み(プロトタイプチェーン)は全く異なります。また、コンパイルエラーで弾かれるようなコードも、JSでは実行できてしまう(そして実行時に落ちる)ことがあります。
  • Pythonユーザーへの注記: Pythonのasyncioに似ていますが、JSはデフォルトで非同期を前提としています。また、インデントではなく波括弧 {} でブロックを定義します。

"Hello, World!"

実際にコードを動かしてみましょう。ここでは2つの方法を紹介します。

REPL (Read-Eval-Print Loop) での実行

ちょっとした動作確認にはREPLが便利です。Node.jsのREPLを起動するには、ターミナルで node と入力して起動します。

このウェブサイト上ではブラウザ上でコードを実行できる環境を埋め込んでおり、以下のように緑枠で囲われたコード例には自由にJavaScriptコードを書いて試すことができます。ただしNode.jsとは環境が異なり、Node.js特有の機能は使用できません。

JavaScript 実行環境
ブラウザ上で動作するJavaScriptのREPL実行環境です。
プロンプト (>) の後にコマンドを入力し、Enterキーで実行します。
Ctrl+Cまたは左上の停止ボタンで実行中のコマンドを中断できます。
> console.log("Hello, World from REPL!");
Hello, World from REPL!
undefined
> 1 + 2
3

※ undefined は console.log 関数の戻り値が表示されています。

ソースファイルからの実行

本格的なプログラムはファイルに記述します。

まず、以下の内容で hello.js というファイルを作成してください。

ファイルを編集:hello.js
// 変数定義 (後述しますが、現代ではconstを使います)
const greeting = "Hello, World!";
const target = "Node.js";

// テンプレートリテラル (バッククォート ` を使用)
console.log(`${greeting} I am running on ${target}.`);

ターミナルでファイルのあるディレクトリに移動し、node コマンドで実行します。 このウェブサイト上の実行環境で動かす場合は、以下の実行ボタンをクリックしてください。

node hello.js
ブラウザ上で動作するJavaScriptの実行環境です。
左上の実行ボタンを押して、このページ内のhello.jsに書かれている内容を実行します。
Hello, World! I am running on Node.js.

ブラウザでの実行 (参考)

ブラウザで動かす場合は、HTMLファイルが必要です。 index.html を作成し、以下のように記述してブラウザで開いてみてください。

<!DOCTYPE html>
<html>
<body>
  <script>
    console.log("Hello from Browser!");
    alert("Hello from Browser!");
  </script>
</body>
</html>

ブラウザの開発者ツール(Consoleタブ)にメッセージが表示され、ポップアップウィンドウが出れば成功です。

my.code(); のチュートリアルでは主にJavaScriptの文法や基本的な機能を中心に扱います。 HTMLやCSSとあわせたウェブアプリケーション開発の基礎については ut.code(); Learn で学ぶことができます。

次のページ基本構文とデータ型 »