Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな
React-pdf
Since a renderer simply implements how elements render into something, you still need to have React to make it work (and react-dom for client-side document generation). You can find instructions on how to do that here. 2. Create your PDF documentThis is where things start getting interesting. React-pdf exports a set of React primitives that enable you to render things into your document very easil
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得している間と人気の曲・アルバム一覧を取得するまでにクライアントサイドとサーバーサイドで無駄な待機時間が出来てし
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由｜Dentsu Digital Tech Blog
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由 電通デジタルのエンジニア、西山です。 この記事は、電通デジタルアドベントカレンダー2020の3日目の記事です。前回の記事は「2020年に作ったDevOps内製ツール」でした。 この記事ではReactでGoogle Analyticsの計測コードを埋め込む方法についてお話しします。他のブログなどですでに何度も紹介されているテーマですが、ブログによって用いられる手法は様々で、どれを採用すればいいか迷う人も多くいるのではないかと思いますし、中には情報が古くなっているものもあります。 そこで最新の状況を調査した上で、私たちが採用した手法を紹介しますので、ReactでGoogle Analytics計測コードを埋め込む際の参考にしていただければと思います。
React v17 の変更に関するこぼれ話 - SmartHR Tech Blog
こんにちは、フロントエンド技術顧問の @koba04 です。 今回は React v17 での変更に対して気になった部分や、RC からリリースまでにあった修正の中で個人的に興味深いと思った話を紹介したいと思います。 v17 自体の変更点については下記で紹介している公式ブログで確認することをオススメします。 React v17.0 (日本語ブログ) React v17.0 Release Candidate: No New Features (日本語ブログ) SmartHR では毎週フロントエンド MTG を行っており、今回紹介するような内容はこの MTG で取り上げています。 SmartHR での フロントエンド MTG のようなプロダクト開発以外の活動に興味のある方は下記のブログ記事を参照ください。 tech.smarthr.jp Changes to Event Delegation
React/ReduxにSelectorを導入したら 品質が担保されるようになった話
「Mix Leap Study」とはヤフーが開催する関西圏のITクリエイター（エンジニア・デザイナー）の成長を目的にした勉強会です。#59のテーマ「Reactとその仲間たち」で、ヤフーの松井氏がSelector導入で課題解決した話を共有しました。 入稿ツールってどんなもの？ 松井真子氏：ヤフーの松井です。よろしくお願いします。まず簡単に自己紹介させてください。松井真子です。ヤフーに2018年に新卒入社しまして、ショッピングに配属されてからReactとReduxを使ってキャンペーンページ向けの入稿ツールとフロントの開発をしていました。 去年の9月くらいからはPayPayモールのAndroidアプリの開発をしています。UXに興味があり、サービスデザインの勉強をしており、今PayPayモールのAndroidアプリとかを通して新規機能の提案でサービス、デザインのチャレンジをしています。 趣味は釣り
JavaScriptフロントエンドフレームワーク、Angularの人気が下落中
State of JavaScriptがこのほど、2019年におけるJavaScript関連の調査結果「The State of JavaScript 2019」を公開した。フロントエンドフレームワークとして注目されていたAngularだが、実際にはもう使わないと回答するユーザーの割合が2018年から増加しており、さらに今後学習するつもりもないと回答するユーザーの割合も多い。今後徐々に使用割合が減っていく可能性が見えてきている。 Angularユーザ意識割合推移グラフ - 資料: The State of JavaScript 一方、ReactとVue.jsは順調に使用率を伸ばしつつ、さらに今後学習していきたいというユーザーの割合も多い。今後、ReactとVue.jsはさらにユーザーが増える可能性がある。 Reactユーザ意識割合推移グラフ - 資料: The State of JavaS
React Native + Expoで1年以上運用したCTOが集まってみた 前編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか？いざ、React Native でアプリ開発！と思って調べてみると、セットで紹介されていることが多いかと思います。 私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。 ＊ キッチハイクは Expo を採用せず、素の React Native（Vanilla React Native）で開発しています。 Expo を採用して1年以上運用したCTOが、上野に集結 そんな、多くのエンジニアが気になっている「Expo 実際どうなの？」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました！非常に充実した2時間で、とてもひとつの記事にまとめきれず.
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
The Fullstack React.js Developer RoadMap
Disclosure: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article. The React JS or simply React is one of the leading JavaScript libraries for developing front-end or GUI of web applications. Backed by Facebook, React.js, has grown by leaps and bounds in recent years and became the de-facto library for
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
Reactへの雑感（学習コストが低いという評価と大規模化のメリット） - Qiita
ReactとAngularの比較への評価について ReactはAngularよりも評価が高いという記事を見かけることが多い。実際、それはプログラマ個人の評価もあるだろうし、使い方などにもよると思う。 また、ReactとAngularについての比較に対して以下のような指摘がなされる。 ReactとAngularは実はSPAフレームワークとして名前が挙げられるが、ReactはAngularのようにフルスタックのSPAフレームワークではなく、ビュー（もしくはビューモデル）の機能を提供することに特化している。 つまり、ReactとAngularは持っている機能や役割が異なるので一概に比較することは難しいと言われることがある。両者を触れば確かにそうだと実感すると思う。 そして、このReactの限定的な役割こそ、Reactを習得したり、使ったりする時に大事な点だと思う。 学習コストが低いのか？ 少なか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
React Native vs Flutter - Choose Your Hero | Your Team in India Blog
React | web.dev
Blog | Instabug