はてなブックマーク

十六章第十四回　Proxyこのページの最終更新日：2018年6月2日 今回はProxyを紹介します。これはES2015の新しい機能で、動作をカスタマイズしたオブジェクトを作成できるというものです。 ここで皆さんが思い出すべきはゲッタとセッタの話です。ゲッタやセッタを持つオブジェクトは、あるプロパティが参照されたとき及び代入されたときの動作を関数によりカスタマイズできるのでした。Proxyは、そのもっとすごいバージョンです。オブジェクトにまつわる様々な動作をカスタマイズできるのです。 最初にとりあえず例を見せます。 var target = {}; var obj = new Proxy(target, { get(target, name, receiver){ return name; }, }); console.log(obj.foo); // "foo" console.log(o

十一章第六回　プリミティブについて2このページの最終更新日：2017年11月5日 前回に続いてプリミティブの話です。前回は文字列について主に解説しました。 今回はまず数値の話です。 数値の種類数値といっても、数にはいろいろな種類があります。プログラミング言語によっては、数値は整数しか扱えないint型や、小数も扱えるfloat型やdouble型などと区別されている場合もあります。また言語によっては虚数をサポートしているものもあるそうです。 一方、JavaScriptにおける数値は整数も小数も別け隔てなく数値として扱います。次の例を見てください。 var a = 2; a /= 3; console.log(a); // 0.6666666666666666 整数同士の計算の結果が小数になりました。整数と小数を区別する言語では整数同士の計算はかならず整数になることもあり、それとは対称的です。

十六章第五回　Promiseこのページの最終更新日：2017年11月8日 今回はES2015で追加されたPromiseを解説します。Promiseは、簡単にいうと非同期処理を抽象化したオブジェクトです。 従来の非同期処理非同期処理というのはおおざっぱに言えばすぐには結果が得られない処理です。今までにもいくつかの例を紹介しました。例えば、XMLHttpRequestです。これは、次のように使いました。 const xhr=new XMLHttpRequest(); xhr.open("GET","/index.html"); xhr.send(null); xhr.addEventListener("load",function(e){ console.log(xhr.status, xhr.responseText); }); これは非常に単純なコードで、/index.htmlをGETで読

十六章第二回　イテレータこのページの最終更新日：2017年10月17日 今回はイテレータを紹介します。イテレータ（iterator）とは、ざっくり言うと一連の複数のデータからなるものです。 そう言われて思い浮かぶのは配列でしょう。配列は複数のデータが並んだオブジェクトです。 他にも文字列なども、文字の並びとみなせばイテレータと言えなくもありません。 ES2015ではこれらを抽象化してイテレータとして仕様化されました。 for-of文for-of文はES2015で新たに追加された構文で、イテレータの中身を1つずつ取り出して処理する文です。その名前から連想される通り、for文やfor-in文と似た使い方ができます。次の例を見てください。 var arr=[0,1,2,3,4]; for(var value of arr){ console.log(value); } この文を実行すると、0から

十七章第一回　MutationObserverこのページの最終更新日：2017年11月30日 第十七章では、久しぶりにDOMの話題です。DOMは主に第一篇（第二章〜第十章）で詳しく紹介しました。第十二章のHTML5に関する内容は、これまでに紹介したDOMの内容を基礎としていました。というのも、第十二章で紹介したのはDOMを使ってHTMLの各機能を操作する方法、つまりDOMの枠組にHTML5を当てはめた結果です。実際、HTML5の仕様には、各要素の定義と同時にその要素のDOM定義も定められています。 DOMも数回のバージョンアップを経験しており、伝統的にDOMのバージョンはレベルと呼ばれています。レベルが高いほど、後に定めれた高度な内容となっています。今までDOMにはレベル1から3までありました。例えばgetElementByIdなど基礎的なものはレベル1で、第十章で紹介したXPath、また

四章第一回　文字列の操作このページの最終更新日：2017年11月5日 第四章のトピックは文字列です。第二章・第三章はDOMの話題でしたが、少し離れることにしましょう。 今回基礎的な文字列の操作について解説します。より詳しい説明が十一章第五回にもあります。 文字列の長さある文字列があるとき、その「長さ」を知りたいことがあると思います。長さとは、つまり文字数のことです。そういう方法はちゃんとあります。 var str = "abcde"; console.log(str.length); このサンプルでは、変数strに"abcde"を代入し、そのlengthというプロパティを見ています。「5」が表示されます。試しにこのstrの内容を変えてみると、表示されるlengthプロパティの中身もそれにあわせて変わるはずです。 つまり、文字列の長さを知るには、その文字列のlengthプロパティを使えばいい

十四章第四回　Indexed Database 3このページの最終更新日：2019年7月1日 実はIndexed DBの解説はやっと折り返しです。続きも頑張りましょう。 オブジェクトストアの操作前回はIDBObjectStoreのメソッドaddとputを紹介しました。 今回はさらにメソッドを紹介します。まずはgetです。これは、引数にkeyを指定すると、そのkeyをもつレコードが得られるというものです。ただし、そのkeyをもつレコードがない場合はundefinedが返ってきます。 これがあるので、keyはレコードにつけた名前のような感覚で使えます。 ただし、getの結果は返り値として帰ってくるわけではありません。getの返り値は例によってIDBRequestです。 addやputのときと同様に、IDBRequestで発生するsuccessイベントを待たなければなりません。getの結果、すな

十六章第一回　WeakMapとWeakSetこのページの最終更新日：2019年7月2日 第十六章では、ES2015の解説をします。これはその名の通り、2015年に標準化された新しいECMAScript仕様を指します。ES2015は今までに説明したES5までと比べても新しい機能、新しい文法などを備えています。なお、ECMAScriptというのはJavaScriptの言語仕様の名前です。なぜ素直にJavaScriptと言わないのかは歴史的経緯とかが色々あるのです。（このあたりのことは十六章第二十二回で説明する予定です。） つまりざっくり言えば、ES2015というのは最近JavaScriptに追加された新しい機能とか文法のことです。2015というだけあってこれはなかなかに近代的な文法などが含まれています。今どきはこれくらい分かっていないと中級者とは言えないでしょう。 なお、ES2015は、ES5

九章第二回　prototypeの活用このページの最終更新日：2019年7月1日 今回は、prototypeというものを解説します。まず前回のサンプルを振り返ります。 var jikoshokai = function(){ console.log("私の名前は" + this.name + "です。"); }; function Yuusha(n){ this.name = n; this.jikoshokai = jikoshokai; } var yuusha1 = new Yuusha("勇者1"); var yuusha2 = new Yuusha("勇者2"); var yuusha3 = new Yuusha("勇者3"); yuusha1.jikoshokai(); yuusha2.jikoshokai(); yuusha3.jikoshokai(); 前回これはまだ完璧では

二章第二回　DOMとはこのページの最終更新日：2017年10月4日 今回から、しばらく「DOM」について解説していきます。DOMとは、「Document Object Model」のことで、プログラムでHTML（やXML）を扱うための仕様です。（ブラウザ上で実行される）JavaScriptはこのDOMに対応していて、DOMの仕様にそってHTMLを操作することができます。 仕様書DOMには「仕様書」があります。「こういう操作をするにはこういうメソッドを使って、こういう場合にはこうこう……」といった具体的な方法が書いてあります。ここに書いてあることがDOMの全てだといえます。 仕様書はいくつもあります。例えば、一番初歩的なのはDOM Level 1という仕様書です。これは一番基本的な部分について記述してあります。実は、これを読んで理解できればこんなサイトを見る必要はありません。しかし、仕様書を

十一章第四回　Objectとプロパティこのページの最終更新日：2017年10月27日 プロパティの一覧を取得するES5の特徴は、オブジェクト、特にプロパティに対する操作が強化されたことです。 まず、オブジェクトに存在するプロパティの一覧を取得することを考えましょう。例えば、 var obj={ foo:"bar", baz:3, }; というオブジェクトにはfooとbazという2つのプロパティがあります。このように、あるオブジェクトが持っているプロパティを全て調べるということが必要になる機会は少なくないでしょう。 このとき実は、古典的な方法としてはfor-in文があります。これは以下のような形の文です。 for(var 変数名 in オブジェクト){ } forという名前から察せるように、これはループの一種です。左の変数に、右のオブジェクトが持っているプロパティの名前が入り、全てのプロパテ

Canvas Masao Converter Java版正男のcanvas版に変換してプレイ可能にするChrome拡張機能

How to play: Use your arrow keys to move the tiles. When two tiles with the same number touch, they merge into one and collapse! Rule: Quamtum tiles have multiple possibilities. They collapse when they are merged. Quamtum tiles prefer to merge. Note: This site is not the official version of 2048. You can play the official version at http://gabrielecirulli.github.io/2048/. Quantum 2048 is modified

十一章第七回　継承2このページの最終更新日：2017年10月13日 継承については九章第三回で解説しましたが、じつはあれはもう少しましにできます。第十一章のテーマはES5なので、ES5で可能になったよりよい継承の方法について説明します。 継承の仕組みは既に説明しました。すなわち、各インスタンスはコンストラクタのprototypeに結びついていて、インスタンスのプロパティを探すときは、自分のプロパティに無かったらprototypeのプロパティを探しに行くのでしたね。 function Teki(n){ this.name = n; } //現れる Teki.prototype.appear = function(){ console.log(this.name + "があらわれた！"); }; var zako1 = new Teki("ザコ敵"); //敵をつくる zako1.appear

十二章第四回　datasetこのページの最終更新日：2019年7月1日 今回はちょっと息抜きで、簡単ですが便利なdatasetを紹介します。 HTML5には独自データ属性というものがあり、簡単にいうと、要素に好きな属性をつけられるというものです。 ただ、完全に自由に属性に名前をつけていては大変なので、data-という接頭辞をつけた属性を勝手に自分で作っていいことになっています。つまり、具体的には例えばこうです。 <div data-foo="hi"> この例ではdiv要素にdata-fooという独自データ属性がつけられています。 もちろん自分で勝手に作ったので、HTML的にはこの属性には何の意味もありません。じゃあ何に使うのかというと、そう、JavaScript側から利用できるのです。JavaScriptから読む用にHTML要素に付加的な情報をつけるのが独自データ属性の主な役割となります。

十三章第三回　Web Messagingこのページの最終更新日：2018年7月29日 第十三章のテーマは「通信」でしたね。次に紹介するのはWeb Messagingです。前回と前々回ではHTTP通信にかかわる機能を紹介しましたが、今回のこれはHTTP通信はしません。 それではどのような通信かというと、これはブラウジングコンテキスト間の通信です。 ブラウジングコンテキストとは何かというと、これはブラウザのタブの1つ1つのことです。つまりブラウジングコンテキストで通信するということは、複数のタブの間でデータをやりとりするということです。 ただし、ここでいう複数のタブというのは同じ人の、同じブラウザのタブです。Web Messagingはインターネット上を通信するものではなく、あくまで各個人のPCやスマートフォン等の中で、異なるタブの間でデータをやり取りできるということです。その意味では、前回ま

十四章第三回　Indexed Database 2このページの最終更新日：2019年7月1日 key今回はまずkeyについて説明します。 keyは前回の最初の説明でも少し触れましたが、データベースに入れた個々のレコードに一意な名前をつけるものです。 レコードに対してkeyをつける方法は二種類あります。ひとつはin-line keysという方法で、もう一つはout-of-line keysという方法です。 in-line keysというのは、レコード内にkeyの情報が含まれる形です。out-of-line keysというのは逆に、レコード本体には情報が含まれず、どこか別のところにとっておいてある形です。 詳しくは後述しますが、in-line keyを持つレコードの例は次のような感じです。 { userid: 5, name: "Johm Smith", age: 30, } このオブジェクト

二章第三回　基本的な操作とテキストノードこのページの最終更新日：2017年11月10日 今回から、いよいよWebページにも多少動きが出てきます。 innerHTML前回、ちらっと「innerHTML」というプロパティが出てきました。これはHTMLElementが持っているプロパティです。 これは、要素の中身がHTMLで代入されているというものでした。 それでは、今度はそこに新しい中身を代入したらどうなるでしょう。なんと、実際に書きかわります。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="aaaaa">t<strong>es</strong>t</p> <script type="text/javascript"> var p = document.getElementById('aaaaa'

十一章第二回　bindこのページの最終更新日：2017年9月14日 今回の記事は短いです。今回はbindというメソッドを1つだけ紹介します。bindは九章第五回でちらっと出てきたもので、ある関数が呼ばれたときのthisの値を固定するためのメソッドです。 次の単純な例を見てみましょう。 function showThis(){ console.log(this); } var foo = showThis.bind("菅直人"); foo(); "菅直人"と表示されるはずです。つまり、showThis内でthisが"菅直人"になっていたのです。 この例から分かるように、bindの戻り値は新しい関数です。その関数は元の関数と同じ動作をしますが、thisの値はbindに渡された値に固定されています。以前に述べた通り、thisの値はどのように関数が呼ばれたかによって変わります。bindによって作ら

十四章第二回　Indexed Databaseこのページの最終更新日：2019年7月1日 今回紹介するIndexed Database、通称IndexedDBは、前回のStorageが進化したようなもので、ある種のデータベースをJavaScriptから作ってブラウザに保存しておいてもらえるものです。localStorageと比べると、文字列だけでなくオブジェクト等を保存できる点や検索機能がある点でより強力です。 昔はSQLを用いたクライアントサイドデータベース（WebSQL）の仕様策定が進んでいましたが、のちに破棄され、SQLを使わない方向の新しいデータベースAPIとしてIndexedDBが用意されたのです。 IndexedDBにはバージョン1と2がありますが、ここではバージョン1の範囲で説明します。 データベースの構造データベースは、localStorageと同様に同じオリジンでは共有さ

三章第一回　イベントプロパティこのページの最終更新日：2017年7月31日 今回は要素のイベントプロパティについて解説します。 HTMLのイベント属性この内容は基礎第五回でも解説しました。HTML要素にイベントに対応した属性をつけるというものでした。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p onclick="console.log('click');">test</p> </body> </html> このようにonclick属性をつけた場合、その要素がクリックされた場合にその中身が実行されます。 <!doctype html> <html> <head> <title>test</title> <script type="text/javascript"> function aaa(){ co

九章第五回　クロージャこのページの最終更新日：2019年7月1日 クロージャとは今回はクロージャについて解説します。これはオブジェクト指向とはちょっと趣向が異なる方向の話ですが、とりあえず気にしないことにしましょう。 クロージャとは、ある関数が作られたとき、そのときの環境が関数の中で保持されるということです。 環境とは、そこの処理でどの変数が使えるかということです。JavaScriptではスコープという用語で表されることもあります。例えば、 var a=3; console.log(a); という何の変哲もないコードですが、console.log(a);が実行されたときの環境では、変数aが使用できます。また、変数a以外にも全てのグローバル変数が使用できます。例えば何気なく使っているconsoleはグローバル変数ですね。 また、 function aaa(){ var b = 3; cons

九章第一回　オブジェクト指向とはこのページの最終更新日：2017年9月7日 九章では、DOMから少し離れてオブジェクト指向について解説します。 オブジェクトそのものについては、一章で少し解説しました。では、オブジェクト指向とは何なのでしょう。 オブジェクト指向とは何かというのは諸説ありますが、大まかにいうと、プログラムをいい感じに部品に細分化し、部品の組み合わせでプログラムをつくるというものです。このそれぞれの部品がオブジェクトというわけです。この章では、このような考え方のもとオブジェクト指向を実践するための言語機能を紹介します。 なので、これらをオブジェクトとして作り、それを使ってプログラムを作ればよいのです。ちょっとやってみましょう。 var yuusha = new Object(); yuusha.name = "勇者"; //勇者の名前 yuusha.power = 10; //

一章第四回　オブジェクトと関数このページの最終更新日：2019年7月1日 関数もオブジェクトだ「オブジェクト」について多少わかってきたので、ここで関数という存在を見直してみましょう。 実は、基本的にJavaScriptでは全てのものがオブジェクトかプリミティブです。関数はどちらに入るのでしょう。 実は関数もオブジェクトです。ただ、すごく特殊なオブジェクトであるのは分かると思います。「()」をつけると呼び出すことができるというのは関数だけがもつ特徴です。 実際、配列なんかよりももっと特殊なオブジェクトという位置づけです。しかし、オブジェクトであることは確かです。次のサンプルを見てみましょう。 function aaa(){ alert("test"); } aaa(); alert(aaa); アラートを表示するだけの関数aaaを作り、それを呼び出しています。よって、「"test"」のアラー

JavaScriptではとても重要な要素であるオブジェクトですが、初心者の人はこれをあまり知りません。これを知ることが「中級者」への第一歩だといえるでしょう。 さて、オブジェクトとは、複数の値をひとまとめにした値です。これはひじょうにざっくりした説明ですが、今はこれくらいにしておきましょう。 実はこの説明は、基礎第六回で解説した配列と同じ説明です。実は配列はオブジェクトの一種なのですが、それについては深く考えずにまずはオブジェクトとはどんなものかを説明します。 配列は、複数の値（要素といいました）をひとまとめにし、それぞれを番号で区別するというものでした。 一方、オブジェクトでは、ひとつひとつの値が番号ではなく名前を持っています。 具体的なサンプルを見てみましょう。 var obj = new Object(); obj.aaa = "test"; obj.b = 123; alert(o

十三章第一回　XMLHTTPRequestこのページの最終更新日：2019年7月1日 今回は、かなりよく使われる技術のひとつであるXMLHTTPRequestを紹介します。 略してXHRと呼ばれることもあるこの技術は何かというと、JavaScriptでHTTP通信を行うためのAPIです。Ajaxという言葉はもはや死語かもしれませんが、その根幹をなす技術です。 HTTP通信がどういうものかご存知でしょうか。ブラウザでインターネットを閲覧する場合はHTTP通信により行われます。HTTP通信は、基本的にはページを見たい側（クライアント）がウェブサイト（サーバー）に対してリクエストを送り、それに対してサーバーからページの内容（レスポンス）が帰ってくるというものです。このようなHTTP通信をJavaScriptから行うことができるのです。 リクエストを送るJavaScriptからHTTPリクエストを

テーブルの木構造HTMLを見る限り、上のテーブルの木構造は次のようだと考えられます。ただし、タグとタグの間の改行によって生じるテキストノードは省略しています。 table直下にあるのはtbodyという要素で、trはその下にあります。 詳しくはHTMLを勉強してほしいのですが、tableの中にはtbodyという要素があり、trはその中に入れます。このtbodyという要素は省略可能であり、まったく書かなくても暗黙のうちに存在すると見なされるのです。 他にもtheadやtfootという要素も、tbodyと並んでtableの中に存在する可能性があり、それらの中にもtrが存在する可能性があります。（thead, tfootについては次回詳しく紹介します。） <!doctype html> <html> <head> <title>test</title> </head> <body> <table