はてなブックマーク

私はWEB制作ではChromeをメインブラウザとして使っています。JavaScriptをテストする時もChromeのデベロッパーツールを重宝しているのですが、なんとなく、オブジェクトや配列のような参照型変数を console.log や console.dir で出力した時の挙動が怪しい（クセがありそうな）気がしたので少し調べてみました。 どの辺が怪しいかを簡潔に説明するために、単純化したコードを次に示します。 'use strict'; var obj = {message: ''}; var fn1 = function () { obj.message = 'fn1 called!'; console.dir(obj); // (A) }; var fn2 = function () { obj.message = 'fn2 called!'; console.dir(obj); /

ウィンドウをリサイズさせた時に何か処理をしたい事はよくありますよね。そういった場合、次の例の様に単純にwindow.onresizeイベントに処理したい関数を割り当てればとりあえずはリサイズ時に関数を実行させることは出来ます。 window.onresize = function () { console.log('hoge'); }; しかし、この場合リサイズしている間(=ウィンドウを動かしている間）何度も関数がコールされます。 それ自体は悪いことではないのですが、リサイズが「完了」した時に一度だけ処理を実行したいようなケースもあると思います。そういった場合、何度も同じ関数がコールされてしまうのは無駄な処理です。処理の内容が重いものであればなおさらです。 例えば、ウィンドウのリサイズが完了したタイミングで発火するイベントがあれば良いのですが、現状のブラウザではそんなものはありませんので、

JavaScriptにおけるモジュール CommonJSやAMDの登場 ES2015からは標準採用された モジュールを使うためには？ モジュールファイルの作成(export)と読み込み(import) 参考リンク JavaScriptにおけるモジュール 例えばコーポレートサイトのような普通のWEBサイトの場合、JavaScriptコード量はそれほど多くはならないないと思います。ページにいくつかのギミックを加える程度ならば１つのJavaScriptファイルに全てのコードを詰め込んだとしても特に問題は無いでしょう。 しかし、WEBアプリ開発のようにJavaScriptでゴリゴリとコードを書いていく場合、ある程度機能（役割）別にファイルを切り出して別ファイルとして管理したいところです。そのようにして関連性を持たせて切り離された一塊のコード群が「モジュール」です。 説明するまでもないのですが、別に

とりあえず結論から ES5時代のスコープ ES2015からlet, constが使えるように 巻き上げ（ホイスティング）について 非strictモードでの挙動 参考リンク まだまだBabelにお世話になりつつも、ES2015ベースでコードを書くことが確実に増えて来ていますね。 ES2015では変数の宣言に let, const という新しいシンタックスが使えるようになりました。 早速これらを使うようにしてみたのですが、let/constについては「letはブロックスコープ」「constは定数」程度の認識だったので、私の書いたコードには var, let, constが入り混じるというよくわからない状態になりました。 そのような状況を経て、まず最初に思ったのが「これ、var 要らなくね？」というもの。 基本的に、変数の有効範囲（スコープ）は可能な限り局所的にすべきという考えだったので、それで

【2017.08.04追記】 記事の内容が「Spread operator」と「残余引数 (Rest parameters) 」とが混同しているとのご指摘を受け、内容を一部修正しました。 先日、ES2015の新構文について少し調べていた時の事。ふとこんなサンプルコードが目につきました。 function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args);} 一見、なんの変哲もない普通のコードかと思っていたのですが、よく見ると関数の引数部分に「…args」というのがあります。 ドット3つ（日本語で言うところの３点リーダ）の後に引数名となっていますね。 私もよくブログ内で記事を書くときに、省略やエトセトラ（etc）的な意味を表現するために「…」を使いますが、上記のコードの「…args」の部分もその類かと思っていま

アロー関数とは 基本構文 通常の無名関数との違い thisの扱いに注意 jQueryでコールバック関数としてアロー関数を使う場合 アロー関数で即時関数 まとめ 参考リンク アロー関数とは ES2015の新構文の一つ「アロー関数」とは、無名関数の省略記法です。無名関数ではない、いわゆる「関数宣言」には使うことができません。また、後述しますが無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要です。 //従来の関数式 var fn = function (x) {/* 関数本体 */}; //上記の関数式の無名関数部分（右辺）をアロー関数に置き換えたものが以下です。 var fn = (x) => {/* 関数本体 */}; //次の様な「関数宣言」をアロー関数に置き換えることは出来ません。 function fn(x) {/* 関数本体 */} 基本構文

この記事の目的 「ES6 or ES2015」次のJavaScriptの正しい名称について 各ブラウザの対応状況 「トランスパイラ」を使うという選択肢 トランスパイラを使う場合の注意 まとめ この記事の目的 この記事は2015年10月に公開されました 次世代JavaScriptとして長らく策定中であったES2015(旧名称＝ES6：以下ES2015で統一します)ですが、2015年6月にようやく言語仕様が正式公開されました。フロントエンジニアとしては早く新しいJavaScriptを試してみたいところですよね。 現在はまだES5が主流ですが、将来的には確実にES2015が主流になるはずです。なのでフロントエンジニアにとってES2015の学習は必修科目ではあると思うのですが、どうせなら実戦投入を見据えて仕事を兼ねて学んでいきたいところです。ですがその場合は当然ながらブラウザの対応状況を考慮しなけ

クロージャとは クロージャの本質 なぜクロージャを使うのか？ まとめ JavaScriptを学んでいく過程で必ず耳にする単語「クロージャ」 すごく難しいものではないと思うのですが、どことなくつかみどころがない、うまく説明できない、そんな存在ではないでしょうか？ 私自身、正直なところクロージャについては「なんとなく使ってはいるが、使い方をうまく伝えられない」といった程度です。 これから先、クロージャについてモヤモヤしながら仕事をしていくのもどうかと思ったので、この機会に私もクロージャについて理解を深めるべく記事を書くことにしました。 クロージャは、それ自体が難しいというよりは、説明が難しいものだと思います。 そのため、ネットでクロージャのことを調べていくと、（もちろん大変参考になる情報も多いのですが）少し本質ではない部分について語られているものも多い気がします。 このエントリではクロージャの

「missing ‘use strict’ pragma」は、JavaScriptコードをstrictモード（厳格モード）で実行することを表す「”use strict”宣言」の未使用を許可するかどうかのオプションです。デフォルト（false）では、関数はstrictモードで実行させることが強制されるため、”use strict”宣言は必須となります。 このオプションがデフォルト（false）の状態で、次のコードをJSLintでチェックすると「Missing ‘use strict’ statement.（=”use strict”宣言がありません）」という警告が表示されます。 (function () { var foo = 1, bar = 2; window.console.log(foo + bar); }()); このコードに”use strict”宣言を加えると、下記のコードにな

ANALOGIC（アナロジック）について 神奈川県川崎市を拠点として、WEBアプリケーションの企画・制作・運営、ホームページ制作、社内業務のシステム開発、ネットショップ制作代行などを行っている個人の事務所です。 シンプルで機能的なWEBアプリケーションの構築 近年のWEB関連技術の発展により、WEBサイトでは多彩な表現方法が可能になりました。 ANALOGICではそれらの技術を「見た目の派手さ」ではなく、「使いやすさ」に重点を置いて活用し、デスクトップアプリケーションのような機能的なWEBアプリケーションの構築をいたします。 外部サービスを組み込んだ複合サービスの開発 Twitter／Facebookなどの外部サービスを組み込んだ、新たなマッシュアップ（複合）サービスの開発を得意としております。 ソーシャルメディアの活用の仕方なども含めてご提案することが可能です。

関数の実行結果をバインディングに渡す ループ内でViewModelに属する関数を使う際の注意 バインディングにイベントハンドラを追加 イベントハンドラに任意の引数を渡す２つの方法 Knockout.jsでは、View(HTML)側のバインディングに対してViewModelオブジェクトのプロパティだけではなく、JavaScriptの関数を用いることもできます。例えばtextバインディングに関数の実行結果を渡したり、clickバインディングにイベントハンドラを関連付けたりすることが可能です。 今回は、そのようなView側での関数の使い方についてまとめてみました。 関数の実行結果をバインディングに渡す ■引数なしでの呼び出し まずは最も基本的なケースで、ViewModelオブジェクトに属する関数（ViewModelオブジェクトのメソッド）を引数無しで呼び出し、その実行結果をバインディングに渡す例

検証概要 検証1：ネットワークからのレスポンス速度の違うJSファイルの実行タイミング 検証2：ファイルサイズの違うJSファイルの実行タイミング 検証3：外部JSファイル、インラインスクリプト、スクリプト以外のタグの混在時の実行順序 まとめ これまであまり意識してこなかったのですが、JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか？と、ふと疑問に思いました。 大きなプロジェクトであればあるほど、肥大化したJavaScriptコードを機能毎に別ファイルに切り出し、体系的にJavaScriptコードを管理した方がメンテナンスもし易くなると思いますが、そいうったケースでは複数の外部JSファイルをHTMLファイル内に読み込むことになると思います。 そのような場合、JSファイル間で依存

即時関数の構文 即時関数はスコープを汚染せずに新たなスコープを作成するための唯一の手段 即時関数が使われるケース まとめ JavaScriptには「即時関数」という構文があります。即時関数は関数を定義すると同時に実行するための構文で、この即時関数を使ってコードを書いたことのある方も多いのではないかと思います。 JavaScriptに慣れている方にとっては「何を今さら」といった書き出しかもしれませんが、私はこの即時関数を初めて知った時、その必要性がイマイチ見出せませんでした。それは、「関数を定義と同時に実行するのは分かるけど、別に普通に関数を定義して、その関数を呼び出せばいいじゃん」って思ったからです。 確かに、一度しか使われないような関数をいちいち名前付きで定義してそれを呼び出すというコードは冗長的かもしれません。そのような場合は即時関数を使った方がよりスマートなコードになるでしょう。です

jQueryを使用せずに、ネイティブなJavaScriptのみでDOM操作を行う場合に、抑えておきたい基本的なことと、DOMの基本操作についてまとめました。 続きを読む

Knockout.jsでは、View(HTML)側のバインディングに対してViewModelオブジェクトのプロパティだけではなく、JavaScriptの関数を用いることもできます。例えばtextバインディングに関数の実行結果を渡したり、clickバインディングにイベントハンドラを関連付けたりすることが可能です。 今回は、そのようなView側での関数の使い方についてまとめてみました。 続きを読む Knockout.jsではView（HTML）側からko.applyBindingsメソッドの引数として渡されるViewModelオブジェクトのプロパティやメソッドを参照することが可能ですが、場合によってはViewModelオブジェクトにはない（ViewModelオブジェクトの外部で定義されている）関数などを使いたくなるケースもあるかと思います。 そのような関数やプロパティをView側参照するにはど

JavaScriptにおける命名規則については、すでに様々なネット上の記事や書籍などで取り上げられているので、今さらこのブログで新しく紹介するようなものは特に何もないのですが、これらの情報ソースの内容には互いに微妙に異なる部分（内容が競合する部分）もあったりします。 私自身、JavaScriptの命名規則についてはざっくりとは知りつつも、（個人で開発することが多いくせに）プロジェクトが変わる度に微妙に異なる規則でコーディングしていたりと、結構曖昧な状態でここまでやってきてしまいました。 ですので、これらの情報ソースを元にして自分なりのルールを整理しておきたいなと思ったので、ここにまとめておくことにしました。 本エントリは、JavaScript全体に関わるコーディング規約ではなく、あくまでも「命名規則」に絞った内容になっています。自分用のまとめ色が強いエントリになっていますので、ここに書いた

前置き Knockout.jsとは？ そもそもMVVMパターンとは？ Knockout.jsを使うとどのようにコードが変わるか？ メリット、デメリット サポートブラウザ 使いどころ 私の中のJavaScriptの歴史で、Knockout.js（のっくあうと）との出会いはjQueryを知った時以来の衝撃でした。 ページの再読み込みではなくJavaScriptによるDOMのリフローを頻繁に行うようなWEBアプリケーションを作成する場合、アプリケーションの規模が大きくなるにつれHTMLマークアップとJavaScriptコードが随所で絡み合ってしまい、次第にコードのメンテナンスや機能拡張が困難になっていきます。そんな経験をしたことのある人は結構多いのではないでしょうか。 ここで紹介する「Knockout.js」はそんな問題を劇的に改善してくれるJavaScriptフレームワークです。 本来このブロ

概要 JSLintの基本的な使い方 オプション一覧 JSLintを使うときの心構え ここではJavaScriptコードの品質チェックツール「JSLint」について紹介します。 JSLintはWebベースのツールなので、ブラウザがあればすぐにでも利用することができます。 JSLintは、私たちのJavaScriptコードの検証を行い、推奨されない書き方（アンチパターン）や構文エラー、使用されていない変数、未定義の変数の使用といった潜在的な問題が見つかった際に警告してくれます。 コードをJSLintでチェックすることはとても推奨されているそうですよ。また、JSLintはJavaScriptのコードチェックツールとして、デファクトスタンダード（事実上の標準）になっていると思われます。 このブログではコーディングの作法などについても触れていこうと思うのですが、兎にも角にもまずはこのツールを使う「癖

概要 「単独varパターン」とは？ 単独varパターンのメリット ループ用変数はどうする？ 余談：コメントの位置について JavaScriptは他のプログラミング言語に比べ特に柔軟性のある言語だと思います。そのため、コーディングスタイルも人それぞれです。 これは、目的を遂げるための手段が非常に多く用意されているとも言えますが、JavaScript初級者にとってはこの柔軟性がかえってネックになったりもします。つまり、「どのようなコーディングがベストなのか？」ということが、とても分かりづらいのです。（私がそうでした）。 JavaScriptのコーディングスタイルに正解、不正解などは無いかもしれませんが、推奨されているコーディングスタイル（コーディングパターン）はあります。JavaScriptのような柔軟性に富んだ言語を覚える場合、このコーディングパターンを身に着けていくことが上級者への近道だと

概要 とりあえず問題 なぜこうなるのか？ まとめと予防策 JavaScriptには、他の言語ではあまり聞かない（あるいは存在しない）「変数の巻き上げ(hoisting)」という概念があります。これは（たぶん）JavaScript特有のもので、かつ重要なポイントです。 この「変数の巻き上げ」が原因でコードが思った通りの動作をしなかった場合、この概念を知らないと、いくらコードを見直しても問題を発見することができません。ドツボにはまります。 そういう意味でも、この「変数の巻き上げ」の概念をおさえておくことは重要です。 とりあえず問題 変数の巻き上げを説明するには、文章で説明するよりもコードを見てもらった方が理解できると思います。 まずは次のコードを見てください。 var myname = "global"; function func() { console.log(myname); //出力内

変数の使用の単純化 withの使用の禁止 strictモードではwith文が使えなくなります。代替の手段としては、オブジェクトに短い名前の変数を割り当てて、その変数を用いて対応するプロパティにアクセスすることができます。 eval内で宣言された変数のスコープ 非strictモードでは、eval("var x ;")の様に、eval関数内で定義された変数のスコープは、evalが含まれるスコープ（関数、またはグローバルスコープ）まで広がりますが、strictモードでは、eval内で定義された変数を周囲のスコープに広げません。 単純名の削除の禁止 strict モードでは delete name を構文エラーにします evalおよびargumentsの単純化 strictモードでは「eval」「arguments」という名前がキーワードとして扱われるため、これらのキーワードに対して言語構文でのバ