Java Script入門2

基礎編（条件分岐、繰り返し、関数）

例

  • 「 条件」の部分に「1 > a」などの条件を記入し、その結果が trueの時だけ、「 やりたい処理」が実行されます。
  • falseの場合は何もしません。（ムシ）
  • 条件式は、 結果が必ず【 trueか false】にならないといけない ので、 比較演算（＞、＜、＝＝など）、または 論理演算（＆＆、｜｜など）を使います。

条件分岐［if文］

if( 条件 ){
    やりたい処理
}
var hp = 10;
if( hp < 5 ){
    console.log("やられるー");
}

falseなのでなにも出力されない

var hp = 3;
if( hp < 5 ){
    console.log("やられるー");
}

trueなので「やられるー」出力される

  • さて、こっからがプログラミングの醍醐味（だいごみ）の部分です。
  • すでにスクラッチなどでやっていることも多いですが、まだ説明していないことも多いので、しっかり理解して進んでいきましょう。まずは条件分岐（じょうけんぶんき）からです。
  • 条件分岐とは「もし◯◯なら、△△をする」という意味で、プログラムには欠かせない文です。
  • その条件分岐の中でも、基本となる【if（イフ）文】をマスターしておきましょう。
  • if文は、以下のように書きます。

ちょっと寄り道

（）や｛｝について

var hp = 3;
if( hp < 5 ){
    console.log("やられるー");
}
console.log("残りHPは"+hp+"です");

この場合だと、

｛｝（なみかっこ）の中には「やられるー」だけなので、「残りHPは〜」はの部分は、if文とは関係なく、かならず出力されます。

（）→　丸かっこ・かっこ・パーレン　 ※個人的には「かっこ派」

｛｝→　波かっこ・中かっこ・ブレイス　 ※個人的には「波かっこ派」

［］→　角かっこ・大カッコ・ブラケット　 ※個人的には「角かっこ派」

＜＞　→　山かっこ・ アングルブラケット　 ※個人的には「山かっこ派」

  • プログラミングでは、 if文で使われているような（）や｛｝が非常に良く出てきます。

  • 読み方も人それぞれで、よくつかわれる言い方は下の感じです。

  • この中でも、特に ｛｝（波かっこ）はたくさん出てきますし、とても重要（じゅうよう）になる事が多いでの、使いかたを間違えないようにしましょう。
  • ｛｝は【 ここから→｛　｝←ここまで】というように、なんかしらの範囲（はんい）をあらわす時に使われます。
  • if文の場合で言うと、 【条件が trueの時に、やりたい処理】 の範囲（はんい）という事です。
  • この｛｝で区切られた範囲の事を 「ブロック」と言ったりします。※HTMLのブロックとは違うので注意。

条件分岐［if文］ 

if( 条件 ){
    やりたい処理１
    やりたい処理２
    やりたい処理３
}
if( 条件① ){
    やりたい処理１
    if( 条件② ){
     やりたい処理２
    }
}
var hp = 0;
if( hp < 5 ){
    console.log("やられるー");
    if( hp < 1 ){
        console.log(" ( ́;ω;`) ");
    }
}

例

｛｝に注目！

このような形を「入れ子」「ネスト」などとも言います。

この場合、変数hpは0なので、外側のifも、内側のifも両方 trueなので「やられるー ( ́ ́;ω;`) 」と表示されます。

  • ｛｝の中の「やりたい処理」はいくつでも記述できます。
  • 「やりたい処理」の中に、さらにif文を入れる事も出来ます。

条件分岐［if文］[else] 

if( 条件 ){
    条件がtrue（トゥルー）の時やりたい処理
else{
    条件がfalse（フォレス）の時にやりたい時
}

else（エルス）の後の{}の中に、書いた処理は、条件式が falseの場合のみ動きます。

（ trueの時はムシされます）

  • 次は「もし◯◯なら」だけじゃなく 「〜でなければ」も指定する方法です。
  • 「でなければ」は、if文に「else（エルス）」を追加します。
var tensuu = 70;
if(tensuu > 80){
    console.log("合格です");
}else{
    console.log("残念でした");

条件分岐［if文］[else] 

if( 条件① ){
    条件①がtrueの時に、やりたい処理
}else if( 条件② ){
    条件①がfalseで、条件②がtrueの時に、やりたい処理
}else{
    条件①がfalseで、条件②もfalseの時に、やりたい処理
}
var tensuu = 70;
if(tensuu > 80){
    console.log("合格です");
}else if(tensuu > 60){
    console.log("もうちょい");
}else{
    console.log("残念でした");

else ifの後の{}の中に、条件①が falseだった場合の、次の条件（条件②）を記述します。

  • さらに最初の条件が「 falseだった場合」に、2番めの条件を指定することも出来ます。
  • 繰り返せば、いくらでも条件は増やせます。

条件分岐［if文］[else] 

var hp = 0;
if( hp < 5 ){
    console.log("やられるー");
    if( hp < 1 ){
        console.log(" ( ́;ω;`) ");
    
}

※else ifの始まりの｛　が足りないため、エラーになる。

var tensuu = 70;
if(tensuu > 80){
    console.log("合格です");
}else if(tensuu > 60)
    console.log("もうちょい");
}else{
    console.log("残念でした");

※終わりの ｝が足りないため、エラーになる。

例

  • if文は（）や｛｝が大量に増えてきますが、それぞれのカッコの 始まりと 終わり を見失いやすいので注意しましょう。

繰り返し文[ for ] 

for(var i=0（数える用の変数作る） ; i<3（処理をする条件） ; i++（数える変数を１足す）{
    ※ここに繰り返したい処理を書く。
}
for(var i=0 ; i<3 ; i++){
    console.log("ほ");
}
※ほほほ　と表示される。

例

  • くりかえし文とは、何度も同じ処理をくりかえしたい時に使います。ループとも言います。
  • いろいろな種類（しゅるい）がありますが、まずは基本的なfor（フォー）文から覚えましょう。
  • 書き方は少し特殊（とくしゅ）で、以下のように書きます。

繰り返し文[ for ]

①の条件判定が trueの間だけ、処理されて、 falseになったら繰り返しが終わります。

変数iのことを「カウンター変数」と呼びます。

もくじへ戻る

  • for文の処理の動きはこのようになります。（①から③が繰り返されます）

繰り返し文[ for ] 

for(var i=0 ; i<繰り返したい回数 ; i++)
for(var i=93 ; i>90 ; i--){
    console.log("ほ");
}
//これでも"ほほほ"と表示される。
  • for（フォー）文は、とても色々な書き方が出来ます
  • ただしややこしくなってしまうので、わかりやすいルールを決めておいた方が良いかと思います。
  • 例えば、以下のように書くと、くりかえしたい回数だけ指定すれば、その回数だけ処理をくりかえしてくれます。

  • つまり【くりかえす回数以外】は変えずに、上のかたちで決めておき、くりかえしたい回数のところだけをかえれば［◯◯回くりかえす］というプログラムが作れます。

  • 続いては関数（かんすう）というものです。
  • 現在、コンピュータの中で動いているプログラムは、そのほとんどが関数で出来ています。それぐらい重要な部分ですので、ちゃんと理解できるようにゆっくり進みましょう。
  • カンタンに言うと、関数とは【処理（命令）をまとめた物】です。必殺技と考えても良いでしょう。

関数（かんすう）

たとえば…

  • コーラが飲みたくなったので、ロボット君に買ってきてもらいたいとします。
  • その場合の必要な処理（命令）は以下とします。
    • ​①玄関（げんかん）まで行く。
    • ②自販機まで行く。
    • ③お金150円を入れる。
    • ④「コーラ」のボタンを押す。
    • ⑤コーラを取る。
    • ⑥家に帰ってくる。
  • 本当はもっと複雑（ふくざつ）​な命令になりますが、6個にしてみました。
    • これだけでも命令するとなるとタイヘンなのがわかりますよね？
  • まぁまだ、1回だけ買ってきてもらうだけなら良いですが、別の日に、またコーラが飲みたくなった場合、もう一度同じ命令（①〜⑦）をするのは余計メンドウです。

【コーラ買いに行く】関数

中身：色々な命令

（まとめておく）

  • そんな時に【コーラを買いに行く】という関数（必殺技）を作っておけば、【コーラを買いに行く】関数を実行させるだけで良いので、非常に楽になります。

関数（かんすう）

  • 必要な処理（命令）
    • ①【コーラを買いに行く】という関数の実行
  • 関数を作っておくだけで、いつでもカンタンに命令を出すことができます。
function log(){
    console.log(100);
}
※１００という数字を出力させるためだけの関数
function 関数名(){
    処理
}

例

  • 関数を作る事を「関数を定義（ていぎ）する」という言い方をします。
  • 定義の仕方は下の感じです。

関数（かんすう）

function log(){
    console.log(100);
    console.log(200);
    console.log(300);    
}

log();　
※↑100,200,300が表示される。

function 関数名(){
    処理;
}
※↑定義（ていぎ）はここまで。

関数名();　
※↑これが関数の呼び出し。関数名（）で呼び出せる。

例

  • 関数は定義（）するだけでは、動きません。（命令されていないということ）
  • 関数を動かしたい場合は、関数を呼び出す（よびだす）必要があります。

関数（かんすう）

function aisatu(name){
    console.log('ハロー,' + name);
}

aisatu('トム');
※↑「ハロートム」と出力される。
function 関数名( 引数（ひきすう） ){
    処理（引数が含まれる）;
}

関数名( 引数に渡す値 );　
※↑関数の呼び出しの時に()の中に、値（ね）をいれて呼び出す。

例

  • さらに関数を便利（べんり）にするための仕組みがあります。それが引数（ひきすう）です。
  • 引数とは関数に【値（ね）】を渡す仕組みです。っというと意味不明な感じがしますが、難しいことではありません。
  • 引数とは変数の仲間だと思ってください。つまり、中にいろいろ代入できる箱です。

関数（かんすう）

function sikaku(x, y){
    var menseki = x * y;
    console.log(menseki);
}
  • たとえば、下のような関数を作ります。

関数（かんすう）

function sikaku(x, y){
    var menseki = x * y;
    console.log(menseki);
}

sikaku(10,20);
※↑２００と出力される。
  • 名前をみればわかると思いますが、これは四角形の面積（めんせき）を計算する関数です。
    • ※四角形の面積はタテ×ヨコの長さでしたね？
  • このsikaku関数の中身では、xとyがかけ算されていますね。このxとyが引数です。
  • つまり、このsikaku関数を呼び出すときに、引数にタテとヨコの数字を指定して呼び出すと四角形の面積を、自動的（じどうてき）に計算して出力させることができます。
  • この便利さがわかれば、関数がどんなパワーをもっているか、理解できると思います。

①玄関まで行く。

②【ikisaki】引数まで行く。※自販機じゃない可能性もあるため。

③お金【nedan】引数円を入れる。※お金が変わるかもしれないため。

④【kaumono】引数のボタンを押す。※コーラ以外のものを買ってきてもらうかもしれないため。

⑤【kaumono】引数を取る。※↑の④と同じ理由

⑥家に帰ってくる。

  • 逆に【絶対に変わらない値】は引数にする必要はありません。
    • （※無意味な引数を増やすとややこしくなるだけです）
  • たとえば、今回のケースでは【玄関】【家】などは引数にしていません。

関数（かんすう）

  • 大事なのは【なにを引数（ひきすう）にすれば良いのか？】というところです。

  • これを自分で判断（はんだん）できれば、関数の作り方はマスターしたも当然です。ちゃんと理解しましょう。

  • 基本的（きほんてき）に引数にするのは【変更する可能性（かのうせい）のある値】です。

  • 先ほどの【買ってきてもらう関数】でたとえると、下の感じです、

var a = 100;←関数の外で作った変数は…
function sukopu(){　
    console.log(a);←関数の中で使える！
　}　　

sukopu();
※↑ちゃんと100と表示される。
function sukopu(){
    var a = 0;←関数の中で作った変数は…
}

console.log(a);
※↑外からは使えない！エラーになる。

◯

✕

  • さて、関数の意味や、便利さを理解できたでしょうか？
  • 少し話が変わりますが、プログラミングには【スコープ】というものがあります。​
  • スコープとは「変数の参照（見れる）できる範囲（はんい）」の事で、具体的には、スコープの中で変数を作ると、スコープの外からは「その変数は見られない」というものです。
    • ※【見られない】というのは【使えない】ということです。
  • jsの場合は【関数がスコープ】になっていて【関数の中で作った変数は、関数の外から使えません】
  • 下のコードをみてください。

関数（かんすう）スコープ

✕

var a = 0;←ここで変数aを作った。スコープの外のなので、グローバル変数のaが出来た。
function sukopu(){
    var a = 10;←また”宣言”（せんげん）したので、今度はローカル変数のaが出来た。
    console.log(a);
}

sukopu(); ※←ここでは、ローカル変数のaが出力されるため10と出力される。
console.log(a);　※←ここでは、グローバル変数のaが出力されるため0と出力される。
var a = 0;←ここで変数aを作った。スコープの外のなので、グローバル変数のaが出来た。
function sukopu(){
    a = 10;←ここでは、宣言していないので、グローバ変数のaに10が代入されるだけ
    console.log(a);
}

sukopu();　←この関数を使うことで、グローバ変数のaに10代入されるので、１０と出力される。
console.log(a);←ここでもすでに、グローバ変数aは10になっているので、１０と出力される。
  • 関数の外で作られる変数を【グローバル変数】と言い、
  • 関数の中で作られる変数を【ローカル変数】と言います。
  • また、下のコードのように、スコープの中で、同じ名前の変数を宣言すると、別の変数が作られることになります。ちょっとややこしいですが、下のコードの違いを理解してください。

関数（かんすう）スコープ

  • 先ほどやった引数は、動きとしてはローカル変数そのものです。関数のスコープの中だけでしか使えません。
  • ただ、関数を呼び出す時に、同時に値を伝えることが出来るところだけが違います。
  • 言い方を変えれば、【関数スコープの外から、ローカル変数をイジれる（代入できる）仕組み】と言えます。
    • まぁここらへんは難しいので、今は理解できなくて問題ありません。

関数（かんすう）スコープ

お疲れ様です！

  • ここで、JS基礎編（きそへん）は終わりです！
  • 次は実際に、WEBサイトでJSを動かしていきましょう！
  • →【DOM操作】へすすむ

お疲れ様です！