こんな風に、ウェブ上で誰もが使えるアプリを作りたい。
pythonでゲームヲ作ったりウェブサイトをつくれもするのですが、web上でアプリを起動する、ChromeやSafari, Firefoxといったブラウザでユーザーとインタラクティブにやりとりするしくみをつくるのにpythonという言語は少し奥手です（学習を進めると作れるようになるみたいですが）
上述の目標を達成するために適した言語はJavaScriptです。
ブラウザは基本、HTMLという言語で動いています。
Javascriptという言語は、HTMLの中に溶け込むかのように書き込めます。
同じブラウザで動くHTMLとJavaScript、何が違うねん？ちゅうはなし。
例えば入力された値によって、結果を出力する仕組みを作れます。
pythonとJavaScriptの動作する環境の違い
今までpythonはatomでプログラムを実行してきました。
実行していたファイルの形式は.pyです。
一方でJavaScriptはブラウザ上で動く言語です。
これからプログラムして実行していくファイル形式は .htmlです。
ブラウザはbrowser. browseは閲覧するという意味をもちます。
world wide web を見るための道具であるブラウザに.htmlで書かれたファイルを読み込んでもらいます。JavaScriptはHTMLで書かれた文書の中に書き込みます。
アラートを出してみよう
HTMLの書き方がわかっている前提で話します。
まずファイルを作りましょう。
ファイル形式はHTMLにしてください。
マウスで右クリックをして「名前の変更」、ドット.の後ろをhtmlにします。
次のコードを書いてみましょう。
<!DOCTYPE html>
<html>
<head>
<title>BMI</title>
</head>
<body>
<script>
alert('hello');
</script>
</body>
</html><script>というタグの中にJavaScriptで命令を書きます。
実行するときは、atomをつかうのではなく、ファイルをダブルクリックしてブラウザで開きます。
ブラウザが立ち上がってウィンドウ（アラート画面）が出てきたら成功です！！！
ブラウザに動きをもたせるのが得意なJavaScript、次は・・・
ユーザーの「入力」に合わせて「出力」するプログラムを作ってみましょう。
ユーザーに選んでもらう。
<!DOCTYPE html>
<html>
<head>
<title>BMI</title>
</head>
<body>
<script>
confirm('OKですか？');
</script>
</body>
</html>こんなコードを実行すると。
ボタンがでてきます。
こういった命令を使うと、
単純ですが、ユーザーに反応して出力を変えることができます。
ユーザーに入力してもらったものを使って出力する（変数を使う）
<!DOCTYPE html>
<html>
<head>
<title>BMI</title>
</head>
<body>
<script>
prompt('貴方の名前は何ですか？');
confirm('あなたは' + 'さんですね？');
alert('こんにちは' + 'さん！');
</script>
</body>
</html>実行して見ると・・・
うーん。入力してもらった情報を支えていませんね。
pythonは学んでいますか？
pythonの時には「変数」と呼ばれていたものをJavaScriptでも使います。
次のようにコードを書き直してください。
<!DOCTYPE html>
<html>
<body>
<script>
let name = prompt('貴方の名前は何ですか？');
confirm('あなたは' + name + 'さんですね？');
alert('こんにちは' + name + 'さん！');
</script>
</body>
</html>
pythonの時にはなかったvarという表記を使って、変数を表します。
JavaScriptとpythonの、文法の違いです。
pythonというプログラミング言語で「ブラウザにアラートを出す」ためにはたくさんのコードを書く必要があります。JavaScriptでは、ブラウザを動かすことに特化したプログラミング言語であるために、簡単なコードでブラウザを操作できます。
documentと、windowと、、、、（あともう一つはそのうち登場します）
JavaScriptはdocument,windowそしてconsoleという３つの「場所」に働きかけてコンピューターに指示をだします。
次のコードをみてください。
<!DOCTYPE html>
<html>
<head>
<title>documentとwindow</title>
</head>
<body>
<script>
let name = window.prompt('貴方の名前は何ですか？');
window.confirm('あなたは' + name + 'さんですね？');
window.alert('こんにちは' + name + 'さん！');
document.write( name + "<h1>さん、JavaScriptの世界へようこそ！</h1>");
document.write("<p>documentとwindowと、consoleのどれかつかいます。大抵はdocumentですが。</p>");
</script>
</body>
</html>
prompt,confirm,alertの前にwindowと書かれています。これが正式な（略さない）書き方です。windowというオブジェクト（対象・もの）にpromptというメソッドをつかう、windowというオブジェクト（対象・もの）にconfirmというメソッドをつかう意味です。
windowは略して、書かないでもよいことになっています。
新しく出てきたdocument.writeは、documentというオブジェクト（対象・もの）にwriteというメソッドをつかってねという指示です。
これからバシバシ使われるコードです。
もうひとつはconsoleと言われているものです。
コンソールはキーボードとマウス、パソコンに指示を出すものを指します。
曖昧な表現ですが、パソコンと、パソコンを操作する人をつなげる窓口だとおもってみてください。
私も正直よくわからないです。
コンピューターと「直接」やりとりできる、しくみだとおもっています。
documentではなくconsoleを使ってJavaScriptを表示していくと、pythonのように、いろいろな実験ができるようです。
データとメソッド
プログラミングで使う文章の書き方の「枠組み」を知っておくとよいかもしれません。
コンピューターに指示を出すとき、「データ」と「メソッド（もしくは関数）」の２つを使うとおもってください。
例えば
alert(‘Hello!’)
alertというメソッドの中にHelloという文字を入れています。
コンピューターへのお手紙はメソッドとデータを組み合わせて書きます。
メソッドは言語ごとに決まっています。
データにはいくつかの型があって、メソッドごとに使える型が決まっている場合があります。
よく使うデータは文字列か数値という型をもっています。
次のコードを実行してみると・・・・
console.log(typeof 42) console.log(typeof '42') console.log(typeof Hello) console.log(typeof 'Hello')
実行結果
number string undefined string
numberは数値、stringは文字列、undefinedは「どっちかわからない」ことを表しています。
例えば・・・
同じ123でも、数値としての123と文字列としての123を区別して書かないと、コンピューターが理解できない時があります。
例えばjavascriptにおいては
if( a == 1 )は値が同じなら、データ型が違っていてもよく、
if ( a === 1)は、値もデータ型も同じでないといけません。
参考：https://itsakura.com/javascript-if-equal-diff
例えば
5*4と書けば２０と返してくれますが、
‘Hello’ * ‘World’と書いたらエラーがでます。
エラーがでない、正しい指示が伝わるにはメソッドに対応したデータ型を選ぶことです。
例えば次のコードを実行してみると・・・・結果が変わります。
console.log(12+3)
console.log(12,3)
console.log("12","3")
console.log("12"+"3")
console.log(12+"3")
console.log("こんに"+"ちは")
console.log("こんに","ちは")
console.log("こんに"+"ちは")エラーが出る、思い通りに伝わらないとおもったら、メソッドに対応するデータ型が使われているかどうかしらべてみるとよいです。
データ型には他に、真偽値というものがあります。Boolean型と呼ばれています。
trueかfalseかを表す型です。
変数？それとも・・・？
次のコードを書いてみます。出力の結果を想像できますか？
let w = 'easy';
console.log(w);
console.log('w');wを文字列としてconsole.logに入れると文字列がでてきます。
wを変数としてconsole.logに入れるとletで定義されたeasyがでてきます。
easy w
次のように書くとエラーが出ます。
let w = easy console.log(w)
easyが何を表しているのか、コンピューターが理解できない文章です。
let w = easy は変数wをeasyと定義するよという意味ですが、easyが””で括られていないため文字列ではない、変数として認識されています。
しかし、変数easyが定義されていないため、エラーがでます。
なのでコンピューターが定義をたどれるように書くなら、エラーにはなりません。
let ease = "easy" let z = ease console.log(z)
atomで実行したい・・・（結論、ブラウザで開くのが確実）
便利なものがあります。
atom-html-previewというパッケージをインストールするとatomでhtmlが見れちゃいます！
Ctrl + Shift + Hを押すと実行します。
HTMLのプレビューをやめたいときはもう一度Ctrl + Shift + H を押します。
動かしてみると・・・うまくいかないことが儘あります。。ファイルをクリックして直接ブラウザを開いたほうが確実なようです。
オススメの本けどまぁ入門。
もう少ししっかり学びたいなら 次の本がオススメです。
文法を学びながらじゃんけんゲームを進化させていきます。
Javascriptのエラーはどうやってみつけたらいい？（ブラウザでチェック！）
Ptyhonはエラーがでたら教えてくれましたね。（テキストエディターで実行していました）
JavaScriptはブラウザで実行されます。ブラウザのデベロッパーツールを使うとエラーを読み取ることができます。
chromeの場合。
まず、htmlファイルをブラウザ で開きます。
chromeであれば右上に点が３つ縦に並んでいるアイコンを押します。
デベロッパーツール、見つかりましたか？
さて、右下に「コンソール」と書かれているタブがあるので押すと、、、、
読みこまれている20.jsというファイルの１３１行目にある}が何かおかしいぞ。というメッセージです。かならずしも問題が１３１行目にあるわけではありません。このエラーメッセージをヒントにして、コードを見直してみるとよいです。
エラーを書き直してパソコンが理解できる命令にすることをデバックするといいます。
ブラウザを開いていちいちデベロッパーツールを出さないといけないのか・・・
とおもい、調べていると・・・
atomではなく、visual studio code というエディターはデフォルトでデバック機能がついているようです。
もしくはatomのプラグイン
Python-Debuggerをインスールする。
と、ブラウザを開かずにデバックができるようになります。
間違えながら、言語を正しく使ってパソコンで遊ぼう！
Visual Studio Codeでリアルタイムで文書をみる（がうまくいかないから結局ブラウザで開く）
HTML,JavaScriptに関してはatomよりも使いやすい気がしたので、エディターはVisual Studio Code を使うことにしました。
プレビューをしながらコードを書くために「HTML Preview」という拡張機能を入れます。
左側にあるサイドバーの四角が４つあって１つだけ飛び出しているアイコンを押すと拡張できます。
- Mac：Cmd + Shift + P
- Windows：Ctrl + Shift + P
と押してから、「HTML: Open Preview to the Side」を選択すれば横にプレビュー表示されます。
使ってみましたが、atom,visual studio codeを使わずにファイルを素直に直に開いてブラウザで表示することが一番、賢明なようです。ブラウザでは表示されるのに、エディターで表示されないことがありました。
コメント