サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
jsprimer.net
ファイルを読み込む 前のセクションではコマンドライン引数からファイルパスを取得して利用できるようになりました。 このセクションでは渡されたファイルパスを元にMarkdownファイルを読み込んで、標準出力に表示してみましょう。 node:fsモジュールを使ってファイルを読み込む 前のセクションで取得できるようになったファイルパスを元に、ファイルを読み込みましょう。 Node.jsでファイルの読み書きを行うには、標準モジュールのnode:fsモジュールを使います。 まずは読み込む対象のファイルを作成しましょう。sample.mdという名前でmain.jsと同じnodecliディレクトリに配置します。 # sample node:fsモジュール node:fsモジュールは、Node.jsでファイルの読み書きを行うための基本的な関数を提供するモジュールです。 node:fsモジュールは同期APIと
ユースケース: Node.jsでCLIアプリケーション ここではNode.jsでCLI(コマンドラインインターフェース)アプリケーションを開発します。 CLIのユースケースとしてMarkdown形式のテキストファイルをHTMLテキストに変換するツールを作成します。 作成するアプリケーションは次の要件を満たすものとします。 コマンドライン引数として変換対象のファイルパスを受け取る Markdown形式のファイルを読み込み、変換したHTMLを標準出力に表示する 変換の設定をコマンドライン引数でオプションとして与えられる 目次 Node.jsでHello World Hello Worldアプリケーションを通じてNode.jsのCLIアプリケーションの基本を学びます。 コマンドライン引数を処理する コマンドライン引数を受け取り、アプリケーションから使いやすい形にパースする方法を学びます。 ファイ
文字列とUnicode 「文字列」の章で紹介したように、JavaScriptは文字コードとしてUnicodeを採用し、エンコード方式としてUTF-16を採用しています。 このUTF-16を採用しているのは、あくまでJavaScriptの内部で文字列を扱う際の文字コード(内部コード)です。 そのため、コードを書いたファイル自体の文字コード(外部コード)は、UTF-8のようにUTF-16以外の文字コードであっても問題ありません。 「文字列」の章では、これらの文字コードは意識していなかったように、内部的にどのような文字コードで扱っているかは意識せずに文字列処理ができます。 しかし、JavaScriptのStringオブジェクトにはこの文字コード(Unicode)に特化したAPIもあります。 また、絵文字を含む特定の文字を扱う際や「文字数」を数えるという場合には、内部コードであるUTF-16を意識
イベントとモデル Todoアイテムを追加する機能を実装しましたが、イベントを受け取って直接DOMを更新する方法には柔軟性がないという問題があります。 また「Todoアイテムの更新」という機能を実装するには、追加したTodoアイテム要素を識別する方法が必要です。 具体的には、Todoアイテムごとにid属性などのユニークな識別子がないため、特定のアイテムを指定して更新や削除をする機能が実装できません。 このセクションでは、まずどのような点で柔軟性の問題が起きやすいのかを見ていきます。 そして、柔軟性や識別子の問題を解決するためにモデルという概念を導入し、「Todoアイテムの追加」の機能をリファクタリングしていきます。 直接DOMを更新する問題 「Todoアイテムの追加を実装する」では、操作した結果発生したイベントという入力に対して、DOM(表示)を直接更新していました。 そのため、Todoリス
コマンドライン引数を処理する このユースケースで作成するCLIアプリケーションの目的は、コマンドライン引数として与えられたMarkdownファイルをHTMLへ変換することです。 このセクションではnodeコマンドでスクリプトを実行する際に引数を渡し、コマンドライン引数としてパースするところまでを行います。 processオブジェクトとコマンドライン引数 コマンドライン引数を扱う前に、まずはprocessオブジェクトについて触れておきます。 processオブジェクトはNode.js実行環境のグローバル変数のひとつです。 processオブジェクトが提供するのは、現在のNode.jsの実行プロセスについて、情報の取得と操作をするAPIです。 詳細は公式ドキュメントを参照してください。 コマンドライン引数へのアクセスを提供するのは、processオブジェクトのargvプロパティで、文字列の配列
付録: JavaScriptチートシート JavaScriptの言語機能に関するチートシートです。 言語機能 コメント データ リテラル 文字列 データアクセス 演算子 関数と挙動 コントロールフロー モジュール その他 ガイド プロジェクト構造 言語機能 コメント コメントの書き方について。
はじめに 本書の目的 この書籍の目的は、JavaScriptというプログラミング言語を学ぶことです。 先頭から順番に読んでいけば、JavaScriptの文法や機能を一から学べるように書かれています。 JavaScriptの文法といった書き方を学ぶことも重要ですが、実際にどう使われているかを知ることも目的にしています。 なぜなら、JavaScriptのコードを読んだり書いたりするには、文法の知識だけでは足りないと考えているためです。 そのため、第一部:基本文法では文法だけではなく現実の利用方法について言及し、第二部:ユースケースでは小さなアプリケーションを例に現実と近い使い方を解説しています。 また、JavaScriptは常に変化を取り入れている言語でもあり、言語自身や言語を取り巻く開発環境も変化しています。 この書籍では、これらのJavaScriptを取り巻く変化に対応できる基礎を身につけ
第一部: 基本文法 第一部ではJavaScriptの基本的な文法やビルトインオブジェクトの使い方を紹介します。 目次 JavaScriptとは JavaScriptとはどのような用途に使われているプログラミング言語なのか、どのような言語的な特性を持っているのかについて簡単に紹介します。 コメント JavaScriptにおけるコメントの書き方を紹介します。コメントはプログラムとして評価されないので、ソースコードに対する説明を書くために利用します。 変数と宣言 JavaScriptで変数を宣言する方法について紹介します。変数を宣言する方法にはconst, let, varがあります。これらの動作の違いや使い分けについて紹介します。 値の評価と表示 ブラウザでJavaScriptコードを実行する方法について紹介します。またプログラムを実行すると遭遇するエラーをどのように解決していくかを紹介します
クラス 「クラス」と一言にいってもさまざまであるため、ここでは構造、動作、状態を定義できるものを指すことにします。 また、この章では概念を示す場合はクラスと呼び、クラスに関する構文(記述するコード)のことをclass構文と呼びます。 クラスとは動作や状態を定義した構造です。 クラスからはインスタンスと呼ばれるオブジェクトを作成でき、インスタンスはクラスに定義した動作を継承し、状態は動作によって変化します。 とても抽象的なことに思えますが、これは今までオブジェクトや関数を使って表現してきたものです。 JavaScriptではES2015より前まではclass構文はなく、関数を使ってクラスのようなものを表現して扱っていました。 ES2015でクラスを表現するためのclass構文が導入されましたが、このclass構文で定義したクラスは関数オブジェクトの一種です。 class構文ではプロトタイプベ
Todoアプリのリファクタリング 前のセクションで、予定していたTodoアプリの機能はすべて実装できました。 しかし、App.jsを見てみるとほとんどがHTML要素の処理になっています。 このようなHTML要素の作成処理は表示する内容が増えるほど、コードの行数が線形的に増えていきます。 このままTodoアプリを拡張していくとApp.jsが肥大化してコードが読みにくくなり、メンテナンス性が低下してしまいます。 ここで、App.jsの役割を振り返ってみましょう。 Appというクラスを持ち、このクラスではModelの初期化やHTML要素とModel間で発生するイベントを中継する役割を持っています。 表示から発生したイベントをModelに伝え、Modelから発生した変更イベントを表示に伝えている管理者と言えます。 このセクションではAppクラスをイベントの管理者という役割に集中させるため、Appク
浮動小数点数リテラル 浮動小数点数をリテラルとして書く場合には、次の2種類の表記が利用できます。 3.14159 のような .(ドット)を含んだ数値 2e8 のような e または E を含んだ数値 0からはじまる浮動小数点数は、0を省略して書くことができます。 .123; // => 0.123 しかし、JavaScriptでは.をオブジェクトにおいて利用する機会が多いため、 0からはじまる場合でも省略せずに書いたほうが意図しない挙動を減らせるでしょう。 Note 変数名を数字からはじめることができないのは、数値リテラルと衝突してしまうからです。 eは指数(exponent)を意味する記号で、eのあとには指数部の値を書きます。 たとえば、2e8は2×10の8乗となるので、10進数で表すと200000000となります。 2e8; // => 200000000 [ES2020] BigInt
本書の目的 本書の目的と読者対象を簡単にまとめたものです。 この文章は、まだ不完全な状態であるため、次のIssueを参照してください。 See はじめに/本書の目的 · Issue #103 · asciidwango/js-primer 本書がやらないこと すべての文法や機能を網羅するのが目的ではない ECMAScriptの仕様を厳密に学ぶことは目的ではない DOMについて学ぶのが目的ではない 他の言語と比較するのが目的ではない Node.jsの使い方をマスターするのが目的ではない JavaScriptのリファレンスを目指すものではない 詳しくはMDNを参照すればよい JavaScriptのライブラリを書くのが目的ではない JavaScriptのライブラリの使い方を学ぶのが目的ではない これを読んだから何か作れるというゴールがある訳ではない 本書の目的 文法とともに実際にどのようなケース
モジュール JavaScriptにおけるモジュールは、保守性・名前空間・再利用性のために使われます。 保守性: 依存性の高いコードの集合を一箇所にまとめ、それ以外のモジュールへの依存性を減らすことができます 名前空間: モジュールごとに分かれたスコープがあり、グローバルの名前空間を汚染しません 再利用性: 便利な変数や関数を複数の場所にコピーアンドペーストせず、モジュールとして再利用できます ひとつのJavaScriptのモジュールはひとつのJavaScriptファイルに対応します。 モジュールは変数や関数などを外部にエクスポートできます。また、別のモジュールで宣言された変数や関数などをインポートできます。 この章では ECMAScriptモジュール(ESモジュール、JSモジュールとも呼ばれる) について見ていきます。 ECMAScriptモジュールは、JavaScriptファイルをモジュ
ユースケース: Todoアプリ ここではブラウザで動作するウェブアプリケーション(以下アプリ)のユースケースとして、Todoアプリを作成していきます。 ここで作成するTodoアプリは、タスクを入力し、そのタスクの完了状態をチェックボックスで管理するというアプリです。 Ajax通信のユースケースではGitHubからデータを取得して表示するだけであったため、状態を管理する部分はほとんどありませんでした。 しかし、このTodoアプリはタスクの状態管理をするため、アプリとしての状態を管理する必要があります。 このユースケースを通して、どのように状態を管理し、表示や処理を変更するかといったアプリを作るにあたり必要になる設計や考え方について見ていきます。 作成するアプリは次の要件を満たすものとします。 Todoアイテムを追加できる Todoアイテムの完了状態を更新できる Todoアイテムを削除できる
JSON この章では、JavaScriptと密接な関係にあるJSONというデータフォーマットについて見ていきます。 JSONとは JSONはJavaScript Object Notationの略で、JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマットです。 JSONの仕様はECMA-404として標準化されています。 JSONは、人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行える形式になっています。 そのため、多くのプログラミング言語がJSONを扱う機能を備えています。 JSONはJavaScriptのオブジェクトリテラル、配列リテラル、各種プリミティブ型の値を組み合わせたものです。 ただしJSONとJavaScriptは一部の構文に違いがあります。 たとえばJSONでは、オブジェクトリテラルのキーを必ずダブルクォートで囲まなければいけ
非同期処理:Promise/Async Function この章ではJavaScriptの非同期処理について学んでいきます。 非同期処理はJavaScriptにおけるとても重要な概念です。 また、ブラウザやNode.jsなどのAPIには非同期処理でしか扱えないものもあるため、非同期処理を避けることはできません。 JavaScriptには非同期処理を扱うためのPromiseというビルトインオブジェクト、さらにはAsync Functionと呼ばれる構文的なサポートがあります。 この章では非同期処理とはどのようなものかという話から、非同期処理での例外処理、非同期処理の扱い方を見ていきます。 同期処理 多くのプログラミング言語にはコードの評価の仕方として、同期処理(sync)と非同期処理(async)という大きな分類があります。 今まで書いていたコードは同期処理と呼ばれているものです。 同期処理
配列 配列はJavaScriptの中でもよく使われるオブジェクトです。 配列とは値に順序をつけて格納できるオブジェクトです。 配列に格納したそれぞれの値のことを要素、それぞれの要素の位置のことをインデックス(index)と呼びます。 インデックスは先頭の要素から0、1、2のように0からはじまる連番となります。 またJavaScriptにおける配列は可変長です。 そのため配列を作成後に配列へ要素を追加したり、配列から要素を削除できます。 この章では、配列の基本的な操作と配列を扱う場合においてのパターンについて学びます。 配列の作成とアクセス 配列の作成と要素へのアクセス方法は「データ型とリテラル」の章ですでに紹介していますが、 もう一度振り返ってみましょう。 配列の作成には配列リテラルを使います。 配列リテラル([と])の中に要素をカンマ(,)区切りで記述するだけです。 const empt
Promiseを活用する ここまでのセクションで、Fetch APIを使ってAjax通信を行い、サーバーから取得したデータを表示できました。 最後に、Fetch APIの返り値でもあるPromiseを活用してソースコードを整理することで、エラーハンドリングをしっかり行います。 関数の分割 まずは、大きくなりすぎたfetchUserInfo関数を整理しましょう。 この関数では、Fetch APIを使ったデータの取得・HTML文字列の組み立て・組み立てたHTMLの表示をしています。 そこで、HTML文字列を組み立てるcreateView関数とHTMLを表示するdisplayView関数を作り、処理を分割します。 また、後述するエラーハンドリングを行いやすくするため、アプリケーションにエントリーポイントを設けます。 index.jsに新しくmain関数を作り、main関数からfetchUserI
元々は、0/1/2/3/4の5段階でしたが、2023年に2.7が追加されています。 これは、ブラウザが実装しはじめて見つかる問題などによりステージ2と3を行き来してしまうことがあったためです。 そのため、実装の前のテストと検証のためのステージとして2.7が追加されました。 2ヶ月に一度行われるTC39のミーティングにおいて、プロポーザルごとにステージを進めるかどうかを議論します。 このミーティングの議事録もGitHub上のtc39/tc39-notesにて公開されています。 ステージ4となったプロポーザルはドラフト版であるtc39/ecma262へマージされます。 そして毎年の決まった時期にドラフト版を元にしてECMAScript 20XXとしてリリースします。 この仕様策定プロセスの変更は、ECMAScriptに含まれる機能の形にも影響しています。 たとえば、class構文の策定は最大限
関数と宣言 関数とは、ある一連の手続き(文の集まり)を1つの処理としてまとめる機能です。 関数を利用することで、同じ処理を毎回書くのではなく、一度定義した関数を呼び出すことで同じ処理を実行できます。 これまで利用してきたコンソール表示をするConsole APIも関数です。 console.logは「受け取った値をコンソールへ出力する」という処理をまとめた関数です。 この章では、関数の定義方法や呼び出し方について見ていきます。 関数宣言 JavaScriptでは、関数を定義するためにfunctionキーワードを使います。 functionからはじまる文は関数宣言と呼び、次のように関数を定義できます。 // 関数宣言 function 関数名(仮引数1, 仮引数2) { // 関数が呼び出されたときの処理 // ... return 関数の返り値; } // 関数呼び出し const 関数の
最初に書いたようにthisの挙動は、Arrow Functionの関数定義とそれ以外(functionキーワードやメソッドの短縮記法)の関数定義で異なります。 そのため、まずはArrow Function以外の関数やメソッドにおけるthisを見ていきます。 Arrow Function以外の関数におけるthis Arrow Function以外の関数(メソッドも含む)におけるthisは、実行時に決まる値となります。 言い方を変えるとthisは関数に渡される暗黙的な引数のようなもので、その渡される値は関数を実行するときに決まります。 次のコードは疑似的なものです。 関数の中に書かれたthisは、関数の呼び出し元から暗黙的に渡される値を参照することになります。 このルールはArrow Function以外の関数やメソッドで共通した仕組みとなります。Arrow Functionで定義した関数やメ
例外処理 この章ではJavaScriptにおける例外処理について学びます。 try...catch構文 try...catch構文は例外が発生しうるブロックをマークし、例外が発生したときの処理を記述するための構文です。 try...catch構文のtryブロック内で例外が発生すると、tryブロック内のそれ以降の処理は実行されず、catch節に処理が移行します。 catch節は、tryブロック内で例外が発生すると、発生したエラーオブジェクトとともに呼び出されます。 finally節は、tryブロック内で例外が発生したかどうかには関係なく、必ずtry文の最後に実行されます。 次のコードでは、tryブロックで例外が発生し、catch節の処理が実行され、最後にfinally節の処理が実行されます。 try { console.log("try節:この行は実行されます"); // 未定義の関数を呼び
関数とスコープ 定義された関数はそれぞれのスコープを持っています。スコープとは変数や関数の引数などを参照できる範囲を決めるものです。 JavaScriptでは、新しい関数を定義するとその関数にひもづけられた新しいスコープが作成されます。関数を定義するということは処理をまとめるというだけではなく、変数が有効な範囲を決める新しいスコープを作っていると言えます。 スコープの仕組みを理解することは関数をより深く理解することにつながります。なぜなら関数とスコープは密接な関係を持っているからです。 この章では関数とスコープの関係を中心に、スコープとはどのような働きをしていて、スコープ内では変数の名前から取得する値がどのように決まるかを見ていきます。 JavaScriptのスコープは、ES2015において直感的に理解しやすい仕組みが整備されました。 基本的にはES2015以降の仕組みを理解していればコー
オブジェクト オブジェクトはプロパティの集合です。プロパティとは名前(キー)と値(バリュー)が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。 今までも登場してきた、配列や関数などもオブジェクトの一種です。 JavaScriptには、あらゆるオブジェクトの元となるObjectというビルトインオブジェクトがあります。 ビルトインオブジェクトは、実行環境にあらかじめ定義されているオブジェクトのことです。 ObjectというビルトインオブジェクトはECMAScriptの仕様で定義されているため、あらゆるJavaScriptの実行環境で利用できます。 この章では、オブジェクトの作成や扱い方、Objectというビルトインオブジェクト
[ES2015] Map/Set JavaScriptでデータの集まり(コレクション)を扱うビルトインオブジェクトは、ObjectやArrayだけではありません。 この章では、ES2015で導入されたマップ型のコレクションであるMapと、セット型のコレクションであるSetについて学びます。 Map Mapはマップ型のコレクションを扱うためのビルトインオブジェクトです。 マップとは、キーと値の組み合わせからなる抽象データ型です。 他のプログラミング言語の文脈では辞書やハッシュマップ、連想配列などと呼ばれることもあります。 マップの作成と初期化 Mapオブジェクトをnewすることで、新しいマップを作成できます。 作成されたばかりのマップは何も持っていません。 そのため、マップが持つ要素の数を返すsizeプロパティは0を返します。 const map = new Map(); console.l
注記: undefinedとnullに対応するラッパーオブジェクトはありません。 注意点として、ラッパーオブジェクトは名前のとおりオブジェクトです。 そのため、次のようにtypeof演算子でラッパーオブジェクトを見ると"object"です。 // プリミティブの文字列は"string"型 const str = "文字列"; console.log(typeof str); // => "string" // ラッパーオブジェクトは"object"型 const stringWrapper = new String("文字列"); console.log(typeof stringWrapper); // => "object" プリミティブ型の値からラッパーオブジェクトへの自動変換 JavaScriptでは、プリミティブ型の値に対してプロパティアクセスするとき、自動で対応するラッパーオブ
HTTP通信 ローカルサーバーでアプリケーションが実行できるようになったので、次はGitHubのAPIを呼び出す処理を実装していきます。 GitHubのAPIを呼び出すためにはHTTP通信をする必要があります。 ウェブブラウザ上でJavaScriptからHTTP通信するために、Fetch APIという機能を使います。 Fetch API Fetch APIはHTTP通信を行ってリソースを取得するためのAPIです。 Fetch APIを使うことで、ページ全体を再読み込みすることなく指定したURLからデータを取得できます。 Fetch APIは同じくHTTP通信を扱うXMLHttpRequestと似たAPIですが、より強力で柔軟な操作が可能です。 リクエストを送信するためには、fetchメソッドを利用します。 fetchメソッドは引数で指定したURLに対して、HTTPリクエストを行えます。 G
変数と宣言 プログラミング言語には、文字列や数値などのデータに名前をつけることで、繰り返し利用できるようにする変数という機能があります。 JavaScriptには「これは変数です」という宣言をするキーワードとして、 const、let、varの3つがあります。 varはもっとも古くからある変数宣言のキーワードですが、意図しない動作を作りやすい問題が知られています。 そのためECMAScript 2015で、varの問題を改善するためにconstとletという新しいキーワードが導入されました。 この章ではconst、let、varの順に、それぞれの方法で宣言した変数の違いについて見ていきます。 [ES2015] const constキーワードでは、再代入できない変数の宣言とその変数が参照する値(初期値)を定義できます。 次のように、constキーワードに続いて変数名を書き、代入演算子(=)
文と式 本格的に基本文法について学ぶ前に、JavaScriptというプログラミング言語がどのような要素からできているかを見ていきましょう。 JavaScriptは、文(Statement)と式(Expression)から構成されています。 式 式(Expression)を簡潔に述べると、値を生成し、変数に代入できるものを言います。 42のようなリテラルやfooといった変数、関数呼び出しが式です。 また、1 + 1のような式と演算子の組み合わせも式と呼びます。 式の特徴として、式を評価すると結果の値を得ることができます。 この結果の値を評価値と呼びます。 評価した結果を変数に代入できるものは式であるという理解で問題ありません。 // 1という式の評価値を表示 console.log(1); // => 1 // 1 + 1という式の評価値を表示 console.log(1 + 1); //
次のページ
このページを最初にブックマークしてみませんか?
『JavaScript Primer - 迷わないための入門書 #jsprimer』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く