タグ

関連タグで絞り込む (4)

タグの絞り込みを解除

reactに関するtohokuaikiのブックマーク (21)

  • React.js で Google Maps JavaScript API を使いこなす｜suzukyu


    はじめに縁あってか、個人 / 仕事問わず React.js + Google MapsJavaScript API な構成の Web アプリケーションを作る機会が多くありました。 位置情報や移動に関わる Web サービスにとって最早なくてはならない Google Maps JS API という技術ですが、React.js と組み合わせたときに若干のテクニックが要求される場面もあります。 この記事では、これまでの開発の中で得られたノウハウや Tips をできる限りまとめていきたいと思います。今後の位置情報 ・移動アプリケーションの発展の助けになれば幸いです。 サードパーティーのライブラリを﹁使わない﹂まず第一に、サードパーティーのライブラリを使う必要はありません。ググればいくつかの React 向けの Wrapper ライブラリが出てきますが、特段の事情がない限りはネイティブの API で
    React.js で Google Maps JavaScript API を使いこなす｜suzukyu
    tohokuaiki
    tohokuaiki 2024/07/17
    わー、すごくありがたい。
    リンク

  • 【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita


    はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
    【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
    tohokuaiki
    tohokuaiki 2024/07/15
    おぉ～、すごい。今やってる「はじめてのReact案件」がひと段落したら取り組んでみよう。
    リンク

  • ReactでGoogleMap使ってお店検索やってみた


    はじめに タイトルの通りReactでGoogleMapを使用し、検索された場所の付近のお店を検索して表示するというのをやってみました。 ちなみにコードは拙いところも多々あるので、あくまで自分の備忘録として残させていただきます。 よかったらみていただければ幸いです。 この記事ではreact-google-maps/apiを使用して実装していきます。 今回実装する機能について Googleマップを使った地図の表示 検索されたキーワードを使って、動的に地図の位置を変更 キーワード付近にある飲食店︵今回は居酒屋に特化︶を複数件を表示 簡単なお店の情報をモーダルで表示 使用したパッケージやライブラリ react: 18.0.0 TypeScript: 4.7.3 mui/icons-material: 5.11.11 mui/material: 5.11.15 react-google-maps/a
    ReactでGoogleMap使ってお店検索やってみた

  • react-google-autocomplete

    tohokuaiki
    tohokuaiki 2024/07/12
    GoogleマップのPlaceAPIの検索をするReactのnpm
    リンク

  • Next.js loading UIの使い方〜React18のSuspenceを理解する〜| DevHarry


    Next.jsのloading UIについて解説しています。Next.jsのloading UIはApp Router内では、loading.jsを使うだけで簡単に実装ができます。ただし、これらの挙動を理解する上でReact18のSuspenceの挙動を理解する必要があるので、こちらについてもこの記事で解説しています。
    Next.js loading UIの使い方〜React18のSuspenceを理解する〜| DevHarry

  • 結局 useEffect はいつ使えばいいのか

    useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#

    結局 useEffect はいつ使えばいいのか
    tohokuaiki
    tohokuaiki 2024/07/11
    全然わからない。俺は雰囲気でuseEffectを使っている
    リンク

  • Reactベストプラクティス: react-hooks/exhaustive-depsのエラーを0にする - Hello Tech


    javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです‥ コード品質の向上と統一 開発チームメンバーの技術スキル向上 ﹁どう﹂直すかでではなく﹁なぜ﹂そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から﹁reac
    Reactベストプラクティス: react-hooks/exhaustive-depsのエラーを0にする - Hello Tech

  • Home | React Google Maps

    React Google MapsReact components and hooks for the Google Maps JavaScript API GET STARTED react-google-maps makes using the Google Maps JavaScript API in React applications easy.React IntegrationUse a Google map as a fully controlled reactive component and use all the other features of the Google Maps JavaScript API. ExtensibleIncludes components and hooks to make writing custom components easy.

    tohokuaiki
    tohokuaiki 2024/07/02
    Google公式のReact Wrapperは2年更新してないし、Documentもわかりにくいし、2024年の今はこっちの方がいいんじゃないか？
    リンク

  • Component – React

    Component は React コンポーネントの基底クラスであり、JavaScript のクラスとして定義されています。React は現在でもクラスコンポーネントをサポートしていますが、新しいコードでの使用は推奨されません。

    Component – React
    tohokuaiki
    tohokuaiki 2024/06/28
    Componentはもう使わないでfunctionベースにしてくださいと。書き換え方も。
    リンク

  • React で入力フォームの onChange イベントを IME ON のときに無視する


    何をするか？React のテキスト入力フォーム︵input コンポーネントやmui の TextField など︶で onChange イベントハンドラーを設定すると、入力テキストが変化したときに任意の処理を行うことができます。 ただ、onChange イベントは IME での日本語変換中にも呼び出されてしまう ので、おそらく、想定しているよりも多く呼び出されてしまいます。 インクリメンタルサーチなどで、入力のたびに API 呼び出しをしているようなケースでは、この振る舞いは抑制しなければいけません。 ここでは、IME がONになっているとき︵つまり日本語変換中︶に、onChange イベントを無視する実装例を紹介します。 このあたりの実装は、ブラウザごとの微妙な振る舞いの差︵特に Esc キーで IME 入力をキャンセルした場合など︶を考えると、結構複雑だったりします。 実装してみ
    React で入力フォームの onChange イベントを IME ON のときに無視する
    tohokuaiki
    tohokuaiki 2024/06/28
     わー、すごい、これすごく感じ良くできている。嬉しい。ありがとうございます。  

    ●react
      
    リンク

  • create-react-appとNext.jsの比較 - Qiita


    この記事について Reactの開発ではcreate-react-appを用いることが多かったのですが、Next.jsでも開発を行う機会があったので把握できた範囲で実装方法の差異などをまとめてみたいと思います。 個人的な内容整理が主目的ですが、どちらかに触れてみようと思っている方やフレームワーク選定の際の参考になれば幸いです。 SPA、SSR、SSGについておさらい フレームワークの話の前にこの辺りの用語についておさらいしておきます。 SPAの登場前は、 ページ遷移の度にサーバーへ同期処理でリクエストを行い、ページを取得するのが一般的でした。 LaravelやRailsなどMVCフレームワークで画面作ったことある方はイメージしやすいと思います。 ページアクセスの度にサーバーでPHPやRubyなどの処理が実行されるため、サーバーの負荷や読み込みの遅さなどが課題とされていました。 SPAの登場
    create-react-appとNext.jsの比較 - Qiita

  • 一言で理解するReact Server Components


    この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？　という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
    一言で理解するReact Server Components
    tohokuaiki
    tohokuaiki 2024/06/05
    「サーバでやればコスト減！」という考え方がすごく不思議。C10K問題は？“一般にはstage 0に寄せたほうが転送量的に有利です。また、コンポーネントの処理が減るので実行時のパフォーマンス的にも有利になります。”
    リンク

  • App Routerとは？ハンズオンで学ぶ Next.js 13.4のapp directory・ディレクトリ構成 | Muscle Coding

    フロントエンド界隈の最新情報を追いかけていると、Next.js 13 で導入された app ディレクトリについての記事をよく見かけるようになりました。 app ディレクトリとは、Next.js 13 から導入された App Router と呼ばれる新しいルーティングシステムのためのディレクトリです。 当時はあくまで実験的な機能であったため、experimental（実験的）という扱いでしたがNext.js 13.4 で正式に導入されました。 正式採用されたということで、これから Next.js を学ぼうとしている人にとっては、app ディレクトリについて理解することは重要です。 そこで今回の記事では app ディレクトリについて、どのように使用するのかを解説します。 また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

    App Routerとは？ハンズオンで学ぶ Next.js 13.4のapp directory・ディレクトリ構成 | Muscle Coding
    tohokuaiki
    tohokuaiki 2024/05/31
    ディレクトリ地獄じゃん。“一方、App Routerではpage.tsxというファイルのみがページとして扱われます。 ”
    リンク

  • [ts] 'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。: JavaScriptメモ

    TypeScript と React で悪戦苦闘していると「[ts] 'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。」とのエラーが import { Component } from 'react' を以下のように変更すると直りました。 import React, { Component } from 'react'

    tohokuaiki
    tohokuaiki 2024/05/31
    サンキュimport { Component } from 'react' を以下のように変更すると直りました。 import React, { Component } from 'react'
    リンク

  • useEffectがマウント時に2回実行される - Qiita

    環境 OS: Windows 10 Node.js: v16.16.0 React: 18.2.0 現象 useEffectでマウント時に1回fetchでAPIにアクセスして情報をとってくると・・・ useEffect(() => { fetch("https://xxxx.com/xxx") .then(res => res.json()) .then(data => { console.log(data) }) } , []);

    useEffectがマウント時に2回実行される - Qiita
    tohokuaiki
    tohokuaiki 2024/05/28
    これ、なんなん？2回やることで余計な副作用起きてるじゃん。
    リンク

  • React の再レンダリングを防ぐ3つのパターン

    React のパフォーマンスについて語るとき、コンポーネントの再レンダリングは外せない話題となるでしょう。React は以下の条件のときに再レンダリングが発生します。 コンポーネントの state が更新された 親のコンポーネントが再レンダリングされた 例えば典型的なカウンターアプリのように、ボタンをクリックしたとき count state を更新する場合には必要な再レンダリングといえます。状態が更新されても再レンダリングされなければ、表示されるカウント数は一向に「0」のままですから。 import { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count

    React の再レンダリングを防ぐ3つのパターン

  • Preventing React re-renders with composition

    tohokuaiki
    tohokuaiki 2024/05/28
    レンダリングが頻発して反応速度が低下して問題になったら改めて見てみましょう。
    リンク

  • React再レンダリングガイド: 一度に全て理解する - Qiita


    この記事は ﹃React re-renders guide: everything, all at once﹄ の翻訳記事です。 ご本人( Nadia Makarevich さん)に許可をいただいて翻訳しています。 以下、翻訳記事となります。 React再レンダリングガイド: 一度に全て理解する Reactの再レンダリングを詳細に網羅したガイドです。 このガイドでは、次の内容を説明します。 再レンダリングとは何か？ 必要な再レンダリングと不要な再レンダリングとは何か？ 何がReactコンポーネントの再レンダリングをトリガーするのか？ また、以下の内容を含みます。 再レンダリングを防ぐための最も重要なパターン 不要な再レンダリングと、パフォーマンスの低下につながるアンチパターン すべてのパターンとアンチパターンには、図とコード例が付いています。 この記事のいくつかの章は動画でも見ることができ
    React再レンダリングガイド: 一度に全て理解する - Qiita
    tohokuaiki
    tohokuaiki 2024/05/28
    へー。
    リンク

  • Reactの"要素の型"、それぞれの特性理解していますか？

    はじめに 普段React・Next.jsを用いた開発に際して、UIコンポーネントを作成する際にReact.FCやJSX.Element、ReactNodeなどの"要素やコンポーネントに関する型"を使用する場面が多々あるかなと思います。 昨今のReactコンポーネント開発において、実際には要素やコンポーネントの型を「何を使うか」をあまり意識しないでもちゃんと開発できてしまいます。とはいえ、それぞれの型には微妙に異なる特徴や特性がありますので、今回はよく見かける以下の四つの型について、それぞれの違いや特性を紹介していきたいと思います。 JSX.Element ReactElement ReactNode React.FC

    Reactの"要素の型"、それぞれの特性理解していますか？
    tohokuaiki
    tohokuaiki 2024/05/28
    React.ReactNodeだけでいいんじゃないの？とか思っていた時期が私にもありました。2024年だとFCは使わないらしいです。
    リンク

  • イベント処理 – React

    この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 イベントへの応答 React でのイベント処理は DOM 要素のイベントの処理と非常に似ています。いくつかの文法的な違いがあります： React のイベントは小文字ではなく camelCase で名付けられています。 JSX ではイベントハンドラとして文字列ではなく関数を渡します。 例えば、以下の HTML：

    イベント処理 – React
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.