Model layer Components shouldn’t be concerned with how data is fetched, updated, or cached. CanJS provides the right abstractions for your model code to be cleanly separated from your UI code. Learn more… Promises in templates CanJS’s stache templating language can directly read the state and values from Promises. No need to write any extra code to determine whether a Promise is pending, resolved,

Your App. Done. DoneJS is an open source JavaScript framework that makes it easy to build high performance, real-time web and mobile applications.

Oct 26, 2015 こんにちは HN ！ Vue.js に精通していない場合は、より高い概要について、このブログ記事を読みたいかもしれません。 300 以上のコミットの後に、8 つのアルファ (alpha) バージョン 、4 つのベータ (beta) バージョン 、そして 2 つのリリース候補(RC)バージョン、今日、私は Vue.js 1.0.0 エヴァンゲリオン (Evangelion)のリリースを発表するのをとても誇りに思っています！それはコミュニティから全てのフィードバックなしには不可能でした。API の再設計プロセスに参加した全ての人びとに感謝します。 テンプレート構文を改善しました1.0 のテンプレート構文は、多くの微妙な整合性の問題を解決し、Vue のテンプレートをより簡潔で一般的に読みやすくなります。最も注目すべき新機能は、v-on と v-bind に対する省略記法

# Install Meteor npx meteor # Create a new Meteor + React App meteor create happy-chat --react # Navigate to your new project cd happy-chat # Start the development server meteor npm start import { Mongo } from 'meteor/mongo'; import { has, ID } from 'meteor/jam:easy-schema'; export const ALLOWED_EMOJIS = ['😊', '❤️', '😃', '⭐', '🎉']; const errorMessage = `Only emojis ${ALLOWED_EMOJIS.join(', ')}

Say hello to Node.js v5! It's true that we only recently released Node.js v4.0.0, however this new release doesn't mean that v4 is going away. In fact, v4 is going to live for a lot longer than v5. According to our new LTS (Long-term Support) plan, Node.js v4 Argon will continue to be supported for 30 months, ending in April 2018. This new version of Node.js, however, will only be supported for 8

NOTE: Not all integrations have been updated yet. This is a very disruptive major so please bear with us as we smooth out the edges. It’s hard to believe it’s been a year since the Babel project started, but there was a birthday cake, so it must be real! I work with some super awesome people. Thank you @cpojer and Ovidiu! pic.twitter.com/l1NzyobiBz — Sebastian McKenzie (@sebmck) September 28, 2015

記事内容に間違いや改善等ありましたらコメント欄にてご指摘をお願いしますm(__)m NodeSchoolとは 詳細は公式サイトに書かれていますが要は無料でNodeやそれに関連する技術を学べるオープンソースのツールです。 NodeSchoolという名前なので、なにかしら Node関連のものしかない ように思われがちですが、JavaScriptのみに着目した科目（他にもNoSQL関係だったり、etc）などもあるので、「JavaScriptの勉強をしたい！」という人にもおすすめです！ 必要なもの 項目 説明 Node.jsインストールの推奨方法 Node.jsは活発に開発が進んでいるのでバージョンが結構頻繁に変わります。なのでNode.jsのバージョン管理をしてくれるツールのインストールを推奨します。（Rubyで言うrvmのような存在） 現時点（2015/10/27時点）で推奨するNode.js

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま、こんにちは！ 2013年度新卒入社の吉成祐人（@y_yoshinari）と申します。 昨年の12月に社内フレームワークに関する記事を執筆させていただいたので、9ヶ月ぶりの執筆です。⇒近日公開予定JSフレームワークBeez 現在私はなぞってピグキッチンというサービスのフロントエンドの実装を担当しています。 先日、弊社のインターンシップで『フロントエンドの実装作業の効率化』に関する講義をさせていただいたので、今回はその講義スライドを共有したいと思います。&a

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま、こんにちは！ 2013年度新卒入社の吉成祐人（@y_yoshinari）と申します。 現在私はなぞってピグキッチンというサービスのフロントエンドの実装を担当しています。 今回はなぞってピグキッチンの開発で用いている近日公開予定のJSフレームワークBeezについて書きたいと思います。 （※ 2013年12月19日追記：本日、無事にOSSとして公開されました！ → https://github.com/CyberAgent/beez） なぞってピグキッチンは、パズルで材料を集めて料理作り、ピグ村の様々なお客さんに料理をふるまって自分だけの素敵な

こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa

今回はリビーリングモジュールパターンを紹介します。 リビーリングモジュールパターン このパターンはクリスチャン・ヘイルマンという人による、モジュールパターンを改良したパターンです。 全ての関数と変数をプライベートスコープ内で定義し、パブリックメンバとして公開したいプライベートメンバへのポインタを持つ無名オブジェクトを返します。 var myRevealingModule = function() { var privateVar = 'Hoge', publicVar = 'Foo'; function privateFunction() { console.log('Name:' + privateVar); } function publicSetName(strName) { privateName = strName; } function publicGetName() { pr

前回はコンストラクタパターンについて紹介しました。 今回はモジュールパターンについて紹介します。 モジュールパターン 従来のJavascript以外でのモジュールパターンというのは、クラスにパブリックとプライベートの両方のカプセル化をもたらす方法でした。 しかし、前回Javascriptにはクラスの概念が無いということを書きました。 Javascriptではクラスのような実装をモジュールパターンで再現することができます。 モジュールパターンを使用することで、1つのオブジェクトにパブリック・プライベートなメソッドや変数を取り込み、グローバルから特定の部分を隠蔽できます。 グローバル空間での変数名や関数名の衝突がしづらくなるわけです。 モジュールパターンでは、クロージャを使い変数やメソッドの隠蔽を実現します。 var testModule = (function() { // カウンタ変数 v

前回は第1回目ということで、そもそもデザインパターンとはなんぞや？という話に触れました。 今回から具体的なデザインパターンについて紹介していきます。 コンストラクタパターン コンストラクタ（Constructor）とはオブジェクトを作成し、初期化する関数のことです。 コンストラクタはJavascript以外の言語では「クラス」と呼ばれています。 プロトタイプベースの言語であるJavascriptでは、クラスの概念がありませんが、コンストラクタを作成することでクラスに似たオブジェクトを作成することができます。 コンストラクタは、オブジェクトを使用するための準備を行い、引数を受け取りオブジェクトの初回作成時にメンバのプロパティやメソッドに値を設定するのに利用します。 // コンストラクタを定義する function Person(name, age) { this.name = name; t

普段Javascriptをよく書いているのですが、設計が今の自分の弱点だなぁと思い、 積読になっていた JavaScriptデザインパターン – オライリー・ジャパン を引っ張りだして勉強したことを紹介していきます。 内容に関して何か間違いや問題があったらご指摘ください。 デザインパターンとは デザインパターン – wikipedia “ソフトウェア開発におけるデザインパターン（型紙（かたがみ）または設計パターン、英: design pattern）とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。” デザインパターンというのは、テンプレートの様なものと考えるとわかりやすいかもしれませんね。 また、Javascriptデザインパターンでは次のように提唱されています。 パターンは実績のある解決策で

Jim Hoskins氏の AngularJS and scope.$apply を日本語訳しました。JavaScriptの仕組みから解説されていて、とても分かりやすいです。 AngularJS and scope.$apply もしあなたがAngularJSで多くの重要なコードを書いているなら、$scope.$apply()メソッドを見たことがあるだろう。一見すると、バインドした変数を更新するためのメソッドのように見える。しかし、何故これが存在しているのか？そしていつこれを使うのか？ いつ$applyを使うかを本気で理解するためには、 何故これを使う必要があるのかをきっちり知るのが良い。さあ、召し上がれ！ JavaScript is Turn Based 私たちが記述するJavaScriptのコードは一度に全て実行されるのではなく、ターンベースで実行される。各ターンは始めから終わりまで中

JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書

概要 ブロック文のようでありながら、かつ中に書かれた最後の式の評価を返すdo式が実装された。 基本 let foo = do { // ブロックスコープを作る let x = 1 + 1 // 中に文(や式)を記述できる x + 3 // 最後に評価された式がdo式の結果となる function fn(){} // 文は評価されない } console.log(foo) // 5 但しfor文やwhile文などは少し注意が必要で、 まず初期化部、条件部、更新部の評価はdo式が返す値にならない。 let bar = do { for (let i = 1; i <= 10; i++) i } // 実際の最後の式評価は (11 <= 10) => false console.log(bar) // 10 そして処理部に何も書かれていない場合でも、undefinedと評価される。 let ba

クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま

JavaScriptでカプセル化みたいなのってできるんかなー、と思ってカプセル化のやり方を色々調べました。プロパティを1つ持ち、そのプロパティに対するgetterとsetterを持つオブジェクトの実装を考えます。 thisキーワードは自身のインスタンスを指すキーワードです。変数にthisキーワードを指定することでプロパティを設定できます。けれど、このままでは"クラス名.プロパティ名"で直接アクセスできてしまいます。 function Name(name) { this.name = name; this.setName = function(name) { this.name = name; } this.getName = function() { return this.name; } } var MyName = new Name('Hoge'); document.writeln(