超初心者向け!!JavaScriptも一緒に学ぼう。Part.1

さぁ、オーカワに触発されPC言語について学び始めたオサダです。

今回は超初心者向けJavaScript。比較的簡単な言語ながら開発されてから使われ続けてる言語である(という評価が多いようです)。

htmlはマークアップ言語だと、前回のhtmlの回でお話しました。そして今回はプログラミング言語。

初心者にしてみたら、何が違うのか、もはや何を言っているのか状態です。偉い人に「違う解釈をするな!」と言われるのが怖くて、この手の記事を書く時は『〜である』と言えないです。はい。

とりあえず、恐れ戦きながら書いていこうと思います。間違えたらオーカワが訂正してくれるよきっと!!

JavaScriptとは

序文で書きましたが、プログラミング言語のひとつです。しかも皆さん見覚えのあるかもしれない、あのコーヒーの図柄が出てくるJavaとは別物です。マジかよ……。

これを混同すると、偉い人に怒られると教えられました。気をつけましょう。

マークアップ言語とプログラミング言語の違いを僕の言葉で表現するとしたら

  • 文字などの表示に関わるのがマークアップ言語
  • クリックやキーボードの入力によって何らかの動作を予め決めておく。それを司るのがプログラミング言語

とか、こういう説明が適切かつ簡単かつ初心者向けではないでしょうか!

間違ってたら大変だ。くわばらくわばら……。

JavaScriptを書いてみよう。

まずはテキストエディタをダウンロードすべきですね。言語をコーディングするソフトです。

僕は『Atom』というソフトにしてみました。使用者の声が良かったので……。ソフトの使い方に関してはまたお話ししますが、プラグイン(追加機能のようなもの)をインストールしないと日本語にすらなりません。お気をつけて。

オーカワは『Vim』を利用しているようです。使い勝手について尋ねたところ「とにかく神。」だそうです。ボキャ貧かよ。

さぁhtmlの時と同じく、基礎の基礎から見ていきましょう。

文の書き方と出力方法

実はPC言語では、『Enterによる改行が意味をなさない』ことが多いです。半角スペースは意味がある事が多いですが、その言語ごとに『文の切れ目』を表す文字があるようです。

例えばhtmlでは、</○○>ですね。これによって『文(というより機能の及ぶ範囲)を閉じる』ことができましたね。

JavaScriptでは、『;(セミコロン)』が利用されています。言語の文のなかで句点のような力を持ちます。

「今日はいい天気ですねこも喜んでいます」←謎な文章ですが、句点が無いだけですごく読みにくいですよね。

PCは精密な機械です。読み込んだものを読み込んだまま処理するので、こんな風に文が繋がっていると処理は正確に行われません。気を付けましょう。

しかし、わりとすぐに「;を使わない文」が出てきますが、基本的にはつけるものと考えておいてください。

また出力は『document.write();』という構文を利用します。(ここにも『;』が使われてますね。)

()の中身を出力する形になります。出力のされ方は次の項で見て下さい。

変数

変数は言うならば、数学でいう『xy』にあたります。『中身がある文字や文字列』であると考えてください。

これがめちゃめちゃ重要になります。まさに基本のキ、ってやつですね。

これには『var』を使います。『var ○○』で「○○という変数を用意(変数を宣言)」し、『=』で「その変数に文字や数字を代入」します。ここで注意点がいくつかあります。

  1. 左辺の変数に、右辺の文字列または数字を『代入』している。
  2. JavaScriptは上から順に処理していくため、同じ文字に何度も代入すると先に代入したものは消えてしまう
  3. 文字列を入力したい場合は、『""』で囲う必要がある。(これは変数に限らない。)

これを抑えて基本形を見ていきましょう。

var osada = 22;  //osadaという文字列に22という数字を代入
document.write(osada);
document.write("osada");

この場合、出力されるのは

22
osada

となります。『""で囲むと文字列として扱われ、囲まないと(事前に定義されている場合)変数として中身を出力する』わけですね。

次は二回代入してみます。

var osada = 22;         //この時点ではosadaの中身は22という数字
document.write(osada);
osada = "compass" ;   //ここでosadaの中身がcompassという文字列になった,varは不要
document.write(osada);

この場合出力されるのは

22
compass

となります。どうでしょう。伝わりますかね?

四則演算

シンプルな計算をしてみましょう。

記号は『+,-,*,/,%』を使います。それぞれ『足す、引く、掛ける、割る、割った時の余り』を示します。

そしてここで「数学的な脳みそを捨ててください。」数学が得意だった僕は、「は?」ってなりました。

var x = 5;
x = x + 3;
document.write(x);  //8が出力される

さぁ、言いたいことはわかってます。「x=x+3ってなんだよ!」ですよね。わかってます!

先程の項で言いましたよね、『=』は等しいではなく代入なのです。(等しいを表す記号は次の項で出てきます。)

2行目を処理し始める時に、PCは『=』を見つけ、左辺への代入元である右辺を計算します。その時点では『x=5』であるので、『5+3』となりますよね。それを左辺のxに代入をしたわけですね。(実際の処理はわかりませんが……。)

さらに最初は覚えなくていいですが、四則演算は省略ができます。

x = x + 3; のように『両辺に数字が定義されている同じ変数がある』場合、
x += 3; というように省略することが可能です。他の演算子も同様です。

さらにさらに、『+,-』に限っては、足す数or引く数が1の場合、すなわち
x += 1;  もしくは  x -= 1; の場合、
x ++;  x --;    という省略も可能です。覚えておいて損はないですが、今は忘れておきましょう。

比較演算子と条件分岐

今回最後の項になります。頑張りましょう。

まずは比較演算子。数学の記号と併せてみるとわかりやすいです。

 演算子               数学           意味
x < 20      x<20 xは20より小さい。
x <= 20    x≦20   xは20以下である。
x > 20      x>20   xは20より大きい。
x >= 20    x≧20   xは20以上である。


x == 20    x=20   xは20である。(20と等しい。)
x != 20     x≠20    xは20でない。

この6つですね。最初は本当に意味が分からないでしょう。でもこれも慣れだと思います。とにかく真似をして書いてみましょう。

そしてこれをよく利用するのがif-else構文です。条件分岐になります。
これは解説より先に見本を見てみましょう。

var x = 15;
if (x <= 10) {
    document.write("xは、10以下です。");
} else {
    document.write("xは、10より大きいです。");
}

{}を使っているためか、文末に『;』が付きません。ifはかなり使うので覚えておきましょう。

if (x <= 10) により条件を定めています。今回の条件は『xが10以下である』かどうか。
その条件式がtrue(正しい)場合、その{}内の処理が行われ、false(間違っている)場合、その処理は飛ばされます。
else は if の条件が当てはまらなかった場合に使われます。今回は if の条件が間違っていたため、else の処理が行われます。すなわち「xは、10より大きいです。」が出力されます。

もっと条件分岐を増やす、『else if』もありますが、今回は割愛しますね。

まとめ

いやー、どうですか皆さん。html以上にとっつきにくいでしょう。

最初は本当に訳が分からなかったですね。;を何回も忘れるし。ちゃんと出力されないし。

しかし僕の経験で誰かが助かってくれたら……。嬉しいですね……。

ちなみに僕はこちらのサイト様で練習しました。わかりやすいし、ブラウザ上に入力するのでお手軽です。途中からは有料ですが、無料でも基礎は十分学べると思います。

Progateはオンラインでプログラミングを学べるサービスです

次回はこのままPart.2。初心者なりにいろいろ試行錯誤をして、すごい簡単なコーディングをしてみました。

「初心者でも調べながらやればここまでできるんだ!!!」ってことを見せつけてやります。

もちろん経験者からしたら……、しょぼいものになりますので……許してください。

では、また4日後に。

超初心者向け!!JavaScriptも一緒に学ぼう。Part.2
前回の続きです。Part.1はこちら。 前回学んだことを(めち...

(2017/6/11 19:00にリンクが有効になります。)

The following two tabs change content below.

オサダ

様々なジャンルの記事を書いていきます。
興味がないのに読んでしまう。そんな記事を目指して。

言葉を介してあなたのもとに。言葉がなくともあなたと共に。

連絡先:osada@routecompass.net