WebStorm+Chrome+BrowserSyncでJavaScriptデバッグ - Qiita
「WebStorm」とJetBrains製品共通のChromeプラグイン「JetBrains IDE Support」を利用すると、ブラウザ上で実行されるJavaScriptでも、本格的なデバッグを行うことができます。 今回はそのデバッグ方法を紹介したいと思います。 使用するWebサーバは最近お気に入りの「BrowserSync」を使っています。 今回やる事 WebStormのコンソールにログを出力 WebStormのエディタで変数/プロパティの中身をリアルタイム表示 WebStormでブレークポイントを設定してJavaScriptを一時停止 → コールスタックを辿ったり、変数/プロパティの中身を調べたり 動作環境 Windows 7 64bit WebStorm 9 → 最近リリースされた最新版 JetBrains IDE Support 2.0.7 → Chromeプラグインの最新版
Facebook Relayについてまとめ - Qiita
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I
最速MVCフレームワークMithril.jsの速度の秘密 - Qiita
Mithril 0.2が本日リリースされました。ちょっとURLが変わったり( http://mithril.js.org/ )、API名が一部(m.moduleがm.mount)変わっていたり、コンポーネント機能がコーディング規約レベルから、専用のサポートAPIが追加されたりしていますが、0.1系と大した差はなさそうです。 某node.js会長とはいろいろ社内で話をしたりしたのですが、各種ベンチマークでもトップクラス、平均的には最速のクライアントサイドMVCフレームワークという称号を持ちながら、国内ではまだまだ知られていないMithril。レンダリング速度は仮想DOMの代名詞となったReact.jsの5倍以上(ベンチマークによります)です。 ↓ホームページから転載 ちなみにこちらのベンチマークで計測すると、MithrilはReact.jsの10倍以上速い結果になるのですが、これはちょっと計
『Programming Elixir』より "Think Different(ly)" - Qiita
あの Dave Thomas が書いた『Programming Elixir』を買ったのでぼちぼち読んでいる。 Chapter 1. に Elixir の特徴を巧みに表現した文章があってカッとなったので、引用しておきたい。 Object orientation is not the only way to design code Functional Programming need not be complex or mathematical. The foundations of programming are not assignments, if statements, and loops. Concurrency does not need locks,semaphores, monitors, and the like. Processes are not necessaril
TypeScript 1.5.3 変更点 - Qiita
TypeScript 1.5.3が出ました！ 今回のアップデートはかなり多くの更新を含む、大規模なアップデートであると言えます。 ↑ここまで前回のコピペ まさか、1.4.1から半年待つことになろうとは思いませんでしたね…。 alphaからbetaが1月なのに正式リリースが2ヶ月強ですよ。 '1.4.1': '2015-01-16T17:55:29.237Z', '1.5.0-alpha': '2015-04-02T16:40:27.808Z', '1.5.0-beta': '2015-04-30T17:23:52.442Z', '1.5.3': '2015-07-20T14:47:42.460Z' 変更点は公式Blogにも書かれているが、ざっくりイカの通り。 ES6サポート es6 modules destructuring spread for...of symbols computed
React JSX with TypeScript(1.6) - Qiita
はじめに つい先日, TypeScript 1.5系の安定版がリリースされたばかりだが, 1.6系の話をしようと思う. 6月頃に「TypeScriptにReactのJSXサポートが載るぞ!」とアナウンスがあり, 「へー」と思っていたのだが, 久々にmasterを確認してみたら, 既にmergeされてたので触ってみた. (Roadmapへの記載とmergeのタイミングにあまり差がなかった模様1) 折角なのでTypeScriptのJSXサポートを試してみましたよ、というお話. なお、作成した内容はQuramy/tsc-react-exampleに上げてます. 追記 このエントリを書いた直後に気づきましたが, 既にTypeScript の JSX/React サポートを試すに同様の内容が投稿されてました... orz 環境の準備 コードの話をする前に, TypeScriptでJSXを記述するため
使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - Qiita
はじめに みなさんこんにちは！ この記事は「必要最小限の努力で最大限実戦で使える知識を提供するRSpec入門記事」、略して「使えるRSpec入門」の第4回です。 今回はCapybaraを使ったフィーチャスペックについて説明します。 ただし、今までの記事とは異なり、フィーチャスペックのイロハよりも「Capybaraの使い方」に重点を置きます。 なぜなら、僕個人の経験からいって、フィーチャスペックで困るのは「このブラウザの操作って、どうやってコードで表現するの？？」というケースが大半だからです。 それ以外は第1回～第3回の内容をそのまま応用できるので、特に「フィーチャスペックだから困る」ということはないと思います。 今回は説明する主な項目は以下の通りです。 フィーチャスペックの基本 ページの移動や画面のクリック、フォームの操作など 画面やフォームの検証 画面の操作や検証の応用テクニック その他
AngularJS の $locationProvider.html5Mode について - Qiita
AngularJS で構築するアプリケーションで $locationProvider.html5Mode をどう設定するか小一時間悩んだ結果をまとめてみました。 導入 AngularJS では $routeProvider を使用してクライアントサイドでのルーティングが可能です。 angular.module('app').config(['$routeProvider', function($routeProvider) { $routeProvider .when('/aaa/', {controller: 'AaaController', templateUrl: 'aaa.html'}) .when('/bbb/', {controller: 'BbbController', templateUrl: 'bbb.html'}); }]);
(0, eval)('this')とは何なのか - Qiita
この(0,eval)('this')はいったい何なのか。調べた。 調べた結果 これはindirect eval callを使用した、どのスコープでも必ずグローバルオブジェクトのthisを取得するためのテクニックであった。 ES5ではevalを直接呼び出すと、引数のコードはそのスコープで実行されるが、間接的にevalを呼び出すと、引数のコードは必ずグローバルスコープとなるそうだ。なので引数のthisは必ずグローバルオブジェクトとなる。ブラウザではwindowとなり、Nodeではglobalになるのだ。実際どうするかだが、eval関数を変数に代入し、その変数で実行すればよい。 // Nodeで実行 var obj = new (function(){ this.direct = eval('this'); var ev = eval;// 変数に代入 this.indirect = ev('t
AngularJSでロード中に評価前のマークアップを表示させない方法 - Qiita
AngularJSを使ったWebアプリケーションで、ページの読込途中や初期化までの間にテンプレートのマークアップ（下記の図の{{name}}のような記述）が一瞬見えてしまうのを何とかしたい時があります。 特にページの表示開始を早くするためにAngularJSのコード読み込みをhead要素に置かずに非同期で読み込んでいる場合は、AngularJSの読み込み完了まで見えてしまうので特に目立ってしまいます。これを解決するためにngCloakというdirectiveがあるのでこれを使います。（headセクションでAngularJSのコード読み込みのscriptタグを配置している場合はそんなに気にならないかもしれません。公式ドキュメントではこの方法を推奨しているようです） 使い方 連携するCSSをアプリケーションのCSSに追加します [ng\:cloak], [ng-cloak], [data-ng
AngularJS Directiveの処理順を網羅してみた - Qiita
こんにちは@armorik83です。 この記事はAngularJS Advent Calendar 2014の2日目として書かれたものです。AngularJSは好きと嫌いの両方を2度くらい経て、今は愛に近い。 AngularJSは現在1.3がリリースされていますが、2014年10月のng-europeにて2.0系のビジョンが示されました。リリース時期は未定ですが、AngularJS 1.x系で指摘された多くの問題点、開発チームの反省が活かされた次世代のAngularになるとされ、期待が大きいです。 その中で2.0系ではControllerが無くなるという気になる情報がありました。正確にはコントローラ自体が無くなるのではなくng-controllerが整理されるとの様子ですが、この代替として、Directiveを中心としていく方針が掲げられています。 今からDirectiveに親しんでおく
AngularJSのCompileとLinkってなぁに？ - Qiita
はじめに AngularJSのDirectiveについては、カスタムディレクティブの作成方法含め、おおよそ理解していたつもりであったが、CompileとLinkについて、若干自信が無い部分があったので、勉強がてら少し厚めに書いてみた。 なお、公式の開発ガイドにも、Oreillyの書籍でも書かれているが、カスタムディレクティブを開発することがあっても、殆どのケースでは、Linkの処理のみを気にするだけでよいため、あんまりこのエントリは役には立ちません。 おさらい 「AngularJSのDirectiveを理解する」にも書いているが、ざっくり言うと、Angularのディレクティブがテンプレートから実際のViewを描画する際は、Compile → Linkの2フェーズに分かれている。 Compile：ディテクティブのテンプレート(html文字列ではなく、DOMオブジェクト)から、Link関数を生
Direct Proxiesでmethod missing的なことをやる - Qiita
Direct Proxiesとは Direct ProxiesってのはES6の機能の一つで、オブジェクトをラップして様々なタイミングで任意の処理を差し込めるというとっても夢広がリングな機能。 harmony:direct_proxies [ES Wiki] 例えば、プロパティのget/set時に処理を差し込むのはこんな感じ。 （Direct Proxiesは現状だとFirefoxでしか動かない。そして下記のコードは無駄にテンプレートリテラル使ってるのでFirefox 34以上じゃないと動かない） // Proxyを使って処理を書き換える対象のオブジェクト var target = { foo: 'bar' }; // Proxyを使ってtargetに対してhandlerを適用したproxyオブジェクトを得る var proxy = new Proxy(target, { // プロパティ読
DDD の Java EE 実装サンプル - Cargo Tracker を読み解く - Qiita
Cargo Tracker とは エリック・エヴァンスのドメイン駆動設計 で紹介されている様々なパターンを実際に使用して、有志が作成したサンプル Web アプリのこと。 DDD Sample Application - Introduction オリジナルは Spring Framework を使用している。 一方、この実装を Java EE 7 で置き換えたサンプルが公開されている。 Cargo Tracker この実装を読みながら、 DDD で紹介されている以下のパターンがどのように実装されているのかを確かめてみる。 レイヤ化アーキテクチャ エンティティ 値オブジェクト 集約 リポジトリ サンプルアプリを動かす ソースのダウンロード このページ の一番下に zip のリンクがあるので、そこからダウンロードする。 環境準備 以下のソフトウェアをインストールする。 JDK 7 以上 Mav
[翻訳] Elixir - 次に来る大物Web言語 - Qiita
Lau Taarnskovさんの2015年4月19日付のブログ記事、Elixir - The next big language for the webの翻訳です。 ElixirはErlangのVM上で走る、Rubyにちょっと似た(というのも作者(José Valim)がRuby on Railsのcoreチームメンバーなので)関数型言語です。 2012年に登場していてQiitaでもAdvent Calendarなどが既にあるようですがまだあまり知られていないですね。ElixirとPhoenix Frameworkを組み合わせたものがマイクロ秒のオーダーで反応が帰る爆速だそう(ホントかな～)で興味を持ちました。 しかしほんの10年前ぐらいの話がもう遥かな昔話に聞こえますね…。 (追記：実際にプログラムを書いてみました → Elixirで試しに何か書いてみる(その1) Elixirで試しに何
![[翻訳] Elixir - 次に来る大物Web言語 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/121714e7b4f81ef20eb5afb0875033b81e48e09c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwRWxpeGlyJTIwLSUyMCVFNiVBQyVBMSVFMyU4MSVBQiVFNiU5RCVBNSVFMyU4MiU4QiVFNSVBNCVBNyVFNyU4OSVBOVdlYiVFOCVBOCU4MCVFOCVBQSU5RSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MWU0NmFjZWU5MWRhZWFiZGE3YmU0MWQ5NmY0OGM3ZDE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBIaXJvZnVtaVRhbW9yaSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MmFiZjZlMDgzMmY4MmIzNzc2NmE5YWIyNDYxOTg3MGU%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D7d3c2eaf0d32601c0465fa36a051d518)
[翻訳] なぜ私はElixirに賭けたか - メンテナンスプログラマになりたくなければ君もそうしろ - Qiita
Ken Mazaikaさんの2015年1月31日付のブログ記事、Why I’m betting on Elixir And why you should too, unless you want to become a maintenance programmer.の翻訳です。 [翻訳] Elixir - 次に来る大物Web言語もそうでしたがなんかRailsのプログラマさんたちがやたらアツく語ってるんですね、Elixirを。 メンテナンスプログラマになりたくなければ1、なんてタイトルからして挑発的です。私の3つ前の仕事はまさにそういう保守系でしたけど。 あんまりアツいんで皆さんとアツさを共有したくて翻訳しました。 なおQiitaのCentOS + Erlang + Elixir + PhoenixのDockerイメージで今日から始めるElixir on Phoenix入門の追記のところでも
![[翻訳] なぜ私はElixirに賭けたか - メンテナンスプログラマになりたくなければ君もそうしろ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5be2031f0952034effc167454c126ae8c3c86fd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwJUUzJTgxJUFBJUUzJTgxJTlDJUU3JUE3JTgxJUUzJTgxJUFGRWxpeGlyJUUzJTgxJUFCJUU4JUIzJUFEJUUzJTgxJTkxJUUzJTgxJTlGJUUzJTgxJThCJTIwLSUyMCVFMyU4MyVBMSVFMyU4MyVCMyVFMyU4MyU4NiVFMyU4MyU4QSVFMyU4MyVCMyVFMyU4MiVCOSVFMyU4MyU5NyVFMyU4MyVBRCVFMyU4MiVCMCVFMyU4MyVBOSVFMyU4MyU5RSVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QSVFMyU4MSU5RiVFMyU4MSU4RiVFMyU4MSVBQSVFMyU4MSU5MSVFMyU4MiU4QyVFMyU4MSVCMCVFNSU5MCU5QiVFMyU4MiU4MiVFMyU4MSU5RCVFMyU4MSU4NiVFMyU4MSU5NyVFMyU4MiU4RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MzcxM2IyMzI5NmI4ZDJjODk0YWI5NmZhMzE2NTg3OTU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBIaXJvZnVtaVRhbW9yaSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MmFiZjZlMDgzMmY4MmIzNzc2NmE5YWIyNDYxOTg3MGU%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3469825b2297199887e8872234155491)
AngularJS1.4とbindToController - Qiita
こんにちは。imaiです。待望のAngularJS1.4がリリースされましたね。Directive関係では、bindToControllerの機能が向上しました。 このbindToControllerとは一体何なのか。使って嬉しいことは何か。どう機能が向上したのか。について書いていきます。また、最後に自作Directiveを作っていく際に筆者がよくつまずく点を記しておきます。 この記事の対象者:AngularJSに触れたことがある、自作のDirectiveを作ったことがある bindToControllerとは AngularJS公式サイトのReferenceからbindToConrollerの説明を意訳すると、 再利用可能なコンポーネントを作るために、分離?隔離?スコープやcontrollerAsを用いる際に、bindToController:trueとすることでコンポーネントのプロパテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
絶対ハマる、不思議なnil - Qiita
[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita![[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b522995e49410a98e38a0602e0c9ea8df6e44d4d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFNCVCQiU4QSVFMyU4MSU5OSVFMyU4MSU5MCVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVCMCVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU5MiVFNCVCOCU4QSVFMyU4MSU5MiVFMyU4MiU4QiVFMyU4MCU4MWNvbnNvbGUlRTMlODIlQUElRTMlODMlOTYlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQUUlRTklOTYlQTIlRTYlOTUlQjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc4Yjg5YTg5NTYwYjAxNDRjMzQwMjk1YjJhNGUyNTM4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXNoaXJhMjMzOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTMzNDU5OTkwZjkzNWRiZWM3MDA4MWMyODVjOTIyZDE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K144Kk44OQ44O844O744OQ44K6%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D96abebc51c4d96ee1ecf0185b536be1e)
AngularJS:文字列をエスケープさせずに出力する方法 - Qiita
