SlideShare a Scribd company logo
JavaScript あれこれ
読み込み編

WP部 うえはら
Q.外部JSを読み込む時って
どの位置に書いてもいいの?
<html>

</html>

<script>…</script>
Q.外部JSを読み込む時って
どの位置に書いてもいいの?
 A.よろしくないです。
処理の内容に沿って、適切な位置で
読み込むのがいいよ!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウェッブサイト</title>
① headの中
</head>
 <body>
  ② bodyの中
  <div id=“lightbox“>ふわっと出る。</div>
 ③ body閉じタグの直前
 </body>
</html>
たとえばJSでできること
1. User Agent によるデバイス判別
2.カルーセル、ライトボックス .etc
3.アクセス解析(Google Aalytics)
1.UA判別を読み込む位置は
① headの中
ブラウザがhtmlの描画をするよりも先に
処理が走る。
UA判別は、表示よりも先に、デバイスの
判別の為に行うことが目的なので、ここ
に書く。
2.ライトボックスを読み込む位置は
② bodyの中
もっと正しくは、処理を当てるhtmlタグ
(Dom要素)の直前。
に、ライブラリを動作させるscriptを書
く。
※書く人の趣味にもよる
3. Google Aalyticsを読み込む位置は
③ body閉じタグの直前
htmlが全て読み込まれたあとに処理をし
たいので、ここ。
全ページ共通のものや、htmlタグ
(Dom要素)が「存在している」状態で
処理する必要があるJSを入れよう。
レンダリング
(htmlの読み込み→表示)
の順番とJSで行う処理との
関係を考えて入れるのが良い。
めざせパフォーマンス向上!

More Related Content

Viewers also liked

俺 と ご褒美 Bot
俺 と ご褒美 Bot俺 と ご褒美 Bot
俺 と ご褒美 Bot
Masayuki KaToH
 
Zealup - React
Zealup - ReactZealup - React
Zealup - React
Masahiro Yanou
 
俺とモデリング
俺とモデリング俺とモデリング
俺とモデリング
Masayuki KaToH
 
俺とホットキー
俺とホットキー俺とホットキー
俺とホットキー
Masayuki KaToH
 
Reactテストに役立つ実装の工夫
Reactテストに役立つ実装の工夫Reactテストに役立つ実装の工夫
Reactテストに役立つ実装の工夫
鉄平 土佐
 
メカニカルキーボード使い始めたら捗った話
メカニカルキーボード使い始めたら捗った話メカニカルキーボード使い始めたら捗った話
メカニカルキーボード使い始めたら捗った話
pmw1415
 
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
Masayuki KaToH
 
Go で Unit Test をやってみた
Go で Unit Test をやってみたGo で Unit Test をやってみた
Go で Unit Test をやってみた
Masahiro Yanou
 
Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分
Masayuki KaToH
 
俺と LightSail 概要と使ってみた
俺と LightSail  概要と使ってみた俺と LightSail  概要と使ってみた
俺と LightSail 概要と使ってみた
Masayuki KaToH
 
情報サイトの金持ちさんと貧乏さん
情報サイトの金持ちさんと貧乏さん情報サイトの金持ちさんと貧乏さん
情報サイトの金持ちさんと貧乏さん
Atsufumi Yoshikawa
 
超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)
超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)
超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)
Hijili Kosugi
 
Web制作・運用会社に必要なCDNサービスとは?
Web制作・運用会社に必要なCDNサービスとは?Web制作・運用会社に必要なCDNサービスとは?
Web制作・運用会社に必要なCDNサービスとは?
J-Stream Inc.
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
Hidekazu Ishikawa
 
Client-Side Deep Learning
Client-Side Deep LearningClient-Side Deep Learning
Client-Side Deep Learning
Shuichi Tsutsumi
 

Viewers also liked (15)

俺 と ご褒美 Bot
俺 と ご褒美 Bot俺 と ご褒美 Bot
俺 と ご褒美 Bot
 
Zealup - React
Zealup - ReactZealup - React
Zealup - React
 
俺とモデリング
俺とモデリング俺とモデリング
俺とモデリング
 
俺とホットキー
俺とホットキー俺とホットキー
俺とホットキー
 
Reactテストに役立つ実装の工夫
Reactテストに役立つ実装の工夫Reactテストに役立つ実装の工夫
Reactテストに役立つ実装の工夫
 
メカニカルキーボード使い始めたら捗った話
メカニカルキーボード使い始めたら捗った話メカニカルキーボード使い始めたら捗った話
メカニカルキーボード使い始めたら捗った話
 
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
 
Go で Unit Test をやってみた
Go で Unit Test をやってみたGo で Unit Test をやってみた
Go で Unit Test をやってみた
 
Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分Ha4goもくもく報告2016年11月分
Ha4goもくもく報告2016年11月分
 
俺と LightSail 概要と使ってみた
俺と LightSail  概要と使ってみた俺と LightSail  概要と使ってみた
俺と LightSail 概要と使ってみた
 
情報サイトの金持ちさんと貧乏さん
情報サイトの金持ちさんと貧乏さん情報サイトの金持ちさんと貧乏さん
情報サイトの金持ちさんと貧乏さん
 
超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)
超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)
超初心者向け・オンライン勉強会のススメ(WordCamp Tokyo 2016 LT スライド)
 
Web制作・運用会社に必要なCDNサービスとは?
Web制作・運用会社に必要なCDNサービスとは?Web制作・運用会社に必要なCDNサービスとは?
Web制作・運用会社に必要なCDNサービスとは?
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
 
Client-Side Deep Learning
Client-Side Deep LearningClient-Side Deep Learning
Client-Side Deep Learning
 

Similar to 【社内LT】JSあれこれ -読み込み編-

SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
 
Antのススメ
AntのススメAntのススメ
Antのススメ
Tatsumi Naganuma
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテストTomonori Yamada
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
西畑 一馬
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 
Java Script勉強会
Java Script勉強会Java Script勉強会
Java Script勉強会guestc8c3a73
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
ina job
 
ScaLa+Liftとか
ScaLa+LiftとかScaLa+Liftとか
ScaLa+Liftとか
youku
 
SDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 WhireSDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 Whire
Akio Katayama
 
Learning jQuery
Learning jQueryLearning jQuery
Learning jQuery
taiju higashi
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門Atsushi Tadokoro
 

Similar to 【社内LT】JSあれこれ -読み込み編- (17)

YUI
YUIYUI
YUI
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
Antのススメ
AntのススメAntのススメ
Antのススメ
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテスト
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
Java Script勉強会
Java Script勉強会Java Script勉強会
Java Script勉強会
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
ScaLa+Liftとか
ScaLa+LiftとかScaLa+Liftとか
ScaLa+Liftとか
 
SDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 WhireSDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 Whire
 
Java script4
Java script4Java script4
Java script4
 
Learning jQuery
Learning jQueryLearning jQuery
Learning jQuery
 
Java Script4
Java Script4Java Script4
Java Script4
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
 

More from Vitalify.Inc

Android5.0 新osでの変更点まとめ
Android5.0 新osでの変更点まとめAndroid5.0 新osでの変更点まとめ
Android5.0 新osでの変更点まとめ
Vitalify.Inc
 
iPhone6 6Plus
iPhone6 6PlusiPhone6 6Plus
iPhone6 6Plus
Vitalify.Inc
 
【社内LT】役立ちツール&機能3選 20140410
【社内LT】役立ちツール&機能3選 20140410【社内LT】役立ちツール&機能3選 20140410
【社内LT】役立ちツール&機能3選 20140410Vitalify.Inc
 
【社内LT】iPhoneアプリ開発のすすめ
【社内LT】iPhoneアプリ開発のすすめ【社内LT】iPhoneアプリ開発のすすめ
【社内LT】iPhoneアプリ開発のすすめVitalify.Inc
 
【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる
【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる
【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみるVitalify.Inc
 
【社内LT】ブラウザのDeveloper Toolについて
【社内LT】ブラウザのDeveloper Toolについて【社内LT】ブラウザのDeveloper Toolについて
【社内LT】ブラウザのDeveloper Toolについて
Vitalify.Inc
 
【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-
【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-
【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-Vitalify.Inc
 
【社内LT】DBとは
【社内LT】DBとは【社内LT】DBとは
【社内LT】DBとは
Vitalify.Inc
 
【社内LT】AdobeAIRでアプリ
【社内LT】AdobeAIRでアプリ【社内LT】AdobeAIRでアプリ
【社内LT】AdobeAIRでアプリVitalify.Inc
 
【社内LT】Webにおける適切な画像形式の選び方
【社内LT】Webにおける適切な画像形式の選び方【社内LT】Webにおける適切な画像形式の選び方
【社内LT】Webにおける適切な画像形式の選び方Vitalify.Inc
 
iOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのこと
iOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのことiOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのこと
iOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのこと
Vitalify.Inc
 
Mavericks新機能について
Mavericks新機能についてMavericks新機能について
Mavericks新機能について
Vitalify.Inc
 
いまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめいまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめ
Vitalify.Inc
 
2013年上期流行サービス
2013年上期流行サービス2013年上期流行サービス
2013年上期流行サービスVitalify.Inc
 
株式会社バイタリフィ事業紹介資料
株式会社バイタリフィ事業紹介資料株式会社バイタリフィ事業紹介資料
株式会社バイタリフィ事業紹介資料
Vitalify.Inc
 
ウェアラブルデバイス
ウェアラブルデバイスウェアラブルデバイス
ウェアラブルデバイス
Vitalify.Inc
 
iphone5s 5c
iphone5s 5ciphone5s 5c
iphone5s 5c
Vitalify.Inc
 
iOS7新機能&デザインまとめ
iOS7新機能&デザインまとめiOS7新機能&デザインまとめ
iOS7新機能&デザインまとめ
Vitalify.Inc
 

More from Vitalify.Inc (20)

Android5.0 新osでの変更点まとめ
Android5.0 新osでの変更点まとめAndroid5.0 新osでの変更点まとめ
Android5.0 新osでの変更点まとめ
 
iPhone6 6Plus
iPhone6 6PlusiPhone6 6Plus
iPhone6 6Plus
 
Firefox os
Firefox osFirefox os
Firefox os
 
【社内LT】役立ちツール&機能3選 20140410
【社内LT】役立ちツール&機能3選 20140410【社内LT】役立ちツール&機能3選 20140410
【社内LT】役立ちツール&機能3選 20140410
 
Linux基礎
Linux基礎Linux基礎
Linux基礎
 
【社内LT】iPhoneアプリ開発のすすめ
【社内LT】iPhoneアプリ開発のすすめ【社内LT】iPhoneアプリ開発のすすめ
【社内LT】iPhoneアプリ開発のすすめ
 
【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる
【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる
【社内LT】ドMディレクターと呼ばれた件について原因を5つくらい考えてみる
 
【社内LT】ブラウザのDeveloper Toolについて
【社内LT】ブラウザのDeveloper Toolについて【社内LT】ブラウザのDeveloper Toolについて
【社内LT】ブラウザのDeveloper Toolについて
 
【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-
【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-
【社内LT】バイタリフィ ライトニングトーク -セキュリティについて-
 
【社内LT】DBとは
【社内LT】DBとは【社内LT】DBとは
【社内LT】DBとは
 
【社内LT】AdobeAIRでアプリ
【社内LT】AdobeAIRでアプリ【社内LT】AdobeAIRでアプリ
【社内LT】AdobeAIRでアプリ
 
【社内LT】Webにおける適切な画像形式の選び方
【社内LT】Webにおける適切な画像形式の選び方【社内LT】Webにおける適切な画像形式の選び方
【社内LT】Webにおける適切な画像形式の選び方
 
iOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのこと
iOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのことiOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのこと
iOS/Androidアプリ内決済を利用しよう! 課金機能で気をつけたい5つのこと
 
Mavericks新機能について
Mavericks新機能についてMavericks新機能について
Mavericks新機能について
 
いまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめいまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめ
 
2013年上期流行サービス
2013年上期流行サービス2013年上期流行サービス
2013年上期流行サービス
 
株式会社バイタリフィ事業紹介資料
株式会社バイタリフィ事業紹介資料株式会社バイタリフィ事業紹介資料
株式会社バイタリフィ事業紹介資料
 
ウェアラブルデバイス
ウェアラブルデバイスウェアラブルデバイス
ウェアラブルデバイス
 
iphone5s 5c
iphone5s 5ciphone5s 5c
iphone5s 5c
 
iOS7新機能&デザインまとめ
iOS7新機能&デザインまとめiOS7新機能&デザインまとめ
iOS7新機能&デザインまとめ
 

【社内LT】JSあれこれ -読み込み編-