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やライフサイクルメソッド（表示時に一度だけ呼び出したいときなど）の機能
Flow/PostCSS の大規模プロジェクトを TypeScript/emotion に移行して数万行のプルリクを投げた話 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 AI 緊急情報サービスの「FASTALERT」は、報道機関や公共機関に導入いただいている(お堅めな) BtoB SaaS でありながら、 事業開始当初から React を使った Single Page Application(SPA) として作っています。 2017年には、より信頼性のあるフロントエンドを提供するため、 Facebook の Flow を導入しました。しかし、昨今の TypeScript の盛り上がりや、社内の他プロダクトで TypeScript を使っていることなどを受けて、フロントエンドのアーキテクチャを大幅に見直しました。 今回取り組んだ大きな変更は、 Flow から TypeScript への移行 (型チェックの移行) TypeScript 化に合わせた、 babel-plugin-proposal-*** の廃
新型コロナダッシュボード爆速リリースの舞台裏 〜小さく始めて大胆に変えるフロントエンドプロジェクト〜 - 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を使っています。 特徴 基本的にデザインがシンプル カスタマイズできる項目が多い 少し特殊な用途(無限スクロール、ツリー構造のチェックボ
「世界一の野球エンジニア」を目指して - 2019年の目標と行動・スタンス - Lean Baseball
本題とは関係ありませんが、正月二日目は散歩して久々に旧図書館に行きました、あけましておめでとうございます！*1 早速ですが、今年、2019年の抱負は、 「世界一の野球エンジニア」として、チームそして自分を次のステージに進ませる 自分個人とチームの成功と幸せを両方取りに行く（二兎追って二兎得る） 以上となります！ ...と言ってしまえばそれで終わりなのですが、これだと整理がつかなさ過ぎるので、 2018年ふりかえり（前回のエントリー + 数字的なもの） 2019年の目標・行動・スタンス（仕事と仕事以外） 2019年の具体的な外部活動（決まってるモノだけ） を整理したいと思います（つまり、抱負のエントリーです）. スターティングメンバー スターティングメンバー 2018年ふりかえり（とお礼） 1年間の行動とアウトプットについて 定量的なふりかえり（主にこのブログ） 2019年の目標・行動・スタ
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
【飯テロ注意】新世代AIによるグルメサービスRettyの進化 - Qiita
Retty に投稿された数千万枚の写真から、AIが見つけた良い写真 (Photo by Yutaro.K / shu.g / Tom Adagio) この記事は Retty Advent Calendar 2017 25日目です. 昨日は @shinyorke さんの 予約導線をささえるPython製バックエンドをLuigi+pandas+Scrapyで作ったハナシ でした. みなさん、こんにちは。Retty CTO の樽石です。 昨年は、深層学習が大きく広がり始めた年ということもあり、当社で独自開発した「機械学習基盤」のアーキテクチャについて紹介させていただきました。ご好評いただき誠にありがとうございました。 今年は、深層学習の普及を背景に、 AI というキーワードが社会にも浸透。活用事例も増えていることから、AI によって「今」なにが出来、どう便利になるかを具体的に示すことが、AIを活
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
