１日で学ぶJavaScriptハンズオン

自己紹介

Teymmt (Teruhisa Yamamoto)
フリーランスエンジニア
Node.jsでwebアプリケーション構築

Ebisu.JSとは？

背景
GeekOffice恵比寿（会員制コミュニティ用シェアオフィス）にて開催される、JavaScript関連の勉強会や講座にプログラミング未経験者・JavaScript初級者が一定数おり、JavaScriptを基礎から学ぶ場面があった
目的
プログラミング未経験者からでも、JavaScriptによるwebアプリケーション構築技術を習得する場を提供
検討中の講座リスト
- Javascript基礎
- Node.js/Express基礎
- React基礎
- Redux基礎

JavaScriptでwebアプリケーション？

Node.js(サーバーサイドJavaScript)の登場

従来、PHP, Java, C, C#, Ruby, Pythonなどでサーバー側を書き、フロント側でJavaScriptを駆使してページ（HTML）を操作していたが、Node.jsによってサーバー・フロントの言語を統一して開発が可能になった(学習コストの低下)

JavaScript界隈の発展、業界への浸透

フレームワーク、パッケージ

各種企業のPaaSにおけるサポート

ハンズオン内容

※プログラミング初心者向けの構成内容となっています。わかる方はどんどん進んで大丈夫です。

※本内容はcodecademy(https://www.codecademy.com)を参考に作られています。

教材：（FacebookのEbisu.JSグループに参加してDL）

流れ

教材の導入(txt)を読み、練習問題(js)を解く
分からないことがあれば随時聞く

※進行管理のためにスライドで説明しつつ進めます。

環境設定

jsbinの利用
http://jsbin.com/
または、Node.jsの利用
設定 ( https://nodejs.org/en/download )
- Windows PC
  ブログ：Node.jsのWindowsへのインストールとnpmの使い方（検索「nodejs インストール」）
- Mac PC
  node.jsをインストーラーを使ってインストール【Mac編】（動画検索「nodejs インストール mac」）
- コンソールで「node ファイル名」と入力し実行
  [~/ebisujs/basic]$ node lesson_01/lesson_01.js

jsbinとは

ブラウザのアドレスバーに
「http://jsbin.com/」(jsbin.comのみでも可)

HTMLとOutputは非表示にする

ここにJavaScriptを記述

Runで実行、Clearで実行履歴を消去

エディタを使って作業効率の向上

Lesson 01 : 出力

表示には、console.log();を使用します。()（丸括弧）の中に表示したい文字や文字列を書きます。

表示したい文字を''(シングルクォーテーション), または""(ダブルコーテーション)で囲います。

console.log('恵比寿');

文字の長さを"取得"するには、'Hello World!!!'.length のように書きます。

Exercise :

あなたの名前と名前の長さを表示(出力)してみましょう

Lesson 02 : 計算

四則演算、剰余、べき乗を、
+, -, *, /, %, **を使って表現できます。

例）console.log(2+3);

Exercise :

様々な計算結果を出力させてみましょう

Lesson 03 : Boolean(Bool)型とは？

プログラミングにおいて、型というものが重要になってきます。
Lesson01, 02では、文字列(String型)と数値(Number型)を学習しました。
Boolean(bool型)とは、true(真), false(偽)の2つを表現する型になります。

例)
console.log(true);
console.log(false);

console.log( 5 < 10 ); -> true

Exercise :

比較演算子、論理演算子、三項演算子の体験

Lesson 04 : 条件分岐

条件によって処理を分岐させることで表現の幅が広がります。
どのプログラミング言語にも条件分岐はあり、通常if文(if/else文)と呼ばれます。

Exercise :

if文を完成させて正しく動作させましょう

if() {
  真の場合に行わせたい処理
}
else if() {
  上記の条件式が偽の場合、
     かつ、ここの条件式が真で行わせたい処理
}
else {
  上記すべての条件式が偽の場合に行わせたい処理
}

例)
if(true) {
  // 処理される
}
if(4 < 5) {
  // 処理される
}
if('5' === 5) {
  // 処理されない
}

Lesson 05 : 変数とは？

プログラミングでは、値の格納場所を任意に定義することができ、それを「変数」と呼びます。
JavaScriptでは、

var hensuu = '変数';　(hensuu = '変数';でも可)

のように記述します。
変数には、プログラミングをより便利にするためにいくつかの種類が用意されています。

例）
var number_val = -432.32; // 数値
var string_val = '文字列\nです。'; //文字列
var bool_val = false; //boolean(bool型)

Exercise :

変数を宣言したり変更したりしてみましょう

Lesson 06 : 条件分岐と変数 (Exercise)

これまでの内容を駆使して、自分の年令を計算してみましょう。
以下の空白部分を埋めて正しく動作させてみましょう。
注意：簡易的なものを想定しています。現在の年と誕生年を引き算し、現在月が誕生月以上か未満かで判定させましょう。

var thisYear = 2016;
var thisMonth = 5;
  
var myBirthdayYear = 1988;
var myBirthdayMonth = 2;
  
var myAge;
  
if() {// 現在の月と誕生月を比較
 myAge = thisYear - myBirthdayYear;
}
else {
 myAge = ;//上の条件分岐以外の場合に対応できるように
}
  
console.log('私の年齢は、' + myAge + '歳です。');

Lesson 07 : 関数とは？

プログラミングを行う上で、関数は非常に強力な武器になります。
関数は、決められた動作をしてくれる便利なものであり、欠かせないものです。
関数として計算式などを定義し、与えられた値から結果を返してくれたら便利ではないですか？

function function名(引数, 引数,,,,){
何かの処理;
}

function名は自由に定義できます。引数は0個以上を定義できます
引数とは、関数実行時に与える変数です。実行させるにはfunction名();とします。

Exercise :

3つのjsファイルに沿って関数を体験しましょう。

function sample(text) {
    console.log(text);
}

sample('this is a sample');

Lesson 08 : ループ処理

コンピュータの得意とするところの一つに、ループ処理（繰り返し処理）があります。何千件、何万件の顧客名簿の処理、途方も無い行数からの特定文字の抽出などなど、人力では辛く大変な作業をコンピュータはそつなくこなしてくれます。
プログラミング言語では、よくfor(ループ)文、while文が用意されています。

for(初期化式; 条件式; １ループ後に実行する式){
何かの処理;
}

変数iを0で初期化してスタート。
条件式が真であればループを実行。（最初はi=0なので、0は5未満に当てはまるので実行）
実行後（1ループ後）、定義された演算を行い、条件式が真であれば実行、偽であれば終了となります（i++は、i=i+1と同意）

Exercise :

ループで1から10の数字を奇数と偶数に区別させて出力しましょう

console.log('hello world!!!');
console.log('hello world!!!');
console.log('hello world!!!');
console.log('hello world!!!');
console.log('hello world!!!');

for (i = 0; i < 5; i++) {
  console.log('hello world!!!');
}

Lesson 09 : 配列とループ

データの格納方法として便利なものに、配列というものがあります。
これまで、データ（数値や文字列など）を格納するときは１つずつ変数に格納してきました。
しかし、扱うデータによってはまとめて管理、操作したほうが都合の良い場合が多々あります。

var numbers = [0,1,2,3,4,5,6,7,9];

var strings = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

console.log(numbers); -> [0,1,2,3,4,5,6,7,9]

console.log(strings[0]); -> 'a'

詳しくはlesson_09.txt参照

Exercise :

配列の効果をループを使って確認しましょう。

Lesson 10 : Object（オブジェクト）で表現の幅を広げる

Objectは、{property: value}で表現します。
propertyは、任意の名前。valueは、propertyに該当する値を意味します。

Exercise :

オブジェクトを確認し、効果を体験しましょう。

var a_student = {

name: 'Masahiro Nakai',

number: 1,

gender: 'male'

};

console.log(a_student.name); // 変数名.プロパティー名
console.log(a_student['name']); // 変数名['property名の文字列']

Lesson 11 : JavaScript国のルール

これまで、JavaScriptのルール（規約や文法）を体験してきたと思います。
変数の宣言時には、varをつける。1つの処理の終わりには;(セミコロン)をつける。functionやfor、while、ifなどは{}で括る。Objectを表現する歳も{}を使う。配列は[]。などなど。
公式ドキュメントや信頼性のおけるサイトで調べることが基本となります。
https://developer.mozilla.org/ja/docs/Web/JavaScript
JavaScript中級、上級への足がかりであったり、足りない知識は上記のサイトなどから手に入れましょう。

Exercise :

他の記法や文法を確認してみましょう。

Lesson 12 : Object中心に世界は回っている（おおげさ）

配列やオブジェクト、関数などをすべて組み合わせてみましょう。

Exercise :

組み合わせた効果を確認してみましょう。

var obj = {
    bool : true,
    array : [0, 1, 2],
    number: 999,
    func : function(text) {
        console.log(text);
    }
};
obj.func('オブジェクトのプロパティとして定義できる');

おや、console.log('');と同じ形ですね。

Lesson 13 : 応用編　ループと配列

if文, for文などは入れ子で書くことが出来ます。

入れ子とは、if文のなかにif文を書いたり、for文のなかにfor文を書いたりすることです。配列やオブジェクトも入れ子で書けます。ここでは、for文の入れ子を体験してみましょう。

Exercise :

for文を駆使して、バツ印を描いてみましょう

for(var i = 1; i <= 9; i++) {
    for(var j = 1; j <= 9; j++ ) {
        console.log( i * j );
    }
}

console.log( i  *  j  );
console.log( 1 * 1 );
console.log( 1 * 2 );
console.log( 1 * 3 );
console.log( 1 * 4 );
console.log( 1 * 5 );
console.log( 1 * 6 );
console.log( 1 * 7 );
console.log( 1 * 8 );
console.log( 1 * 9 );

Lesson 14 : 体験編　HTML+JavaScript

HTML タグを操作してみましょう。

jQueryというHTML操作などを支援するライブラリーを使います。

jQueryの構造を推測してみよう。

使い方は公式ドキュメントを参照。

jQuery(function(){
  $('#sample01 button').click(function(){                                                                                                                    
    console.log('1: 1週間の曜日をリストにしましょう');                                                                                                        
  });
  $('#sample02 button').click(function(){                                                                                                                    
    console.log('1: JavaScriptという文字列をカウントしてみましょう');
  });
  $('#sample03 button').click(function(){
    console.log('1: 今日の日付と時間を表示しましょう');
    console.log('2: 東京の天気を取得して表示しましょう');
  });
});

おわりに

今日学んだこと
- JavaScriptとは？
- JavaScriptの基礎的な文法
- プログラミング思考
参加者のみなさんの感想
（プログラミング経験の有無、ハンズオンの内容、今後の目標やEbisu.JSに求めること、etc.）

ご参加ありがとう

ございました

１日で学ぶJavaScriptハンズオン

自己紹介

Ebisu.JSとは？

JavaScriptでwebアプリケーション？

ハンズオン内容

環境設定

jsbinとは

エディタを使って作業効率の向上

Lesson 01 : 出力

Lesson 02 : 計算

Lesson 03 : Boolean(Bool)型とは？

Lesson 04 : 条件分岐

Lesson 05 : 変数とは？

Lesson 06 : 条件分岐と変数 (Exercise)

Lesson 07 : 関数とは？

Lesson 08 : ループ処理

Lesson 09 : 配列とループ

Lesson 10 : Object（オブジェクト）で表現の幅を広げる

Lesson 11 : JavaScript国のルール

Lesson 12 : Object中心に世界は回っている（おおげさ）

Lesson 13 : 応用編 ループと配列

Lesson 14 : 体験編 HTML+JavaScript

おわりに

Lesson 13 : 応用編　ループと配列

Lesson 14 : 体験編　HTML+JavaScript