Reactのパフォーマンス改善を勉強会で開催しました - JX通信社エンジニアブログ
はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な
ReactのコードをHooksにリファクタリングしていく話 - JX通信社エンジニアブログ
フロントエンジニアの渡辺(@pentla)です。 AI 緊急情報サービスの「FASTALERT」は、Reactをフロントエンドのスタックとして採用しており、3年ほどコードベースは大きく変えずに運用しています。その過程で、Flow → TypeScriptへのスタックの変更など、継続的にリファクタリングを進めています。 tech.jxpress.net 今回は、Classベースのコンポーネントを、Hooksを使って関数ベースのコンポーネントに書き直す話です。 今回の対象読者は、 Reactを書いたことがある方 Reactのパフォーマンスについて気になっている方 Hooksは知っているけれど、プロダクション環境に入れるか迷っている方 を対象にしています。 Hooksとは v16.8から追加された機能です。今までは、Stateやライフサイクルメソッド（表示時に一度だけ呼び出したいときなど）の機能
新型コロナダッシュボード爆速リリースの舞台裏 〜小さく始めて大胆に変えるフロントエンドプロジェクト〜 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 JX通信社は「今起きていることを明らかにする報道機関」というミッションの元に、新型コロナリアルタイムダッシュボードを 2月16日 から提供し続けています。今回は、「新型コロナプロジェクト」の発足から現在に至るまでの、プロジェクトの進化についてご紹介します。 プロジェクト発足 そもそものプロジェクトの発足としては、2月14日の下記のツイートが発端でした。およそ 2 日でリリースしたことになります。 日本の感染者増えているので、もうそろそろ中国がやってる地域別まとめページ作っても良いのでは？https://t.co/6gSg3s16Nw pic.twitter.com/TyNeP44NbO— けろっと (@kerotto) 2020年2月14日 当時は、東京都のような自治体公式の特設サイトや、国内全体の動向をまとめたサイトはほぼありませんで
管理画面向けのVue.jsのUIフレームワーク、iViewについて - JX通信社エンジニアブログ
「JX通信社Advent Calendar 2019」7 日目の記事です。昨日は、鈴木（泰）さんの「CodePipelineを用いたLambdaのデプロイについての所感」でした。 フロントエンドエンジニアの渡辺です。今回は社内の管理画面のUIの話です。 はじめに 管理画面、特に社内向けの画面を作る際は、プロダクト側とは少し事情が異なり、 それぞれのコンポーネントのデザインにあまりこだわらない 機能面や、使い勝手の優先度が高い などの事情があります。なので、UIとしては、「このフレームワークに乗っかっておけばコンポーネントが揃っている」という状態が理想です。 JX通信社の管理画面はVue.jsを使っているケースが多く、その際のUIフレームワークにはiViewを使っています。 特徴 基本的にデザインがシンプル カスタマイズできる項目が多い 少し特殊な用途(無限スクロール、ツリー構造のチェックボ
Webサービスを支えるユーザログ基盤開発＠Retty - Retty Tech Blog
はじめに ※ Retty Inc. Advent Calendar 2018 2日目の記事です。 toCで展開している我々のようなサービスでは、 A/Bテスト等を通じて機能開発に対する分析を行っています。 それらを支えるユーザイベントのロギングは サービスの持続的な開発を支える重要な要素の一つです。 この記事を書くにあたり、前調査で調べてみたところ システムログやアプリケーションログの文脈でのログ設計は言及されるものが多いものの サービスにおけるユーザログ設計に関して語られることは意外と少ないもようです。 Web における集客効果を測定する代表的なツールとしては Google Analytics や Google Tag Manager といったサービスが使われており スマートフォンアプリの文脈では、Firebase Loggingなどの強力なサービスが 既にあることから 独自に設計するケ
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
Pythonista's Batting Eye（選球眼） #PyConJP 2018
PyCon JP 2018 Talk Session https://pycon.jp/2018/ Baseball Science, Web Application, Barrel Zone, and more...
「はじめてのフロントエンド開発」という本を書きました - massa142's blog
共著者として参加していた書籍『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に技術評論社さまより発売となりました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎出版社/メーカー: 技術評論社発売日: 2018/05/09メディア: 単行本（ソフトカバー）この商品を含むブログを見る どんな本か React、Angular、Vue.js、React Nativeそれぞれが、同じサーバのAPIを参照し、同様の機能を持ったアプリケーションとして作成します。React Nativeは、ネイティブアプリを開発するためのフレームワークなため、SPA（Single-page
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
