ヤフーで全社を横断して行ってきたWebパフォーマンス改善の取り組みを紹介します。以下の表の数値は、ヤフーのWebサービスと競合のWebサービスのパフォーマンス速度を比較したとき、ヤフーのWebサービスのほうが高速であるサービスの割合を示しています。プロジェクトの実施前は62％でしたが、実施後は83％まで改善することに成功しています。 ■ヤフーのサービスと、その競合に当たるサービスをベンチマークとして比較したとき、ヤフーのほうが速い割合 実施前 実施後 下図のサーチコンソール画面を見てください。Yahoo!映画におけるWebパフォーマンスが良好であることを示す「緑色」が大幅に増えています。Yahoo!知恵袋に至っては、改善が必要な「黄色」の割合をほぼ0まで減少させることができています。 このような結果を出すことができたプロジェクトで実践してきた内容を、3つに分けて紹介します。 実施した背景

2023年1月20日 Harajuku.ts Meetup 〜 Recoilの事例集めました〜 にて発表した資料です。

こんにちは。サイバーエージェント AI 事業本部 Dynalyst にて、ソフトウェアエンジニアをしている豊田（@helloyuki_）です。また、Rust 領域における Next Experts も務めています。 先日、CA BASE NEXT という CyberAgent が開催する20代が中心のカンファレンス[^1]に、私も一応20代ということで登壇させていただきました。 内容は Web アプリケーション開発を Rust で行った体験談を語るというものでした。実際に2018年〜2020年頃に Rust をとあるチームのアプリケーションに導入し、引き継ぎのために何をしたかという内容をお話させていただきました。 セッション自体は25分しかなく、またコード例をスライドからかなり削るなど、CG スタジオ仕様への対応が必要でした。というわけで、十分に伝えたいことを盛り込めたわけではありませんで

はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な

IT企業が社内の新人エンジニアに向けた研修資料や動画を無償公開し、話題になっている。学べる内容はIT業界の文化からゲームエンジン「Unity」を使ったゲーム開発までさまざまで、中には150ページ超のスライドや5時間超の動画もある。 ネット上では「初心者（エンジニア）の指針になる」「IT基礎知識の一通りのことが身につく」「動画があって助かる」などと評判だ。改めて公開内容と目的をまとめた。 サイボウズ、新人ITエンジニア向けに「IT業界文化」など サイボウズが7月20日に公式ブログで、4月から6月にかけて行った研修の資料を公開した。7月30日時点でブログへの「はてなブックマーク」（以下、はてブ）は約1950件、Facebookの「いいね」は約590件付いている。同社は“駆け出しエンジニア”向けとしている。 （関連記事：サイボウズの“駆け出しエンジニア”向け研修資料が話題　Webアプリ開発やIT

2019年5月24日(金)の発表資料をベースに解説等を加えたバージョンです。 Docker Meetup Kansai #3 https://dockerkansai.connpass.com/event/129089/Read less

はじめに 本記事ではCSSでおしゃれなパターンが作れる<css-doodle>をご紹介します。背景画像などにはっきりとしたおしゃれなパターンを入れたい時などに役立ちます！ この記事では<css-doodle>でどんなことができるのか、実際に使用する場合はどういう設定やセットアップが必要なのかなどをまるっとご紹介します。 css-doodleとは <css-doodle>とはWebデザインで様々なパターンを作るのに役立つウェブコンポーネントです。 CSS gridやshadow DOMなどの技術を使っています。 ※<css-doodle>の対応ブラウザに関しては後々説明します。 実際に使用すると、ウェブコンポーネントがCSSグリッドでルールに沿ったdivを作ります。使用するユーザーはそれぞれのグリッドに好きなパターンを入れこみ、独自のパターンを作り出すことができます！ ちょっと難しい言葉を並

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

コンピュータエンターテインメント協会（CESA）は、8月22日～24日の期間、パシフィコ横浜（神奈川県横浜市）にて、国内最大のゲーム開発者向けカンファレンス「コンピュータ・エンターテインメント・デベロッパーズ・カンファレンス 2018」（CEDEC 2018）を開催した。 本稿では、8月23日に実施された講演「開発者向けの、簡単特許調査方法」についてのレポートをお届けしていく。 本セッションには、バンダイナムコエンターテインメント 知的財産部 プロフェッショナルの恩田明生氏が登壇。専門家以外の人でも簡単に特許調査ができる方法として、難解な特許文章の読み方や探し方についての話を展開した。 ■そもそも特許係争は何故、起きるのか ▲バンダイナムコエンターテインメント 知的財産部 プロフェッショナルの恩田明生氏。 本講演を始める前に恩田氏は、ここで紹介するのはあくまでも「開発者の目線で簡単に行える

Netflixの企業文化や社員の行動規範を定めたカルチャーガイドが公開されており、FacebookのCOOのシェリル・サンドバーグが「シリコンバレーから生まれた最高の文書」と評価しています。 そのカルチャーガイドはもともと2009年にスライドとして公開され、最新版はNetflixの採用ページ上に掲載されています。今回は許可を得て翻訳することにしました。 Netflix Culture (原文) (目次) 本物の価値観 判断力 コミュニケーション 好奇心 勇気 情熱 無私無欲 イノベーション 一体性 誠実 影響力 ドリームチーム 自由と責任 情報に通じたキャプテン 統制ではなく前後関係 高度に整列し、緩く結合する 卓越性を探し求める まとめ 最後に エンターテインメントは、友情のように、人間が基本的に必要としているものです。エンターテインメントは私たちの感じ方を変え、私たちに共通点をもたらし

iOS Clean Architecture の説明と、実際にMoneyForwardでiOS Clean Architectureを導入してみた話をします。 Sample code: https://github.com/koutalou/ios-cleanarchitecture

＜この記事は「Money Forward Advent Calendar 2015」の22日目の記事です＞ この記事は、iOS Clean Architectureと実際にコードへ適用した内容について紹介します。 コードについては、改善の余地があるため随時修正していくと思います。 → github: https://github.com/koutalou/iOS-CleanArchitecture iOS開発においてよくある問題点 「ビジネスロジックはModelに置くべき」と言うが、開発者によって理解や意見がバラバラで統一的な実装ができない 度重なる仕様変更や複雑な仕様に対応するためにViewControllerや特定のModelが肥大化し、ビジネスロジックの本質を見失う MVC,MVP,MVVMだけで考えると、どこかのレイヤが複数の責務を持つことになり依存度の高い複雑なコードが生まれてし

WebSocket及びWebRTCの技術紹介資料です。 WebSocket : 概要、標準化状況、HTTPとの通信量比較、PUSH方式の比較、ブラウザの対応状況 WebRTC : 概要、標準化状況、通信（PeerConnection）確立までの流れ、利用事例、ブラウザの対応状況 （NTTアドバンステクノロジ（NTT-AT））Read less

実はけっこう前からWebSocketの詳しい仕組みについて気になってて、遂に一念発起して調べてみた。何かとても良さげっぽい。 そもそもWebSocketとは Webにおいて双方向通信を低コストで行う為の仕組み。インタラクティブなWebアプリケーションではサーバから任意のタイミングでクライアントに情報の送信とかしたい事があって、例えばFacebookのチャットアプリみたいに多数のクライアントが一つのページにアクセスしてて誰かがメッセージを投稿するとそれをその他のユーザーに通知したい場合があって、そういった時に双方向通信の必要性が出てくる。 元々はWebにおいてはHTTPしか通信の選択肢が無くてHTTPのロングポーリング使って無理矢理双方向通信実現したりしてたんだけど、流石に無駄が多すぎるし辛いよねって事でWebSocketというプロトコルが作られた。 WebSocketにおいては、TCP上で

はじめに Firebaseを勉強したので、簡単なToDoリストを作ってみます。 方針 ・設計手法は、クリーンアーキテクチャを採用 ・データの管理は、FirebaseのRealtime Databaseを採用 前提知識 ・Firebaseの導入方法 ・Firebaseによる認証方法 ・FirebaseによるRealtime Databaseの使い方 ゴール ユーザごとにToDoリストを管理するアプリを作ります。 画面構成は、ログイン画面、ToDo一覧画面と、ToDo登録画面です。 （会員登録機能、ログアウト機能については、割愛します。） （１）ログイン画面 ・メールアドレス、パスワードを入力し、ログインボタンを押下すると、ToDo一覧画面へ遷移する （２）ToDo一覧画面 ・ToDo一覧を表示する ・該当行をタップするとToDoを完了済みとする（取り消し線で消す） ・プラスボタンを押下すると