Angular 2アプリケーションをimmutable.jsとReduxで構築する | POSTD
過去にJavaScript開発をやったことがある人であれば、 Redux のことは聞いたことがあるでしょう。Reactとともに一般に普及し、開発者の中には「当時のJavaScript関係で一番興奮した出来事だった」、「アプリケーションの構築に大変革をもたらした」、はては「Reduxのおかげで地球温暖化が完全に止まった」と言う人もいるくらいです。 失礼、ちょっと我を忘れてしまいました。しかし、真面目な話、Reduxはアプリケーションの構築方法に、変化をもたらしたのは本当です。この投稿では、Reduxを別のライブラリの Immutable.js と一緒に、Angular 2と統合するやり方をご説明します。 概要 この投稿では、FluxアーキテクチャとReduxの基本的な概念を考えていきます。それから、簡単な連絡先リストのアプリケーションを段階的に作っていきます。初めは基本的なセットアップを構築
Big Sky :: 「みんなのGo言語」の執筆に参加させて頂きました。
僕がプログラミング言語「Go言語」を知り、使い始めてからそろそろ7年目に入ろうとしています。 当初 Google が作っているという鳴り物があった為、色々なメディアに取り上げられ色々な方がブログ等でGo言語を紹介し、色々な意見でGo言語が語られました。大抵の場合、プログラミング言語とは始めはチヤホヤと取り出され、落ち着いてからが本当の人気を表すという傾向にあります。皆さんもそう思っていたかもしれませんし、僕もそう思っていたと思います。 僕がGo言語を触りだした頃、まだ色々と足りない部分がありました。Linux で動いている多くの機能が Windows では未実装になっていました。しかしそんなGo言語であっても高速なビルドと実行速度で僕の好奇心を揺さぶるには十分な物でした。 その後、僕はGo言語にパッチを送る様になりました。その内幾らかはマージされました。現時点ではコアのリポジトリで79個の
連載マンガ「ゆかいな4コマ」第20回「給水所」 | GetNavi web ゲットナビ
【今回のテーマ⇒マラソン】 いよいよリオデジャネイロオリンピックが開幕！ 女子マラソンも注目競技のひとつですね。選手たちには、苦しいときも女子力を見せつけてほしい！ バックナンバーはコチラ
イベントハンドラの this と event.target, +α - hogehoge @teramako
[JavaScript]for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を３つほど. | TM Life 対応その２: event.targetを使う と 対応その４ : this を使う について 上記サイトで書いてあることが間違っているというわけじゃないんだけど、少し補足したい。 event.target その Event オブジェクトには発火元となった要素を target プロパティとして保持しています. 合っています。 が、on* や addEventListener した要素と target は必ずしも一致しない点には注意した方が良いと思います。 <ul id="list"> <li>foo <b>hoge</b></li> <li>bar <b>hoge</b></li> </ul> var list = document.getElement
AngularJSのパフォーマンス改善入門 - Qiita
これまでAngularJSでアプリを作ってきた中で、いくつかパフォーマンスの問題に遭遇しました。 それらの問題は、AngularJSの仕組みを十分に理解できていないために、よくないコードを書いてしまって発生しているものでした。 というわけで、AngularJSの内部構造を解説しつつ、パフォーマンスを改善するコードの書き方を紹介したいと思います。 計測できないものは改善できない パフォーマンス問題に取り組むには、ソースコード修正の前後でパフォーマンスを計測し、改善の効果を計測することが重要になります。 というわけでまずはツールの紹介です。 AngularJSでは、Batarangという便利なツール（Chrome Developer Toolsの拡張機能）が用意されています。 利用方法はとても簡単で、下記のChromeウェブストアからインストールして、Chrome Developer Tool
モデルへの入出力に際して処理を介するには？（ng-model-options）
入力フォームとモデルをバインドした際に、独自のゲッター／セッター関数を仲介させることで、そのモデルに出し入れする値を検証／加工する方法を説明する。 ← 前回 連載 INDEX 次回 → ng-modelディレクティブを利用することで、フォームからの入力とモデル（スコープオブジェクトのプロパティ）とをコーディングレスでひも付けられるのは、AngularJSの大きな特徴の一つです（詳細は、別稿「TIPS：モデルをテキストボックスなどのフォーム要素にバインドするには？」も参照してください）。 もっとも、モデルに対して値を出し入れする際に、値を検証／加工したいこともあるかもしれません。そのような場合には、ng-model-optionsディレクティブでgettersetterパラメーターを設定します。gettersetterパラメーターをtrue（デフォルトはfalse）とした場合、ng-mode
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。 今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
$watchと$watchの中間的な位置付けの$watchCollection - AngularJS Ninja Blog
AngularJSのデータバインドを支える$watch で見たように、$watch ではオブジェクトの参照を監視するか、またはオブジェクトの中身まですべて監視（deep watch）するかを切り替えることができる。 その 2 種類の $watch の中間に位置付けられる $watchCollection というのもあり、1 階層分だけを監視（shallow watch）してくれる。 配列の場合 配列の場合に $watch、$watchCollection、および $watch (deep watch) がそれぞれどのように異なるのかを見ていく。
angularの$parse, $interpolate, $compile 位は把握しよう - podhmo's diary
はじめに https://t.co/43GvPaLHo0 angularさんについてこれ空で分かる程度には分かっててほしいと思ったりした。— po (@podhmo) 2016, 1月 12 $parse, $interpolate, $compile これらはどれも文字列のような別の表現を解釈してjs objectを返すような機能を持つ関数達。 内部で使われている事が多いがどのようなものか把握しておくとangular.js自体のコードを読むのが捗るかもしれない。 前提 後々あげられているコードを試すには、 angularをnode.js上で実行する方法 を把握しておく必要がある。コレ使います。 各種API 各関数の説明を加える前に雑なmoduleを作っておく。このモジュールは後で使う。 angular.module("app", []); var inj = angular.inject
package.json のチルダ(~) とキャレット(^) - Qiita
バージョン指定でいっつもこいつの違いを忘れてしまって、npm とか semver のドキュメントを探すところから始まるから自分用のメモ。 ^1.1.2 = 1.x ~1.1.2 = 1.1.x (追記 一応↑は間違っていないのだけど、厳密にいうとちょっと間違っていた) チルダ表記 ~ "明記したところ以下のバージョンがあがることのみ許容" ~1.1.2 = 1.1.2 <= version < 1.2.0 ~1.1 = 1.1.x ~1 = 1.x オリジナルの定義は、 Allows patch-level changes if a minor version is specified on the comparator. Allows minor-level changes if not. キャレット表記 ^ "一番左側にある、ゼロでないバージョニングは変えない (それ以下があがることは
project毎のnpmコマンドをいい感じにするnpmrc & config達 - Qiita
npmrcのドキュメントを読みなおしていたら、.npmrcは/path/to/my/project/.npmrcのようにプロジェクト毎に配置することが出来る事に気づいて、ちょっと使ってみたら便利だった。 globalやhomeディレクトリへの設定を前提としたnpm configの記事は結構あるが、プロジェクト毎でnpm-configについて書かれている記事があんまり無かったのでまとめてみる。 npm-configの何が良いのか？ project毎に出来ると何が良いのか？ npm-configの設定をすると、色々コマンドを省略出来たりして良い事がある。 (参考:2016年版 Node.jsで幸せになれる10の習慣) npmrcやnpm-configは、個人開発用であれば、$HOME/.npmrcへの設定だったりnpm config setでの設定で十分。 また、npm registryに登録
天皇陛下 あすお気持ち表明 “新たな立場で国民を見守りたい” | NHKニュース
「生前退位」の意向を宮内庁の関係者に示している天皇陛下は、８日、ビデオメッセージでお気持ちを表されます。天皇陛下は、皇太子さまと雅子さまをサポートしながら新たな立場で国民を見守っていきたいという考えを、宮内庁の関係者に示されていたことがわかりました。 これについて天皇陛下は、皇后さまとともに公的な活動などを通じて皇太子さまと雅子さまをサポートしながら、新たな立場で国民を見守っていきたいという考えを、宮内庁の関係者に示されていたことがわかりました。 天皇陛下は８日の午後３時から、ビデオメッセージで象徴としての務めについて述べる形でお気持ちを表し、１０分程度にわたり国民に語りかけられます。 天皇陛下は、国政に関与しないという憲法で定められた立場から、ビデオメッセージでは、「退位」という言葉や直接的な意向の表明を避けられるものと見られますが、関係者は「ご自身の思いがにじみ出るものになるだろう」と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSの$watch登録数が60,000だった - @yoshiko_pg
Node.jsのpackage.jsonのバージョン指定の"~（チルダ）"と"^（キャレット）"の違い - Qiita
自殺を考えてた人が『ロープ一本命綱なしで家の壁を上る練習』をして救われたお話がすごい
