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

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

JavaScript 簡単プログラム

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

「柳井政和」はどんな人？
≫ クロノス・クラウン合同会社代表社員
　　　2002 年に創業　現在 12 期目
≫ 著書：
　　　「マンガでわかる JavaScript」
　　　「HTML5&JavaScript 本格ゲームプログラミング」
　　　「プログラマのためのコードパズル」など
≫ オンラインソフト：
　　　「めもりーくりーなー」など 100 本ぐらい
≫ ゲーム開発
　　　シミュレーション RPG、RTS など思考系が好き

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

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

作成する 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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// DOM の準備ができてから実行
$(function() {
// ボタンのクリック処理を実装
$("#btn").click(function() {
var src = $("#srcArea").val(); // 入力

var res = eval(src);

// 計算

$("#resArea").val(res);

// 出力

console.log(res);

// コンソール出力

})

// タイトルを H1 タグの中に表示
$("h1").text(document.title);
});
</script>

DOM の準備ができてから
実行するコード

ボタンを押した時の処理
（アプリの本体）

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

// 入力

// 計算

// 計算

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


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

$(セレクタ).val()

フォームに値を出力

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

DOM から HTML を取得

$(セレクタ).html()

DOM に HTML を出力

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

DOM からテキストを取得

$(セレクタ).text()

DOM にテキストを出力

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

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

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

「eval( )」 →「( )」の中の文字を、プログラムとして解釈。
　　　　計算式を入れれば、計算してくれる。

$("#resArea").val(res);
変数「res」に格納されている値を、テキストエリアに出力。

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

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

// 文字列の長さを取得

// 出力
$("#resArea").val(res); // 出力
console.log(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");

// 文字列置換

「文字列.replace(検索条件, 置換文字列)」
で置換。

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

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

・「a[b-y]z」 → 「[b-y]」は、「b～y」の 1 文字。
「acz」「axz」などがヒット。
・フラグ「g」で全置換。

特殊文字
・改行 → 「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) {
// 改行にチェックが入っていれば削除
src = src.replace(/n/g, "");
}
if (space) {
// スペースにチェックが入っていれば削除
src = src.replace(/ /g, "");
src = src.replace(/　/g, "");
}
var res = src.length;

// 文字列の長さを取得

Boolean（真偽値）
「true」（真）と「false」（偽）の値
var space = $("#space").prop("checked");
// チェックされていれば「true」の値が
// チェックされていなければ「false」の値が、変数「space」に入る
// Boolean の値は、計算式でも求められる

var isBig = 10 > 0;
console.log(isBig); // 「true」と出力

条件分岐（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 {
console.log("a が 10 以下");
}

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

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

// 簡易マークダウン

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

// HTML として出力

// 簡易マークダウン
function markdown(src) {
var res = src;
res = res.replace(/^# (.+?)$/gm, "<h1>$1</h1>");
res = res.replace(/^## (.+?)$/gm, "<h2>$1</h2>");
res = res.replace(/^### (.+?)$/gm, "<h3>$1</h3>");
res = res.replace(/''(.+?)''/g, "<b>$1</b>");
res = res.replace(/-----/g, "<hr>");
return res;
}

関数
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 line = srcArr[i];// 1 行取り出す
// エラー対策付きで計算
try {
line = line + " = " + eval(line);

// 計算

} catch(e) {
line = line + " = " + e; // エラー時
}
resArr.push(line); // 結果を追加
}
var res = resArr.join("n"); // 配列を結合して文字列に

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

// 配列を作る

var len = array.length;

// 配列の要素数「3」

var item = array[0];

// 「要素 1」を取得「0, 1, 2」と数える

array[2] = "上書き 2"; // 「要素 2」を上書き
array.push("要素 3");

// 新要素を末尾に追加

ループ処理（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; i ++) {
★繰り返す処理
}
var res = resArr.join("n"); // 配列を結合して文字列に

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

// 1 行取り出す

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

// 計算

} catch(e) {
line = line + " = " + e;

// エラー時

}
resArr.push(line); // 結果を追加

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

出力
6Zdic4HbKs6gDby8
PQDuECi3ekF6JxhM
HjAyGPAxHDAzF93j
wY5ZJXimPmRuhDWA
3C5b35xGwp9EVwKx
7SqNia6reJAfdDGk
qUjL45u7LSTiKwbG
xyiLkSp2YwWYztDD

// 計算（16 文字のパスワードを 8 つ作成）
var arrRnd = src.replace(/n/g, "").split("");
var res = "";
for (var n = 0; n < 8; n ++) {
for (var i = 0; i < 16; i ++) {
var r = Math.floor(Math.random() * arrRnd.length);
res += arrRnd[r];
}
res += "n";
}

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

　　別ウィンドウで、MP3

を出力

// 計算
var enc = encodeURI(src);
var res = "http://translate.google.com/translate_tts"
+ "?tl=ja&prev=input&q=" + enc;
window.open(res, "_blank"); // 別ウィンドウで開く

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

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

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

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

More Related Content

What's hot (20)

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

More from schoowebcampus (20)

Recently uploaded (9)