なぜReactなのか - しゅみは人間の分析です
なぜReactなのか React, Cyclejs, Reduxを学んだ上でこれらの技術が何を解決したのかまとめてみる。発想はオリジナルではなく、今まで私が読んだ記事から拝借した解釈などが含まれている。たぶんReact, Fluxを学んだ人にとっては当たり前の感覚を言語化しているだけの内容となる。 TL;DR Q: なぜReactなのか A: フロントエンドが自由度の高いGUIアプリケーションになった。既存の手法では自由度の高いGUI実装を人間にわかりやすく管理することが難しくなった。 自由度の高いGUIな世界 自由度(複雑さ)の低い時代ではrender済みのDOMの上にDOMを操作する(jQueryによる)UIを載せる設計でも十分だった 現代のwebフロントエンドではVisual StudioやXcodeで作るネイティブGUIと同等の複雑さを求められる時代になっている jQueryだけで
React DnDのドキュメント私訳 : Overview - Qiita
#まえがき React DnDの和訳ドキュメントがなさげので、自分用に私訳した記録です。 私訳なので英文の直訳を自分なりに解釈し記述した部分が結構あります。 むしろ内容すら間違ってる。と、見兼ねてつっこみたくなる箇所がありましたら、どうぞ宜しくお願いします。 #Overview ： 概要 本家ページ： Overview - React DnD ##Items and Types fluxと同じく、React DnDはデータをviewとしてではなく、事実上のソースとして使用します。 画面上で何かしらのデータをDragした際、そのデータをコンポーネントやDOMノードとしては扱わず、代わりにDragされているデータを特定のタイプのアイテム("item")として扱います。 ###■ "item"とは？ 現在Dragされているものがどのようなものなのかを、プレーンなJavascriptオブジェクトで
det365在线平台 - det365手机版 - 官网下载
版权所有：det365在线平台 - det365手机版 - 官网下载（燕山校区） 电话：0531-88525233 网站管理
配列の重複をはじく、もしくは重複を取り出す - Qiita
var a = [1,2,3,3,2,2,5]; // 重複を削除したリスト var b = a.filter(function (x, i, self) { return self.indexOf(x) === i; }); // 重複のみをリスト var c = a.filter(function (x, i, self) { return self.indexOf(x) !== self.lastIndexOf(x); }); // 重複を検出したものを重複しないでリスト var d = a.filter(function (x, i, self) { return self.indexOf(x) === i && i !== self.lastIndexOf(x); }); console.log(a); // [ 1, 2, 3, 3, 2, 2, 5 ] console.log
AsyncとAwait : コールバック地獄を避けるための最新のやり方、そしてその未来 | POSTD
(2016/7/7、いただいたフィードバックを元に記事を修正いたしました。) JavaScript、特にNode.jsといえば、 コールバック地獄 がよく連想されます ^(1) 。たくさんの非同期I/Oを扱うコードを書いたことがある方には、おそらく以下のようなパターンはおなじみでしょう。 export default function getLikes () { getUsers((err, users) => { if (err) return fn(err); filterUsersWithFriends((err, usersWithFriends) => { if (err) return fn(err); getUsersLikes(usersWithFriends, (err, likes) => { if (err) return fn (err); fn(null, lik
Rollupがちょうどいい感じ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)
react-reduxのAjaxリクエスト時の初期描画について
ReduxでAPIをたたいで初期データを持ってくることがあるんだけど、何も考えないとハマる AjaxリクエストではcomponentDidMount()を使う。 クライアント上(サーバー上は除く)でのみ、初期描画(rendering)が発生した直後に一度実行される componentDidMountでAjaxをcallするActionを呼ぶのだけど、 データが返ってくる頃にはUnmountされていてコンポーネントが落ちると、 this.props.hoge is undefined とかreactjs - Cannot read property 'map' of undefined類いのエラーが起こる。 なのでレンダリングがされた後にActionを呼ぶようにしたい。 isMounted()でレンダリングされているかの判定が返ってくるAPIがあるのですが、isMounted()はアンチパタ
ES6 exporting/importing in index file
I am currently using ES6 in an React app via webpack/babel. I am using index files to gather all components of a module and export them. Unfortunately, that looks like this: import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; So I can nicely import it from other
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
Node.jsのスクレイピングモジュール「cheerio-httpcli」が第3形態に進化したようです - Qiita
var fs = require('fs'); var client = require('cheerio-httpcli'); // ①ダウンロードマネージャーの設定(全ダウンロードイベントがここで処理される) client.download .on('ready', function (stream) { stream.pipe(fs.createWriteStream('/path/to/image.png')); console.log(stream.url.href + 'をダウンロードしました'); }) .on('error', function (err) { console.error(err.url + 'をダウンロードできませんでした: ' + err.message); }) .on('end', function () { console.log('ダウンロードが
JavaScript の ジェネレータ を極める！ - Qiita
ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！ ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める！（この記事） また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ジェネレータ、ジェ
ECMAScript 2016の言語仕様をECMA Internationalが承認。正式版として公開
ECMAScript 2016の言語仕様をECMA Internationalが承認。正式版として公開 ECMA Internationalは、いわゆるJavaScriptの最新の言語仕様となる「ECMAScript 2016」（ECMA-262 7th Edition）を、6月14日に行われた第111回総会（The 111th General Assembly）で承認、仕様を発表しました。 JavaScriptは1995年に最初のバージョンがNetscape Navigator 2.0で実装され、1997年にはECMA Internationalによる最初の標準化仕様となるECMAScript 1st Editionが登場。1998年にECMAScript 2nd Edition、1999年に3rd Editionとバージョンアップを重ねてきましたが、4th Editionの標準化に失敗
プログラミングパズルゲームが作りたかった - ABAの日誌
セルオートマトンプログラミングパズルゲームconsomatonというのを作った。 consomaton screenshot ブラウザで遊べます ソースコードはこちら (GitHub) ゲームプログラミングを趣味としている者として、昔から作ってみたかったのがプログラミングパズルゲームだった。プログラミングパズルゲームってのはたとえばGoogleがアランチューリング生誕100周年で公開していたチューリングマシンのロジックパズルとかメイドイン俺のくみたて道場とかTIS-100とか。カルネージハートとかよりはよりプログラミング感が全面に出ているタイプのゲーム。 ゲームとしてプログラミングを扱うにはなるべく簡単にコードが書けることが望ましい。スクラッチとかのパネルを置くタイプもいいんだけどこれですらちょっと面倒。なのでライフゲームに代表されるセル・オートマトンのルールを書くものにした。 ルールの書
mocha で coverage が動かなくなったので istanbul にした - あいつの日誌β
とある node.js で動かしていた coverage 生成ツールが動かなくなったので調べた。 blanket.js はすでに開発者不在の状態なので istanbul を使います。 サンプルコード % mkdir practice-istanbul && cd $_ % npm init -f % npm install --save-dev mocha istanbul power-assert % mkdir lib test % touch lib/hello.js test/test_hello.js edit: lib/hello.js % cat lib/hello.js module.exports = function () { return 'hello'; } edit: test/test_hello.js % cat test/test_hello.js var
webpack-dev-serverの基本的な使い方とポイント - dackdive's blog
はじめに （2017/08/10追記） この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template （追記ここまで） JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch （または -w）オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えて ローカルサーバーも起動してくれ
http://minotaur.badwitch.io/react-webpack-boilerplate/
See related links to what you are looking for.
React.jsのRefsをES2015で書いてみた - Qiita
初投稿です。 これから備忘録代わりにキータに記事書いて行こうと思います。 早速ですがReact.jsのrefsのサンプルをES2015で書き直しました。 #React.jsのrefsについて とりあえずrefsについてはこのリンクを見て頂ければと思いますが http://js.studio-kingdom.com/react/guides/more_about_refs stateにデータを流してDOM操作してると、jQueryでいうところのremoveやappendは使わないにしてもサンプルのようにある動作をした後に直接DOMを操作したいということが稀にあります。 そんな時にrefs使うと良いよっていう話しです。 とりあえず、上記リンクのコードをES2015化して行きます。 var App = React.createClass({ getInitialState: function()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
org-rabo.com
JenkinsでNode.jsのテスト＆カバレッジレポートを管理する - Qiita
GitBook – Build product documentation your users will love
