React.jsのComponent Lifecycle - Qiita
今回はComponentのlifecycleについて書きたいと思います。 React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 よく使うのはcomponentDidMountやcomponentWillUnmount辺りです。 イベントの登録をcomponentDidMountでやってcomponentWillUnmountで解除するというのがよく使うパターンだと思います。 componentWillMount() ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 なので初期化処理を行うのに適しています。 この中でsetStateするとrender時にまとめて行われます。 server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。 c
io.jsについて知っていること - from scratch
今、Node.jsに起きてることを語る上で、io.jsは避けて通れない話題でしょう。 今回のNode.js アドベントカレンダー 2014の締めを飾るために、このio.jsについて僕が知っている限りの事をまとめて書くことにします。 io.jsを知り、今後"Node"がどうなっていくのかを皆で一緒に考えていきましょう。 またこの一連のio.jsのfork騒動はOSSという特殊なプロジェクトをどう進めていくのがハッピーなのかを知る一つの教材だと思います。 OSSに関わっている皆さん、今回も長いですが、最後まで読んでもらえると幸いです。 io.js とは何か Node.jsのForkです。次のNode.jsの安定版になる、v0.12をForkしています。「アイ・オー ジェイエス」と読みます。名前の由来は木星にある四番目に大きな衛星の名前から取られました。*1 Nodeを使っている人のことをnod
React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
今日はこれまでに紹介したPropやStateを使ったComponent間でやりとりについて書きたいと思います。 親のStateを子のPropとして渡す Componentを設計する時はまずPropとしてI/Fを考えて、そのComponentが管理すべき値で変更されるものをStateとして定義します。 つまりComponent間での親子の関係を意識して、親がStateを持っていて子にPropとして渡すというのが基本になります。（子は使うだけで管理しているのは親） var User = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired }, render() { return ( <div>{this.props.id}:
React.jsのState - Qiita
昨日はPropについて紹介しましたが、StateはPropがImmutableな値であったのに対してMutableな値を定義することが出来ます。 基本的な使い方 基本的にはgetIntialStateでstateの初期値を返して、データに変更があった場合にthis.setStateで更新します。 そうするとComponentがrerenderされて表示が更新されます。子のComponentもrerenderされます。 var Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({ count: this.state.count + 1}); }, render() { return ( <div> <span>{this.state.count
React.jsのProp - Qiita
今回は前回にも少し登場したPropについて取り上げたいと思います。 基本的な使い方 Propは基本的にはCompnentのattributeとして定義してComponentの中ではthis.props.xxxとして参照する。それだけです。PropにはObjectでも関数でも何でも指定することが出来ます。 var Avatar = React.createClass({ render() { var avatarImg = `/img/avatar_${this.props.user.id}.png`; return( <div> <span>{this.props.user.name}</span> <img src={avatarImg} /> </div> ); } }); var user = { id: 10, name: "Hoge" }; // <Avatar user={us
React.jsのJSXを使ってみる - Qiita
var Hello = React.createClass({ render: function() { return ( <div>Hello {this.props.name}</div> ); } }) こんな感じで一見HTMLに見える部分<div>...</div>がJSXのSyntaxです。 詳しくは↓に書いてある通りなのですが、XML likeにタグを書いていく感じです。覚えることはほとんどないです。 注意点としてはHTMLではないということで、例えばdivにcontainerというクラスを指定したい場合は、<div class="container">...</div>ではなくて、<div className="container">...</div>となります。(classはJavaScriptの予約語のため) その他ではlabelのfor属性はhtmlforにする必要があ
Hello React.js - Qiita
というわけで、今回はHello World的なComponentを作ってみたいと思います。 基本的にはReact.createClassでComponentを作って、それらのComponentを組み合わせてページを作ってReact.renderでDOMと紐付けることで表示を行います。 JSXを使う JSXについては明日のAdvent Calendarで書きますが、こんな感じでJSの中にXML likeにマークアップを直接書くことが出来ます。 といってもこのままブラウザで実行すると当然エラーになるので、react-toolsを使って事前にcompileするか、http://fb.me/JSXTransformer-0.12.1.js にあるようなJSXTransformerを事前に読み込んでおく必要があります。 また、browserifyでreactifyを使うなどして変換する方法もあります
React.jsとは - Qiita
このAdvent Calendarについて 今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。 React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。 ※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。 React.jsについて なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。 React.jsはFaceboo
Backbone.js 日本語リファレンス
object.once(events, callback, [context]) object.listenTo(other, event, callback) object.stopListening([other], [event], [callback]) Backbone.Model Backbone.Model.extend([properties], [classProperties]) Backbone.Model を継承した新しいモデルを作ります。 properties インスタンスメンバを定義します。 var User = Backbone.Model.extend({ say: function () { console.log("Hello."); } }); var user = new User(); user.say(); //-> Hello. classPr
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
dresscording.com
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
Effective web performance tuning for smartphone
1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Effective Web Browser Performance Tuning for Smartphone 1 Dec 16, 2014 ! Kei Takahashi kei.takahashi@dena.com Game Development Infrastructure Gr. DeNA Co., Ltd. ~FINAL FANTASY Record Keeper の軌跡~ 2. 自己紹介 2 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 高橋 慧 (たかはし けい) Japanリージョン ゲーム事業本部 技術・編成部 ゲーム開発基盤グループ(GDI)所属 Web Frontend Engineer といいつつ最近はアプリにお
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
キャプチャリングとバブリングとpreventDefault()とstopPropagation() - 車輪を再発明 / koba04の日記
ある要素に無名関数でイベントが設定されているけど、そのイベントを発生させたくない！でも要素は消したくない！ということがあったのでJavaScriptのイベントについて少し調べてみました。 具体的には、ある要素がtouchmoveの中でpreventDefault()しているためその要素の上だとタッチスクロールが出来なくて不便なのでどうにかしたいという状況でした。 preventDefault() preventDefault()はその要素に設定されているブラウザの規定のアクションを中止する関数です。 タッチスクロールも規定のアクションに含まれます。 https://developer.mozilla.org/ja/DOM/event.preventDefault イベントのキャプチャリングとバブリング DOMのイベントには、キャプチャリングフェーズとバブリングフェーズという二つのフェーズが
三章第四回 イベントキャプチャリング — JavaScript初級者から中級者になろう — uhyohyo.net
三章第四回 イベントキャプチャリングこのページの最終更新日：2017年8月17日 いきなりですが、次のサンプルを見てください。 <!doctype html> <html> <head> <title>test</title> </head> <body> <div id="aaa"> <p onclick="console.log('p');">test</p> </div> <script type="text/javascript"> var div = document.getElementById('aaa'); div.addEventListener('click',function(){ console.log('div'); }, true); </script> </body> </html> p要素にonclick属性がついています。 また、script要素内では、変
knockout.js でカスタムバインディングを作成する - しばやん雑記
バインディングは text とか value みたいに data-bind 属性の内部で指定する奴です。knockout.js ではこのバインディングを自由に拡張できるようになっています。 バインディングは ko.bindingHandlers に内蔵のものもすべて含まれているので、ここに追加してあげればいいです。以下にテンプレを置いておきます。 ko.bindingHandlers.myBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 初期化、イベントハンドラの登録など }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 値が変化した時に行う処理 }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React.js使ってみた
React.jsのComponentについて - Qiita
