【初心者向け】Reactでよく使うJavaScriptのメソッドや構文13選とReact Hooks(プチ紹介) - Qiita
はじめに 最近、ひょんなことから初学者向けのReactアプリをレベル別に10個くらい開発しながら、ハンズオンで学べる教材的なものを作成する機会があり、それを実施する前に最低限理解していたら学習がスムーズに進むだろうと思われるものをまとめました。 また、予習編としてReact専用で使用されるものも簡単に紹介します。 ちなみに、すでに「基本編くらいわかるわ！」って方は予習編はみなくていいので、以下のリファレンスのチュートリアルをやっちゃってください。Udemyなんかでもいいと思いますのでどんどん手を動かすフェーズに入っていきましょう。 https://ja.react.dev/ 基本編(JavaScript) mapメソッド 配列内の全ての要素に対して関数を適用し、新しい配列を作成します。 const items = ['apple', 'banana', 'cherry']; const l
思い立ってObsidainのプラグインを作り出す 土曜日の午前に歯医者から帰ってきて、何がきっかけだったか思い出せないけど、Obsidianでクイズが書けるプラグインを作りたくなった。 Obsidianに残っていたメモ ObsidianはElectronベースのアプリケーションなので、Webアプリを開発するようにJavaScriptでプラグインを開発することができる。Obsidianのテンプレートリポジトリから自分のリポジトリを作り、ちょろっと変更すると考えていたものができた。思ったよりも簡単だ。 Obsidianプラグインで作ったクイズ用のUI 簡単なJavaScript(TypeScript)で、普段使っているツールが拡張できるのは面白い。 Svelte を使う JSで直接DOMを操作してクイズのUIを作ることはできたけど、ReactなどのUIフレームワークを使ってみようかなと思った。
こんにちは。株式会社スペースマーケットでフロントエンドエンジニアをしておりますwado63です。 以前弊社の記事でReactのテストの実践的なTipsを紹介していましたが、もっと細かい、テストをちょっとよくするかもしれないTipsを紹介したいと思います。 Mock関数に型を当てる jestのnamespaceには、jest.MockedFunctionという型があります。 これを使うことでMock関数に元の関数の型を当てることができます。 import { myFunction } from './myFunction' jest.mock('./myFunction', () => ({ myFunction: jest.fn() })) const mockedMyFunction = myFunction as unknown as jest.MockedFunction<typeo
なんか今日、megumish が CNDT 2023 で Next.js と otel の話をする らしい。そこで話されてしまうと、下書きに入れてあった Next.js と otel の記事が二番煎じになって出しにくくなりそうだったので大急ぎで書いている。 OGPは小樽のnextの駅です。 Next.js が OpenTelemetry をサポートした Next.js v13 でサポートされている。 see: https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry instrumentation.ts というファイルを置いて、ここで sdk-node を起動すれば計装されるという仕組みだ。計装には @vercel/otel というライブラリを使う。 ドキュメントは export as
Conventional development methodologies and tools face challenges when it comes to component isolation. With the growing complexity of applications, the task of managing and reutilizing components in and across various projects becomes progressively more demanding. This is where Bit steps in to offer a modern and efficient solution. Bit is a build system for composable sofware. With Bit, you can bu
conformはプログレッシブ・エンハンスメントを意識して作られたReactのformライブラリです。 RemixやNext.jsなどのフレームワークをサポートしています。react-hook-formのServer Actions対応は現状検証段階なのですが、conformはすでにServer Actionsにも対応しています。 本稿ではNext.js(App Router)におけるconformの使い方を中心に紹介します。 Server Actions もう散々他の記事や公式ドキュメントで紹介されていますが、簡単にServer Actionsについて復習します。 基本的な使い方 Server Actionsはクライアントサイドから呼び出すことができる、サーバー側で実行される関数です。 この機能の最も一般的なユースケースは、サーバー側のデータを変更する際に呼び出すことです。ReactはJ
Rust Server Components August 2, 2023 I didn’t want to get lost in the maze of popular frameworks like Next.js, so I chose to do something crazy: I wrote my solution in Rust. It’s still slightly complex, but I can outline it right here in this blog article. Can you say the same for Next.js? Absolutely not! That would need a tremendous amount of work, and I simply worked on it in my spare time. I w
この記事は 2023 年 11 月 6 日に行われた ZOZO Tech Meetup - Web フロントエンドで発表した資料を記事にリライトしたものです。 資料だけでは伝わらない部分や、もっと詳細に触れたい部分もあったので記事にしました。 当時の発表資料は以下です。多くの部分では同様のことが記載されていますが、細部や扱う内容を若干変えています。 はじめに 3 年前にコンポーネントではなく Hook 自体をテストしたいというモチベーションから「React Hooks でテストをゴリゴリ書きたい」という記事を書きました。 この記事を書いた当時は Hook やコンポーネントで使われる関数がそれぞれ正しく動いていることが確認できれば、それらを組み合わせて作るコンポーネントもある程度正しいことが担保されるではないかと考えていました。 また、コンポーネントは JSX が書かれていて DOM 構造と
React スプレッド構文をなぜ使うのか モダンなJavaScriptを書いていくうえで欠かせない知識 - Qiita
スプレッド構文をなぜ使うのか 理解のためにはまず破壊的メソッドと非破壊的メソッドを知る必要がある。 破壊的メソッドを見ていく popやpushのような破壊的なメソッドを使うことは最近のJavaScriptではNGとなっている。 破壊的メソッドを避けるためにスプレッド構文が使われると覚えておく。 一般的な破壊的メソッド Array.prototype.push(): 配列の末尾に要素を追加します。 Array.prototype.pop(): 配列の末尾から要素を削除します。 Array.prototype.shift(): 配列の先頭から要素を削除して、残りの要素を前に詰めます。 Array.prototype.unshift(): 配列の先頭に要素を追加し、他の要素を後ろにずらします。 Array.prototype.sort(): 配列の要素をソートします。デフォルトでは破壊的なソート
React.ReactNode vs JSX.Element vs React.ReactElement
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. #Quick Explanation JSX.Element and React.ReactElement are functionally the same type. They can be used interchangeably. They represent the thing that a JSX expression creates.
What's happening in the future of recoil? · Issue #1495 · facebookexperimental/Recoil
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JWT認証について簡単にまとめました。 やることはバックエンドはRailsでGemを使ってトークンの発行をします。 フロントではログイン画面を作成しAxiosを使ってRailsのAPIを利用します。 ヘッダーにはトークンの所持の有無を検証させて持ってない場合はログイン画面にリダイレクトさせます。 ログアウト機能はローカルストレージに保存したトークンを削除することで実装とします。 本格的ではありませんが認証の基本を理解してもらえたら嬉しいです。 ※railsとReactの説明はしません基本的なことは理解できている前提で進めます。 そもそも認証とは システムがユーザーの身元を確認するプロセスのことです。 これにより、ユーザーは自分がアカウントの所有者であることを証明できます。 JWTとは JWT（JSON Web Token）は、情報を安全に伝達するためのコンパクトでURLセーフな方法を提供す
はじめに こんにちは！！@Sicut_studyです！ つい先日私のもとにとある連絡が来ました ReactとTypeScriptを使っている企業から内定をいただきました！！！ 私は先月からコーチングとして駆け出しエンジニアのサポートをさせていただいており、初めての教えた方が内定をとったのでとても嬉しかったのですが、それよりも 2週間のコーチング体験だけで転職を成功させてしまった というのが驚きすぎたので、今回は何があったのかをまとめていきたいと思います。 今回コーチングした方について 今回転職を成功させた方をここではAさんとさせていただきます。 Aさんは私のQiitaの記事をみてそこからコーチングを受けたいと問い合わせをしていただきました。 最初に簡単な面談をさせていただき以下のような状態からコーチングをスタートしました 高額なスクールを卒業したがうまくいかなかった その後に別のスクールに
はじめに 仕事でReactを実装することになり、今更ですがJavaScriptとECMAScript 2015（通常ES6と呼ばれます）の基本的な知識についてまとめようと思います。 この記事では、Reactを始めるために必要なJavaScriptとES6の要点に焦点を当て、それらの概念を一部ですが詳しく説明し、実際のコード例を交えて理解を深めていきます。 let、const、var：変数宣言 まずは基本となる変数宣言を見ていきます。変数を宣言するための主要なキーワードは let、const、および var です。それぞれの特徴と適切な使用法について見ていきましょう。 let
Support for React Server Components · Issue #1209 · testing-library/react-testing-library
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
先日 Apollo Client 3.8 がリリースされました。このバージョンは Apollo Client 史上最大のマイナーリリースで、待望の Suspense 対応や、他にも様々な機能が含まれています。今回は、リリースされた機能と、その使い方について紹介したいと思います！ Suspense 対応 まずは一番の目玉である Suspense 対応です。Relay や urql が Suspense に対応している中、ついに Apollo Client も Suspense に対応しました！ 今回のリリースでは Suspense に対応した 3 つ hooks が追加されたので順番に紹介していきます。 useSuspenseQuery useSuspenseQueryはuseQueryの Suspense 対応版のようなイメージで、リクエストが行われている最中は呼び出し元のコンポーネントを
お気に入りの技術スタック2023年バージョン
小~中規模の SaaS アプリケーションを一人で立ち上げる時は、このスタックで作ることが多いです。 少しでもコード行数を減らして楽できるように、日々試行錯誤しています。 Vercel - ホスティング Vercel Postgres Vercel KV Vercel Blob Cron Jobs TypeScript - 言語 Turborepo - モノレポ Next.js- フレームワーク App Router Server Actions Prisma - ORM ER 図 Tinybird - 時系列 DB Inngest - ジョブキュー NextAuth - 認証 t3-env - 環境変数 Tailwind - CSS フレームワーク Shadcn - UI コンポーネント Tremor - グラフUI AutoForm - フォーム React Hook Form Zod
最近では、WebサイトやWebアプリケーション、あるいはOSにおいてダークモードがサポートされているケースが増えてきています。 （PC向けのWebアプリケーションとして）要件として必須であるケースはまだそう多くないかもしれませんが、UX向上のためにできればダークモードも提供できるようにしておきたいところです。 最近、UIフレームワークとしてCloudscapeを利用する機会があるのですが、Cloudscapeではダークモードがサポートされており簡単に導入することができます。 本エントリでは、Cloudscape( +Next.js)を利用したアプリケーションにダークモードの切り替え機能を実装する方法を紹介します。 なお、今回作成したサンプルは以下のリポジトリで公開しています。 https://github.com/amotz/cloudscape-dark-mode-sample 検証環境
画面幅、メディアクエリに依存した要素の表示切り替え React + CSS Modules を使っている前提イメージ JSX 上で表示・非表示の分岐が明示されてほしい CSS を掘らないと分からないのは見通しが悪く感じる matchMedia() ベースの Hooks にすると SSR で難儀する 一貫性のためにサーバーサイドコードで頑張るのも億劫である 表示・非表示だけなら純粋な CSS で実現したい display: contents を使ってみた メディアクエリで display: none と block を切り替えれば良いという単純な話ではなく、親要素が Flexbox や Grid だった場合を想定する必要があるので、表示されている状態ではボックスモデル的に虚無になってほしい。 contents これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボック
はじめに ReactやNext.jsのフロントエンドを実装しています。 見た目部分のデザイン面のコーディングを主に担当しています。 今回は実際最近いただいたレビューから、今後気をつけたいこと注意するべき視点をまとめました。 1.コンポーネントの分け方・設計の観点で気をつけること コンポーネントの分け方は適切か コンポーネントは1つの責任を持つように設計されているか 各コンポーネントの責任と役割が分かりやすく設計されているか before export const Sample: FC = () => ( <DesignSetCondition value="test"> <Section> <div> <p></p> . . . </div> </Section> </DesignSetCondition> )
みなさんはじめまして。 普段はバックエンドエンジニアとして、ひっそりとphp等を書くことでご飯を食べております。 この度は流行りのZennに投稿するということで、大人気のReactとTypeScriptを学習しながらアプリを作ってみる記事にすることにしました。 学習するにしてもTodoアプリなどではモチベーションを保てず、ゼルダやピクミンに時間を奪われがちなので、俺の俺による俺のためのエディタを作るんだっていう気持ちで挑むことにします。 Electronって何？って人もいるかもしれないので説明しておくと、Windows、macOS、Linuxのデスクトップアプリケーションを作成するためのフレームワークです。 自分のアプリ作って使うってちょっと興奮しますよね。 はじめに 以下のgifのようにGit連携したZennの記事や本を編集できるマークエディタを目指します。 このアプリを作ろうと思ったき
GitHub - wavetermdev/waveterm: An open-source, cross-platform terminal for seamless workflows
Wave is an open-source AI-native terminal built for seamless workflows. Wave isn't just another terminal emulator; it's a rethink on how terminals are built. Wave combines command line with the power of the open web to help veteran CLI users and new developers alike. Inline renderers to cut down on context switching. Render code, images, markdown, and CSV files without ever leaving the terminal. P
ReactとTypeScriptでのコンポジションパターンをマスターする！再利用性と可読性を高める実践的テクニック - Qiita
ReactとTypeScriptでのコンポジションパターンをマスターする！再利用性と可読性を高める実践的テクニック こんにちは！今回はReactとTypeScriptを用いたコンポジションパターンについて深く掘り下げていきます。この記事を通じて、コンポジションパターンの基本的な考え方から具体的なコード例、さらにはそのメリット・デメリットまで、幅広く理解していただければと思います。 目次 コンポジションパターンとは Reactでのコンポジションパターンの利用 コンポジションパターンの具体的な例 コンポジションパターンのメリットとデメリット [より深いレベルでのコンポジションパターン: 高階コンポーネント(HOC)とレンダープロップス](#より深いレベルでのコンポジションパターン: 高階コンポーネント(HOC)とレンダープロップス) まとめ コンポジションパターンとは コンポジションパターンと
【React Server Component】Server を Client の内側に注入できる Composition の力 - Qiita
【React Server Component】Server を Client の内側に注入できる Composition の力ReactNext.jsreact-server-component App Router では Server Component 中心になるらしいけど、動きがある要素には Client Component が必要になるから、どうせ全部 Client Component で書くことになるんでしょ？ Next.js App Router で Server component (以下 Server Comp.) に触れようとすると、このような疑問が出てくるかもしれません。しかし、Composition パターンによって 「Client Comp. の中に Server Comp. が入っているように見える」画面を実現できるようになります。 前置きの前置き: 公式ドキュ
フロントエンド技術選定のヒント 【令和五年度版】 - KAKEHASHI Tech Blog
こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書いていきたいと思います。 ただし、本記事では個人的な好みというよりは、npm trendsやGitHub Star Historyなど客観的な指標からどんな技術が世間に受け入れられているかの比較にしていきたいです。 もちろん数値などの比較以外に、ドキュメントを読んだり使ってみたりすることも重要だということは言うまでもないと思います。あくまでも今回の記事が知らないライブラリを知る機会だったり、ヒントになれば幸いです。 もくじ パッケージマネージャ ランタイム フロントエンドフレームワーク レンダリングフレームワーク ビルドツール
You Can't Make Children "Type Safe" in React & TypeScript
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. If you've worked with TypeScript and JSX for enough time, you'll probably have run into a situation where you want to restrict a component's children to be of a certain type. Let's say you're working on a Select component that takes Option components as children. You want to make su
【React入門】useEffectを使ってAPIを叩く方法の代表的なパターンについてまとめてみた - Qiita
はじめに この記事は「RUNTEQ Advent Calendar 2023」に参加しており、16日目を担当しています。 私(ともと申します。)は「RUNTEQ」というプログラミングスクールに所属しており、もうすぐ3ヶ月の初学者です。 本記事は、エンジニア実務未経験者が、同じ未経験者に向けてできるだけわかりやすく説明することを心がけており、正確ではない情報もあるかと思います。万が一そのような場合はコメント等で教えていただけるととてもありがたいです。 背景 プログラミングスクールでは主にRuby on Railsといったバックエンドについて学習していますが、フロントエンドのReactに興味を持っていたため、独学で学習しています。 Reactを使ったアプリを作成している中で「APIを叩く」ということが必要になり、学習したことについてまとめてみました。 この記事を読むとわかること useEffe
Server and Client Composition PatternsWhen building React applications, you will need to consider what parts of your application should be rendered on the server or the client. This page covers some recommended composition patterns when using Server and Client Components. When to use Server and Client Components? Here's a quick summary of the different use cases for Server and Client Components:
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. Using useRef with native elements can be a bit of a pain. You need to specify the type of the element you're targeting, but it's not always clear what type you should be using.
はじめに この記事は、これからReactを学びたい方向けに書かれています。 複数記事の構成になっているので、#1から始めることを推奨します。 また、Reactが初めてであれば、環境構築なしでReactについて学べる以下の記事から始めると、 より躓かずに進められるかと思います！ Reactの公式チュートリアルがCreat React Appからフレームワーク推奨になったことを受け、 Next.js 13を利用してReactを学んでいきます。 本ワークショップのゴール 学べる内容 (進捗次第で変わる可能性があります...) Next.jsの環境構築 && コンポーネントについて 今ここ アトミックデザインとHooksの基礎 API呼び出し(Fetch API) スタイリング(Tailwind CSS) 最終的な成果物 沖縄で開催されるエンジニアイベント一覧 ConnpassのAPIを利用して
React Native IDE
We are currently testing the IDE with a limited number of users. Integrated experienceSee the preview of your application right where you need it the most – close to your codebase. React Native IDE runs IOS Simulator and Android emulator directly in your Visual Studio Code project. Click to inspectUsing the built-in inspector you can jump directly from preview to a file where your component is def
React.memo なんて使わなくて良いよ - kk-web
最近ちらほら React.memo について勘違いしているプログラマーと出会うことが何度かあったので、改めて書いていこうと思います。 公式サイトの記述 そもそも公式サイトの記述をきちんと読まず、正しく理解できていない状態で使用しているプログラマーが非常に多い印象があります。 ということで React.memo に関する公式サイト の引用です。 もしあるコンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを React.memo でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。 React.memo は props の変更のみをチェックします。React.memo でラップしているあなたのコンポーネントがその実装内で useState、use
React 19 is here. And with it? Complex and flexible new features. Incredible optimizations. And a whole new way of thinking about your app. But when building a marketing site, are React 19’s features over-engineered? Or is it all worth the effort? For the last 18 months, these features have slowly been rolling out in React Canary and the Next.js App Router. And, for the last 18 months, we’ve been
Vite + React環境をDockerで構築する
はじめに この記事はvite + react環境を構築するための手順を残したものです 完成版のDockerfileやdocker-compose.ymlに至るまでが地味にめんどくさいので一から作る際の参考になれば幸いです DockerおよびDockerComposeが動く環境があることが前提です Dockefileの作成〜docker-compose.ymlの作成 任意のディレクトリにDockerfile及びdocker-comopse.ymlを作成します。
Zenn の記事に清書しました：ReactNode型のpropを正しく扱う 〜もう謎の「0」や空要素を見せないために〜 背景 React コンポーネントを作っていると、しばしばオプショナル （任意）な ReactNode 型を受け取る prop を書くことがある 例1：Button に iconを渡したときだけスペースをちょっと開けてアイコンを表示し、渡さなかったら非表示にする <Button icon={<PlusIcon />}>Add</Button> → <button><span style={{marginRight: "0.5rem"}}><PlusIcon /></span>Add</button> <Button>Add</Button> → <button>Add</button> 例2：Checkbox に children を渡したときだけ全体を label でラッ
Rename dangerouslySetInnerHTML to bravelySetInnerHTML by George3d6 · Pull Request #27704 · facebook/react
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
🎯 daily.dev switched from Preact to React for its frontend framework, aiming to resolve development issues and enhance performance. The move, executed during a team hackathon, involved significant planning, testing, and codebase adjustments. This shift allowed for better compatibility with Next.js, improved development experience, and prepared the platform for future technological advancements. U
この記事は、Ateam LifeDesign Advent Calendar 2022 シリーズ1の8日目の記事です。 はじめに react-router-domについて、ふわっと理解していた部分がありました。 このまま年を越すには、どうも気持ちが落ち着かない。。。 というわけこの際、1から全部実装して動作を確認していこうと思います。 React Routerって何？ Reactで作成したSPAに、UIとURLを紐づけるためのものです。 http://localhost:3000/top にアクセス -> Topコンポーネントを返す http://localhost:3000/todo にアクセス -> Todoコンポーネントを返す といった事ができます。 今回やること 今回はルーティングを確認したいので、react-router-dom を使用します。 react-router-domは
こんにちは！ KANNA の開発のお手伝いをしております、フリーランスエンジニアの len_prog です。 今回は、XState を用いてステートマシーンを作り、アプリケーションの複雑な状態遷移をシンプルに実装する方法についてご紹介します。 背景 アルダグラムでは、デジタル帳票アプリケーション「KANNA レポート」を提供しています。 KANNA レポートは、Excel や Google スプレッドシートのようなユーザーインターフェースを備えた Next.js 製の Web アプリケーションとなっており、複雑な状態遷移を多く含んでいます。 このような複雑な状態遷移を管理するためには、React アプリケーションでは通常、Redux や useReducer を用いてステートマシンを構築することが多いと思います。 しかし、これらの方法は状態遷移に厳格な制約が必要な場面で手続き的なコードを多
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
週末趣味プログラミングでObsidianプラグイン開発 - nakaoka3の技術ブログ
Reactのテストをちょっとよくするかもしれない細いTips
Next.js の OpenTelemetry サポートを使う方法
A Modern Approach to React Development
Server Actions時代のformライブラリconform
Rust Server Components
React でテストを書く時に考えていること/大切にしていること
https://getwaitlist.com/blog/%5Bid%5D
ReactとRailsを使ったJWT認証。 - Qiita
コーチング体験を2週間したらそれだけでモダン企業に転職してしまった話 - Qiita
Reactを始めるためのJavaScriptとES6基礎知識 - Qiita
目玉機能満載の Apollo Client 3.8 のリリース紹介
Cloudscape + Next.jsでダークモード切り替え機能を実装する | DevelopersIO
メディアクエリに依存した要素の表示切り替えを `display: contents` でユーティリティコンポーネント化
【React・TypeScript】レビューに出す前に気をつけること - Qiita
Electron ✖️React ✖️TypeScriptでZenn用マークダウンエディタを作ってみる
Rendering: Composition Patterns | Next.js
Strongly Type useRef with ElementRef
【React入門】絶対に躓かないReact（Next.js 13）ワークショップ #1 - Qiita
React 19 lets you write impossible components | Mux
オプショナルなReactNode型のpropを正しく扱う - ygkn note
Moving back to React
2022年中にreact-router-domの理解を深めたい - Qiita
XState で複雑な状態遷移をシンプルに管理する