【Amplify と Figma の連携】Amplify Studio の UI Library を使ってみた - サーバーワークスエンジニアブログ
本ブログは動画での解説も行っています。 youtu.be はじめに 新卒1年目の近藤です。今回AWSのサービス「Amplify」で、デザインツール「Figma」との連携に関する（Amplify Studio）アップデートがありました。どちらも普段からよく使うものランキング上位のサービスなので、知りたい！ただそれだけの思いで設定を行ってみました。 何がうれしいのか デザインツールで作成した UI をコード（React コンポーネント）に変換できる Amplify Studio 上でコンポーネントを管理できる ローカルの開発環境へのインポートが簡単 私が率直に感じたうれしいポイントは上記の3つです。React などのフレームワークでは、Webページでよく使う要素（例えばボタンのUIなど）をコンポーネントとして管理することができます。通常、開発において、デザインツールで作成した UI をコードで
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
Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド - Qiita
アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができるのかの検証を行います。 作成したプロトタイプの全体像 最初にどんなアプリなのかをスクリーンショットで提示してから、詳細な解説を進めていきます。 基本的なアプリに最低限必要な認証・一覧表示・登録・編集 機能をプロトタイピングで再現しました。 マテリアルデザイン（Material-ui）をベースとしています。 ログ
React HooksとTypeScriptを使ったRedux再実装で理解度を深める試み しましょう - タオルケット体操
React Hooksでましたね。 これでクラスを使う必要がなくなってみんなハッピーです（公式で再三書かれてますが、既存のコードをHooksで書き直す必要性はないです）。 それはそうとして、useReducer という新しい仲間が増えました。 ちょっと前に追加されたContextと合わせることでReduxを置き換えることができます（置き換える必要があるかどうかは考えてはいけない）。 しかし最近気がついたのですが、そもそもReduxがどういうものなのか、雰囲気で使っている人が多いようにおもいます。 ぶっちゃけ「ドキュメントやソースコードを読めばいいやんけ」、で終了する話なのです。 とはいえReduxは特定のViewライブラリへの依存を防ぐように作られていたり、なるべく縛りを作らずに薄い実装にしてプラグインで解決していくような思想になっていたり、フレームワークというよりはフレームワークのための
StorybookをReact, Typescriptな環境に導入する - RoadMovie
StorybookをReact, Typescript, Atomic Designな環境に導入する手順を紹介します。 Why Storybook? Frontendの開発を行っていると、再利用性を高めたいという意識が湧いてくると思うのですが、それをチーム間で共有したり、デザイナーさんと認識を合わせるのが容易でなかったりします。また、開発者も「このコンポーネントどこでどう使ってたっけ？」と言うように、視認性を持ちながら検索性も高くするというのがなかなか難しかったりします。 そこで、Storybook ( https://storybook.js.org ) の出番です。 How to install Storybook in my environment? まず、先にも記述しましたが、今回は、下記の要件のアプリへの導入を紹介します。 React.js yarn npmな方は適宜読み替えてく
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた | DevelopersIO
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた Storybookとは、React、Vue、Angular 用の UI コンポーネントを開発・管理するためのオープンソースツールです。 公式ページにあるチュートリアルを、普段の業務で使用しているReact Native for WebとTypeScriptを使ってやってみたのでご紹介します。 実装するもの Storybook 公式ページのチュートリアルの タスク管理アプリ（当記事では、タスク一覧の表示までをご紹介します。） 今回作成したソースコードの一式はこちらにあります。 実装方針 Create React App を使ってプロジェクトを作成する TypeScript を使用する 画面の作成に、React Native for Webのコンポーネントを使用する チ
kintoneのフロントエンド刷新に向けた取り組み - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チーム Webエンジニアの村田です。 本記事では kintone のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。 はじめに なぜフロントエンドを刷新するのか 小さくはじめる Proof of Concept リリース戦略を考える 移行前と移行後の技術スタック 既存資産の再利用 Closure Library製の複雑なコンポーネントを再利用する E2Eテストを再利用する スタイルを再利用しない 開発体制 フロントエンドエキスパートチームの支援 アクセシビリティチームの支援 生産性向上チームの支援 これからの活動 おわりに はじめに 現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools (Closure Compiler、Closure Library、Closure Templat
[React] 副作用フックを使用してsetTimeoutのタイマーをリセットする | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、Reactアプリケーションで、副作用フック（useEffect）を使用してsetTimeoutのタイマーをリセットしてみました。 デモ 上記のサンドボックスを開いてから10秒経過後のコンソール出力。 TimerID 15 has started. 10 seconds has passed. TimerID 15 has finished. 続けてRestartボタンをクリックして10秒経過後のコンソール出力。 Restart button was clicked. TimerID 15 was canceled. TimerID 197 has started. 10 seconds has passed. TimerID 197 has finished. コード概要 import React, { useState, use
![[React] 副作用フックを使用してsetTimeoutのタイマーをリセットする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
freeeプロジェクト管理でJavaScriptバンドルサイズ削減に取り組んだ話 - freee Developers Hub
こんにちは！ 中部オフィスでエンジニアをやっているichienです。 5月に入社してfreeeプロジェクト管理の開発を担当していました。 今回はfreeeプロジェクト管理のJS(JavaScript)バンドルサイズを削減した話を紹介します。 改善前はバンドルしたJSファイルが5MB以上に肥大化しておりダウンロードに数秒かかっていました。 その分、ファーストビューの表示もその分遅くなり、ユーザ体験に課題がありました。 今回は次の3つの施策を実施して、5MB→1.7MBまで削減し、ダウンロード時間も70%短縮できた話をします。 gzip圧縮の適応 webpack-bundle-analyzerで現状の可視化と削減対象の決定 不要な日付・祝日データの排除 また、今回の取り組みは一度にすべて対応したわけではありません。次の様にstep-by-stepで進めることを意識しました。 現状を可視化し理解
Reactのパフォーマンス改善を勉強会で開催しました - JX通信社エンジニアブログ
はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な
我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜｜seya
やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集
React 初心者が Material-UI で今どきの Web フォームを作ってみた（react-hook-form編） | DevelopersIO
React 初心者が Material-UI で今どきの Web フォームを作ってみた（react-hook-form編） React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ この7月からカスタマーサクセスという役割にロールチェンジしました、下田です。 つい先日、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。 Web アプリ開発の初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えてご紹介してみたいと思います。 なお本記事は、前の記事（Stepper編）に続く形式となりますので、お時間あれば下記の記事も合わせてご参照いただけますと幸いです。 作ってみた 筆者の開発環境は、下記のと
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
Zennを支える技術とサービス構成
Zennという技術情報共有サービスを作りました。有益な知見をシェアした開発者が、その見返りを得られるようなサービスにしたいと思います。気合いを入れつつも、時間をたっぷりかけて地道に育てていきます。 このページでは、Zennを支えている技術やサービスを紹介します。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。開発当初はNuxt.jsを使っていたのですが、TypeScriptとの相性を考えてNext.jsへ移行しました。 技術情報共有サービスなので、主要な流入元はいずれ検索エンジンに落ち着くと予想しています。そのため、検索エンジンにインデックスしてもらいたいページはサーバーサイドレンダリング（SSR）しています。 動的コンテンツもキャッシュ Next.js 9.4からIncremental Static Regenerationという最高の機能
こんなグラフはRechartsで作れるのか？を公式デモを使用して簡単に確認する | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 Reactのグラフ描画ライブラリであるRechartsでどんなグラフが作れるのか、公式デモを使用して簡単に確認する方法をご紹介します。 Rechartsの公式デモ RechartsのサイトではExamplesページで様々なグラフの実装がソースコードとともにデモとして紹介されています。デモの数は60種類以上です。 Examples | Recharts またグラフのデモは実際のRechartsのコンポーネントとしてページに実装されているため、描画時のアニメーションやマウスオーバー時のツールチップの表示などの動作もその場で確認できます。 公式デモをCodeSandboxで開いてカスタマイズする Examplesページのデモでは不足の場合は、これらのサンプルはCodeSandboxで開いて簡単にカスタマイズを行うこともできます。 カスタマイズし
Next.js で作成した Web アプリを PWA 対応する | DevelopersIO
経緯 趣味が手芸（ミシン）の妻からある日突然、slack でこんな画像が送信されてきました。 特に難しいものではなかったので、隙間時間でサッと作って Cloudflare Pages にデプロイしました。 Cloth Price Calculator 計算したログを残せたほうがいいんじゃないか、そのログから合計をだしたりできたほうがいいのではないかなど色々と提案してみたのですが、これくらいシンプルなほうが使い勝手がいいとのことだったので希望通りに実装しました。 結果そこそこの反響があり、せっかくなのでオフラインでも動作するように PWA 対応をしてみました。 Next.js で PWA 対応 https://github.com/hbsnow/cloth-price-calculator/tree/v1.0.0 対応前のコードは上記になります。 ここでは Next.js の公式サイトにある
Reduxを分かりやすく解説してみた | フューチャー技術ブログ
はじめにはじめまして、2019年4月入社の丸野です。フロントエンドでシステム開発を2年半続けてハマったことから得た教訓3つ の記事を書いた柏木さんと同じチームに所属しています。 研修修了後PJにアサインされて約4ヶ月ほどReact.jsを使って開発を行ってきましたが、Reduxの理解にとても苦しみました。そこで今回はReduxの概要を噛み砕いて説明していきます。同じ悩みを持つ人の理解の助けになればと思います。 (Redux公式ドキュメントはこちらです。) 開発で使用している技術要素 React.js（16.4.1） Redux（3.7.2） そもそもReduxって何かReduxとは、React.jsで使用するstateつまりアプリケーションの状態を管理するフレームワークです 簡単にReduxの概念の下記に図式化してみました State：アプリケーションの状態 Action：ユーザーが何押し
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
フロントエンドの変遷に見るイタンジの技術選定〜テンプレートエンジンからNext.jsに辿り着くまで〜 - ITANDI Engineer Blog
はじめに イタンジのエンジニアリングマネージャの田渕です！ 先日、OHEYAGOのフロントエンドのNext.jsへのリプレイスが完了しました。 振り返ってみると、リリース前はRailsのテンプレートエンジンを使っていたところから徐々に変更をしていき、最終的にはNext.jsまで辿り着いたなあ、と感慨深かったです。 「1年半ほどコツコツ改善を積み重ねて、結果的にモダンな構成まで辿り着いた」という成功例だと思うので、皆様にその変遷を紹介していきたいと思います！ この話を通して、イタンジの技術選定に対する考え方を、具体例を交えて紹介できればと思っています。 また、今後フロントエンドのリプレイス等を考えている方の参考にもなれば幸いです。 開発初期はテンプレートエンジンを利用 何を作っていくべきかを見極めるフェーズでは、テンプレートエンジンを使っていました。 サイト名もサイトのコンセプトすらも固まっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術ブログ記事一覧 | 低コストなモダナイズ開発のRagate