1 ななちゃんの IT 教室デバッグ奥義の巻第 1 回デバッグとはなな : これって朝日新聞のののちゃんの DO 科学のパクリ? 先生 : パロディって言ってちょうだい家政婦のミタ ( 家政婦は見たのパロディ ) クレヨンしんちゃんのダズニーランド ( ディズニーランドのパロディ

Size: px

Start display at page:

Download "1 ななちゃんの IT 教室デバッグ奥義の巻第 1 回デバッグとはなな : これって朝日新聞のののちゃんの DO 科学のパクリ? 先生 : パロディって言ってちょうだい家政婦のミタ ( 家政婦は見たのパロディ ) クレヨンしんちゃんのダズニーランド ( ディズニーランドのパロディ"

かずゆきえいさか
5 years ago
Views:

ななちゃんの IT 教室デバッグ奥義の巻 by nara.yasuhiro@gmail.

0 版 2017 年 5 月 7 日フリー素材 http://freeillustration.

1 ななちゃんの IT 教室デバッグ奥義の巻 by ななちゃんがデバッグ奥義を教えてもらうというお話第 1.0 版 2017 年 5 月 7 日フリー素材もくじ第 1 回デバッグとは第 2 回デバッグのやりかた第 3 回デバッグのやりかた : 実践編 1( デバッガ ) 第 4 回デバッグのやりかた : 実践編 2( デバッグ奥儀 ) 第 5 回デバッグのやりかた : 実践編 3( コンソール ) 第 6 回デバッグのやりかた : 実践編 4( 便利ツールを作っておこう )

2 1 ななちゃんの IT 教室デバッグ奥義の巻第 1 回デバッグとはなな : これって朝日新聞のののちゃんの DO 科学のパクリ? 先生 : パロディって言ってちょうだい家政婦のミタ ( 家政婦は見たのパロディ ) クレヨンしんちゃんのダズニーランド ( ディズニーランドのパロディ ) みたいなものよなな : デバッグということばを聞いたけどどういう意味なの? 先生 : プログラムの間違いを見つけて修正することよ庭木の害虫 ( バグ ) を見つけて駆除するというイメージねすぐれたプログラマは間違いをしない人ではなくて間違いを見つけることに慣れている人ということなのなな : プロフェッショナルのプログラマは一発で正しいプログラムを書けるんじゃないの? 先生 : そんなことはないのよタイピングミスをしょっちゅうするわたとえば ; のかわりに : を入力してしまうこともよくあるわよなんしろキーボードでおとなりのキーだしねなな : なるほどプログラムの知識とタイピングミスは別物だからね先生 : それにだいたいプログラムを作ってから仲間に使ってもらって問題を発見することもよくやるのよ想定外の使い方があることをみつけたりなな : そういえばいろんなソフトでバージョンアップというのがよくあるわね先生 : そうそうバージョンアップは機能追加だけではなくてバグ部分を修正するという意味も大きいのそれからプログラマはみな自分なりに失敗を重ねながら技術を身につけてきているのプログラマの後輩指導では後輩に同じ苦労をさせないように苦労から発見した要点はようするにだと説明するんだけど後輩はすぐに忘れてしまう覚えられないなぜだと思う? なな : 頭が悪いから? 先生 : いいえそれは人間は失敗を重ねることで覚えるからなの言葉で表現された記憶を意味記憶といい失敗を通じて場面と一緒に覚えている記憶をエピソード記憶というの両者は脳における記憶メカニズムが異なっていて後者のほうが圧倒的に忘れにくいことが脳科学の研究で分かっているのななちゃん資料を読んでそれを覚えるのではなくプログラムを作ってみてなかなか動作しないで苦労してデバッグしながら失敗を重ねることで覚えてね A は B であるではなく A は C であると勘違いしてひどい目にあった B だったんだ! という形で心にとどめて欲しいのねなな : ラジャー!

3 ななちゃんの IT 教室デバッグ奥義の巻 2 なな : デバッグはどういうふうにやれば良いの? 先生 : デバッグには 2 つのステップがあるのよなな : ひとつ目は? 第 2 回デバッグのやりかた先生 : 文法エラーの修正ね英文の誤文訂正のたとえで説明するわね A cow fly. という文には文法間違いが含まれているわね? なな : 三単現 ( 三人称単数現在 ) の s が抜けているわ A cow flies. が正解ね先生 : そうそうプログラムの場合はぜんぜん動かないとかエラーメッセージが出るという症状になるのそういう間違いをみつけてプログラムを修正して動かすエラーメッセージが出ないようにする必要があるのねこれにはコンピュータのエラー検出機能が使えることが多いのなな : じゃあふたつ目は? 先生 : 意味上のエラーの修正ね A cow flies. は文法的には正しいけど牛は空を飛ぶはずはないので意味としておかしいわねなな : 牛が飛行機に乗っているとかメルヘンだとか? 先生 : こらこらたとえ話だと言ったでしょうたとえば郵便番号を入力するとその地域の住所を表示するようなプログラムで見かけ上動くけど東京の郵便番号を入力しても沖縄の地名が表示されるようなエラーねこれはコンピュータが発見するのではなく人間ががんばらないといけないのまあ入力と出力のデータの正しい組み合わせを前もって用意しておいてその通りの出力になるか自動チェックすることもできるけどねなな : そうか先生 : それ以外にも不適切な入力データが入力された時にプログラムが暴走しないでちゃんと再入力を促すかといった使い勝手のテストも必要な場合もあるわ高額な商品としてのプログラムなんかだと使いにくかったら買ってもらえないからね

別ウィンドウで出したりを切り替えできます開発ツールを表示 Internet Explorer 11 や MS Edge では F12 キー入力でほぼ同じ機能のデバッガーが使えます次にそのブラウザでプログラムを実行しますここではわざとエラーを入れた下記のプログラムを実行してみましょう <!

4 3 ななちゃんの IT 教室デバッグ奥義の巻第 3 回デバッグのやりかた : 実践編 1( デバッガ ) なな : デバッグは具体的にはどういうふうにやれば良いの? 先生 : まずはデバッガというプログラムの使い方を説明するわねここでは Firefox ブラウザに組み込まれているものを使って説明します他のブラウザでも使い方が少し違うけど機能的には同じようなものがあります Firefox でツールウェブ開発開発ツールを表示というメニュー操作をしてデバッガの画面を表示せます画面の下のほうに出したり右のほうに出したり別ウィンドウで出したりを切り替えできます開発ツールを表示 Internet Explorer 11 や MS Edge では F12 キー入力でほぼ同じ機能のデバッガーが使えます次にそのブラウザでプログラムを実行しますここではわざとエラーを入れた下記のプログラムを実行してみましょう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>err1</title> </head> <body> <h2>err1</h2> <script> var x; for(x=1; x<4; x++) if (x = 2) alart(x); </script> </body> </html> コンソールというタブをクリック alert を alart とミスタイプしている err1.html x == 2 を x = 2 にミスタイプしている JS(J) というタブをクリック Reference error: alart is not defined. err1.html:12:17

5 ななちゃんのIT 教室デバッグ奥義の巻 4 なな : エラーメッセージが出たけど英語だあ先生 : 残念ながらそうでも難しい英文ではないからすぐに慣れるわ Reference error: alart is not defined. は参照エラー: alart は定義されていませんという意味これは alert と書くべきだったのを alart と書き間違えたからなの計算機は alert と書くべきだったとは判断できないので alart というのは知らない命令だよという形で警告しているわけ画面の右のほうに err1.html:12:17 と書いてあるけどこれは error1.html ファイルの 12 行目 17 文字目なな : いわゆる文法エラーということ? 先生 : そうね次にファイルの alart を alert に書き直してデバッグの次の段階にすすみましょう 12 行目 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>err1</title> </head> <body> <h2>err1</h2> <script> var x; for(x=1; x<4; x++) if (x = 2) alert(x); </script> </body> </html> 17 文字目 err1.html x が 1, 2, 3 と変化して x が 2 になった時だけ alert(x) が実行されるつもりつまり 2 というアラートが 1 回だけ出るでも 2 というアラートが何回も出続けるなぜだーーーーデバッガーというタブをクリックプログラムが表示されるここをクリックして 11 行目を青くする 12 行目 17 文字目

alert(x); if (0) は if (false) と同じだから alert(x) はいつも実行されてしまう x == 2 ( x が 2 に等しい ) を x = 2 ( x に 2 を記憶する )

6 5 ななちゃんの IT 教室デバッグ奥義の巻ウォッチ式を追加をクリックここに x と入力ボタンをクリックしてプログラムを実行する if は false "" 0 undefined null 以外の値を true とみなす x 2 と表示されたまま x = 2 全体の値は 2 if (2) は if (true) と同じ var x; for(x=1; x<4; x++) if (x = 2) alert(x); if (0) は if (false) と同じだから alert(x) はいつも実行されてしまう x == 2 ( x が 2 に等しい ) を x = 2 ( x に 2 を記憶する ) に書き間違えている!!! だから 2 というアラームが何回も出続ける!!!! だから x が 2 のままで増えない!!! なな : ということで x == 2 を x = 2 と書き間違えたという意味上のエラーを発見したということね!

7 ななちゃんの IT 教室デバッグ奥義の巻 6 第 4 回デバッグのやりかた : 実践編 2( デバッグ奥儀 ) デバッグは海外旅行好きの人から聞いた話に似ている点があるその人は海外旅行が好きだから旅行の申し込みをするしかし出発当日成田空港にゆくと憂鬱な気分になるという言葉も通じないだろうし自由も制限される旅行に行くのをやめてここから引き返したくなるというひとこと旅行会社に電話すればそれで済むことでもなんとなくがまんして飛行機に乗るしかしいったん旅行に出発していまえば興奮の連続帰ってきてから旅行に行ってよかったとつくづく思いまた海外旅行に行きたいと思うというデバッグも最初は気が重い会社の上司にプログラムは完成しませんでしたと謝ってしまったらどんなに楽かと思うしかしはじめてしまうと興奮の連続プログラムが動くとこの上ないような喜びを感じるまたデバッグしてみようかなと思ったりする先生から教えてもらったこと本で読んだことはしばらくすると簡単に忘れてしまうでもデバッグで自分で見つけて直したことのあるバグはそうは簡単に忘れない心理学的にも証明されている場面情景を伴って覚えたことをエピソード記憶と言うが簡単には忘れないエストニア生まれのカナダ人心理学者エンデルタルヴィング (Endel Tulving) が 1972 年に発表したみなさんにはデバッグに励んでもらいたいどんどんミスをしてどんどんバグを見つけて直すことでプログラミングの達人になって欲しいデバッグ奥義を贈ろう prog.html <!DOCTYPE html> <html> <head> <script src="prog.js"></script> </head> <body> <button onclick="go()"> 実行 </button> </body> </html> prog.js function go() { alert("hello!"); こんな簡単なプログラムでも ReferenceError: go is not defined というようなエラーになることがあるもちろん Web Console などを使わないと何も反応しない動かないだけであるが go is not defined のようなエラーの場合私なら prog.js alert("!!!); //function go() { // alert("hello!"); // のように 1 行追加するこれで!!! を表示するアラートが出なければ prog.js のファイル名が違っている ( 全角文字だったりする ) か prog.js がエディタでまだ保存していないとか prog.js が prog.html と異なるフォルダに作ってあったりする // ~ の行はコメント扱いコンピュータは無視する実行対象にならない

8 7 ななちゃんの IT 教室デバッグ奥義の巻!!! を表示するアラートが出れば今度は prog.js function go() { alert("!!!); // alert("hello!"); // に変えて!!! を表示するアラートが出ることを確認する prog.js function go() { alert("hello!"); alert("!!!); // のように // を消して alert("!!!); を追加する行をひとつずつ下に移動してゆくはじめてエラーが出たところでその行をチェックする全角の空白が入っていたりする半角の空白やタブと全角の空白は画面で見た上では区別できない全角の空白は JavaScript としては使ってはならない行末についていてもダメ例外はコメントの中と "~" の文字列の部分だけですこんな感じで間違いを見つけてくださいさいごにプレゼント答えは掲載しないので自分でバグを見つけてください prog.js function go() { var x, y; for(x=1; x<4; x++) y = x; alert(y); 1, 2, 3 のアラートが出るはずなのが 3 のアラートしか出ないのはなぜでしょう?

>> x+x 6 >> は入力した式はその値 x の値は 3 x + x の値は 6 ここに式を入力する JavaScript

9 ななちゃんの IT 教室デバッグ奥義の巻 8 第 5 回デバッグのやりかた : 実践編 3( コンソール ) デバッグ中コンソールタグをクリックすると JavaScript の式を入力してその値を確認することができるようになりますコンソールをクリック >> x 3 >> x+x 6 >> は入力した式はその値 x の値は 3 x + x の値は 6 ここに式を入力する JavaScript プログラムから console.log( 式 ) でコンソール領域への出力が可能です for (var i=0; i<5; i++) console.log(i);

10 9 ななちゃんの IT 教室デバッグ奥義の巻第 6 回デバッグのやりかた : 実践編 4( 便利ツールを作っておこう ) コンソールの入力は 1 行です shift+enter を使うと複数行にまたがる式も入力できますがちょっと不便ですプログラムのデバッグ中でなく数行の JavaScript 文を入力してその場で結果を見たい場合に便利なツールを紹介します画面上に JavaScript の式を入力し実行ボタンをクリックするとその値 ( 評価結果 ) を表示します JavaScript では文も式の一種として扱われます入力と実行は何回も繰り返すことができます入力した式にエラーが含まれる場合はエラーメッセージが表示されます式を入力実行ボタンをクリック値が表示される入力した式型 1 型 2 値出力

11 ななちゃんの IT 教室デバッグ奥義の巻 10 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> コンソール </title> </head> <body> <h3> コンソール </h3> <textarea rows="19" cols="80" id=pg autofocus>1 + 2;</textarea> <br><input type=button onclick=go() value=" 実行 "> <br> システムからのメッセージ <br><textarea rows="20" cols="80" id=log></textarea> <script> var geval = eval; var logp = document.getelementbyid("log"); var pgp = document.getelementbyid("pg"); var logd; function clog(s) { logp.value += s; function log(s) { logd += s; function typeis(obj) { return(object.prototype.tostring.call(obj).slice(8, -1)); function isprimitive(x) { return (typeof x)!="object"; function toliteral(x) { return JSON.stringify(x); function type(x) { return "" + (typeof x); function isinteger(n) { return n%1 === 0; function keys(obj) { return Object.keys(obj); eval 関数をグローバル化 ( グローバル化しないと毎回変数値がリセットされてしまう ) function go() { logd = ""; try { var v = geval(pgp.value); clog("<= " + pgp.value + " n=> " + typeis(v) + " " + type(v) + " " + toliteral(v) + " n"); pgp.value = ""; logp.scrolltop = logp.scrollheight; pgp.focus(); catch(e) { clog(pgp.value + " n! " + e + " n"); pgp.value = ""; logp.scrolltop = logp.scrollheight; pgp.focus(); if (logd!= "") clog(logd + " n"); </script> </body> </html> エラー捕捉

1 ななちゃんの IT 教室教養講座 : データ構造の巻第 1 回秘密道具 : マイコンソールなな : クリじいデータ構造の勉強をするんだけど便利な秘密道具はない? クリ : あるぞあるぞ定番秘密道具のマイコンソール他の巻を読んでない読者のために説明しよう 1 ここに Jav

1 ななちゃんの IT 教室教養講座 : データ構造の巻第 1 回秘密道具 : マイコンソールなな : クリじいデータ構造の勉強をするんだけど便利な秘密道具はない? クリ : あるぞあるぞ定番秘密道具のマイコンソール他の巻を読んでない読者のために説明しよう 1 ここに Jav ななちゃんの IT 教室教養講座 : データ構造の巻 by nara.yasuhiro@gmail.com ななちゃんがデータ構造の基礎 ( リスト二分木 ) を学ぶというお話第 0.1 版 2017 年 6 月 21 日フリー素材 http://freeillustration.net いらすとやフリー素材 http://www.irasutoya.com/ もくじ第 1 回秘密道具 :