はじめに 基本的にReact + TypeScriptでフロントの開発をしているんですが、実際にコードを書いている時に気をつけていること、便利な書き方として知っておくと得をするReactコンポーネントの書き方を紹介します。 Propsが多くなりすぎたら やたらpropsが多くなってしまうことありませんか？しかも同じような名称ばっかりを何回も書くことになるという。そうゆうときはできる限りショートハンドで書きましょう。 return ( <SampleComponent type={user.type} name={user.name} email={user.email} image={user.image} /> )

Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T

*2021 6/11追記　『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC

Hey there! 👋🏼 I'm Mateo Garcia, I co-organize a community in Medellin, Colombia called React Medellin. This year I started a series of posts called 'Coding with Mateo'; My first post was about 6 ways to write a React component. Today I want to share with you what I have researched for a couple of weeks about how rendering works in React. To begin with, I will say that the concept of rendering in

Last time we looked a bit at the background and some built-in features of React. As promised it's now time to look at some optional tools. Just like with Vue and Angular, components play a big role here and as usual you can create your own or use some of those made by the rapidly growing community. Let’s take a look at React libraries you should check before 2020 ends. React based frameworks If yo

#Redux の状態をコンポーネントから取るだけなら useSelector でよく、useStore は殆どの場合不要な API なのだが、次のようなシチュエーションで必要になった。

こんな感じの画面が出ます。 Reduxの導入 次に、Reduxを入れます。 Reduxとは、 Stateを管理するフレームワークです。Facebookが提唱しているFluxアーキテクチャの概念を拡張して扱いやすく設計されたライブラリです。 Fluxのコンセプトはこの辺を見てください。 Reactはpropとstateを持ちますが、アプリケーションの規模が大きくなると、コンポーネント間のstate管理が難しくなります。Fluxアーキテクチャはこの問題を解決してくれます。 簡単に説明すると、以下のようなA〜Zまでのコンポーネントがあったとします。（雑な図ですみません。。。） 開発途中で、コンポーネントCとZのstateを共通化したくなった場合にstateをコンポーネントAに移植する必要がありますが、その場合、propsを渡すために依存関係のあるB、D〜Yまでのすべてのコンポーネントを修正する必

Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ

TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ

この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co

最近、recompose を使用して React を書いており、ある程度知見が溜まって来た為、整理の意味を込めて纏めてみました。不備、不明点等がありましたら、コメント頂ければ幸いです。 TL;DR HoCs 、recompose とは recomposeの代表的な API の紹介・使い方 setDisplayName：Component に任意の名前付与 withStateHandlers：State 、handler の管理 compose：複数の recompose API を束ねる lifecycle： React のライフサイクル管理 pure：不要なレンダリング削減(パフォーマンス向上) onlyUpdateForkeys：不要なレンダリング削減(パフォーマンス向上) branch：Boolean を使用した Component の出し分け renderNothing： 常に n

React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をするJavaScriptReactreact-hooks はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は

Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ

こんにちは！ちょうど1ヶ月前に子供が生まれ、忙しくも楽しく日々を過ごしている安達(@ry0_adachi)です🍼🍼🍼 今回は「コネヒト Advent Calendar 2017」の7日目の記事として、WebViewで使われる機能をReact+Fluxの構成で実装してリリースした時の辛かったことと、それをどうやって解決したか？について書いていきます。 qiita.com やりたいこと この3つをクリアすればOKです。 Android/iOS両方のWebView上で動作すること アプリの対応OSバージョン(iOS9〜/Android4.1〜)で動作すること アプリの中でも違和感を与えないような動作を実装すること Polyfillがいろいろ必要になる これはAndroid4系のWebViewがまだChromeベースでないバージョンまでがほとんどの原因かな？という気もしますが結構な頻度でクラ

日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し

React-Reduxを簡単に利用するためのパッケージ@jswf/redux-moduleを利用して、最小限の労力でToDoアプリを作成するという内容です。 ※追記 @jswf/redux-moduleの使い方は以下記事で、もう少し短いソースにて確認できます React-ReduxだけどReducerもActionも書かず、Dispatchすら使わず、データも何となく受け取れるようにする方法 最初に プログラムはファイル一つだけにまとめました。 内容は以下のように構成されています。 データ構造の定義 データ操作用クラスの作成 データ入力用コンポーネント データ表示用コンポーネント 今回はReduxラッパーの機能を使うため、データの入力と表示はコンポーネントは分けてあります。 ここで見ていただきたいのは、propsもuseStateも使っていないということです。 全てのデータはReduxのS

【追記】 もうこれ古いから参考にしないでください 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がさっぱりわかんねぇ！」 ぐらいの人向け。自分

Webの表現力を高めてくれるのがグラフ、チャートライブラリです。ある時は円グラフ、ある時は棒グラフとニーズは様々です。そのため、多くのグラフに対応していれば、それだけ価値が高まります。 今回はRechartsを紹介します。React用のチャートコンポーネントです。 Rechartsの使い方 グラフのサンプルをスクリーンショット多めで紹介します。まずはシンプルな曲線グラフ。 マウスオーバーで情報を出せます。 小さなグラフもできます。 線の種類を変えた場合。 これは珍しい垂直型。 二軸のグラフを合わせたもの。 途切れた表現もできます。 参考になる線を追加した場合。 エリアグラフ。 パーセント型のエリアグラフ。 棒グラフ。 積み上げ型もできます。 こんな形をカスタマイズした棒グラフも。 範囲を絞れる棒グラフ。 複数のグラフを合わせることもできます。 散布図。 バブルチャート。 二つの軸を持ったパ

最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート こんにちは。 今年の4月にヤフー株式会社にデザイナーとして新卒入社した、三好 健太（@three4c）です。9月3日（火）にヤフーのセミナールームで「Bonfire Frontend #4」を開催しました！ このイベントの目的はフロントエンドが抱える課題を共有し、フロントエンドについて熱く語る会です。 今回のテーマは「最新のフロントエンド技術　〜夏休み総復習〜」。初心者の方でも理解しやすい内容となっており、デザイナーの私も多くの知見を得ることができました。 ヤフーからは浜田と内藤が登壇し、ゲストスピーカーとしてサイボウズ株式会社より向井 咲人さん、株式会社ディー・エヌ・エーより吉井 健文さんにお話しいただきました。 これからは

These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React and include live examples: Rules of Hooks Components and Hooks must be pure React calls Components and Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are JavaScript functions, but you need to