Preactで作ったコンポーネントをWeb Components として公開する
Preact を使って作ったコンポーネントを Web Components として誰でも使えるように実装してみます。 Preact とは Preact は軽量な alternative React です。 Fast 3kB alternative to React with the same modern API React よりも軽量ながら React と同じような API で UI を作成できます。 Web Components とは Web Components は、Web のアプリケーションの中で再利用可能でカプセル化された独自の HTML タグを作成するための Web プラットフォームの API です。 Web Components は以下の 3 つの主な技術からなっているもので、それらを組み合わせることで独自の HTML タグを作成できます。 カスタム要素 Shadow DOM
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
PR TIMESにおけるフロントエンド開発基盤の構築 | PR TIMES 開発者ブログ
prtimes ├── config ├── file-cache ├── frontend <-- 旧フロントエンドのコード(JS,jQuery,Vue.js,SCSS,etc...） ├── htdocs ├── replace <-- 新しいフロントエンドのコード（React） ├── scss ├── serviceworkers ├── tests ├── tmp ├── upload_files ├── uploads └── vendor この構成にすることで、PR TIMESの既存のフロントエンドコード（JavaScript,jQuery,SCSSなど）のデプロイフローをそのまま利用できるため、インフラや CI/CD を新しく構築せずにReactを導入することができました。 旧デプロイフロー しかし、この構成には以下の課題がありました。 フロントエンドの実装が一つのリポジト
【React】カッコよく書けるタブコンポーネントを自作する
はじめに ウェブアプリを書いていてよく出てくるUIの一つに「タブ」があると思います。 UIライブラリを導入していれば、大抵のライブラリにはその機能を実現出来るコンポーネントが実装されていることからも、よく求められる機能の一つといえるでしょう。 そして、数あるUIライブラリのうちの一つ Ant Design にも、以下のように書ける便利なタブコンポーネントが含まれています。 リファレンス ところでこのコードの「<Tabs> の下に <TabPane> を置くとそれがタブUIとして表示される」というライブラリデザイン、どうやって実装しているのか気になりませんか？ <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPa
React.VFC を使うべき理由
React.VFC を使った方が良い理由についてまとめてみた。 React.VFC とは Function Componentを定義するための型である React.FC はchildrenが最初から暗黙的に定義されてしまっているため、必要ないのにchildrenを渡してしまってもエラーにならない仕様になっている。これでは暗黙的に許可してしまうため実際に渡っているのか渡っていないのかがわからない。 そこで @types/react v16.9.48 からはReact.VFC が追加されており、こちらではchildrenが含まれない。なので未定義の状態でchildrenを渡した場合、errorを出してくれる。 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643 サンプルコード export type Props = { t
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=
React18の新Hooks -「useTransition」の使い方📚
投稿する背景 本記事で２回目の投稿になります！💡 先日ReactがメジャーアップデートしてReact18が遂にお披露目となりました👏 ここ数日Twitterの話題がReact18で持ちきりなのですが、果たして一体どのようなアップデートがされたのか、傍観者でなく実際にコードを触ってみて筆者自信「感動した!!😭」ので、共有したいと思い執筆しております。 （進撃の巨人で言うと、「アルミン・アルレルト」が初めて「海」を見て感動している感じですね。見たいと願うだけでなく、しっかり行動することで「海」にたどり着いていますよね😆プログラミングも傍観者にとどまらずに、実際にローカルで挙動を確認することは大切ですね！笑） そんな中、触る中で感動した新しいHooksの1つである「useTransition」の使い方について、サンプルコードを挟みながら本記事を通して解説していきたいと思います💨 対象読
ReactとTailwindCSSでモックを作るのは楽しいぞ
（2022年11月25日追記） 私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです！ 感想を書いていただけるととても嬉しいです！ （2022年8月3日追記）この記事の内容はこちらの本でも読めます。無料公開している「3章 モックアップを作ろう」に相当します。本の方がより詳しく説明しています。 はじめに 現在、とあるAPIを販売するWEBサービスをReactで作成中です。先週は環境構築を行いましたが、今週はモックの作成を進めました。TailwindCSSのUIコンポーネントを公開しているページがたくさんあるので、気に入ったデザインを選んでコードをコピペすると画面モックがサクサク作れてとても楽しいです。 コピペする前にこれを読もう コードをコピペすればきれいなデザインは再現できますが、セマンティ
【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている 現状 今後 フロントエンドが技術的にもチーム的にも分割されている モノリスな構成からの脱却 アーキテクチャとチーム（
【React / TypeScript】ESLint + Prettier を設定する（ESLint 編）
とはいえ, まるっと設定を実施するのでいずれ上記は別の箇所に移動していきます。 ESLint の初期設定 公式の Getting Started を参考に実施していきます。 簡単に eslint --init を使って, 構成ファイル生成とライブラリのインストールをやります。（eslint をグローバルインストールしたくないので, 公式通りに便利な npx で実施していきます） ちなみに, 公式の Getting Started の先頭の npm install eslint --save-dev を飛ばしているのは, eslint --init の最後で npm install に誘導してくれるからです。 ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJ
React でページ内の目的の箇所まで自動スクロールさせる | DevelopersIO
「React で作ったページ内を自動スクロールさせたい」とたまに質問を受けるのでまとめました。 やりたいこと React で作成したページに一覧が表示されているときに、一覧の最後までスクロールさせたい。 または目的の箇所までスクロールさせたい。 環境 React 16.13.1 TypeScript コードと説明 CodePen 上の動くサンプルコード スクロールして表示したい箇所に React の Element をつくる (div など) React.createRef() で ref を作り、作った Element に ref をセット ref.current.scrollIntoView() で Element までスクロール // <List /> の中身は CodePen のサンプルコード参照 const ListPage: React.FC = () => { // 表示する
React でアイコンを使うなら React Icons がおすすめ
概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
Reactでフォームをスマートに実装
この記事は、2021/9/2 に行われた WESEEK Tech Conference の内容をまとめたものです。 目次 はじめに この記事ではフォームの基礎について扱い, その後 React でのフォームの基礎, 実装をしてみてライブラリ (react-hook-form) を導入する話, react-hook-form の基礎と導入例について扱います 対象読者とこの記事で扱う内容 React のフォームの基礎を知りたい フォームってなんだろう Controlled or Uncontrolled とその基礎 react-hook-form について知りたい 基礎 Tips, GROWI.cloud での導入事例 そもそもフォームどういうもの ? ユーザとアプリケーションでの対話を表現しているもの。いろいろ種類がある。 一番単純なフォームから考えてみる 名前を入力したら Submit を
React×Typescript Eventの型まとめ
type Props = { onClick: (event: React.MouseEvent<HTMLInputElement>) => void onChange: (event: React.ChangeEvent<HTMLInputElement>) => void onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void onBlur: (event: React.FocusEvent<HTMLInputElement>) => void onFocus: (event: React.FocusEvent<HTMLInputElement>) => void onSubmit: (event: React.FormEvent<HTMLFormElement>) => void onClickDiv: (
React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita
React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い
React製WebサービスにFirebaseをフル活用して動的なOGP生成を実現した話
はじめに はじめまして！！！ 結.JAPAN でみんなで共同編集できる旅行計画アプリnicody のiOSアプリとWebアプリの開発を行なっている、にーの（@n_shhhin）といいます！ 元々、nicodyのiOSアプリの方をメインで開発してたのですが、最近になってWeb周りも担当することになり、初Reactサービス開発ということもあり苦戦しつつ勉強しながら開発しているところです...！👨💻 そんな中、最近 「既存ReactサービスをOGP対応する」 という初心者にはなかなか重めの要件が降ってきて、Web周りは右も左もわからない状態だったのでかなーーーり苦戦しました...！！！ そこで本記事では、今後自分みたいなWeb見習いｴﾝｼﾞﾆｬｰがOGP対応を苦しまずにサクッと実装できるように、OGPを動的に変える方法をつまづいたポイントなどを含め解説してみたいと思います。 この手のOGP
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
そこのお前！ 余計なuseMemo1個に含まれるオーバーヘッドは余計なdiv 0.57個分だぜ！ - Qiita
※効果には個人差があります。 useMemoのオーバーヘッドについて ReactのuseMemoは、パフォーマンス最適化に使われるAPIです。コンポーネント内で計算やオブジェクトの生成を行う際に、以前の計算結果をキャッシュして使い回すことで再レンダリング時の計算を削減したり、新しいオブジェクトの生成を防ぐことができます。 useMemoに関しては、あくまで最適化のためのものであるから「無駄に使うべきではない」という言説がよく見られます。その理由は、useMemoのコストもゼロではなく、余計な使用はそれだけパフォーマンスの低下に繋がってしまうからです。 しかし、筆者はuseMemoのコストは微々たるものであり、本当に一目見て明らかに無駄でない限りは積極的に使うべきだと思っています。 そこで、筆者はuseMemoのオーバーヘッドがどれくらいかを調べるためのベンチマークを作成しました。この記事で
結局useMemoはいつ使えばいいの？ 僕の決定版 - Qiita
皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
