GraphQL あるいは React における自律的なデータ取得についてUnderstand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する！Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
次世代ゼロランタイムCSS-in-JS「macaron」の導入方法を調べてみた - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは！hy094です。 今回はZero-Runtime CSS-in-JSである「macaron」(macaron-css)の使い方を調べてみたので、 それをまとめたいと思います。 ※本記事は大部分が公式のGitHubと公式ドキュメントの和訳で構成されています。 ※英語がとても苦手なので翻訳アプリを駆使して書いています。誤りがあったらこっそり教えていただけると嬉しいです。 はじめに macaron（macaron-css）って結局どうなの？ macaron（macaron-css）って何？ どんな特徴があるの？ どうやってインストールするの？ バンドラの設定は？ どうやって使うの？ 1. styled componentを作成する 2. スタイルを追加する 3. variantsを追加する 4. デフォルトのvariantsを設定する 5. コンポーネントをレンダリングする
GitHub - streamich/react-use: React Hooks — future of React 👍 react-use
Sensors useBattery — tracks device battery state. useGeolocation — tracks geo location state of user's device. useHover and useHoverDirty — tracks mouse hover state of some element. useHash — tracks location hash value. useIdle — tracks whether user is being inactive. useIntersection — tracks an HTML element's intersection. useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys. use
ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
【大好評！配信視聴枠を用意】Harajuku.ts Meetup 〜 Recoilの事例集めました〜 (2023/01/20 19:30〜)
新機能 「QRコード読み取りによる出席機能」をリリースしました。事前に入場受付が必要な場合や、受付時に参加枠などによって個別の誘導が必要な場合にご利用ください。詳しくは こちら をご覧ください。 新機能 connpass APIに新しく、ユーザーのプロフィールを取得できるユーザーAPIを追加しました。APIリファレンスは こちら を、またAPI利用希望の方は こちら をご覧ください。 お知らせ 2024年9月1日より、connpassではスクレイピングを禁止し、利用規約に明記します。以降の情報取得にはconnpass APIをご利用ください。APIご利用にについてはヘルプページをご確認ください。 1月 20 【大好評！配信視聴枠を用意】Harajuku.ts Meetup 〜 Recoilの事例集めました〜 Recoil 勉強会 主催：株式会社バベル
useRefを使った値管理ガイド
概要 useRef は DOM にアクセスするために使用できますが、コンポーネント内に値を保持するためにも使えます。 この記事では useState と useRef の違いを見ながら、どのようなユースケースで useRef が有効かをサンプルを見ながら解説します。 しかしながら useRef() は ref 属性で使うだけではなく、より便利に使えます。これはクラスでインスタンス変数を使うのと同様にして、あらゆる書き換え可能な値を保持しておくのに便利です。 はじめに DOM やコンポーネントインスタンスの参照を得る以外に useRef を使用する機会はそこまで多くありません。大抵の場合 useState やライブラリによる状態管理で事足りるからです。 ですが特定のケースにおいて ref を使用するとパフォーマンスに優れ、シンプルな実装にできることがあります。useRef が有効なケースを知
Recoil の振る舞いについて、幾つかの実験とその結果 - Qiita
Recoilを触っていて個人的に気になっているところ、ドキュメントにまだ書かれていない細かいところについて、実験してみた結果を書き起こしておく。こちらは執筆時点でのリリース済み実装（0.0.7）による。 非同期Selectorのサブスクリプション Recoilのselectorは、渡されたget()関数の中で、get(state)で指定したstateの値をsubscribeできるが、非同期のselectorの場合、非同期処理が発生する前に呼び出されたものでないとsubscribeされない模様。 const stateA = atom({ key: "a", default: 1 }); const stateB = atom({ key: "b", default: 2 }); // `stateC` は `stateA` の値変更には反応するが、`stateB`の変更には反応しない co
PinterestなレイアウトのためのReactコンポーネントを作った - wadackel.me
ここ最近はずっと、前の記事で書いた Web サービスをコツコツ作り進めています。その中で、よくある Pinterest っぽいレイアウトを使いたかったのですが、既存の React コンポーネントがやりたいこととマッチしなかったので ReactStackGrid というコンポーネントを作りました。 リポジトリは以下です。 wadackel/react-stack-grid https://github.com/wadackel/react-stack-grid DEMO 実際の動作は GitHub Pages から確認できます。 https://wadackel.github.io/react-stack-grid/ 単純な<div>を使った矩形と、画像を入れ込んだサンプルとなっています。幾つかのアニメーション用のプリセットもあるので是非試してみてください。 手持ちの iPhone6s でも
LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは、LINEマンガでJavaScriptを使った開発を担当しているsunderlsです。 LINEの中でマンガを読めるようになったことに、皆さんお気づきでしょうか。 「···」をタップし、「LINEマンガ」アイコンをタップすると、マンガをサクサク読むことができます。 実はこの画面はWeb技術で実装しています。画面遷移のスムーズさは、体感的にはネイティブアプリに近いのではと思っていますが、いかがでしょうか。 どのような技術を使ったのか、簡単に解説したいと思います。 Webでの実装の課題 普段、ReactやVueを使っている方も多いと思います。 Routerにトランジションを加えれば、問題なく動作するのではないか
なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか
最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として
Storybook + StoryShotsでReactをスタイルガイド運用、CIしていく知見 - Qiita
2016/10/07追記：StorybookとStoryShotsについて説明してくれている記事が出てきたため、こちらの記事はもう少し深入りした部分にフォーカスするように（install関連のとこなどを主にばっさり削除）しました React Storybook で変わるUI開発フロー (Redux Flavor) Storybookとは Reactのためのスタイルガイドジェネレータ。 基本的な所は結構先人が記事を残してくれている。 特に今回この記事ではstoriesそのものの記載については言及しないので、そこらへんは下記の記事などを参考にするのが良いだろう react-storybookを用いたReactコンポーネント開発 React Storybook入門：コンポーネントカタログがさくさく作れちゃうかもしれないオシャレサンドボックス環境 だいぶ手に馴染んできてたので、自分がよく使う部分中
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
React Storybook入門：コンポーネントカタログがさくさく作れちゃうかもしれないオシャレサンドボックス環境 - Qiita
React Storybook は React をコンポーネント単位でサンドボックスで開発できる開発環境です。 Introducing React Storybook — KADIRA VOICE — Medium kadirahq/react-storybook: Isolate your React UI Component development from the main app React Storybookの特徴って 実際のReact Componentをサンドボックス内で呼び出してレンダリングします。よってコンポーネントの色々な状態（0件とか新着ありとか）も少ないコードでカタログ化が可能。また、actionというAPIを使ってコンポーネントのイベントをキャッチしてログに流してくれたりもします。 状態込みのスタイルガイドって非常にメンテナンスが面倒なので、これ使えたらかなり革新
React Storybook で変わるUI開発フロー (Redux Flavor) - Qiita
SPAを考える会 (D3勉強会 2016.10.06) by @kitaly (twitter: @kita_ly) 自己紹介 @kitaly Twitter: @kita_ly ソフトウェアエンジニア REST API開発 (Scala/Play) SPA開発 (TypeScript, Angular.js, React.js) ビズリーチ HRMOS プロダクト開発部 採用管理 (2016年6月リリース) 勤怠管理, 評価管理, その他HR系サービス (Coming Soon..) 過去の発表資料 サーバサイドエンジニアが 1年間まじめにSPAやってみた ビズリーチではDBFluteハンズオンやってます はじめに React / Redux / Webpack 前提の話ですが 他のコンポーネント志向FWなどでも、ユースケースやワークフローは応用可能だと思っています 新しいツール
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
ざっくり React with Redux チュートリアル - Qiita
!!!Caution!!! (2019/8/15追加） ここに書いてあるやり方には、今は推奨されていない古い書き方があります（Class Component、propTypes、Redux における Action と Reducer の扱い方など）。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 前回までのまとめ React Tutorial 編 http://qiita.com/pullphone/items/efcaee59cf2a5725c61d 今回のテーマ そもそも Redux とは？ Redux で実装するにあたってのテンプレ・お約束 React と Redux をつなぐ そもそも Redux とは何者なのか？ React State の
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のComponent Lifecycle - Qiita
今回はComponentのlifecycleについて書きたいと思います。 React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 よく使うのはcomponentDidMountやcomponentWillUnmount辺りです。 イベントの登録をcomponentDidMountでやってcomponentWillUnmountで解除するというのがよく使うパターンだと思います。 componentWillMount() ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 なので初期化処理を行うのに適しています。 この中でsetStateするとrender時にまとめて行われます。 server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。 c
最小のReact+Redux - Qiita
多分これが一番小さいと思います。 前置き この記事はReactチュートリアルを終え、そのままReduxに入門した初心者が書いています。 もし間違っていることがあれば教えていただけると幸いです。 普通にチュートリアル見て分かる人は見る必要ないと思います。 試した環境 OS：CentOS release 6.7 (Final) Node.jsバージョン：v6.1.0 Reduxわからん Reactチュートリアルを終え、jQueryやVanillaから仮想DOMに置き換えるとなんかすごいわかりやすい！感動！となっていたところ、なにやらReduxなるものがあるということを耳にする。 データの流れを一方向にする？確かにわかりやすそうだ！早速やってみよう！と公式やQiita等で検索して写経してみたものの、Action, Reducer, container等のよくわからない単語ばっかりでさっぱりでした
自社サービス採用へ。本気で作るReact+Reduxのプロジェクト構成 - Qiita
サイバー・バズの@yuinchirnです。 弊社で最近リリースした「Cloud-F」というアパレルのクラウド展示会サービスは、フロントサイドはReact + Redux + Webpack、サーバサイドはScala + Akka HTTPで作られています。 今回は、フロント側のReact + Reduxを使ったプロジェクトの構成について紹介していきます。 React + Reduxプロジェクトを作る上で参考になればと思っております。 下記記事を読んで基本を押さえておくと読みやすいと思います。 React+Redux入門 全体のディレクトリ構成 今回はバイヤー向け管理画面、ブランド向け管理画面という二つの画面を作るため、 両方のプロジェクトで共通で利用する部分は/common バイヤー向け管理画面は/buyer ブランド向け管理画面は/brand という３つのReact ＋ Reduxプロジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
