ReactUIコンポーネント Mantineはいいぞ
Mantineとは ReactUIコンポーネントライブラリと聞くとChakra UI、MUIあたりが有名でしょうか。Tailwind使ってる人も多いと思います。 ここでは最近人気のMantineを紹介したいと思います。 Mantineはrtivital氏がメインとなって開発しているReactコンポーネントライブラリで、Githubのスターは約15,000あります。 スペックとしては TypeScriptベース(逆にいうとtsxじゃないと動かない) 豊富なコンポーネントとhook ダークモード対応 Next.jsに公式対応 メリット コンポーネントとhookが豊富 TOPページにもありますが、すでに100 120種類以上のコンポーネントが実装されており、なおかつアップデートで増えつつあります。（記事書いた翌日に公式が更新してました！ 他のReactコンポーネントライブラリと比較すると後発です
GraphQL
Overfetching: レスポンスが不要なデータも多く含んでしまうケース Underfetching: 一度のリクエストで全ての必要なデータを取得することができないため、追加でリクエストを送信する必要があるケース これらの問題をGraphQLで解決可能 これを読んでる GraphQLという名前はGraphとQLの2つに分けることができる Graph→nodeとedge オブジェクトをnode, リレーションシップをedgeで表現 QLはQuery Language データベースとは関係がなくSQLのようにデータベースをクエリーで操作するための言語ではなくAPIのためのクエリー言語 GraphとQLを合わせたGraphQL自体はREST APIの代替 REST APIと同様にGraphQLもクライアントからサーバに対してCRUDする際に利用可能 REST API データを取得する際に複数
【完全版】React + FastAPIで開発するモダンなwebアプリ
はじめに フロントエンドはリッチに作りたい！だけどバックエンドはFirebaseだけじゃなくてpythonでも書きたい... そんな悩みを一度は抱いたことがあるのではないでしょうか？ 今日はそんな要望に答えるべく、ゼロから始めるReact✕FastAPIと題しまして、フロントエンドはReact、API側はpythonで作ってリッチなwebアプリを作っていきましょう。 なぜReact？ Reactは、Javascriptのフレームワークの一つです。同種のフレームワークとして、Vue.jsやAngular.jsが挙げられますが、Googleでの検索数も、githubの利用者数もReactが一番多く、注目度は高い言えます。webのフロントエンドを触る上で、是非習得したいフレームワークと言えると思います。 なぜFastAPI？ 今回は、APIをPythonのフレームワーク、FastAPIで作ること
Next.js + react-markdownでローカルのmarkdownをSSG
import fs from 'fs' import { NextPage, GetStaticProps } from 'next' import ReactMarkdwon from 'react-markdown' type StaticProps = { terms: string } const Terms: NextPage<StaticProps> = (props) => { const { terms } = { ...props } return ( <> <main> <ReactMarkdwon skipHtml={true}>{terms}</ReactMarkdwon> </main> </> ) } export const getStaticProps: GetStaticProps = async () => { const terms = fs.read
useEffectをやめて、Suspenseを使おう
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割
ReactコンポーネントへのPropsの渡し方/受け取り方大全
ReactコンポーネントへPropsを渡す/受け取る方法は色々あり、意外にもまとまったリファレンスがなく説明に困ったのでまとめたいと思います。 なお、公式ドキュメントでもあまり包括的な記述がありませんが、β版のドキュメントには比較的良いページがあります：https://beta.reactjs.org/learn/passing-props-to-a-component Propsの渡しかた 基本の渡し方 propsを渡す基本的な構文は、props名={値}です。どんな値もこの記法で渡すことができます。多くの説明書では文字列に限った渡し方から学びますが、まずはこちらが基本だと覚えたほうがわかりやすいです。 <MyComponent age={25} // 数値 rate={100 * 0.5} // 数値 name={'John'} // 文字列 greeting={`Hi, my nam
ReactのStreaming SSRをエッジでやる
React18のストリーミング機能とCloudflare WorkersやDenoのStreams APIが気になっていたので、それらを組み合わせて遊んでみた。というかこの2つの組み合わせこそがReactのやりたいことだと思います。ところで、Reactよく分かってないので、ツッコミどころあるかもしれませんが、優しくしてください。 やりたいこと SSRしたHTMLをStreamで返却し、コンテンツの準備ができたらSuspenseの内側だけを差し替える。これを全部、HTTP Streamingでやるのがミソ。結果当然ながら、パフォーマンスが上がったりいいことが起こる。 Suspense ReactのSuspenseとはたぶん、Suspenseの外側を先に描画して、Suspenseの内側で投げたPromiseが完了するまでにfallbackを表示するってことだと思います。外部APIのレスポンスを
Reactで複数のchildrenを扱いたい場合の実装パターン
導入：Reactのchildren Reactのchildrenを使うことで、子要素をwrapするような子要素を記述することが出来る。railsのviewで言えばyieldみたいなもの。 const SomeLabel = ({children}) => { return <div>{children}</div> } // 呼び出し側 <SomeLabel> // 子要素の拡張に対して、`SomeLabel`は関心を持たなくて良い。 <SomeDecoration>Hello</SomeDecoration> <SomeLabel> これを覚えるとだいぶReactをきれいに書きやすくなるイメージがある。 本題：複数の子要素を柔軟に扱いたいときにどう考えるか？ 例えば何かtitle, author,bodyを貰って記事を表示するような<Post>を考える。
スケルトンスクリーンを実装してみた
はじめに react-content-loader を使ったスケルトンスクリーンの実装について書いた記事です。Create React Content Loader のページでコードも生成され、すごく便利ツールだったので試したことをまとめました。 スケルトンスクリーンとは 画面に表示するデータが読み込まれるまでの間、そのコンテンツの枠組みだけを事前に表示させるUIのことです。 こういうやつです。 スケルトンスクリーンのメリット 画面に表示するデータが読み込まれるまでの間、ローディングやスピナー、空白の画面を表示することに比べて、スケルトンスクリーンは待機してる体感時間を短く感じるメリットがあります。（それほど大きな差はないらしいですが。） Skeleton screens (as splash screens), when used to indicate that a screen is
React をテンプレートエンジンの代わりに使う
フロントエンドの専門家がいないことを理由に、React を使わず、バックエンドのテンプレートエンジンで出力した HTML に jQuery で動きをつける。 最近の React[1] なら、テンプレートエンジンに近い発想でウェブ UI が書けるので、そんなメンテナンス性の低いことをする必要はありません。 テンプレートエンジンでウェブ UI が書ける人なら React でも書けるし、むしろメリットがある。 そう思ってもらうのが目的の記事です。[2] 作るサンプル 次のようなウェブ UI を作ってみます。 次の JSON API のレスポンスを表示するだけのシンプルなものです。 [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, { "userId": 1, "id": 2, "title
Vite + React + TypeScriptのアプリをGoogle App Engineにデプロイ
GAE(Google App Engine)にデプロイ GAEの設定ファイル (app.yaml) を以下の内容で作成します。 Viteのデフォルト設定ではビルド結果がdistディレクトリに出力されるのでそちらを参照します。 runtime: nodejs16 instance_class: F1 automatic_scaling: max_instances: 1 min_instances: 1 max_idle_instances: 1 min_idle_instances: 0 handlers: - url: /(.*\..+)$ static_files: dist/\1 upload: dist/(.*\..+)$ - url: /.* static_files: dist/index.html upload: dist/index.html
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Hydrateとは