Render Props – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. Render props are used in modern React, but aren’t very common. For many cases, they have been replaced by custom Hooks. The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React ele
Reactの再レンダリングをなるべく減らす - Aqutras Members' Blog
こんにちは。maxmellon です。 今回は，Reactの再レンダリング回数をなるべく減らす方法について紹介したいと思います． 前回記事と関連があります．もしよろしければ合わせてお読みください． 本記事は，Reactのライフサイクルなどの基本的な仕様の理解のある前提で話を進めていきます。 Reactの基本的なことにつきましては，下記などを参照してください． https://facebook.github.io/react/docs/why-react.html http://mizchi.hatenablog.com/entry/2014/09/02/201728 はじめに Reactが再レンダリングされるケース Reactのコンポーネントが再レンダリングされるには，次の２ケースがあります． state の変化によって DOM が 追加，削除された時． state の変化によって DOM
Web Share API | blog.jxck.io
Intro Web Share API が Origin Trials を卒業したという知らせが届いた。 コンテンツを他のサービスなどと連携するこの API について紹介する。 Web Share ブラウザで開いている Web コンテンツを、他のサービスやアプリと連携するための方法は、以前から検討されていた。 主だったものとしては、すでに策定は止まっているが Android の Intent を参考にした Web Intents が挙げられる。 Web Share API は、 Web コンテンツと SNS やメールなどとの連携を主目的とした、より簡素で軽量な API となっている。 DEMO 動作するデモを以下に用意した。 (まだ Origin Trials のトークンはそのままになっている) http://labs.jxck.io/web-share/ API API は非常に簡素だ。
ダイナミックな機能をAMPで提供できるamp-bind、Googleがorigin trial参加サイトを募集中
[レベル: 上級] AMP プロジェクトは、amp-bind の origin trial の申し込みを募集しています。 amp-bind とは amp-bind とは簡単にいうと、AMP ページでインタラクティブな表現を可能にする AMP のコンポーネントです。 AMP では、 JavaScript をはじめとした動的な仕組みを提供する機能の使用が厳しく制限されています。 しかし、amp-bind を構成すれば、まるで JS を使ったかのようなダイナミックな機能を提供できます。 こちらは、amp-bind を構成した AMP ページの例です。 EC サイトの商品ページを想定していて、カラーと個数、サイズを選択できます。 選択したカラーに応じて、商品画像が切り替わり、カルーセル形式で閲覧できます。 アニメーションには映っていませんが、カートへの追加もできます。 デモなので動きとしては非常に
（緊急）BIND 9.xの脆弱性（DNSサービスの停止）について（CVE-2016-2776）
--------------------------------------------------------------------- ■（緊急）BIND 9.xの脆弱性（DNSサービスの停止）について（CVE-2016-2776） - フルリゾルバー（キャッシュDNSサーバー）／権威DNSサーバーの双方が対象、 バージョンアップを強く推奨 - 株式会社日本レジストリサービス（JPRS） 初版作成 2016/09/28（Wed） 最終更新 2016/10/03（Mon） （PoCが公開され、危険性が高まっている旨を追加） --------------------------------------------------------------------- ▼概要 BIND 9.xにおける実装上の不具合により、namedに対する外部からのサービ ス不能（DoS）攻撃が可能となる脆弱性
ポールグラハムの「気晴らしを断ち切る」を読んだ - Backnumbers: Steps to Phantasien
2008-06-07 ポールグラハムの「気晴らしを断ち切る」を読んだ. 私もウェブは中毒的暇潰し(=気張らし) だと 思っている 派閥なので, おおおそ同意した. 実際, たまにケーブルを抜いて暮らすことがある. 今の家に引っ越してきた当時, オフライン主義の友人を真似して半年ほど ISP の契約を更新しなかった. だから自宅は IP unreachable だった. それでも生活できたし, 読書や勉強ははかどった. しばらくして mac mini を買ってみたらあまりに勝手がわからず, 仕方なく ISP に契約しなおした. 中毒の日々が戻った. けれどケーブルなしで暮らせることもわかったので, まとまった作業をしたい時はその後もたびたび自宅を断線している. これをプチ断線とでも呼ぼう. プチ断線概観 友人達の中には, 集中しようとオフラインのコーヒー屋に避難する人が多い. プチ断線はその
Falcor入門 1日目 Falcorとは何者か - Qiita
はじめに 最近、ある程度の時間を割いてFalcorを触っています。 まだ日本語での情報は豊富とは言えない状況ですし、自分の理解を整理する意味も含め、何回かに分けてFalcorについて書いていきます。 1日目の今日は「Falcorとはどのような目的のために生まれ、どのような仕組みに依存しているのか」を説明します。 概念的な話ばかりでコードは殆ど出てきません。実装寄りの話は次回以降に書きますが、行ったり来たりしながら読むのも有りじゃないかなと思います。 ちなみに次回以降の目次はこちら： Falcor入門 2日目 FalcorのJSON Graphに触れてみる Falcor入門 3日目 Falcor Routerでサーバサイドを実装してみる Falcor入門 4日目 FalcorとReactを組み合わせる Falcorとは何者か 昨今、Webアプリケーションの大半は、ReactやAngularな
Vue.js入門
7. リアクティブ・プログラミング Reactive＝反応的な データの変更がそのままViewにすぐ同期される 普通：data = 1; view.setData(data); リアクティブ：data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い 10. 1.0での変更点 新記法v-foo:barの追加 NG : <div v-on="click: doThis, keyup: doThat"> OK : <div v-on:click="doThis" v- on:keyup="doThat"> Mustache記法がVue.jsのプロパテイ下で使えなくなった NG : <component is="{{view}}"></component> OK : <component v-bind:is="view
Vue.js 1.0.0 リリースしました — Vue.js
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 に対する省略記法
JavaScriptのモナド | POSTD
恒等モナド Maybeモナド リストモナド 継続モナド Do 記法 連鎖呼び出し モナド とは、一連のステップによって実行する計算を記述する際に使用する、1つのデザインパターンです。 純粋関数型プログラミング言語 では、モナドは 副作用を管理する ために広く利用されていますが、 マルチパラダイム言語では、モナドで複雑性を制御することもできます 。 モナドはデータ型をラップして、空の値を自動的に伝播したり（ Maybe モナド）、非同期コードを簡略化したり（ 継続 モナド）といった、新たな動作を既存のデータ型に追加します。 一連のコードをモナドと見なすためには、その構造には次に挙げる3つの要素が含まれていなければなりません。 型コンストラクタ — 基本的な型に対してモナドの動作を追加した型を作成する機能です。例えば、基本的なデータ型 number に対して、 Maybe<number> とい
Cluster
Node.js v0.6 の新機能として cluster モジュール が導入されました．cluster モジュールは，HTTP を含めた TCP 接続を複数の子プロセス (ワーカプロセス) で処理することにより，特にマルチコア環境でのスループット (リクエスト／秒) を向上するための機能です． しかし，ドキュメントにはその使い方が書かれているだけで，どのように実現されているかは書かれていないので，ここで簡単に紹介しておきます． Node.js のクラスタ機能は v0.5.10 で突然コマンドラインオプションとして導入されましたが，直後の「東京 Node 学園祭 2011」が行われた頃にはコマンドラインオプションは廃止されて cluster モジュールによって API が提供されるようになり，その翌週の v0.6.0 リリース数時間前にはその API が変更されるというドタバタぶりでした
promiseを順番に実行する - 素人がプログラミングを勉強していたブログ
JavaScript の Promise を返す関数を直列で実行したいので Pinscher というライブラリを作ってみた。 - (define -ayalog '())について。 例えば、非同期に実行されるPromise p1, p2, p3があったとしてcallbackをp1, p2, p3の順番に実行したい場合、reduceが使える。 例1は、p1, p2, p3を並列に実行した上で、callbackの順序を保証したい場合。 まずテスト用に、一定時間まってからvalueでresolveする関数resolveLaterを定義しておく。 function resolveLater(value, ms) { return new Promise(function (resolve) { setTimeout(function () { resolve(value); }, ms); });
React v0.13.0 Beta1でclassでComponentが作れるようになった
React.js Confの前日にv0.13.0 Beta1がnpmにpublishされました。 http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html featureは色々あるみたいですが、↑のブログにはその1つとしてClassによるReact Componentの作成が紹介されていたのでそれについて書きたいと思います。 ちなみにReact.createClassを使う場合はこれまでと同じままで大丈夫なはずです。 ES6 Classes React.createClassではなくて、ES6のclassを使って↓みたいな感じで書けるようになります。 import {React} from 'react'; export class Hello extends React.Component { co
インターン生向け講義で発表しました - BLOG::はるかさん
弊社の夏期インターンシップpixiv SUMMER BOOT CAMP -2014-でインフラチーム代表ということでインターン生向けの講義をしました。普段は、全体のチーム説明しかしないんですが、今回はid:catatsuyの強い要望で、技術者向け講義が実現しました。がんばってスライドつくったのでとりあえず公開しておく。 5人くらいインターンに来てて、Webサービス運営してる人も3人くらい居たはずだけど、top叩いたことある人が2人とかで驚いた。趣味WebサービスだとPaaSが一般化していて、あんまりLinuxとか興味なさそうなかんじだ。自分が最初にLinuxを始めたときは自宅サーバと独自ドメインが流行りだしたころで、押し入れにおいたRed Hat Linuxを載せたPCに、BINDと、Apacheと……ってセットアップしてPHPアプリケーションを動かしてたんだけど、いまはどうやって物理サー
10分ではじめるGitBucket - Qiita
GitBucketとは GitBucketはたけぞうさんという方が開発されているGitHubのクローンアプリです。 Scalaで書かれており、驚くほど簡単に導入することができるのが特徴です。 OSSのGitHubクローンといえばGitLabがメジャーですが構築の手順が複雑かつ面倒なため、 使い始める前に構築段階で挫折した経験のある人も多いのではないでしょうか。 対するGitBucketはwarファイルを実行するだけという手軽さです、素敵!! より詳しいレビューはこのあたりを参照してください。 背景 とあるクラウド環境にGitBucketを導入する機会があり、 せっかくなので vagrant + ansible で導入を自動化するplaybookを書いてみました。 以下のクラウドプラットフォームで導入検証をしました。 AWS DigitalOcean したごしらえ Case: AWS vag
Bespoke.js: The Road to 1KB
What?bit.ly/diyslidesGoogle "bespoke.js"Why?< = 5KBNo dependencies/*! Bespoke.js v0.3 © 2013 Mark Dalgleish, Licensed MIT */ !function(a, b){var c=function(a, b){var c=document.querySelector(a), g=[].slice.call(c.children, 0), h=g[0], i={}, k=function(a, b){g[a]&&(p("deactivate", q(h, b)), h=g[a], g.map(l), p("activate", q(h, b)), e(h, "active"), f(h, "inactive"))}, l=function(a, b){var c=b-g.inde
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Keyboardio: keyboards for people who love typing
GitHub - tc39/proposal-bind-operator: This-Binding Syntax for ECMAScript
Lesser known DNS tools and BIND tricks
噂のRactive.jsをKnockout.jsと比べてみた - Qiita