SlideShare a Scribd company logo
1 of 22
Download to read offline
JavaScript基礎勉強会
~クリスマスカードを作ろう~
株式会社オープンストリーム
木村茉由
自己紹介
 木村茉由(きむらまゆ)
 株式会社オープンストリーム所属
 フロントエンドアーキテクト
 @kimura_m_29
ハンズオンセットアップ
1. ハンズオン用プロジェクトをcloneする
2. 依存ライブラリをダウンロード
3. アプリ起動
1. Mac
2. Win
$ git clone
https://github.com/kimura-m-29/xmascard_hands-on.git
$ cd xmascard_hands-on/
$ npm install
$ npm start
$ npm run start:win
JavaScript基礎
「そもそもJavaScriptとは」から、基本的な文法の紹介まで
JavaScriptとは
 1995年にNetscape社のブレンダンアイク氏(現
Brave Software社CEO)によって開発された言語
 『Java』Scriptの名称は、当時注目株だったJavaにあ
やかったもの
 Netscape2.0に実装され、1996年にはIE3.0に実装さ
れる
 現在では、ECMAインターナショナルによって
ECMAScriptとして標準化されている
 最新の仕様であるES6(ES2015)が2015年6月に公開さ
れた
 今回の勉強会では、基礎ということでES5をお勉強します
Javaとの違い(1/2)
 ブラウザ上で動作する
 最近はサーバ上(後述)でも動作する
 スクリプト言語
 コンパイル処理を行わずに、そのまま実行する
動的型付け
 プログラム実行時に型が決まる
Javaとの違い(2/2)
 基本シングルスレッド
 重い処理を行うと、画面が固まる
 WebWorkersを使うことで並行処理を行うことができる(が、
画面のUIに対する処理はメインスレッドでしか行えない)
 プロトタイプベースのオブジェクト指向
 インスタンス生成、継承の仕方が大きく異なる
 今回は触れません
 クロージャ
 関数を返す関数を作り、外側の関数スコープの状態を含んだ関
数オブジェクトを生成する手法
 今回は触れません
関数
 Javaと異なり、多重定義ができない
 引数に型を指定できない
 仮引数と呼び出し時の引数の数が一致しなくても呼び出せる
 関数をオブジェクトとして扱うことができる(第1級関数)
 関数を引数にとる関数を扱うことができる(高階関数)
function 関数A(仮引数名1[,仮引数名2,…]) {
// 処理
}
// 呼び出す
関数A(引数1);
// こちらも同じ関数が呼ばれる
関数A(引数1,引数2);
関数
 クリスマスカードと一緒に起動した、Developer Tools
のConsole上で以下を実行してください
function greet (name) {
alert(“こんにちは、 “ + name + “さん!”);
}
// 呼び出す
greet(“サンタ”);
// こちらも同じ関数が呼ばれる
greet(“サンタ”, “トナカイ”);
// 文字列じゃなくても呼び出せる
greet(2015);
関数
//関数をオブジェクトとして扱うことができる(第1級関数)
// -> 変数に関数を代入できる
var a = function () {
console.log(“call a!”);
};
// 呼び出す
a(); // -> “call a!”
// 関数を引数にとる関数を扱うことができる(高階関数)
function b(func){
// 引数で渡された関数を実行する
func();
}
b(a); // -> “call a!”
変数
 関数内でvarを付けるとローカル変数、付けないとグローバル
変数になる
 ブラウザ上で実行する場合、グローバル変数はWindowオブジェクト
に属する
 「window.グローバル変数」で参照できる
 varを付けて宣言しても、それが関数の外であればグローバル変数に
なる
 ローカル変数のスコープは関数。ブロックスコープはない
 関数内のローカル変数は、どこで宣言していても、内部の処理では関
数の先頭で宣言されたように扱われる(巻き上げ)
 ただし、変数への値の初期化は元の宣言箇所で行われる
var 変数名 = 値;
変数(グローバル・ローカル)
function a () {
var localA = “abc”;
globalB = “def”;
}
var globalC = “ghi”;
// a関数を呼び出す(=localA、globalBが宣言される)
a();
console.log(localA); // -> undefined
console.log(globalB); // -> “def”
console.log(globalC); // -> “ghi”
console.log(window.globalB); // -> “def”
変数(巻き上げ)
var a = “global a”;
function b(){
console.log(a);
var a = “local a”;
}
b(); // -> “global a”と思いきや、undefined
// 内部的には↓
// function b(){
// // グローバル変数aがローカル変数aで上書きされる
// var a;
// console.log(a); // ローカル変数aは、まだ初期化されていない
// a = “local a”;
// }
if文・for文・switch文
 基本的にはJavaの文法と一緒
 ブロックスコープがないので、ローカル変数の名前は関数内で
一意になるようにする
for (var i = 0; i < 10; i++) {
// 処理
}
console.log(i); // -> 10
型変換
var a = 0;
a = “Hello”; // -> エラーにならない
var b = 1;
b += “です”;
console.log(b); // -> 1です
var c = [1, 2, 3];
// 条件を評価する際に、boolean型に変換される
if(c.length){
// 処理
}
参考ページ
 JavaScript ガイド - JavaScript | MDN
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide
クリスマスカード
ハンズオン用PJの説明
やっと本題!
ハンズオン用PJで使っているツール
 Node(node.js)
 https://nodejs.org/en/
 JavaScript実行環境
 「サーバサイドJavaScript」で有名
 JavaScriptはサーバ上でも動く、というのはこのこと
 同じJavaScriptでも、ブラウザ上で動くJavaScriptとは別の
方向で進化している
 フロントエンド開発ではあくまで実行環境として使用する
 npm
 Nodeに同梱されているパッケージ管理ツール
 インストール
 パッケージの公開
 タスク実行
 Javaのmavenにちょっと近いかも
 pom.xmlにあたるのがpackage.json
ハンズオン用PJで使っているツール
 Electron
 http://electron.atom.io/
 HTML/CSS/JavaScriptを使って、デスクトップアプリを開発
することができるツール
 AtomやVisual Studio CodeやKobito、Slackもこれで作られている
ハンズオン用PJが動いている仕組み
実際にコードをお見せしながら、説明します…。
使用しているライブラリ
 ページめくり
 BookBlock
 https://github.com/codrops/BookBlock
 アイコンめくり
 jQuery Flip
 https://github.com/nnattawat/flip
 モーダル表示
 Boxer
 https://github.com/FormstoneClassic/Boxer
ハンズオンの進め方
<初級編>
 プレゼントの内容をカスタマイズしてみる
<中級編>
 プレゼントを好きな日付に配置してみる
<上級編>
 どの日付をめくったかを保存しておく
 新しいページを追加し、1から作ってみる

More Related Content

What's hot

What's hot (9)

BIOSからUEFI
BIOSからUEFIBIOSからUEFI
BIOSからUEFI
 
Memtest86をかけてみた話
Memtest86をかけてみた話Memtest86をかけてみた話
Memtest86をかけてみた話
 
Rancher meetuptokyo #4 Vagrant でつくる Rancher HA構成
Rancher meetuptokyo #4 Vagrant でつくる Rancher HA構成Rancher meetuptokyo #4 Vagrant でつくる Rancher HA構成
Rancher meetuptokyo #4 Vagrant でつくる Rancher HA構成
 
Node.js×mongo dbで3年間サービス運用してみた話
Node.js×mongo dbで3年間サービス運用してみた話Node.js×mongo dbで3年間サービス運用してみた話
Node.js×mongo dbで3年間サービス運用してみた話
 
JS開発環境を晒す。
JS開発環境を晒す。JS開発環境を晒す。
JS開発環境を晒す。
 
Nodeについて
NodeについてNodeについて
Nodeについて
 
Smalltalkお題「実行中の全オブジェクトを得るには?」
Smalltalkお題「実行中の全オブジェクトを得るには?」Smalltalkお題「実行中の全オブジェクトを得るには?」
Smalltalkお題「実行中の全オブジェクトを得るには?」
 
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
 
OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -
 

Viewers also liked

Wagby R7 Specification
Wagby R7 SpecificationWagby R7 Specification
Wagby R7 Specification
Yoshinori Nie
 
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Kensaku Komatsu
 

Viewers also liked (20)

クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
 
日本企業1400社が採用しているbiz browser
日本企業1400社が採用しているbiz browser日本企業1400社が採用しているbiz browser
日本企業1400社が採用しているbiz browser
 
JavaScriptクイックスタート
JavaScriptクイックスタートJavaScriptクイックスタート
JavaScriptクイックスタート
 
新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた
 
覚醒!JavaScript
覚醒!JavaScript覚醒!JavaScript
覚醒!JavaScript
 
JavaOne報告会 ライトニングトーク
JavaOne報告会 ライトニングトークJavaOne報告会 ライトニングトーク
JavaOne報告会 ライトニングトーク
 
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
 
Wagby R7 Specification
Wagby R7 SpecificationWagby R7 Specification
Wagby R7 Specification
 
これからはじめるための JavaScript 開発環境
これからはじめるための JavaScript 開発環境これからはじめるための JavaScript 開発環境
これからはじめるための JavaScript 開発環境
 
JavaScript基礎勉強会
JavaScript基礎勉強会JavaScript基礎勉強会
JavaScript基礎勉強会
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
Web × プログラミング ~JavaScript編~(2017/2/16)
Web × プログラミング ~JavaScript編~(2017/2/16)Web × プログラミング ~JavaScript編~(2017/2/16)
Web × プログラミング ~JavaScript編~(2017/2/16)
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章
【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章
【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章
 
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
 
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
JS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりましたJS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりました
 
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
 

Recently uploaded

Recently uploaded (9)

情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 

Javascript基礎勉強会