CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
React appを手元でProduction modeで動かす - たごもりすメモ
react-scripts startで使えるDevelopment modeだとなんか変なことがちょいちょい起きるので、動作確認をProduction modeでやりたい。 ところでこのアプリからはCORSリクエストを送りまくるのでHTTPSのサイトとしてlocalhostにアクセスしたい。Development modeについては、これはpackage.jsonに以下のように書いておいてnpm startすることで実現できる。 ... "scripts": { "start": "HTTPS=true react-scripts start", ... React appをProduction modeで動かす 単に動かすならドキュメントにあるようにnpm run buildでビルドしたあと、それを配信するサーバを実行すればいい。 $ npm run build $ npm insta
Hello World – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React の導入については新しいクイックスタートを参照してください。 const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<h1>Hello, world!</h1>); これは “Hello, world!” という見出しをページに表示します。 Try it on CodePen 上記のリンクをクリックしてオンラインエディタを開いてください。好きなように書き換えて、出力にどう影響するのかを確認してみてください。このガイドのほとんどのページにはこのような編集可能な例が出てきます。 このガイドの読み方 このガイドでは、React アプリケーションの構
LIFF アプリでカメラを起動してQRコードを読み取る機能を作って動かしてみた | DevelopersIO
みなさん、こんにちは！LINE事業部のたにもんです！ QRコードを読み取る LIFF アプリを React で作成し、CloudFront + S3 にデプロイして実際に動かしてみたので、その手順を紹介していきます！ 実際に動かしてみると以下のようになりました。 今回は https://classmethod.jp/ のQRコードを読み取ったのですが、ボタンの下に読み取った文字列が表示されているのが分かるかと思います！ 今回開発したソースコードはこちらのリポジトリで公開しているので、実装が気になる方は参考にしてください！ 環境 node: 16.14.0 npm: 8.3.1 AWS CDK: 2.12.0 (build c9786db) iOS: 15.2.1 LINE: 12.1.0 React アプリを CloudFront + S3 にデプロイする npm workspace を初
英語面接で5歳児みたいなことしか言えないからカッとなってWebサービス作った【個人開発】 - Qiita
要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。２週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
React でどこまでユーザーがコンテンツを見たか既読管理してみる | DevelopersIO
西田@大阪@MAD事業部です Reactでユーザーがどこまでコンテンツを見たか、既読管理をする仕組みを調べてみました ユーザーがコンテンツを見たか判定する仕組み コンテンツが viewport に入ったらユーザーがコンテンツを見たと判定します。viewportにコンテンツが入ったことを検知するために Intersection Observer APIを使用します 構成 コンテンツがviewportに半分入ったらコールバック関数を呼び出すコンポーネント Container.tsx を作成し、それを App.tsx でインポートして使用してます 完成イメージ ソースコード src/Container.tsx import React, { useEffect } from 'react'; type Props = { index: number; onIntersection?: (inde
2021年からReactを始めるなら React Server Components 一択ではないか？
情報の新鮮さを重視しています。投稿記事は定期的に削除しています。どうしても過去記事を読みたい場合はVTeacherの「サブスク加入者のページ」からご閲覧ください。 apps.apple.com/app/vteacher/id1435002381
ViteでPreactのTypescript環境を構築する | miyauci.me
ViteでPreactのTypescript環境を構築するNo bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。 はじめにVite は Vue.js の作者の Evan You 氏が開発しているビルドツールです。 ネイティブの ES Module のインポートを利用し、バンドル不要で高速に動作する開発環境を提供します。 Vue3 はもちろん、React や Preact も対応しています。 今回はそんな Vite を使って、Preact プロジェクトの環境構築をします。 できあがったテンプレートはこちらにあります。 やることpreact/cli の default テンプレートに近づけることを目標に、最低限開発に必要なツールを導入していきます。 ツールを個別に導入できるよう、それぞれ順
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
Contextをおさらいする | DevelopersIO
React では、コンポーネント間の状態は props として親コンポーネントから子コンポーネントへ渡す必要がありますが、複数の親子関係にいないコンポーネントを跨いで共通で利用したい値、例えばロケールの情報や UI のテーマ、ログイン状態など、がある場合、Context を使うことで面倒なバケツリレーをすることなくグローバルな値としてコンポーネント間で情報を共有できます。 Context の使い方 Context を利用するときは Context Provider で値を受け取り、その配下のコンポーネント内で変更を購読することができるようになります。 React には useContext という フックが用意されており、Context Provider 配下のコンポーネントからuseContext(<コンテキスト名>)でコンテキストの値を購読することができます。 import React
React（TypeScript）アプリにAuth0で認証機能を組み込んでみた | DevelopersIO
こんにちは、CX事業本部の若槻です。 認証管理プラットフォームAuth0を使うことにより、アプリケーションやシステムに認証や認可の機能をかんたんに組み込むことが可能となります。 Auth0: Secure access for everyone. But not just anyone. 今回は、React（TypeScript）アプリにAuth0による認証機能を組み込んでみました。 やってみた Auth0へのアプリケーション作成 まず、Auth0管理コンソールよりAuth0のアプリケーションを作成します。 下記よりAuth0の管理コンソールにログインします。Auth0アカウントが未作成の場合はこちらから作成して下さい。 Auth0 にログイン サイドバーメニューより[Applications]-[Applications]を開き、CREATE APPLICATIONをクリックします。 ダ
[React/Recharts] X軸でスクロールできる時系列データのグラフを作成してみた | DevelopersIO
こんにちは、CX事業本部のうらわです。 今回はReactでX軸でスクロールできる時系列データのグラフを作成してみました。 環境 $ sw_vers ProductName: Mac OS X ProductVersion: 10.15.6 BuildVersion: 19G2021 $ node -v v12.18.3 $ npm -v 6.14.6 ライブラリ選定 今回は以下の2つの記事でTop 1として挙げられているRechartsを使用してみました。 Top 5 React Chart Libraries for 2020 React向けチャート描画ライブラリ Top 6 create-react-appで雛形を作成してRechartsをインストールします。 npx create-react-app recharts-sample --template typescript cd r
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】 - くるみ割り書房 ft. React - BOOTH
💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテゴリで上位独占中の『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。今版は全 3 巻構成となっており、本書はそのその第 2 巻「React 基礎編」です。 ビルドツールやリンター・フォーマッタの高度な使いこなし術、JSX の書き方からコンポーネントの作り方までを解説します。また単にそれらの概要や用法だけの紹介にとどまらず、背景や歴史をたどってなぜそれらの技術が生まれ今のような形になったのかまでを掘り下げていきます。 なぜ React は他のフレームワークのようにテンプレート形式を採用せず JSX で UI を表現するのか。公開当
React + Material-UIの画面にmaterial-tableを導入してみた | DevelopersIO
こんにちは、CX事業本部の若槻です。 Reactで使えるMaterial-UIをベースとしたデータテーブルコンポーネントとしてmaterial-tableというOSSがあります。 material-table material-tableを使うことにより、Reactの標準のデータテーブルコンポーネントよりもフィルター、検索、ソートなどのテーブル機能を拡張することができます。 今回は、このmaterial-tableをReact + Material-UIで作った画面に導入してみました。 アウトプット 次のようなmaterial-tableのデータテーブルを持ったページを作成します。 環境 OS、Node,js、npm、TypeScriptのバージョンは次の通りです。 % sw_vers ProductName: Mac OS X ProductVersion: 10.15.6 BuildV
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データ取得のための React Hooks ライブラリ – SWR
GitHub - tptshepo/aws-sfn-graph