ノンプログラマーでも明日から使えるJavaScript簡単プログラム先生：柳井政和

ノンプログラマーでも明日から使える

JavaScript 簡単プログラム

クロノス・クラウン合同会社
柳井政和
http://crocro.com/

「柳井政和」はどんな人？
≫ クロノス・クラウン合同会社代表社員
　　　2002 年に創業　現在 12 期目
≫ 著書：
　　　「マンガでわかる JavaScript」
　　　「HTML5&JavaScript 本格ゲームプログラミング」
...

対象者
≫ プログラムを書いたことがない人
≫ プログラムに挫折した人

おこなうこと
簡単なテンプレートを書き換えて
便利なミニアプリを作る
その後、解説をおこなう

作成する HTML 製ミニアプリ操作共通
１．入力欄に
　　文字を入力。
２．ボタンをクリック。
３．出力欄に
　　結果が出力。

ミニアプリのコードで学ぶこと
電卓１

「HTML から文字取得、出力」「変数」

文字数カウント１「文字列」「文字列の長さ」
文字列置換１

「文字列の置換」

文字数カウント２「条件分岐」
文字列置換２

「関数」

電卓２

「配列」...

おまけのミニアプリ
パスワード自動生成
文字列を MP3 化

まずは「プログラミング」について
Ｑ．プログラミングが近いのはどれ？
１．学問
２．読書
３．スポーツ

なぜ？
野球をプレイせず、ルールをいくら読んでも、
野球は上手くなれない。
まずは、ボールを投げて、バットを振らないと
いけない。

プログラミングもよく似ている。

Ｑ．プログラミングで
　　体を動かすとは？

Ａ１．開発環境を用意して
サンプルを入手して
実行する。
Ａ２．少し変えてみたら
どうなるのか実験する。
サンプルを少し変えるだけでアプリができる！

プログラミングでは失敗が大切
よくあること
本を読んで分かった気になる
→本当の形とは大きく違う
→前提となる知識がないから
象は体が大きく、鼻が長い
こんな感じか？

では、どうすればよいのか？
失敗を重ねると、正しい形が見えてくる。
→分かった気になっていた形を修正する。

「全体像の想像」と「細部の確認」
の両輪で学習は進む
知識と経験で
正しい姿が！

http://www.wpclipart.com/animals/E/elephant/elephant_3/African_Elephant.jpg.html

Ｑ．プログラミングを学習する上で
大切なことは何か？

Ａ．失敗の効率化
・学習や成長は、失敗なしでは進まない。
・失敗をどれだけしたかが、そのまま血肉になる。
・失敗の効率を、最大化する努力をしなければならない。

→ プログラミングでは、失敗をいかに
効率化するかが問われる。

効率的でない例
プログラムを書く。
→動かない。
→動かないことしか分からない。
→学習が止まる。

効率的な例
プログラムを書く。
→動かない。
→エラー出力で、エラーメッセージを確認。
　「○行目で、○○のエラー」
・その行で、なぜエラーが出るのか考える。
・エラーが起きている命令で Web 検索する。
・エラーの種類で Web 検索...

というわけで
効率的に成長するために
効率的に失敗できる環境を作り
どんどん失敗する。

Google Chrome コンソールの使い方
コンソールの出し方

方法１：[Ctrl] + [Shift] + [J]
方法２：[F12] で表示したあと「Console」を選ぶ

表示の見方
「console.log( )」で
出力した値...

Ｑ．プログラミングをおこなう上で
大切なことは？

Ａ．作業の省力化
・　無駄なプログラムを書かないプログラマは、
　　よいプログラマ。
・　すでにソフトがあれば、新たに作らず利用する。
・　すでにライブラリがあれば、新たに作らず利用する。
・　それで飽き足らない時、初めて手を動かす。

インターネット時代の
プログラミング学習
・まず、自分で書かずに済むか調べる。
・サンプルをいくつか入手する。
・上手くいかない場合は、原因を調べる。
・経験した失敗はメモして残す。
　できれば万人に公開する。

JavaScript 製
ブラウザで動くミニアプリ作り
用意するもの
・ Web ブラウザ：Google Chrome
・テキストエディタ：UTF-8 形式で読み書き可能なもの

■１．電卓　（101_calc.html）

<!DOCTYPE html>
<html lang="ja">

外部 JavaScript の読み込み

<head>
<meta charset="utf-8" />
<title>電卓</title>

<script src=>
</section>
<section data-index=

ボタンを押したあとの処理
// 入力
var src = $("#srcArea").val();

// 入力

// 計算
var res = eval(src);

// 計算

// 出力
$("#resArea").val(res);...

jQuery を利用した
HTML への入出力
フォームから値を取得

$(セレクタ).val()

フォームに値を出力

$(セレクタ).val(値)

DOM から HTML を取得

$(セレクタ).html()

DOM に HTML ...

変数
値を一時的に格納する入れ物

var src = $("#srcArea").val();
「var」 → 「variable（変数）」の意味。「src」という変数を作る。
「=」 →　　右の値を、左の変数に入れる。

var res =...

■２．文字数カウント　（102_calc2.html）

// 入力
var src = $("#srcArea").val(); // 入力
// 計算
var res = src.length;

// 文字列の長さを取得

// 出力
$("#resArea").val(res); // 出力
...

文字列とは？
複数の文字が連なったもの

"abcd あいうえお"

「"」か「'」で囲む

"abc" 'abc'

中身が空でも文字列

""

「+」で連結可能

"abc" + "def" → "abcdef"

文字列はオブジェクト
「オブジェクト」は「プロパティ」と呼ばれる値を持つ
「.」区切りで「値」や「関数」を使える
「文字列.length」で文字列の長さが分かる
「"abc".length」→「3」

var res = src.length;...

■３．文字列置換　（301_strlrep.html）

文字列の置換
// 計算
var res = src;
res = res.replace(/n/g, "<br>n"); // 文字列置換
res = res.replace(/t/g, "tttt");

// 文字列置換

「文字列.re...

正規表現
・「/記号付き検索文字列/フラグ」
・複雑な条件で、文字を検索するための仕組み。
・「a.c」 →

「.」は、何か 1 文字。
「abc」「a2c」などがヒット。

・「a[b-y]z」 → 「[b-y]」は、「b～y」の ...

特殊文字
・改行 → 「n」
・タブ文字 → 「t」
・他にもいくつかある。

■４．文字数カウント２　（202_strlen2.html）

<input type="checkbox" id="linebreak">
改行を数えない　
<input type="checkbox" id="space">
スペースを数え...

// 計算
var linebreak = $("#linebreak").prop("checked");
var space

= $("#space").prop("checked");

if (linebreak) {
// 改行にチ...

Boolean（真偽値）
「true」（真）と「false」（偽）の値
var space = $("#space").prop("checked");
// チェックされていれば「true」の値が
// チェックされていなければ「false」...

条件分岐（if 文）
if (Boolean の値) {
「true」の場合のみ処理
}

条件分岐（if else 文）
if (Boolean の値) {
「true」の場合のみ処理
} else {
「false」の場合のみ処理
}

条件分岐の例
var a = 10;
if (a > 0) {
console.log("a が 0 よりも大きい");
}
if (a > 10) {
console.log("a が 10 よりも大きい");
} else {
consol...

■５．文字列置換２　（302_strlrep2.html）

// 計算
var res = src;
res = markdown(res);

// 簡易マークダウン

$("#resArea2").html(res);

// HTML として出力

// 簡易マークダウン
function mar...

関数
function 関数名(引数) {
計算
return 戻り値;
}

function 関数名(引数 1, 引数 2, 引数 3) {
計算
}
・引数は複数可能
・「return 戻り値」はなくてもよい

■６．電卓２　（102_calc2.html）
入力
1+2
3*4
?
5*(6+7)-8

出力
1+2 = 3
3*4 = 12
? = SyntaxError: Unexpected token ?
5*(6+7)-8 = 57

// 計算
var srcArr = src.split("n"); // 配列化
var resArr = [ ];

// 結果用配列を用意

for (var i = 0; i < srcArr.length; i ++) {
var l...

配列
var array = ["要素 0", "要素 1", "要素 2"];

// 配列を作る

var len = array.length;

// 配列の要素数「3」

var item = array[0];

// 「要素 1」...

ループ処理（for 文）
for (var i = 0; i < 繰り返す回数; i ++) {
繰り返す処理
i は「0」「1」「2」……「繰り返す回数-1」となる
配列の要素を処理するのに好都合！
}

配列を作る
var srcArr = src.split("n"); // 文字列を配列化
var resArr = [ ];

// 空の配列

ループ処理（for 文）
for (var i = 0; i < srcArr.length; ...

★繰り返す処理
var line = srcArr[i];

// 1 行取り出す

// エラー対策付きで計算
try {
line = line + " = " + eval(line);

// 計算

} catch(e) {
line...

■おまけ１．パスワード生成　（401_password.html）
入力
ABCDEFGHJKLMNPQRSTUVWXYZ
abcdefghijkmnpqrstuvwxyz
23456789

出力
6Zdic4HbKs6gDby8
PQDuE...

// 計算（16 文字のパスワードを 8 つ作成）
var arrRnd = src.replace(/n/g, "").split("");
var res = "";
for (var n = 0; n < 8; n ++) {
for (...

■おまけ２．文字列 mp3 化　（402_strToMp3.html）

　　別ウィンドウで、MP3

を出力

// 計算
var enc = encodeURI(src);
var res = "http://translate.google.com/translate_tts"
+ "?tl=ja&prev=input&q=" + enc;
wind...

レポート課題
プログラミングは、手を動かして何ぼです！
サンプルを改造して、遊んでください！

クロノス・クラウン合同会社
柳井政和
http://crocro.com/
twitter.com/ruten

ノンプログラマーでも明日から使えるJavaScript簡単プログラム先生：柳井政和

ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生：柳井 政和

schoowebcampus