【検証】React.FC と React.VFC はべつに使わなくていい説
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
React v18 での Effects に関する変更内容(予定)
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
真に Universal な ReactComponent を書く - Qiita
ややお気持ち多め。 前置き 最近の個人的な考えとして、React 書く人は ReactNative 側にスキルを寄せたほうが良いのではないか、と思っている。 ReactNative の需要の高まりは凄い。最初はプロトタイピング採用だったのが、徐々にプロダクションに出始めている。今年末には新規プロジェクトの10~20%は ReactNative になるんじゃないか？という感すらある。 僕はデスクトップのブラウザは好きだけども、残念ながら、世の中の趨勢はモバイル側にある。その上でフロントエンドにロックインすることをリスクに感じている。PWAのアプリケーションも来そうではあるが、直近の需要を賄うためにやはりReactNativeに習熟しておきたい。 大事なのは、「考え方として」 ReactNative に軸足を移したほうが色々といいということだ。 Web は基本的に動きが少ない。見栄えをよくした
Goだけで作るフロントエンド
Go のシンタックスだけで HTML とスタイルと JS を構築する「Vecty」というフロントエンド開発キットの紹介 先日 Umeda.go#3 にて登壇して Vecty を紹介しました。資料はこちらです。 Vecty とは？ リポジトリ: https://github.com/gopherjs/vecty GopherJSむけの React-like な frontend development kit です。 GopherJS について 前に書いた紹介記事を参照 Vecty の主な機能は GopherJS の Go 記述を JS へのトランスパイル機能を利用します Go のシンタックスのみで HTML とスタイルとイベントハンドリングを記述 HTML 記述ツリーをコンポーネントとして定義する支援機能 コンポーネントツリーを初期レンダリングする機能 仮想 DOM のようにコンポーネント
【Reduxに疲れた人のための】Undux入門 - Qiita
巷のフロントエンドではReact+Reduxの技術スタックがどちゃクソ流行ってますね！ とはいえ、Reduxだとやはりどうしてもひとつアプリを作る際のボイラプレートコードの多さや、ステートの更新によってトリガされる副作用処理のハンドリングをredux-sagaやredux-side-effectsなしではうまくやれないケースが多いです。 もし、Reduxとその周辺ライブラリのよせあつめにちょっとでもツラミを感じ始めたら、Unduxを試すチャンスです。 Unduxとは？ Dead simple state management for React Reactのための死ぬほどシンプルなステート管理ライブラリです。 特徴 TypeScriptやFlowなどでの型付けを意識した設計。 ReduxにおけるAction, Reducer, Dispatcher, Containerなどの概念を必要とし
Inside Frontend 2 #insideFE
簡単なサンプルアプリをBDDで開発しましょう。KiwiとNocillaを使って簡潔で速いテストの書き方を説明します。
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
次のReact状態管理はMobXにする理由 - Qiita
2017/12/29更新： ReduxとMobXの選定観点 も併せて見ていただければ幸いです front-end-handbook-2017 に名前が挙がっていた MobX に興味が湧き調べてみました。その結果、掲題のとおりの記事を書きたくなるまでに至ったので、個人的にReduxより優れていると感じた点を挙げたいと思います。 記述量が圧倒的に減る Store概念のわかり易さ バケツリレーが実質不要になる injectを活用するとjsxが純粋になる デコレーター層の存在 記述量が圧倒的に減る 一つの双方向な値をコンポーネントに表示するために、Reduxでは以下の作業が必要でした。 Reducer に initialState として値を追加 Reducer で Object.assign した新しい State を生成 ActionType を追加 ActionCreator を追加 Act
Reactのコンポーネントにpropsを渡さない場合のFlowの書き方 - 30歳からのプログラミング
Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Component<Props> { render() { return <div>{this.props.foo}</div>; } } class ParentComponent extends React.Component { render() { return <ChildComponent foo="hoge" />; } } https://flow.org/en/docs/react/components/ では、このコンポーネントにはprop
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する 複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するためにsetInvervalのようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループをrequestAnimationFrameで回します。 このように色々なタイマー系がありますが、アプリが多機能になっていくと色々なタイマーが同時に動くようになっていきます。 特に問題がなりやすいのが表示中だけタイマーを回すコンポーネントです。 よくあるのが次のようなmount時にtimerを開始して、unmount時にtimerを停止するコンポーネ
ReactNativeでの開発を通じて得た知見 - razokulover publog
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
Puppeteerを使ったStorybookの自動スクリーンショット撮影用のアドオンを作った - wadackel.me
先日、Storybook のストーリーを、Puppeteer を使って自動でスクリーンショットを撮影する Addon を作りました。まだ React のサポートのみだったり、API がまだ不十分だったりしますが、簡単に使い方と仕組みについて紹介していきたいと思います。 はじめにまず、Puppeteer が何者かという点は、以下の記事が大変参考になるため、ここでは触れません。 —headless 時代の本命？ Chrome を Node.js から操作するライブラリ puppeteer について - Qiita 今回作った Addon は、上記 Puppeeer を使って、任意のストーリーのスクリーンショットを取るためのものになります。 スクリーンショットを取るためのモチベーションは色々と考えられますが、ここでは開発時に使用している既存のストーリーを活用して、最小限の労力で Visual T
漫談・フロントエンド談義 - megamouthの葬列
（出囃子） あー本日はお日柄もよろしゅう… え？そないな挨拶はええから、はよ、おもろい事言え？ 今日はお客さんはプログラマばっかりやから、せっかちでんな。短気も美徳のうち言うわけやけども、わしも、ただの大阪のおっさんやさかいね、そない、おもろいことはすぐに言えまへんのや… うーん。せや、最近、フロントエンド界隈がおもろいでんな。 ReactとかVueとかAngularとか？Riotとか言うのもあるらしいですやん。 ほんで、アーキテクチャとしてはFluxがどうとか言うとって、ここ数年のフロントエンドはめまぐるしゅう変わっとって、 横目で見とるわいらなんかも、えらい忙しゅうしてはんなあ、思うてね。 あの人どのぐらい儲けてはんのやろ？とかそないな下世話な興味も出てくるっちゅうもんですわ。 アタクシなんかは、システムっちゅうもんは何で書こうが、動きさえすればそれで、ゼニコロ貰ろうて、ホナサイナラ、
React 16で導入されたError Boundaryについて - dackdive's blog
React 16 Beta がリリースされました。 Error Boundary という概念が導入されたそうなので公式ブログをざっくり読んでみます。 はじめに：React 15 までの問題 React 15 まではコンポーネントで発生したエラーをうまくハンドリングしたり、そこからリカバリするためのしくみが提供されてませんでした。 結果として コンポーネントのどこかで JavaScript エラーが発生する catch していない場合、知らないうちに React の内部状態（internal state）にも悪影響を及ぼす 結果として開発者コンソール上はぱっと見原因がよくわからないエラーが発生する みたいなことが起きてました。 （参考） TypeError: Cannot read property '_currentElement' of null · Issue #4026 · face
Code SplittingでどれくらいReactアプリの初回ロード時間を減らせるか試してみる - Qiita
ということで、前々回書いた通りSSR(Server Side Rendering)したくない派ですが、CSRの問題は解決したいので今回は初期ロード時間対策でCode Splittingを試してみます。 基本的なことしか試さないので、一度も試したこと無い人向け程度の内容かと思います。 この記事で言うCode Splittingはこのproposalにあるdynamic importを使ったCode Splittingのことです。react-routerを使った場合にrouteごとにjsファイルを分けることで、初期ロード時に1つの大きなバンドルされたjsファイルを読み込むのではなく、それぞれのrouteごとに必要最小限のjsファイルを読み込むことで初期ロード時間を低下させることを目的としたものです。(Routeは今回のデモのための例で、Route以外の用途にも使うことももちろん可能です) ちな
ダイナミックな機能を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 サイトの商品ページを想定していて、カラーと個数、サイズを選択できます。 選択したカラーに応じて、商品画像が切り替わり、カルーセル形式で閲覧できます。 アニメーションには映っていませんが、カートへの追加もできます。 デモなので動きとしては非常に
Inside Frontendに行ってきました #insideFE - チラシ裏日記上等！！新館
Inside Frontend というフロントエンドのカンファレンスに行ってきました。話のレベルが高く、まだそういう領域にまでたどり着いていない現状ですがいろいろ刺激になりやっていく気持ちを持つことが出来ました。 inside-frontend.connpass.com 以下面白いと思ったセミナーと感想とか。 Web over ServiceWorker Webフロントエンドにおけるコンポーネント化のアプローチ 感想 Web over ServiceWorker @jxck_ さんのService Workerについての発表。 speakerdeck.com ネイティブアプリと同じようなことが出来るAPIをサンドボックス化して、ブラウザで出来ることを増やしていこうという動きが2014~2016の間で活発になった。結果いろいろなAPIが提案されてきている。そのうちの一つにService Wo
WebアプリケーションのSandboxを実現するLockerServiceの概要とその課題 - Qiita
本記事では、Salesforceが提供する「LockerService」というWebアプリケーションにおけるSandboxを実現する機構について、それが産まれた背景と技術的な概要、および抱えている課題についてとりあげます。 背景 エンタープライズシステムにおけるWebアプリケーションとコンポーネント流通 コンポーネントを利用した開発をWebアプリケーションに導入しようという試みは、特にユーザインターフェースの構築における設計と開発の効率化やコードの再利用などを目的として、かなり古くからなされてきました。特に最近ではアプリケーションをSPAで開発するのが市民権を得てきており、ユーザインターフェースをコンポーネントベースで組み立てるライブラリ／フレームワークがもてはやされるようになっています。 もちろん、このようなコンポーネント指向の開発は、あくまでアプリケーション開発者の側でのコードの再利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tondemodesign.com
