IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

プログラミング未経験者が JavaScript でプログラミングをするために必要なこと

JavaScript

（執筆中）
（文章の練習も兼ねてぐだぐだと執筆中、現時点で読んでも日本語になってないと思います。）
（執筆途中だけど、こうしたらいい！とか、アドバイスがあれば教えてください＞＜読者みんなが編集者！とか言ってみる）
（あ、はてな記法のパッチを送ってくれてもいいです＾＾）
（ちょっと、 Shibuya.JS in Kyoto → PHP カンファレンスがあるので、次の更新はそれ以降になるかも）

自分の知り合いに「まったくのプログラミング未経験だけど、自分のウェブサイトを作ってみたい！」という人がいるので、プログラミングを始める前に必要な知識や心構えや準備などを書いておこうと思います。もちろん、最初に使う言語は JavaScript です。
この文章は、プログラミングまったくの未経験者が読んで分かる文章を目指しています。もし、分からない部分がある場合は指摘してください。聞いてください。自分で調べる必要はありません。

はじめに

この文章は、今からプログラミングを初めてみたいと思っているあなたのために書かれています。もし、あなたがプログラミングを初めてみたいと思っていたら、この文章を読んでプログラミングを始めてみませんか？この文章は、きっとあなたの人生を少しだけ変えるきっかけになると思います。
まず、少しイメージを膨らませるために、「プログラミングが出来るとどんなことが可能になるのか」を書いてみたいと思います。
プログラミングが出来るようになると、パソコンを今以上に使いこなすことが出来るようになります。かわいいホームページや便利なサイトを作ることが出来るようになります。「パソコンでこんなこと出来たら便利だな」と思うことを自分一人で実現出来るようになります。
すごいと思いませんか？わくわくしてきませんか？
プログラミングをして何かを作るということはとっても楽しいことなのです。
ただ、プログラミングの習得は「超簡単」なことではないかもしれません。しかし、覚えるべきことを覚えていけば確実に習得することができます。諦めずに頑張ってみてください。この文章がその手助けになれば嬉しいです。

プログラミングとは何か

プログラミングってどんなことだと思いますか？一番想像しやすい例をあげると、「ゲームを作る作業」はプログラミングですよね。そんなイメージありませんか？僕も、最初に「プログラミングってどんなこと？」で想像したのは「ゲームとかエクセルみたいなのを作ること！」でした。
そして、だいたいそのイメージは正しかったと思います。
今では、僕はプログラミングというものをこういう風に思っています。

「状態と機能をたくさん持ったモノ」（例えば、パソコン）に、「こうだったら（状態）、こうする（機能）」という「ルール」を書いていって「便利なモノ」（例えば、ゲーム）を作る作業がプログラミングである。

例えば、パソコンは

  • 状態として、マウスの動きや、キーボードが押された押されない、パソコン内部の時計の指している時間、といった状態
  • 機能としては、画面に何か書く、音を鳴らす、といった機能

を持っています
これらを、綿密に組み合わせて「ルール」を書いていけば、ゲームでも何でも作れるような気がしませんか？それが、プログラミングなのです。そして、その「ルール」を書くための言葉が「プログラミング言語」なのです。

ちょっと脱線：「実は、脱初心者が一番難しい」
実は、プログラミング自体はそんなに難しいことではありません。ただ、最初の一歩、脱初心者がとても難しいのです。
僕もそのときの苦労をはっきりと覚えています。はじめは、本当に何から始めていいのか分かりませんでした。いろいろ入門書などを買ってもみましたが、全然上達しませんでした。
でも、分かり始めるとあっという間にプログラミングは上達します。ここで、諦めないことが肝心なのです。


何故、脱初心者が難しいのか
僕がプログラミング初心者だったあの頃、いったい何が難しかったのでしょうか。
まず、入門書に書いてある用語が分かりません。
さらに、用語をインターネットで検索してみても、そこに書いてある用語も分かりません＞＜
とりあえず、わからないまま入門書に書いてあるサンプル（プログラミングの実例）を書き写して進めていくんですが、微妙な違いで自分のパソコンでは動かず、先に進めなくなってしまうのです。一応、原因を調べるのですが書いてあることの意味が分からず、挫折してしまうのです。
プログラミングを始めたばかりのときは、この堂々巡りがけっこう続いた気がします。


その解決策
それを最終的にどうやって解決していったかというと、「答えを探しすぎる」のをやめました。
ある程度分からないことは、「これは何なのか」「この用語の意味は何なのか」という自分自身の問いに対して、仮説を立てて、自分だけの答えを出すのです。
自分の仮説に矛盾を感じるときには、もう一度仮説を立て直せばいいのです。
こういう点から考えて、プログラミング未経験者が最初に読むべき文章は、「一つのキーワードに対して、違う言い回しで矛盾のない解説が何度も何度も書かれている文章」だと思います。
あと、サンプルが動くことはとても重要です。サンプルが特定の環境で動かない場合は、出来る限りの解説が必要です。
この文章は、そういう文章になるように努力して書き進めていく予定です。


用語解説サイト
一応、コンピュータ用語解説、プログラミング用語解説サイトを載せておきます。自分の仮説と比較してみるのもいいと思います。

プログラミング言語の選択肢

プログラミング言語には、様々な種類があります。ちょうど、「人が普段使う言語（自然言語）」に「日本語」や「英語」があるような感じですね。
「どういう記法で書いたら効率がいいのか。」その試行錯誤により、プログラミング言語も日々進化しています。その中で、新しい言語がどんどん生まれているのです。そして、プログラミング言語には「こういうものを作るにはこの言語がいいよ」と言った向き不向きもあります。
この文章では JavaScript というプログラミング言語を使ってプログラミング言語を解説します。

ちょっと脱線：「複数のプログラミング言語が出来たほうがいい」
「プログラミング言語は宗教」と言われるくらい、一つのプログラミング言語に拘りを持つ人が多いです。それが原因でケンカをしている人も良く見かけます。それはそれで楽しいですが。ただ、食わず嫌いは良くないです。
なので、一つのプログラミング言語が出来るようになったら、もう一つくらい別のプログラミング言語を勉強してみてください。プログラミング言語には、そのプログラミング言語を作った人の価値観が凝縮されています。複数の人の価値観に触れてみて始めて自分の価値観が生まれるのだと思います。一つのプログラミング言語しか経験がないと割と一つの価値観（偏見）に染まりがちです。
僕自身も、 C → Java → JavaScript → Perl と使ってきましたが、その過程で少しずつ自分の価値観というものが築かれていったと思います。そして、複数のプログラミング言語をやっているからこそ、より確信を持って自分が好きな JavaScript の素晴らしさを語ることができるのです。

JavaScript とはどんなプログラミング言語なのか

JavaScript とは、誤解を恐れずに言ってしまうと「ウェブページ（ホームページ、ウェブサイト）に動きを付け加える」ためによく使われる言語です。
ただし、それは JavaScript の一部の使われ方に過ぎません。もちろん、普通のパソコンのソフトウェアも作ることもできます。また、 JavaScript は文法に癖が無く、覚えることが非常に少なく、 JavaScript をやっていれば他のプログラミング言語にもすぐに対応出来るようになるという特徴があります。なので、初心者には非常におすすめのプログラミング言語です。

プログラミングを始めてみましょう！

ここまで自分なりに理解できましたか？それでは、さっそくプログラミングを始めてみましょう！
JavaScript でプログラミングを始めるには、「ウェブブラウザ」と「テキストエディタ」というソフトウェアを使います。実は、これらのソフトウェアは Windows や Mac などの一般的な OS には最初から両方とも入っています。

テキストエディタを起動する

Windows には、「メモ帳」というテキストエディタが入っています。
起動方法するには、「スタートメニュー」→「すべてのプログラム」→「アクセサリ」→「メモ帳」を選択します。
TODO:画像:スタートメニューからメモ帳
はい、起動しましたね
TODO:画像:メモ帳のウィンドウ


Mac の場合は、「テキストエディット」というテキストエディタが入っています。
起動するには、 Finder の「移動」メニューから「アプリケーション」を選択し、
TODO:画像:Finder のメニュー
出てきたウィンドウの中から「テキストエディット」のアイコンをクリックします。
TODO:画像:Finder のウィンドウ
はい、起動しましたね
TODO:画像:テキストエディットのウィンドウ

JavaScript を書いてみる

「テキストエディタ」を起動したら、Mac の場合は、まず「フォーマット」メニューから「標準的テキストにする」を選択します。（Windows の場合は何もしなくていいです）
そして、真っ白なところにキーボードで以下のように記述してください。（半角／全角に注意してください）

<script>
var name = prompt("What is your name");
alert("Hi" + name);
</script>

この &tl;script> 〜 </script> に囲まれた部分が JavaScript です！
TODO:画像:実際に JavaScript が記述されたウィンドウ

テキストファイルの説明

ファイルを保存する

JavaScript がが書かれたファイルをデスクトップに「000.html 」という名前で保存します。
Windows の場合、「ファイル」メニューの「名前を付けて保存」を選択します。
TODO:画像
ファイル名に、「000.html」と入力して、ファイルの場所から「デスクトップ」を選択します。
TODO:画像
デスクトップに 000 というファイルが出来ていますね！
TODO:画像


Mac の場合、「ファイル」メニューの「保存」を選択します。
TODO:画像
名前に、「000.html」と入力して、ファイルの場所から「デスクトップ」を選択します。
TODO:画像
デスクトップに 000 というファイルが出来ていますね！
TODO:画像

ファイル名と拡張子の説明

ウェブブラウザを起動する

ウェブブラウザとは、「インターネットを見るためのもの」です。この文章を表示しているソフトウェアのことですね。
Windows では Internet Explorer 、 Mac では Safari というウェブブラウザが最初から使えます。
TODO:画像:ウェブブラウザ IE と Safari
ロケーションバー（TODO:画像にロケーションバーの位置を明記）に URL （ウェブページのアドレス）を入力し、 Enter キーを押すとウェブサイトを見ることが出来ます。
TODO:画像:ロケーションバーのアップ

JavaScript が書かれたファイルをウェブブラウザで開く

ウェブブラウザのウィンドウにファイルをドラッグ＆ドロップすると、自分のパソコンのファイルを開くことができます。
ということで、さっき作った 000 というファイルをドラック＆ドロップしてみましょう。
TODO:画像:ドラッグ＆ドロップ
おおおお。動きましたね！
TODO:画像:ドラッグ＆ドロップ

もう一度編集（上書き）したいときの方法

ここまでのまとめ

  • 準備オッケー的で、レッツゴー的な何か