トップへ戻る
カレーが食べたい
ja.javascript.info
より複雑なコードを書く前に、デバッグについて話しましょう。 デバッギングはスクリプト内のエラーを見つけ、修正するプロセスです。すべてのモダンブラウザと他の環境のほとんどはデバッギングツール（デバッグを簡単に行えるようにする開発者ツールのUI）をサポートしています。また、コードをステップ毎に追跡して正確に起きていることを確認することもできます。 ここでは、恐らくこの観点では最も機能が充実している Chrome を使います。 “sources” パネルChromeのバージョンによっては少し違って見えるかもしれませんが、何があるかは明白でしょう。 Chromeの example page を開きます。 F12 (Mac: Cmd+Opt+I) で開発者ツールをONにします。 source パネルを選択します。 この画面を見るのが初めてであれば、見ておくべきものがあります: ここでは3つの領域が確
ロングポーリング(Long polling)はサーバと永続的な接続を持つための最も簡単な方法で、WebSocket や Server Side Events などの特定のプロトコルを使いません。 実装はとても簡単であり、多くのケースもこれで十分です。 定期的なポーリングサーバから新しい情報を取得するための最も簡単な方法は、ポーリングです。 つまり、サーバへの定期的なリクエストです: “こんにちは、私はここにいます。私に関してなにか新しい情報はありますか？”。例えば、10秒毎に。 応答では、サーバは最初にクライアントがオンラインであること自身に知らせて、次にその時までに受け取ったメッセージのパケットを送信します。 これは機能しますが、デメリットもあります。: メッセージは最大10秒(リクエスト間隔)の遅延が発生します たとえメッセージがない場合でも、サーバは10秒ごとにリクエストを受け取りま
正規表現(Regular expressions)は文字列内を検索したり置換するための強力な方法です。 JavaScriptでは、正規表現は組み込みの RegExp クラスのオブジェクトを使用して実装され、文字列と統合されています。 正規表現正規表現(もしくは “regexp”, または単に “reg”) は パターン とオプションの フラグ で構成されています。 正規表現オブジェクトを生成するための2つの構文があります。 長い構文:
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
Shadow DOM はカプセル化に役立ちます。これにより、コンポーネントは独自の “shadow(隠れた存在の)” DOM ツリーを持つことができます。これは、メインの document から誤ってアクセスされることなく、ローカルのスタイルルールなどを持つことができます。 組み込みの shadow DOM複雑なブラウザ制御がどのようにして作成され、スタイルされているか考えたことはあるでしょうか？ 例えば <input type="range"> です: ブラウザはそれらを描画するために内部的に DOM/CSS を使います。そのDOM構造は通常隠されていますが、開発者ツールで見ることができます。E.g. Chrome では開発者ツールで “Show user agent shadow DOM” オプションを有効にする必要があります。 <input type="range"> は次のように見
WebSocket プロトコルは仕様 RFC 6455 で説明されており、これは永続的な接続を介してブラウザとサーバ間でデータを交換する方法を提供します。接続の切断や追加のHTTPリクエストをすることなく、データを “パケット” として双方向に渡すことができます。 WebSocket は継続的にデータ交換を必要とするようなサービスに特に適しています。例えば、オンラインゲームやリアルタイムの取引システムなどです。 簡単な例websocket の接続を開くには、url の特別なプロトコル ws を使用した new WebSocket を作る必要があります:
submit イベントはフォームが送信されたときにトリガされます。通常、フォームをサーバーに送信する前に検証したり、送信を中止したり、JavaScriptで処理したりするために使用されます。 メソッド form.submit() で JavaScript からのフォーム送信を開始することができます。独自のフォームを動的に作成してサーバーに送信するために使用できます。 それらの詳細を見てみましょう。 イベント: submitフォームを送信する方法として、主に2つあります。: 1つ目 – <input type="submit"> または <input type="image"> をクリックします。 2つ目 – input フィールドで Enter を押します。 両方のアクションは、フォーム上で submit イベントにつながります。ハンドラはデータのチェックができ、もしエラーがあればそれらを
チャプター 導入: callbacks で言及した問題に戻りましょう。 私たちは次々に実行される一連の非同期タスクを持っています。例えば、スクリプトの読み込みです。 上手くコード化するにはどうすればよいでしょう？ Promise はそれをするためのいくつかの方法を提供します。 このチャプターでは promise チェーンを説明します。 次のようになります: new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { // (**) alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return
独自のメソッドやプロパティ、イベントなどを持つ、独自のクラスで記述されたカスタムHTML要素を作成することができます。 一度カスタム要素が定義されると、組み込みのHTML要素と同じようにそれを使用できます。 HTMLの種類は豊富ですが、無限ではないので、これは素晴らしいことです。<easy-tabs>, <sliding-carousel>, <beautiful-upload> などはありません。他に必要となるタグについて考えてください。 特別なクラスでそれらを定義し、それ以降はあたかもそれがHTMLの一部であるかのように使用することができます。 Custom element(カスタム要素)には2種類あります。: 自律型カスタム要素(Autonomous custom elements) – 抽象的な HTMLElement クラスを拡張した “すべてが新規” の要素です。 カスタマイズ
このチャプターではドキュメントでの選択と、<input> などのフォームフィールドでの選択について説明します。 JavaScript を利用して選択状態を取得したり、全体あるいは一部分の選択/選択解除、ドキュメントから選択した部分を削除、タグへのラップなどを行うことができます。 末尾の “サマリ” セクションでレシピが使用できます。が、チャプター全体を読むことでより多くのことを知ることができます。基礎となる Range と Selection オブジェクトは簡単に把握できるので、必要なことをするためのレシピは必要ありません。 範囲(Range)選択の基本的な概念は 範囲(Range) です。: 基本的には “境界点”(範囲の開始と終了) のペアです。 各点は、始点からの相対オフセットをもつ親DOMノードを表します。親ノードが要素ノードの場合、オフセットは子の番号であり、テキストノードの場合
何かを開発するとき、我々のタスクで間違っているかもしれない特定の内容をエラー内容に反映するために、独自のエラークラスが必要になることがよくあります。 ネットワーク操作のエラーについては、 HttpError、データベース操作 DbError、検索操作 NotFoundError などが必要な場合があります。 エラーは message, name 、望ましくは stack のような基本のエラープロパティをサポートするべきです。しかし、他にも独自のプロパティを持つかもしれません。例えば HttpError オブジェクトであれば、 404, 403 もしくは 500 といった値をとる statusCode プロパティを持つかもしれません。 JavaScript は任意の引数で throw できるので、技術的にはカスタムのエラークラスは Error から継承する必要はありません。しかし、継承してい
要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできる JavaScript のプロパティがたくさんあります。 JavaScript では、要素を移動したり配置するときに、座標を正しく計算するためにしばしばそれらを必要とします。 サンプル要素プロパティを示すサンプルの要素として、以下のものを使用します: <div id="example"> ...Text... </div> <style> #example { width: 300px; height: 200px; border: 25px solid #E8C48F; padding: 20px; overflow: auto; } </style>
MutationObserver は DOM 要素を監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトです。 最初に構文を確認してから、実際のユースケースを見ていきましょう。 構文MutationObserver は使いやすいです。 まず、コールバック関数を引数にオブザーバ(observer)を作成します。: config はブール値のオプションを持つオブジェクトで、“どの種類の変更に反応するか” を指定します。: childList – node の直接の子の変更, subtree – node のすべての子孫に対する変更, attributes – node の属性の変更, attributeOldValue – 属性の古い値を記録する (attributes が ture の場合), characterData – node.data (テキストコンテンツ) を監
Proxy オブジェクトは別のオブジェクトをラップし、プロパティやその他の読み取り/書き込みなどの操作をインターセプトします。必要に応じてそれらを独自に処理したり、オブジェクトが透過的にそれらを処理できるようにします。 Proxy は多くのライブラリや一部のブラウザフレームワークで使われています。このチャプターでは、多くの実践的なアプリケーションを紹介します。 構文: target – ラップするオブジェクトです。関数を含め何でもOKです。 handler – プロキシ設定: 操作をインターセプトするメソッド “traps” をもつオブジェクトです。例: get トラップは target のプロパティの読み取り用、set トラップは、target へのプロパティ書き込み用、など。 proxy の操作では、handler に対応するトラップがある場合はそれが実行されます。それ以外の場合は、操
fetch を中止するのは少し面倒です。思い出してください、fetch は promise を返します。そして、JavaScript には一般的に promise を “中止する” という概念はありません。では、どうやって fetch をキャンセルしましょう？ このような目的のための、特別な組み込みのオブジェクトがあります。: AbortController. 使い方はとても簡単です: Step 1: コントローラを作成します:
“同一オリジン” (同一サイト) ポリシーは、ウィンドウとフレームのアクセスを互いに制限します。 2つのウィンドウが開いているとします: 1つは john-smith.com、もう1つは gmail.com です。この場合、john-smith.com がメールを読むようなスクリプトは望まないでしょう。 同一オリジン(Same Origin)同じプロトコル、ドメインとポートを持つ場合、2つの URL は “同一オリジン” 言われます。 これらの URL はすべて同じオリジンです: http://site.com http://site.com/ http://site.com/my/page.html これらは違います: http://www.site.com (別のドメイン: www. のため) http://site.org (別のドメイン: .org �のため) https://si
もし任意の web サイトから fetch を行った場合、そのリクエストは恐らく失敗するでしょう。 ここで中心となる概念は オリジン – ドメイン/ポート/プロトコルの３つ揃いです。 クロスオリジンリクエスト(これらは別のドメイン(サブドメインも)、プロトコル、あるいはポートに送信されたもの)には、リモート側からの特別なヘッダが必要です。そのポリシーは “CORS” (Cross-Origin Resource Sharing) と呼ばれています。 例えば、http://example.com へのフェッチをしてみましょう。: 予想通り、fetch は失敗します。 なぜ?なぜなら、クロスオリジン制約が悪意のあるハッカーからインターネットを保護するからです。 脱線しますが、簡単に歴史的な背景を振り返りましょう。 長い間、JavaScript はネットワークリクエストを実行するための特別なメソ
JavaScript言語は着実に進化しています。言語への新たな提案は定期的にだされ、それらは分析され、価値があると考えられたら https://tc39.github.io/ecma262/ の一覧に追加され、仕様 に進みます。 JavaScriptエンジンのチームは何を最初に実装するかについて独自の考えを持っています。彼らはドラフト段階の提案を実装する一方で、既に仕様となったものの実装を「面白くない、もしくはやるのが難しい」という理由で延期するかもしれません。 従って、あるエンジンに標準仕様の一部のみしか実装されていないという状況は非常に一般的なことです。 言語機能の現在のサポート状況を見るには https://kangax.github.io/compat-table/es6/ が良いページです(それは大きく、まだ勉強すべき多くのことがあります)。 プログラマーとして、より最新の機能(
アプリケーションが大きくなるにつれ、それを複数のファイルに分割したくなります。いわゆる ‘モジュール’ です。 通常、モジュールはクラスや便利な関数のライブラリを含みます。 長い間、JavaScript には言語レベルのモジュール構文は存在しませんでした。当初はスクリプトが小さくて単純だったため、それは問題ではありませんでした。そのため、モジュールの仕組みは必要ありませんでした。 しかし、スクリプト徐々に複雑になってきました。そのため、コミュニティはコードをモジュールにまとめるための様々な方法を発明しました。 例えば: AMD – 最も古いモジュールシステムの1つで、最初はライブラリrequire.jsで実装されました。 CommonJS – Node.js サーバ用に作られたモジュールシステムです。 UMD – もう1つのモジュールシステムで、ユニバーサルなものとして提案されています。A
例で始めてみましょう。 このハンドラは <div> へ割り当てられますが、<em> や <code> のような任意のネストされたタグをクリックしたときにも実行されます: <div onclick="alert('The handler!')"> <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em> </div> 少し奇妙に見えますよね？ なぜ実際のクリックが <em> だった場合に <div> 上のハンドラが実行されるでしょう？ バブリング(Bubbling)バブリングの原理はシンプルです。 要素上でイベントが起きると、最初にその上のハンドラが実行され、次にその親のハンドラが実行され、他の祖先に到達するまでそれらが行われます。 たとえば、3つのネストされた要素 FORM > DIV >
blobParts は Blob/BufferSource/String の値の配列です options オプションのオブジェクト: type – blob タイプ, 通常は例えば image/png のような MIME タイプです, endings – blob が現在の OS の改行(\r\n or \n)に対応するように行末を変換するかどうかを意味します。デフォルトでは "transparent" (何もしません)ですが、 "native" (変換する)にすることもできます。 例:
EventSource は WebSocket ほど強力ではない、サーバと通信する方法です。 なぜこれを使う必要があるのでしょう？ 主たる理由はより簡単だからです。多くのアプリケーションでは、WebSocket は少し強力すぎます。 サーバからデータストリームを受信する必要のある、例えばチャットメッセージやマーケットプレイスなどが EventSource の得意なところです。また、WebSocket では手動で何らかの実装が必要な自動再接続もサポートしています。その上、新しいプロトコルではなく通常の HTTP です。 メッセージの取得メッセージの受信を開始するには、new EventSource(url) を作成するだけです。 ブラウザは url に接続し、接続を開いたままにしてイベントを待ちます。 サーバはステータス 200 とヘッダ Content-Type: text/event-s
非同期アクションは失敗する可能性があります: エラーの場合、対応する promise は reject されます。例えば、リモートサーバが利用不可で fetch が失敗する場合です。エラー(拒否/reject)を扱うには .catch を使います。 promise のチェーンはその点で優れています。promise が reject されると、コントロールはチェーンに沿って最も近い reject ハンドラにジャンプします。それは実際に非常に便利です。 例えば、下のコードでは URL が誤っており(存在しないサーバ)、.catch がエラーをハンドリングします: fetch('https://no-such-server.blabla') // rejects .then(response => response.json()) .catch(err => alert(err)) // Typ
ブラウザの JavaScript 実行フローは、Node.js 同様 event loop に基づいています。 event loop の動作を理解することは最適化ためには重要であり、適切なアーキテクチャにとっても重要である場合があります。 このチャプターでは、最初にそれがどのように動作するかについて理論的な詳細を説明し、次にその知識の実践的な使用例を見ていきます。 Event Loopevent loop のコンセプトは非常にシンプルです。無限ループで JavaScript エンジンはタスクを待機し、それらを実行し、また次のタスクを待機します。 エンジンの一般的なアルゴリズムは次の通りです: タスクがある間: 最も古いタスクから開始し、それらを実行します。 タスクが現れるまでスリープし、現れると 1. に進みます。 これは、ページを閲覧するときに見られることの形式化です。JavaScrip
“async/await” と呼ばれる、より快適に promise を利用する特別な構文があります。驚くほど簡単に理解し、使用することができます。 Async 関数async キーワードから始めましょう。次のように関数の前に置くことができます:
エクスポート(export)とインポート(import)ディレクティブは非常に用途が広いです。 前のチャプターでは、シンプルな使用例を見ました。ここではより多くの例を見ていきましょう。 宣言の前の export変数、関数、クラスのいずれかであれば、その前に export を置くことで、エクスポート対象として任意の宣言にラベル付けすることができます。 例えば、ここではすべてのエクスポートは有効です: // 配列のエクスポート export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 定数のエクスポート export const MODULES_BECAME_STANDARD_YEAR = 2015; // クラスのエクスポート export class User { const
container.onmouseover = container.onmouseout = handler; function handler(event) { function str(el) { if (!el) return "null" return el.className || el.tagName; } log.value += event.type + ': ' + 'target=' + str(event.target) + ', relatedTarget=' + str(event.relatedTarget) + "\n"; log.scrollTop = log.scrollHeight; if (event.type == 'mouseover') { event.target.style.background = 'pink' } if (event.ty
instanceof 演算子でオブジェクトが特定のクラスに属しているのかを確認することができます。また、継承も考慮に入れます。 このようなチェックが必要なケースは多々あるかもしれません。ここでは、その型に応じて引数を別々に扱う 多形(ポリモーフィック) 関数を構築するために使用します。 instanceof 演算子構文は次の通りです:
Cookie はブラウザに直接格納される小さな文字列データです。これらは JavaScript の一部ではなく、RFC 6265 仕様で定義されている HTML プロトコル の一部です。 多くの場合、Cookieは Web サーバによって設定されます。 Cookie の最も広く使われている用途の1つは認証です: サインインすると、サーバは Cookie に “セッションID” をセットするために、応答に Set-Cookie HTTP ヘッダを使用します。 ブラウザは Cookie を格納します。 次回、同じドメインへのリクエストが行われるとき、ブラウザは Cookie HTTPヘッダを使用してネット上に送信します。 そのため、サーバは誰がリクエストを行ったのかを知ることができます。 ブラウザは Cookie のための特別なアクセサ document.cookie を提供します。 Cook
次のページ
このページを最初にブックマークしてみませんか？
『現代の JavaScript チュートリアル』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
