※はじめにお読みください

• 下記掲載の「ハンズオンに参加するために必要なもの」をお読み頂き事前学習や開発環境がご準備できる方が対象者となります。 必ず当日までに事前学習や開発環境のご準備をお願いいたします。
• 当日は～19:20までに渋谷ヒカリエ11階にご集合ください。(スタッフが17階までご案内いたします。)
• メンターとしてご参加頂ける方は、Messenger上のイベント運営者グルチャにご招待いたしますので、運営の木下までfacebookにてメッセージをお送りください

■イベント概要

せっかく作ったアプリのパフォーマンスが出ない！ カクカクとしか動かなくて、困った… プチフリするのをどうにかしたい

アプリをつくっていればこういう場面に出会ったことは一度や二度ではないはずです。でも、遅い原因を見つけるのはとても大変です。やり方自身をさがすのも大変です。

そこでWeb ブラウザ上で動作する JavaScript アプリケーションのパフォーマンス改善に役立つツールの使い方を学ぶイベント開催します！

ブラウザに組み込まれている開発ツールを使い倒しながら、 アプリのパフォーマンスを改善させる方法を実際に手を動かしながら学んでいただけます。

ハンズオン概要

パフォーマンスの改善をするにはは、次の 3 つ作業を繰り替えます。

1. パフォーマンスを測定する
2. 遅い原因を発見する
3. 遅い原因を修正する

この 1 と 2 はツールを使うと、とても簡単に行えます。そしてそのツールは、ブラウザに「開発ツール」として組み込まれています。この開発ツールを使い方の解説と、それを使って簡単なアプリケーションのパフォーマンスを向上させます。

どんな機能を使えばパフォーマンスが測定できるのか。 測定された結果はどんな風に読めばいいのか。 遅いコードのあたりをつけるにはどうすればいいのか。

実際に簡単な JavaScript アプリケーションのパフォーマンスチューニングを行いながら、 パフォーマンス向上の手順を紐解いてゆきます。

■当日のタイムスケジュール

■対象者

• サイトパフォーマンスを最強にしたい人
• サイトパフォーマンス改善が好きな方
• サイトパフォーマンス改善に興味を持っている方
• JSやその他のフロントまわりの技術はある程度できる人

■ハンズオンに参加するために必要なもの(※必ずご確認ください！)

このハンズオンでは、作業に Firefox Developer Edition を利用します。 またソースコードの修正も行いますので、使い慣れたエディタ、もしくは IDE をご用意ください。

事前準備

• Firefox Developer Edition のインストール
• エディタ / IDE の準備。迷った場合は Visual Studio Code を利用されると良いでしょう。

事前学習&読んでおくといい記事

次の二つについて事前に学んでいただくと、よりハンズオンが楽しめるかと思います。

• JavaScript の基本的な文法
• Canvas 要素の基本的な使い方

Canvas 要素の使い方については、MDN の canvas チュートリアルに含まれる次の記事をご参照ください。

• 1. 基本的な使い方
• 2. 図形を描く

※ 事前学習につまずいたら、Google検索や、teratailで質問を投稿してみてください。

その他

• teratailへの事前登録をお願いします。
  ※イベント後のフォローをteratail上で行います。　

■主催

@chikoski

講師・メンター

@chikosk：Mozilla Japan で開発者向けの情報発信をしています。プログラミング言語そのものが大好きです。

■サポート・会場提供

Mozilla Japan
エンジニア特化型Q&Aサイトteratail

■会場への入場に関して

※~19:20までに渋谷ヒカリエ11階にお越しください。スタッフが17階までご案内いたします。
※もし19:30のイベント開始までに間に合わないようでしたら、
　「teratail開発チーム：木下」までfacebookにてメッセージをお送りください。
※勉強会の進行状況によってはfacebookでのメッセージの返答に少しお時間をいただく場合がございます。

■お知らせ

※講演内容やタイムスケジュールは変更となる可能性がございます。
※当日のイベント内容は後日任意の媒体にて公開させて頂くことがあります。
※イベントは、止むを得ず中止させて頂く場合がございます。
　その際は、本サイトからのメッセージよりご連絡させて頂きますのでご確認をお願い致します。