Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
WebKit ソースコードのコメント議論(1)
WebKit 開発者のメーリングリスト webkit-dev を見ていたら、興味深い話題で盛り上がっていた。WebKit のソースコードや ChangeLog のコメントに関する議論だ。 WebKit に限らず、ハッカーというのはソースコードにコメントを書きたがらない。 コメントが古くなってしまい、実情と合わなくなってしまうから、というのが理由としてはよく聞かれる。すぐ古くなってしまうコメントを書くより、元々コメントを書かなくて済むような綺麗なコードを書けよ、とハッカー達はよく言う。 個人的には、コードでは処理の内容は記述できるけれど、意図を記述できないので、意図を補足するコメントぐらいは必要なんじゃないか、と思っているけれども、それすらダメと言う人も時々見かける。 ともかく、今回の議論は自分にとっては興味深かった。 そこでその内容を紹介してみようと思う。 議論はいくつかのトピックに分かれ
JSer.infoの作り方
autoscale: true theme: Plain Jane,5 JSer.infoの作り方 去年のまとめ JavaScript情報ってなんだっけ? 未来に関する悩みが増えた 情報の安定性を見る方法について コミュニティの問題が表面化 1つだけではなく複数の情報から判断しよう はじめに このスライドには再現性がありません JSer.info 特有の考え方が多く含まれます 技術的な内容ではありません 各自、適当に見てね アジェンダ JSer.infoの作り方 記事公開までのワークフロー 継続的にやるために考えること テーマ 何か作る上で次のようなワークフローを辿る 見る(Watch) 調べる(Search) 学ぶ(Learn) 考える(Think) 作る(Create) 共有(Share) 目的 知識を元に行動することで目的を達成する 大体のものごとは同じようなフローを辿る JSer.
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck
All slide content and descriptions are owned by their creators.
Reactive Programming in JavaScript - Frontrend Final Conference 資料
Reactive Programming in JavaScript ( 今回のスライド: HTML版 ) このスライド自体が Bacon.js で書かれた ahomu/Talkie で作られています。Rx系のライブラリに興味を持たれた方は、ぜひコードのほうもご覧いただければ。 アジェンダ What is Reactive Programming ? Reactive in Frontend JavaScript FRP with Reactive Extensions Reactive Programming について紹介しました。今回も懲りずに新ネタでしゃべった次第。Reactive も Functional も若干こわいひとたちが生息しているイメージ（個人の感想です）があるので、遅延評価で飛んでくる斧だけがこわい :P ノイズ避け 率直な感想として、RP/FRP を学ぼうとすると情報
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
『JavaScript:The Good Parts』にツッコミ (Kanasansoft Web Lab.)
前エントリで、『JavaScript:The Good Parts 「良いパーツ」によるベストプラクティス』が万人向けでないことを書きました。 自分の実力を顧みず、この本のベストでない部分をつっこんでいこうと思います。ゴリアテどころかゴリアテの集団に挑んでいくような状態ですね。 さて、全エントリで書いた通り、この本は悪い本ではなく良本であり、読む人が読むと良い刺激になるに違いないと思っています。これを契機によりよいJavaScriptの書き方について論議が進むのではないかと期待しています。しかし、対象と思われる層が中級者以上で、初級者が読むと逆に悪本になりかねない部分を持っています。勘違いしそうな部分、気になった部分を中心に記述していきます。このため、否定的な内容は沢山出てきますが、上記のような前提ですので、書籍全体がこのような内容が散見されるわけではありません。そして、これを読んで本の内
フロントエンドのツール Yeoman を勘違いしていた
Yeoman を勘違いしてスルーしてたところもあったので、 改めてこんなメリットがあるんだーみたいなところを共有しつつ、 必要性を感じられる人が使い始める機会になれればと思います。 僕もこれからちょいちょい使っていきたいです。Read less
Knockout を用いた大規模 JavaScript 開発
HTML5 Conference 2013 において発表したスライドです。 Knockout.js について簡単に説明しています。Read less
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編
This domain may be for sale!
タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」:phpspot開発日誌
タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 2013年07月09日- Tabulous.js タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」。 タブUI実装のためのスクリプトは多数ありますが、タブを切り替えた際にコンテンツをカッコよく切り替えるものってあまりなかった気がします。 tabulous.jsをつかえば、タブ切り替えの際のアニメーションを多数の中から選べ、更にどれもかなりカッコいいです サンプルのフラットなデザインもなかなかいい感じ。 カッコいいタブを作りたい、という際に参考にできそう 関連エントリ レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとFluxのこと // Speaker Deck
Introduction To React
JavaScriptテストの疑問、お答えします #frontrendJS
JS開発におけるTDDと自動テストツール利用の勘所
フラットでカッコいいモーダルダイアログ実装デモ:phpspot開発日誌