もしプログラミングを12歳ではじめたら ２日目

もしプログラミングを12歳ではじめたら ２日目
----

# ２日目に突入

そんなこんなで２日目に突入しました。それでは前回やってみたようにまずはパソコンを開きます。

![動かないパソコン](https://qiita-image-store.s3.amazonaws.com/0/47058/eac9aa5e-4115-d0ad-1073-7eceff034e0d.png "動かないパソコン")

と、、、おい。 なに？ 真っ暗。動かない。

なんだよー！ 動かないよー！ なんで？

# 電池が切れたら動かない

「バッテリー切れでないん？」

そこに現れた救世主（おとうさん）の一言ですっきり解決。電源コードを持ってきてもらって、コンセントに差して、電源ボタンをポチッとな。無事に起動できました〜♪

![バッテリー](https://qiita-image-store.s3.amazonaws.com/0/47058/16b3d6b0-f805-d814-25f5-9f063c57e6b9.png "バッテリー")

いやあ、ヒヤヒヤしました。２日目にして壊してしまったのかと思いました。

# パスワードをおぼえよう

あれ？ あれれ？ なんだっけ？ あれ、、あの、、パスワード？

![パスワード](https://qiita-image-store.s3.amazonaws.com/0/47058/1037977f-ccc4-2257-8501-bba1db7e7d86.png "パスワード")

「忘れたんかい；；」

再び現れた救世主はやっぱりおとうさんでした。ちゃちゃっとなにかやってくれたら、もう一度、パスワードを入力し直します。

今度は忘れないようにしないとね。

# さあ、本を開こう

いよいよ、前回の続きをやっていきます。まずは本を開きます。今日から第２章でJavaScriptを勉強するぞ。

[![12歳からはじめるJavaScriptとウェブアプリ](//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4899774710&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=taniokah-22 "12歳からはじめるJavaScriptとウェブアプリ")](http://amzn.to/2iwQovO)
[12歳からはじめるJavaScriptとウェブアプリ](http://amzn.to/2iwQovO)

# ハローワールド？

本を開いたら、いきなり「こんにちは世界」だって、なんだかよくわからないけど、書いてみるよ。今回も、前回とおなじようにTextEditで書いてみたよ。

![TextEdit](https://qiita-image-store.s3.amazonaws.com/0/47058/a60a1b30-5170-c27b-df59-3be987b8b6fe.png)

ふぅ、がんばった。

ファイル名を「HelloWorld.html」にして保存して、えーっと、それでどうするんだっけ？

![Finder](https://qiita-image-store.s3.amazonaws.com/0/47058/6e514b28-2edc-5b86-b847-fd465d54ac8b.png)

ああ、そうそう。とにかくダブルクリックだ！


![Chrome](https://qiita-image-store.s3.amazonaws.com/0/47058/80b45da1-dd31-42fe-7bd5-dd0a0b9741b3.png)

あれ？ なんかおかしいぞ。。。なんにもでない。おとうさ〜ん！！！
泣く泣く おとうさんに教えてもらいます。まずは、Chromeのデベロッパーツールでエラーの起きている箇所を調べます。

![Debug](https://qiita-image-store.s3.amazonaws.com/0/47058/dcbceab3-461d-0d53-256e-554db58dd4bb.png)

どうやら、7行目がまずかったようです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47058/64c45d96-27dd-8b6c-0210-3077536020cc.png)

おお！ え？ なに？ なんにも間違ってないよ！ 本の通りだよ！！！！
しばらく考えていると、お父さんが言います。

　　　「そうか、わかった。」

そして、おもむろにTextEditの設定画面を開いて、ポチポチしたら、、、、

![環境設定](https://qiita-image-store.s3.amazonaws.com/0/47058/e7863d8a-30b9-8e6c-c564-5e4d0af80427.png)

もう一度、7行目を書き直せですと!? めんどうだなあ...   はい、どうぞ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47058/38f35c85-67f0-cc9f-1bcb-f5521746048c.png)

なんも変わってないけどね。そして、ダブルクリック！っと。

![Chrome](https://qiita-image-store.s3.amazonaws.com/0/47058/43979c10-8192-a65f-88e1-ef8e35ad54d9.png)

うお！ なんか出た。本の絵とはちょっと違う感じだけど、うまくいったっぽい。

どうやら、TextEditでは、「"」が自動で書き換えられる機能があったらしくて、うまくいかなかったらしい。
なんだか余計なことをしてくれてたんだね。へんなの。

# スクリプトタグ

とにかく、JavaScriptというのは、&lt;script&gt;と&lt;/script&gt;というマークの間に書けばいいってことがわかったよ。ついでに、今日はアラート(alert)というプログラムも覚えてしまったよ。すごくない？ 

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47058/fb767c24-5c3e-e2ec-ae21-a69d4e4bca9e.png)

ふ〜 次は prompt と confirm ってやつだな。えーっと、プロンプトとコンファーム？ と読むんだな。なんだかプログラミングって英語が多いな。しかも聞いたことないのばっかり。お腹が空いたし、今日はこれくらいでいいか。

# （あとがき）

こんにちは、谷岡です。２日目はいよいよJavaScriptの勉強をはじめました。実際にやってみると、いろんな困難に遭遇することがあるものです。今回の例のように、TextEditを利用する際には、ダブルクォートの設定の他にも、ファイル保存の際にリッチテキストではなくテキスト形式にしないといけないこと。勝手に「.txt」という拡張子をつけようとしたときは、「.html」に変更しないといけないことなど、注意点がたくさんあります。

もし、新しいアプリを導入することが可能であれば、Macの場合は、Xcode、mi、atom、Visual Studio Code、Sublime、Bracketsといった有名なものがたくさんありますし、Windowsの場合も、Visual Studio Code、Atom、秀丸、Sublime、Brackets、サクラエディタ、TeraPad、EmEditorなど、さまざまなものが利用可能ですので、お気に入りのテキストエディタを探してみましょう。

ちなみに、Windows、Macの他にLinuxなどでもプログラミングしたいという人は、vi/vimまたは、emacsの使い方を覚えることをお勧めします。独自のショートカットを覚えないと使いこなすことは難しいですが、まさにプロのプログラマーって感じでプログラミングできるようになります。

なお、p.31の「HelloWorld.html」のソースですが、今気がついたのですが、&lt;head&gt;~&lt;/head&gt;とあるべきところが、&lt;/head&gt;~&lt;/head&gt;となっていたようです。JavaScriptの動作には影響ないようですが、転記ミスですね。面目ない。