Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ゼロからはじめるjavascript基礎のき
Search
井上拓
May 13, 2017
Technology
0
190
ゼロからはじめるjavascript基礎のき
広島フロントエンド勉強会 Vol.9のスライド
井上拓
May 13, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
720
Laravel Mixではじめるwebpack
takanashi66
0
480
gulpやめてLaravel Mixはじめた話
takanashi66
1
210
LT-WordPressの開発をプラグインで管理する
takanashi66
0
340
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
200
CSS Grid Layout Module
takanashi66
0
110
webサイトのiPhone X 対応
takanashi66
0
1.6k
web制作におけるGitフロー
takanashi66
0
580
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
Other Decks in Technology
See All in Technology
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
140
Model Mondays S2E02: Model Context Protocol
nitya
0
190
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
340
A2Aのクライアントを自作する
rynsuke
1
150
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
1
290
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
330
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
170
原則から考える保守しやすいComposable関数設計
moriatsushi
3
500
Welcome to the LLM Club
koic
0
130
Agentic Workflowという選択肢を考える
tkikuchi1002
1
390
In Praise of "Normal" Engineers (LDX3)
charity
3
1.2k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
210
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Adopting Sorbet at Scale
ufuk
77
9.4k
Become a Pro
speakerdeck
PRO
28
5.4k
GitHub's CSS Performance
jonrohan
1031
460k
Facilitating Awesome Meetings
lara
54
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Docker and Python
trallard
44
3.4k
Transcript
ౡϑϩϯτΤϯυษڧձ Vol.9 θϩ͔Β͡ΊΔJavaScript جૅͷ͖ CodeCode Ҫ্
JavaScriptͰԿ͕Ͱ͖Δͷ͔Δ ඪ
ࠓճͷ༰ॳ৺ऀ͚Ͱ͢ɻ JavaScriptͷશͯΛཏ͍ͯ͠ ΔΘ͚Ͱɺ͋Γ·ͤΜɻ ඪ
࣍ • JavaScriptͱ • JavaScriptΛॻ͘४උ • JavaScriptͰHello World • DOMૢ࡞
• ࿅श • ·ͱΊ
JavaScriptͱ
JavaScriptͱ • 1995ʹωοτεέʔϓ͕ࣾ։ൃ • ΫϩεϓϥοτϑΥʔϜͰಈ࡞͢ΔɺΦϒδΣΫ τࢦͷεΫϦϓτݴޠ • ࣌Java͕ਓؾͩͬͨͷͰͦΕʹ͔͋ͬͯ JavaScriptͱ໋໊ JavaͱJavaScriptผʂ
JavaScriptͱ • IE3ʹ࣮͞Εരൃతʹීٴ ͔͠͠ɺϒϥβ͝ͱʹݴޠ༷ͷಠ֦ࣗு • ECMAScriptͱͯ͠ඪ४Խ ES2015
JavaScriptͷछྨ • ΫϥΠΞϯταΠυJavaScript ϒϥβͱͦͷυΩϡϝϯτΦϒδΣΫτϞσϧ (DOM) Λ੍ޚ͢ΔΦϒδΣΫτΛఏڙ͢Δ • αʔόʔαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτΛఏڙ͢Δ
DEMO
σϞ https://goo.gl/ODJqaN https://goo.gl/Vt1edI Github https://goo.gl/cJPWlW εϥΠυ
JavaScriptΛॻ͘४උ
CodePen
CodePen http://codepen.io/ ᶃ ᶄ ᶅ ᶆ
//HTMLʹॻ͘ <script> //͜͜ʹίʔυΛॻ͘ </script> //֎෦͔ΒಡΈࠐΉ <script src=“PATH/TO/JS“></script> <script></script>
document.addEventListener("DOMContentLoaded", function(){ //͜͜ʹίʔυΛॻ͘ }, false); DOMͷඳը͕ऴΘ͔ͬͯΒ࣮ߦ
Hello World
alert(“Hello World”); alert() • ϒϥβ͕ͭϙοϓΞοϓػೳ • ଟ༻ݫېʂ
console.log(“Hello World”); console.log() • JavaScriptͷσόοάػೳͷͻͱͭ • ։ൃπʔϧͷίϯιʔϧʹදࣔ͞ΕΔ • ফ͠Εʹҙ •
IE9Ͱόά͕͋Δ
Πϕϯτ
Πϕϯτ • ΠϕϯτɺϚεϘλϯΛΫϦοΫͨ͠ɺ ϖʔδ͕ಡΈࠐ·ΕͨͳͲͷಈ࡞͕ىͬͨ͜ ࣌ʹൃੜ + ΫϦοΫ + ϚεΦʔόʔ
+ ϩʔυ
let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ alert('Hello World'); }); <button
id=“btn">Hello</button> HTML JavaScript Πϕϯτ
let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ alert('Hello World'); }); JavaScript
Πϕϯτ
ม • ࠶ར༻Ͱ͖ΔΑ͏ʹ໊લΛ͚ͭͨശ • มΛ͏ʹએݴ͕ඞཁ var let • ϓϩάϥϜͰͷʮ=ʯ͍͠Ͱͳ͘ɺೖ let
btn = document.getElementById('btn');
DOMͱ • HTMLυΩϡϝϯτΛπϦʔߏͱͯ͠දݱͨ͠ͷ • ѻ͍͍ͨཁૉΛಛఆ͠ૢ࡞Ͱ͖ΔΑ͏ʹ͢ΔΈ Document Object Model
ؔ • ಉ͡ॲཧΛ·ͱΊͯఆٛ͠ɺԿ͍ճ͠ ͕Ͱ͖ΔΑ͏ʹͨ͠ͷ btn.addEventListener('click', function(){ alert('Hello World'); });
let btn = document.getElementById('btn'); let btn2 = document.getElementById('btn2'); function onBtn(elm){
elm.addEventListener('click', function(){ alert('Hello World'); }); } onBtn(btn); onBtn(btn2); <button id=“btn”>Hello</button> <button id=“btn2">Hello</button> HTML JavaScript ؔ Ϙλϯ͕૿͑ͨ߹ function ໊ؔ(ԾҾ){ ॲཧ } ໊ؔ(Ҿ);
Ϙλϯ͕100ݸʹͳͬͯ େৎʂ
let btn = document.getElementsByClassName('btn'); for(let i = 0; i <
btn.length; i++) { btn[i].addEventListener('click', function(){ alert('Hello World'); }); } <button class=“btn">Hello</button> <button class=“btn">Hello</button> HTML JavaScript Ϋϥε
Ϋϥε • Ϋϥεͷऔಘ • btnͷத • ෳ͋Δ͔Βॱ൪ʹॲཧ͠ͳ͍ͱ͍͚ͳ͍ let btn =
document.getElementsByClassName('btn'); <button class=“btn”>Hello</button> <button class=“btn">Hello</button>
܁Γฦ͠ • ࢦఆͨ͠ճɺಉ͡ॲཧΛ܁Γฦ͢ • forจ for(let i = 1; i
<= 10; i++){ console.log(i); } 10ճ܁Γฦ͢ 1 2 3 4 5 6 7 8 9 10 ݁Ռ
ԋࢉࢠ • < > <= >= • ΠϯΫϦϝϯτ
ऴΘͬͨΒiΛ+1͢Δ i = i + 1; for(let i = 0; i < btn.length; i++) for(let i = 0; i < btn.length; i++)
length • จࣈྻͷ͞(ݸ)Λऔಘ͢ΔϓϩύςΟ • ࠓճͷ߹2ݸ for(let i = 0; i
< btn.length; i++) <button class=“btn”>Hello</button> <button class=“btn">Hello</button> for(let i = 0; i < 2; i++)
ྻ • ࿈൪ׂ͕ΓৼΒΕͨมͷू߹ btn[i].addEventListener('click', function(){ ࣮มʮbtnʯͷதྻ ఴ͑ࣈ 0 <button
class=“btn”>Hello</button> 1 <button class=“btn”>Hello</button> දΈ͍ͨʹͳͬͯΔ(ఴ͑ࣈ0͔Βελʔτ)
let btn = document.getElementsByClassName('btn'); for(let i = 0; i <
btn.length; i++) { console.log(i + “൪ͷɿ”+ btn[i]); } <button class=“btn">Hello1</button> <button class=“btn">Hello2</button> HTML JavaScript ྻ 0൪ͷɿ<button class=“btn”>Hello1</button> 1൪ͷɿ<button class=“btn">Hello2</button> ݁Ռ
ཁૉͷऔಘ • HTMLͷཁૉΛऔಘ let btn = document.getElementById('btn'); let btn =
document.getElementsByClassName('btn'); let btn = document.getElementsByTagName('button'); let btn = document.querySelectorAll(‘.button');
݅ذ
let btn = document.getElementById("btn"); btn.addEventListener('click', function(){ let cnf = confirm("ࠓ·ͰώϩϑϩʹࢀՃͨ͜͠ͱ͋Γ·͔͢ʁ\nOK:
YES\nΩϟϯηϧ: NO"); if(cnf == true){ alert("ຖ͋Γ͕ͱ͏͍͟͝·͢ʂ"); }else{ alert("ࠓޙͱΑΖ͓͘͠ئ͍͠·͢ʂ"); } }); <button id=“btn">࣭</button> HTML JavaScript ࣭
݅ذ • ݅ʹΑ࣮ͬͯߦ͢ΔॲཧΛม͑Δ • ifจ if(cnf == true){ alert("ຖ͋Γ͕ͱ͏͍͟͝·͢ʂ"); }else{
alert("ࠓޙͱΑΖ͓͘͠ئ͍͠·͢ʂ"); } true or false
ԋࢉࢠ • == let x = 1; if(x == 1){
//͜͜ͷॲཧ͕࣮ߦ͞ΕΔ } x͕1ͷͱ͖(true)
else x͕0ͷͱ͖(false) let x = 0; if(x == 1){ //͜͜ͷॲཧ࣮ߦ͞Εͳ͍
}else{ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }
͞Βʹ݅ΛՃ͢Δ x͕2ͷͱ͖(true) let x = 2; if(x == 1){ //͜͜ͷॲཧ࣮ߦ͞Εͳ͍
}else if(x == 2){ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }else{ //͜͜ͷॲཧ࣮ߦ͞Εͳ͍ }
࿅श
͓Έ͘͡ ʮ͓Έ͘͡ʯϘλϯΛԡ͢ͱେ٢ɾத٢ɾখ ٢ɾڟɾେڟͷ5ͭͷ݁Ռ͕ϥϯμϜʹฦͬͯ͘ ΔΑ͏ͳJavaScriptΛ࡞Δ let rand = Math.floor(Math.random() * 5)
+ 1; let rand = Math.floor(Math.random() * 5) + 1;
͓Έ͘͡ɹώϯτ //1ʙ5·ͰΛϥϯμϜʹฦ͢(ٖࣅཚ) let rand = Math.floor(Math.random() * 5) + 1;
document.getElementById() //idͷऔಘ addEventListener('click', function(){} //ΫϦοΫ͞Εͨ࣌ͷΠϕϯτ if() //݅ذ alert() //ग़ྗ <button id=“btn">͓Έ͘͡</button> HTML JavaScript
͓Έ͘͡ɹ͑ //#btnΛऔಘ let btn = document.getElementById("btn"); btn.addEventListener('click', function(){ //1͔Β5·ͰͷཚΛੜ let
rand = Math.floor(Math.random() * 5) + 1; if(rand == 1){ alert("େ٢"); }else if(rand == 2){ alert("த٢"); }else if(rand == 3){ alert("খ٢"); }else if(rand == 4){ alert("ڟ"); }else if(rand == 5){ alert("େڟ"); }else{ alert("Τϥʔ"); } }); JavaScript
·ͱΊ
·ͱΊ • ϒϥβͰಈ͘།Ұͷϓϩάϥϛϯάݴޠ • ECMAScriptͱͯ͠ɺඪ४Խ • DOMΛͬͯɺHTMLͷ༰Λૢ࡞Ͱ͖Δ • Ϣʔβͷૢ࡞Λݩʹɺ࣮ߦͰ͖Δ
Ͱɺ͜Ε ΄ΜͷҰ෦
Ωʔϫʔυ • Ξχϝʔγϣϯ • Ajax • ΦϒδΣΫτࢦ • this •
ϥΠϒϥϦɾϑϨʔϜϫʔΫ
ϥΠϒϥϦɾϑϨʔϜϫʔΫ
ϥΠϒϥϦɾϑϨʔϜϫʔΫ • jQuery • React • AngularJS • Vue.js •
Backbone.js • Knockout.js
ϥΠϒϥϦɾϑϨʔϜϫʔΫͰɺ JavaScriptɺ͞ΒʹศརʹͳΔ
ͦͯ͠ɺJavaScript webΞϓϦʹ͔͍ͬͯΔ
͞ΒʹֶͿͨΊʹ • MDN https://developer.mozilla.org/ja/docs/Web/ JavaScript