今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
Node.jsのコードのエラー処理の書き方: 初歩からより堅牢な書き方まで - memo.yomukaku.net
ファイルの内容のJSONを読んでパースして返す、という単純な処理を行う関数を例にもちい、node.jsのエラー処理の書き方、よくやってしまう間違い、より堅牢なエラー処理の書き方について書きます。test.jsonというファイル名で以下の内容が書かれたファイルを準備しておきます。 { "1": "a", "2": "b", "3": "c" } このtest.jsonというファイルを読み、JSON.parse()して返すreadJSON()という関数を作り、この関数のエラー処理の書き方についてみていきます。 まずは全くエラー処理を行っていない書き方からみます。 例外処理を行っていない書き方 さっそくコードをみます。 // code1.js // 例外処理を行っていない書き方 var fs = require('fs'); function readJSON (path, callback)
JavaScriptはいかにしてprototypeを捨てクラスベース継承を得るのか - なんたらノート第三期ベータ
きっかけは、prototype と constructor と __proto__ の関係を再確認していたときでした。JavaScriptはこうだけど、これって、AltJSな言語の継承はどうなってるんだろうと思って試したくなりました。 ちょっと気持ち的に、なんだか宗教に入ったみたいに俺は JavaScript がわかったって声高に言う人、だいたいみんな、プロトタイプチェーンによる移譲がクラスベースの継承に束縛されていた思考のブレイクスルーなんだぜ、みたいに言うんだけど、いったいそれがどれほど素晴らしいものなんだろうと考えてしまい... もしプロトタイプチェーンがそんなに素晴らしいんなら、npm にあるほとんどのライブラリがチェーンを活かして作られてない理由が説明できない。もしかしたら、仕組みがいくら面白くても、実際のメンタルモデルにフィットせず、実は使い物にならないんじゃないか ----
JavaScriptで覚えておくとよいデータ構造 - 配列・オブジェクト - いろいろ解析日記
JavaScriptで必要なデータ構造の覚書です。 目次 配列 配列を生成する。 配列にデータを追加する。 配列にデータを格納する。 配列からデータを取得する。 配列中のすべてのデータに同じ処理をする。 オブジェクト オブジェクトを生成する。 オブジェクトにデータを格納する。 オブジェクトからデータを取得する。 オブジェクト中のすべてのデータに同じ処理をする。 関連記事 配列 配列は複数件のデータを扱うためのデータ構造です。 ■配列を生成する。 配列の生成は以下のように行います。 var 配列の名前 = []; var 配列の名前 = [ データ, データ, … ]; 配列の生成では、配列の名前を指定します。 もし、生成時にデータを格納する場合に、[]内にデータを指定します。 なお、JavaScriptでは配列の生成時にサイズを指定しません。 例えば、空の配列array1を生成するには、以
Node.js — Blog
The latest Node.js news, case studies, tutorials, and resources.
Node.js v0.12 がリリースされました。 - from scratch
Node.js v0.12 がリリースされました。 さてさて、さいきんずっとio.jsの話をしてましたが、この度Node.js v0.12がリリースされました。 これまでずっとNode.js v0.12でどう変わるのかを話してましたが、この際一度、何が変わったのかおさらいしておきましょう。 参考URL Node v0.12.0 (Stable) API changes between v0.10 and v0.12 · joyent/node Wiki · GitHub Stream3 Stream3については前に一度この記事で話しました。 Stream今昔物語 - from scratch Stream2にあったold modeの概念がなくなり、Stream1とStream2の両方のAPIに対応されAPIがシンプルになりました。 Stream中のバッファに出力するcorkとそのバッファか
ステップアップのためのJavascriptデザインパターン入門（１）
普段Javascriptをよく書いているのですが、設計が今の自分の弱点だなぁと思い、 積読になっていた JavaScriptデザインパターン – オライリー・ジャパン を引っ張りだして勉強したことを紹介していきます。 内容に関して何か間違いや問題があったらご指摘ください。 デザインパターンとは デザインパターン – wikipedia “ソフトウェア開発におけるデザインパターン（型紙（かたがみ）または設計パターン、英: design pattern）とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。” デザインパターンというのは、テンプレートの様なものと考えるとわかりやすいかもしれませんね。 また、Javascriptデザインパターンでは次のように提唱されています。 パターンは実績のある解決策で
[JavaScript] ログ出力ライブラリ (console へ 出力レベル機能を追加)
閲覧には Mozilla FireFox、Google Chrome、もしくは Gecko、Webkit を利用したブラウザを推奨します。 Internet Explorer 6～8 では表示できない部分があります。 作成に至る発端 Log4js もあるが、ほとんどデバッグ目的のログ出力なので、console.assert や console.dir、可変長引数の console.log で出力する事が多い。 文字列のみを出力する Log4js はオブジェクトや、XMLの出力において、console での出力に圧倒的に劣る。 また、Log4js自体のファイルサイズも大きい。 しかし、console は、ログ出力レベルを指定して出力をコントロールするといった機能が無い。 そんな事を考えていると、以下の記事が目に入り、ライブラリを作るかという事になった。 挫折 難しくないだろうと、こんなコード
![[JavaScript] ログ出力ライブラリ (console へ 出力レベル機能を追加)](https://cdn-ak-scissors.b.st-hatena.com/image/square/73b4ba93dc54c882e6fa1a35122b32b52525a6d1/height=288;version=1;width=512/http%3A%2F%2Fbloggerspice.appspot.com%2Fpostimage%2Fhttps%3A%2F%2Flogroid.blogspot.com%2F2012%2F08%2Fjavascript-logger.html)
データ構造と メソッドのネーミング - codic ブログ
データ構造など技術的な背景をちゃんと知っていれば、データ操作に関する正しい英語を使えるねーて話です。用語のイメージもつかめるようにしていますので、shift / unshift とかイメージできない方もどうぞ。 1. push / pop = スタック push pop は、スタックの用語で、それぞれ pop はスタックから取り出す、push は挿入する事を意味します。JavaScript や Ruby の Array には、スタックとしてのコンセプトもあるので、push / popという用語が使われます。 対して、Javaの ArrayList (インターフェースは Collection） は、単なる集合を表すインターフェースなので、抽象化のために add / remove というネーミングが使われます。そういえば、Javaには、Stackというクラスも別途用意されていますね。Stack
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
JasmineのSpy機能でテストダブルを作成する
本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用［厳選111］』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『JavaScriptライブラリ実践活用［厳選111］』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。 Jasmineでテスト対象オブジェクトが持つメソッドの戻り値を固定値に変更したり、そのメソッドが実行されたかどうかを検証したりするために、Spy（スパイ）を使用します。 名称： Jasmine 分類： テスト URL： http://pivotal.github.com/jasmine/ 関連ファイル： jasmin.js、jasmin-html.js、jasmin.css JasmineのSpy（スパイ）機能 Webサービス呼び出しなど外部の処理を呼び出している箇
ピクセルグリッドの仕事術 | 第1回 JavaScript開発見積もり
JavaScript開発見積もりの問題点 ピクセルグリッドでは受託制作におけるJavaScriptの見積もりに悩まされていました。HTMLやCSSは以前より多くの見積もりを行っていたため、問題になることはあまりありません。 しかし、JavaScriptになると1つの機能でも制作する時間に大きく差ができ、またスタッフによっても何倍といったレベルで制作時間に違いが出ることもあります。HTMLやCSSの見積もりと同じように考えると、実情に合わない見積もりをして、大変なことになってしまいます。 ピクセルグリッドは、もともとマネジメントには関わらず、制作を中心に行っていたスタッフが多いこともあり、この部分に関するノウハウが少なかったのです。ひとたび見積もりを間違えると「金額的な赤字」や「制作者への負担」という形で問題を起こしていました。 なにを見積もるのか 見積もりと単純にいった場合、すぐに金額的な
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
JSCover で Jasmine テストのカバレッジを計測する | mof-brown engineer blog
最近 Jasmine を使って JS テストを書き始めているのですが、指標の1つとしてコード・カバレッジを計測したいと思い、JSCover を使ってみました。 JSCover (※ JSCoverage を改良したツールのようです) HTML から実行可能な Jasmine テストの準備 まだまだテストが積めてない・・・(´・ω・`) JSCover をダウンロード http://tntim96.github.com/JSCover/ JSCover を起動 以下のコマンドを実行して JSCover を起動します。 jar ファイルのパス、document.root に指定するパスは環境に合わせて適宜変更します。 ファイル・エンコーディングに合わせて -Dfile.encoding=UTF-8 を指定しておきます。 java -Dfile.encoding=UTF-8 -jar JSCov
kintoneのJSユニットテスト最新事情 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チームの天野 (@ama_ch) です。 最近はJavaScriptのテストツールが著しく進歩し、日々新しいツールが登場しています。kintoneの開発もこれらのツールによって支えられています。 kintone開発チームでは、昨年末頃からテスト環境の改善に取り組み、モダンなツールセットに乗り換えました。今回は、現在のkintoneのJSユニットテスト環境について紹介します。 kintoneとJSユニットテスト 数年前からユニットテストと自動化の仕組みはあったのですが、ごく一部のユーティリティ関数に書かれているのみで、普段の開発には活用されていませんでした。 ここ1,2年ほどで テストスケルトンを生成するジェネレータスクリプトを作る テストの書き方をまとめたドキュメントを用意する MTGで「ユニットテストを書かなくていいのは小学生まで」などと煽る コードレビュー
jsでTDD！MochaとChaiとsinon.js入門 - lxyuma BLOG
※この記事は社内勉強会向けの資料の下書きです。書きなぐりの下書きで見直すと最後の方の文書がヤバいので、いつか書き直します。読み辛い所は申し訳ないです。 概要 TDD テスト自動化とTDDを整理 TDDとBDDの違い Test Framework in javascript QUnit/jasmine/mochaについて、違いやメリデメを知る mocha 基本的な書き方 アサーションライブラリのメリデメを整理する chai 記述形式の違い整理 基本文法 sinonjs spy stubs mock TDD Test Driven Development テスト駆動開発 by ケントベック 特徴 xUnit系/BDD系のテストフレームワーク使う テストするコードも実装 テストファースト 実装の後にテストするのではなく、テストを先に書いて実装する サイクル Red(失敗) => Green(通過
依存するモジュールも解決できる Node/AMD (サーバ／クライアント) 共通化モジュールを書く
このエントリは、 東京Node学園祭 2012 アドベントカレンダー 5日目の記事です。 ■ 前置き - AMD とは AMD (Asynchronous Module Definition) は、Javascript のコードをモジュールとして定義して、非同期ないし遅延ロードするための仕組みです。 http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition (現在、接続が遅い模様) CommonJS により提唱されたものですが、昨年あたりからクライアントサイド (ブラウザ) で JavaScript モジュールを構築する仕組みとして各所で一気に取り上げられ、現在ではクライアントサイドの主要なライブラリでもサポートされてきている（AMD によるモジュールとして利用できる）状態にあります。 モジュールに依存性を指定する仕組みも用意
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.flatlabs.net/20110304_231535/
【javascriptを使う人に知って貰いたい（エンジニア、デザイナ問わず）】karmaを使ったテスト駆動開発入門（ついでにJasmineも）
helpfulness.jp
