Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Javascript基礎勉強会

1.702 Aufrufe

Veröffentlicht am

下記勉強会の発表資料です。
---------------------------------------------------------
【東京】【女性/女性同伴男性限定】JavaScript基礎勉強会~クリスマスカードを作ろう~ #javajo - Java女子部 | Doorkeeper
https://javajo.doorkeeper.jp/events/35656
---------------------------------------------------------

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Javascript基礎勉強会

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

×