はてなブックマーク

一部の正規表現は、一見すると単純に見えますが、実行時間が非常に長く JavaScript エンジンを “ハング” させることがあります。 遅かれ早かれ、多くの開発者はこのような振る舞いに直面することがあります。典型的な症状は、正規表現は概ねうまく機能しますが、特定の文字の場合 “ハング” し、CPUを 100% 消費します。 このような場合、Webブラウザはスクリプトを停止し、ページをリロードするよう提案します。これは確かに良いことではありません。 サーバサイド JavaScript では、このような正規表現はサーバプロセスをハングさせる可能性があり、より深刻です。そのため、絶対に見ておくべきことです。 例文字列があり、それぞれの文字の後に任意のスペース \s? を持つ文字 \w+ から構成されるかを確認したいとしましょう。 正規表現を組み立てる明白な方法は、文字の後に任意のスペース \w

より複雑なコードを書く前に、デバッグについて話しましょう。 デバッギングはスクリプト内のエラーを見つけ、修正するプロセスです。すべてのモダンブラウザと他の環境のほとんどはデバッギングツール（デバッグを簡単に行えるようにする開発者ツールのUI）をサポートしています。また、コードをステップ毎に追跡して正確に起きていることを確認することもできます。 ここでは、恐らくこの観点では最も機能が充実している Chrome を使います。 “sources” パネルChromeのバージョンによっては少し違って見えるかもしれませんが、何があるかは明白でしょう。 Chromeの example page を開きます。 F12 (Mac: Cmd+Opt+I) で開発者ツールをONにします。 source パネルを選択します。 この画面を見るのが初めてであれば、見ておくべきものがあります: ここでは3つの領域が確

JavaScript は、必要に応じていつでもサーバへリクエストを送信し、新しい情報を読み込むことができます。 例えば、次のようなことができます: 注文を送信する ユーザ情報を読み込む サーバから最新の更新情報を受け取る …など …そしてこれらはすべてページをリロードすることなく行うことができます。 それを表す包括的な用語 “AJAX” (Asynchronous Javascript And Xml)があります。XML を使う必要はありません: この用語は昔から来ています。 ネットワークリクエストを送信し、サーバから情報を取得するための様々な方法があります。 fetch() メソッドはモダンで多目的に利用できるため、これから始めましょう。fetch は数年間進化と改善を続けています。今のところサポートはブラウザの間でとてもしっかりしています。 基本構文は次の通りです: url – アクセ

NULL合体演算子は２つの疑問符 ?? で記述されます。 これは null と undefined を同じように扱うので、この記事では特別な用語を使用します。null でも undefined でも無いときは、“定義済み” である、と言います。 a ?? b の結果は: a が null あるいは undefined でなければ a, それ以外の場合は b. つまり、?? は null/undefined でなければ最初の引数を返し、それ以外の場合は�2つ目を返します。 NULL合体演算子はまったく新しいものではありません。2つのうちから、最初の “定義済み” の値を取得するには良い構文です。 既に知っている演算子を使用して result = a ?? b を書き直すことができます:

私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。

正規表現(Regular expressions)は文字列内を検索したり置換するための強力な方法です。 JavaScriptでは、正規表現は組み込みの RegExp クラスのオブジェクトを使用して実装され、文字列と統合されています。 正規表現正規表現(もしくは “regexp”, または単に “reg”) は パターン とオプションの フラグ で構成されています。 正規表現オブジェクトを生成するための2つの構文があります。 長い構文:

Web 開発では、ファイル(作成、更新、ダウンロード)を処理するときにバイナリデータに出くわします。その他の典型的なユースケースは画像処理です。 これらはすべて JavaScript で可能です。また、バイナリ操作も高性能です。 ですが、多くのクラスが存在するため少し混乱しやすいです。いくつか例を挙げます: ArrayBuffer, Uint8Array, DataView, Blob, File, etc. JavaScript でのバイナリデータは、他の言語と比べて非標準的な方法で実装されています。しかし、一度整理できれば、すべてがとても簡単になります。 基本となるバイナリオブジェクトは ArrayBuffer です。これは固定長の連続したメモリ領域への参照です。 次のようにして生成できます:

最近の web サイトでは、スクリプトは HTML よりも “重い” ことがしばしばです: ダウンロードサイズはより大きく、処理時間も長くなります。 ブラウザが HTML をロードし、<script>...</script> タグに遭遇すると、DOM の構築を続けることはできません。すぐにスクリプトを実行する必要があります。外部スクリプト <script src="..."></script> についても同じです: ブラウザはスクリプトをダウンロードし、それを実行するまで待つ必要があり、その後にページの残り部分の処理をすることになります。 これは2つの重要な問題につながります: スクリプトは、それ以降の DOM要素は認識することができないため、ハンドラーを追加したりすることはできません。 ページの先頭に重いスクリプトがあると、“ページをブロック” します。利用者はそれがダウンロードされ実行

私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。

これまで見てきたように、バックスラッシュ \ は文字クラスを表すのに使われます。例: \d。なので、正規表現の中では特別な文字です。 同様に他にも特殊文字があり、正規表現の中で特別な意味を持ちます。それらはよりパワフルな検索をするために使われます。 これがその完全なリストです: [ \ ^ $ . | ? * + ( ). 覚えようとする必要はありません – それぞれを個別に見ていく際に、自然と覚えていくでしょう。

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 を作る必要があります:

前置き: コールバック の章で言及した問題に戻りましょう。私たちは順次実行される一連の非同期タスクを持っています。例えば、スクリプトの読み込みです。上手くコード化するにはどうすればよいでしょう？ 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 result * 2; }).t

独自のメソッドやプロパティ、イベントなどを持つ、独自のクラスで記述されたカスタムHTML要素を作成することができます。 一度カスタム要素が定義されると、組み込みのHTML要素と同じようにそれを使用できます。 HTMLの種類は豊富ですが、無限ではないので、これは素晴らしいことです。<easy-tabs>, <sliding-carousel>, <beautiful-upload> などはありません。他に必要となるタグについて考えてください。 特別なクラスでそれらを定義し、それ以降はあたかもそれがHTMLの一部であるかのように使用することができます。 Custom element(カスタム要素)には2種類あります。: 自律型カスタム要素(Autonomous custom elements) – 抽象的な HTMLElement クラスを拡張した “すべてが新規” の要素です。 カスタマイズ

この章ではドキュメントでの選択と、<input> などのフォームフィールドでの選択について説明します。 JavaScript を利用して選択状態を取得したり、全体あるいは一部分の選択/選択解除、ドキュメントから選択した部分を削除、タグへのラップなどを行うことができます。 末尾の “サマリ” セクションにレシピがあり、これで現時点で必要なことはカバーされているかもしれません。ただ、章全体を読むことでより多くのことを知ることができます。 基礎となる Range と Selection オブジェクトの把握は難しくはないので、必要なことをするためのレシピは必要ありません。 範囲(Range)選択の基本的な概念は 範囲(Range) で、基本的には “境界点”(範囲の開始と終了) のペアです。 Range オブジェクトはパラメータなしで作成できます: 次に、range.setStart(node,

要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできる 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 の属性の変更, attributeFilter – 指定したものだけを監視するための、属性の配列 characterData – node.data (テキストコンテンツ) を監視するかどうか, ほかに

target – ラップするオブジェクトです。関数含め何でもOKです。 handler – プロキシ設定: 操作をインターセプトするメソッドである “トラップ” をもつオブジェクトです。例: get トラップは target のプロパティの読み取り用、set トラップは、target へのプロパティ書き込み用、など。 proxy の操作では、handler に対応するトラップがある場合はそれが実行されます。それ以外の場合は、操作は target で実行されます。 最初の例として、トラップなしでプロキシを作ってみましょう。: let target = {}; let proxy = new Proxy(target, {}); // 空のハンドラ proxy.test = 5; // プロキシへの書き込み (1) alert(target.test); // 5, プロパティが target

私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。

ブラウザがページをロードするとき、HTMLテキストを “読み込み” (別の言葉: “パース”)、DOM オブジェクトを生成します。要素ノードの場合、ほとんどの標準のHTML属性は自動的に DOM オブジェクトのプロパティになります。 例えば、もしタグが <body id="page"> の場合、DOM オブジェクトは body.id="page" を持ちます。 しかし、属性-プロパティのマッピングは1対1ではありません! この章では、これら2つの概念を分け、それらが同じであるとき/異なるときにどのように振る舞うか見ていきます。 DOM プロパティ私たちはすでに組み込みの DOM プロパティを学びました。多くのプロパティがありますが、技術的な制限はないため、不十分であれば独自のプロパティが追加できます。 DOM ノードは通常のJavaScriptオブジェクトです。それを変更できます。 例えば

“同一オリジン” (同一サイト) ポリシーは、ウィンドウとフレームのアクセスを互いに制限します。 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 はネットワークリクエストを実行するための特別なメソ