React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
Reactの状態管理ライブラリ「Recoil」について - Qiita
Reactの状態管理ライブラリとして何を使っていますか。巷には状態管理ライブラリが溢れており、選択に悩むことが多いと思います。ここではその選択肢の一つであるRecoilに重きを置いてReactにおける状態管理について解説します。Recoilについてだけ知りたい場合はrecoilについてから読んでください。 この記事ではクラスコンポーネントは利用せず関数コンポーネントを扱う前提で書きます。 Reactの原理と思想 Reactは ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ であり、以下の3つの理念が掲げられています。 宣言的な View コンポーネントベース 一度学習すれば、どこでも使える Reactは理念を大事にしているライブラリですので、これらは頭に置いておきたいです。Reactはバージョンアップによる破壊的変更は比
Reactの状態管理ライブラリ「Recoil」について - Qiita
Reactの状態管理ライブラリとして何を使っていますか。巷には状態管理ライブラリが溢れており、選択に悩むことが多いと思います。ここではその選択肢の一つであるRecoilに重きを置いてReactにおける状態管理について解説します。Recoilについてだけ知りたい場合はrecoilについてから読んでください。 この記事ではクラスコンポーネントは利用せず関数コンポーネントを扱う前提で書きます。 Reactの原理と思想 Reactは ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ であり、以下の3つの理念が掲げられています。 宣言的な View コンポーネントベース 一度学習すれば、どこでも使える Reactは理念を大事にしているライブラリですので、これらは頭に置いておきたいです。Reactはバージョンアップによる破壊的変更は比
正しく使う ReactContext
みなさん、 React の Context は正しく使えていますか？この記事ではパフォーマンスの観点で Context を少しでも正しく使うための方法や理由などを書いていこうと思います。 なお、この記事の内容が最も正しいと主張するつもりではありません。ぜひ PR や コメント でよりより使い方を共有してください！ 想定する読者と記事の範囲 一番この記事を読んでいただきたいのはこういった方々です Context についてなんとなくしか分かっていない とりあえず redux や recoil 等を使えば良いと思っている しばしば recoil と Context を比較するといった趣旨の記事があったりしますが、 Context について正しく使えていないが故に、適切に比較できないものがあったりします。僕自身は Context よりも recoil を使うことが多いのですが、思考停止で reco
React コンポーネントの「制御・非制御」を意識しない方法
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
React Hook FormとTypeScriptと状態管理について思うこと - Qiita
仕事でReact Hook Formのv6を使用しているのですが、そろそろ執筆時点で最新のv7に更新したいなと思っておりReact Hook Formについて学習し直したのであれこれ思うことについて書いていきます。サンプルコードとかもそのうち載せていい記事にしたいなと思うんですが、一旦はこの数日間考えてみたことを整理して記録するために記事にします。 書いてるうちに長くなってきたので先に個人的にうまくReact Hook Formと付き合うための結論を書いときます。 ボタン操作だけで済む画面ならuseStateで管理する。 ボタンだけでなく、キーボードやフリック入力をしないといけない入力用のコンポーネントならボタンの状態も含めて全てReact Hook Formで管理する。 複数画面にまたがるフォームの場合はページごとに確認ボタン(次へボタンかもしれない)を設置して、確認ボタンが押された時に
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
Bit. Composable software.
Announcing Bit v1.0, a beginning of a new era in component-driven software. Learn more.
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
React JavaScript Tutorial in Visual Studio Code
Version 1.84 is now available! Read about the new features and fixes from October. Using React in Visual Studio Code React is a popular JavaScript library developed by Facebook for building user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box. Welcome to React We'll be using the create-react-app generator for this tutorial. To use the gen
「それってSPAでやる必要ある？」第１章：パフォーマンスチューニング - Qiita
SPA、流行ってますね。勢いがありますね。 ただ、最近のフロントエンド界隈を見ていると、 「これからはSPAが主流になっていくぞ！」 「新規サービスをはとにかくSPAで作るべき！」 というような過激（？）な言論を聞くこともしばしばです。 今回は、そんなイケイケな雰囲気にたいしてちょっとだけ「待った」をかけるべく 今のWeb開発において、SPAは本当にファーストチョイスなのか？ という議題について、 枯れた技術が大好きなサーバーサイドおじさん が、考えをまとめたいと思います。 全体の構成として 【１】パフォーマンスチューニング 【２】SSR 【3】ルーティング の３点について、今のSPAが抱える諸問題や、必要以上に期待されてしまっている点などを示した上で、 SPAが導入しやすいサービス、逆に導入しないほうがいいサービス SPAを導入しない場合のフロント構成の代替案（MPAや限定的なSPA)
【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨
[レベル: 上級] React や Angular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。 Google の John Mueller（ジョン・ミューラー）氏は、英語版のウェブマスター向けオフィスアワーでこのようにコメントしました。 プリレンダリングで高速表示 プリレンダリング (Prerendering) は、コンテンツの大部分を JavaScript で生成するページで利用されます（正しく言えば、JS に限りませんがここでは深入りしません）。 プリレンダリングでは、ブラウザに JavaScript を実行させてページをレンダリングさせるのではなく、サーバー側であらかじめレンダリングした“静的な”HTMLをブラウザに配信します。 ※補足: この記事で言う「プリレンダリング」は「サーバー サイド レンダリング (
【JavaScript SEO】サーバーサイドでレンダリングすべき要素: メインコンテンツ、構造化データ、titleタグ、hreflangほか
[レベル: 上級] DeepCrawl が主催したウェビナーで Google の Martin Splitt（マーティン・スプリット）氏が、JavaScript サイトの SEO に関するさまざまな質問に回答しました。 このなかで、サーバーサイドでレンダリングすべき要素、言い換えると、JavaScript を介してレンダリングさせるべきではない要素をスプリット氏は挙げました。 スプリット氏によると、SEO を考慮するのであれば、次の要素はサーバーサイドでレンダリングしてからクライアント（ユーザーと Googlebot）に配信したほうがいいとのことです。 メインコンテンツ 構造化データ title タグ meta description hreflang 日付に関する記述 メインコンテンツは、ページの評価において最も重要です。 現在の WRS（ウェブ レンダリング サービス）が、古い Chr
【JavaScript SEO】AngularとReact、VueはGoogle検索のSEOで利用可能。ただし注意点あり
[レベル: 上級] メジャーな 2 大 JavaScript フレームワークである Angular と React、そしてこの 2 つには及ばないもののシェアを伸ばしてきている Vue.js を採用したウェブサイトは基本的に Google 検索においてうまく機能します。 SEO と相性が悪いフレームワークではありません。 ただしいくつか気をつける点もあります。 Angular/React/Vue は Google SEO に問題なし JavaScript SEO をテーマにした DeepCrawl との Q&A 動画チャットで、Google の Matin Splitt 氏が、メジャーな JavaScript フレームワークの Google 検索での利用について説明しました。 次の 3 つの JS フレームワークは Google の SEO に害を与えるようには作られていないと自身で詳しく
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React.FC使う必要ある？ - Qiita
Headless UI
