JavaScript 基礎編 Vol.2
JavaScript備忘録 Vol.2
目次
- 関数
- 引数
- return
- 関数式
今回もJavaScriptの記事になっています。
関数
関数はJavaScriptの基本的な構成要素のひとつです。
JavaScriptの処理__つまり、タスクや値計算を実行する文の集まりです。
まずは書き方
function ○○(){ //○○は関数名 //処理の集まり };
こんな感じで書いていきます。
function ○○ として関数名を宣言し、(){}と続け、必要であれば()内に引数、{}内にこの関数で行う処理内容を記述していきます。
では例文
function line(){ console.log('---------------'); console.log('---------------'); console.log('---------------'); }
関数名をlineとし、コンソールに---------------と出力してね、って処理です。
難しくないですよね！
これだけの説明だとじゃあこれどこでどういう目的で使用するん？
ってなってると思います。
次見てってみましょう！
引数
まずは例文
function line(message){ console.log('---------------'); console.log(`--${message}--`); console.log('---------------'); } line('1st Message'); console.log('1st Take'); console.log('2nd Take'); line('2nd message'); console.log('3rd Take'); console.log('4th Take'); line('3rd message');
関数の呼び出しは
関数名();とします。
ちなみに実行結果は
では見ていきましょう
1行目
function line(message){
6, 9, 12行目
line('1st Message');
line('2nd Message');
line('3rd Message');
これらのline()の()内が引数になります。
もうちょっと細かく説明すると
1行目
function line(message){ //仮引数
6行目
line('1st Message'); //実引数
って言ったりします。
9, 12行目も同じく実引数です。
仮引数については何を入れてもokです。
例えば
function line(text){ //textに変更 console.log('---------------'); console.log(`--${text}--`); //textに変更 console.log('---------------'); }
としても同じ結果が出力されます。
実引数を変えると出力結果を変えることができます。
line('1st Message'); console.log('1st Take'); console.log('2nd Take'); line('2nd message chenge'); //chengeを追加 console.log('3rd Take'); console.log('4th Take'); line('3rd message');
こんな感じですね
関数を一つ用意しておけば複数箇所で呼び出して同じ処理をすることが・・・
・・・・・・できます・・・。
・・・・・(^○^)
chengeじゃなくてchangeじゃ・・・スペル間違って・・・
スクショ取り直したくない・・・
ごめんなさい
return
次はreturnです。
読んで時の如く、戻す！
戻り値ってやつですね
ここはサクッと
function sum(a, b, c){ return a + b + c; }
関数の中で、return a + b + c;となっています。
これは単純にa + b + cの値を返してね、って記述になります。
あとこんな感じで関数内でreturnを使用した場合にはそこで処理を終了してねということにもなります。
if(){ return; }else{ console.log(''); }
もちろんこんな感じでif文の中でも使用することができるのですが、
この場合はifの時は何も処理しない
みたいな使い方もできます。
関数式
ここまで見てきた関数を定義することを関数宣言といいます
最後は関数式、関数を定数に代入していきます。
では例文
const sum = function(a, b, c){ return a + b + c; }; const total = sum(1,2,3) + sum(3,4,5); console.log(total);
こんな感じですね。
sumという定数にa + b + cの値を返す関数を代入しています。
呼び出し方は
sum(1, 2, 3);
のように定数(実引数, 実引数...)となります。
実行結果は
因みに今回の例文のように関数名に名前がついていないものを無名関数なんて呼んだりします。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScript 基礎編
JavaScript備忘録
目次
- if文
- switch文
- for文
- while文
今回もJavaScriptの記事になっています。
if文
前回の記事にも出てきましたがif文を見ていきます。
そこまで難しくは無いのでサクッと
まずは例文
const score = 60; if(score >= 80){ console.log('Great!') }else{ console.log('OK...') }
1行目
const score = 60;
constを用いてscoreという定数に数値の60を代入します。
2~3行目
if(score >= 80){ console.log('Great!') }
if(score >= 80): 60を代入されたscoreが80以上なら
{cosole.log('Great!')}: コンソールにGreat!と表示してね
3~4行目
else{ console.log('OK...') }
else: それ以外は
{console.log('OK...')}: コンソールにOK...と表示してね
で、これもうちょっと簡単な書き方があります。
score >= 80 ? console.log('Great!') : console.log('OK...');
上と意味は同じですがこんな感じでも書けちゃいます。
ただ、可読性を考えると1つ目の方が読みやすかったりするんかなー？？
人によりますかね
そしてこの問題に付随して出てくるのが
論理演算子
「かつ」とか「もしくは」とか「ではない」とかってやつですね。
JavaScriptでも他言語と同じような表現です。
列挙しておきます。
- ===
- &&
- ||
- !==
同じである
かつ
もしくは
同じでない
みたいな感じです
ではこれを踏まえた上で例文
const score = 60; const name = 'tomozqoo' if(score >= 50 && name === 'tomozqoo'){ console.log('Good job!') }
定数定義の部分と、if文内の処理は上記の例と同じなので解説は省略します
if(score >= 50 && name === 'tomozqoo')
まあここも解説不要ではあるかと存じますが
scoreが50以上かつnameがtomozqooであるなら
ということですね。
ではもう少し処理内容が多い例です
const signal = 'red'; if(signal === 'red'){ console.log('Stop!'); }else if(signal === 'yellow'){ console.log('Caution!'); }else if(signal === 'blue'){ console.log('Go!'); }
新たに出てきたのが else if ですね
ifの条件ではなくこの条件なら・・・
みたいな使い方です。
そんなに難しくないですよね！
サクッといきます
signalが赤ならコンソールにStop!と表示してください
signalが黄ならコンソールにCaution!と表示してください
signalが青ならコンソールにGo!と表示してください
うん・・・簡単ちん！
そして、同じ結果を表示するのですが、この処理switch文でも書けちゃいます！
switch文
真上の例をswitch文でいきましょう。
switch文は
switch(){ //（）内の引数が case '': //何々のとき //処理内容 break; //処理終了 default: //それ以外は //処理内容 }
みたいな感じで書きます。
確かdefault内の処理にはbreakは不要です？
では例文
const signal = red; switch(signal){ case 'red' : console.log('Stop!'); break; case 'yellow' : console.log('Caution!'); break; case 'blue' : case 'green' : console.log('Go!'); break; default: console.log('Wrong signal!'); }
解説していきます。
定数定義は大丈夫ですね
switch(signal){}
この中カッコ内にswitch文の処理を書いていきます。
今回は「signalが何々の時」で処理を分けたいので
（）内にはsignalを入れます。
そして
case 'red' : console.log('Stop!'); break;
この部分
case 'red' : :signalがredなら
console.log('Stop!') :コンソールにStop!と出力してください。
break; :処理終了
break;を入れないと処理が終わらないので気をつけてください！
その下yellow, blue, greenは同じ処理ですね。
あ、人によっては信号青を緑って言ったりするんでgreenも入ってます
処理内容が同じ場合には上記のように書けます。
default: console.log('Wrong signal!');
それ以外の場合の処理ということなので、今回はred, yellow, blue, green以外の処理をここに記述していきます。
つまり、red, yellow, blue, green以外の場合は、コンソールにWrong signal!と表示してね てことですね。
for文
次はfor文です。
for(数字を入れる変数を用意; その変数の幅を指定; 変数を増やしていく){ //処理内容 }
これはちょっと説明下手かも
コメントにて苦情受け付けます
取り敢えず例文行ってみよう
for(let i =1; i<=10; i++){ // console.log('hello + i'); console.log(`hello ${i}`); }
まずはlet i = 1
iという変数を用意して初期値を１にします。
i <= 10; :iは10以下であることを定義します。（1, 2, 3, 4, 5, 6, 7, 8, 9, 10）
i++; :処理を行うたびにiを1ずつ増やします。
ではどのように処理がされていくのか解説します。
まず、iに初期値である1が代入されます
iには1が代入されており10以下なので、{}内の処理が実行されます。
コンソールにhello 1と出力されます。
1回目の処理が実行されたので i++ ; でiが1増えます
iに2が代入されます。
iには2が代入されており10以下なので、{}内の処理が実行されます。
以下i = 10まで繰り返し
i = 11となったタイミングで i <= 10の条件から外れるので全ての処理が終了します。
ちなみに
console.log(`hello ${i}`);
の(`hello ${i}`)という書き方ですが
コメントアウトしてあるconsole.log('hello + i')と同じ結果が出力されます。
よく使われると思いますので覚えておられた方がよいのではと存じます。
while文
続いてはwhile文です。
while(){ //（）内の条件の間
console.log(｀${hp} HP left!｀); //この処理を繰り返す
hp -= 15;
}
では例文
let hp = 100;while(hp > 0){ console.log(｀${hp} HP left!｀); hp -= 15; }
let hp = 100;
hpという変数に100を代入
while(hp > 0){}
hpが0より大きい限り繰り返す
console.log(｀${hp} HP left!｀);
コンソールに100HP leftと表示
hp -= 15;
hpから15を引いた数を自己代入
2周目は85, 3周目は70........
hpが10になったタイミングで15を引くとマイナスになってしまい、次の処理に入ろうとすると0より大きいという条件式から外れるので、処理が止まります。
テンプレートリテラルで使用しているバッククォートはマークダウンの都合上全角で書いています。
コピペする際には半角に直してくださいな
今回はここまで
次回は・・・またJS！
それではまた次回！
JavaScript 簡単宝探しゲーム
JavaScript備忘録
目次
- HTMLファイルにCSS・JavaScriptを書き込む方法
- 宝探しゲームの全体のコード
- 各部解説
今回はJavaScriptの記事になっています。
HTMLファイルにCSS・JavaScriptを書き込む方法
以前２記事に渡ってHTMLについて書きましたが、その時にはHTMLファイルとCSSファイルを分けていました。
今回はHTMLファイル一つにCSSとJavaScriptを書き込む方法で書いていきます。
全然難しい話ではないですのでサクッと
まずはCSSを書き込む方法
<head> </head> <style> div{ background-color: aliceblue; } </style> <body> </body>
こんな感じでheadタグとbodyタグの間に書くのがスタンダードなんかな？
スタイルタグを使って中にCSSを書いていきます。
JavaScriptを書くときは・・・
<head> </head> <style> .box{ width: 100px; height: 100px; background-color: aliceblue; } </style> <body> <div class='box'></div> <script> console.log('hoge'); </script> </body>
body要素内の要素を全て読み込んだ上でJavaScriptを実行したいので
こんな感じで、bodyの閉じタグの直前にscriptタグで囲んで中身を書いていきます。
全体のコード
ここはもう本当にこのくらいの記述量でできますよーってだけ
<!DOCTYPE html> <html lang='ja'> <head> <meta charset="utf-8"> <title>JavaScript Practice</title> </head> <style> body{ display: flex; flex-wrap: wrap; } .box{ width: 100px; height: 100px; background-color: skyblue; cursor: pointer; transition: 0.8s; margin: 0 8px 8px 0; text-align: center; line-height: 100px; } .win{ background-color: pink; border-radius: 50%; transform: rotate(360deg); } .lose{ transform: scale(0.9); } </style> <body> <script> 'use strict'; const num = 5; const winner = Math.floor(Math.random() * num); for(let i =0; i<num; i++){ const div = document.createElement('div'); div.classList.add('box'); div.addEventListener('click', () => { if (i === winner){ div.textContent = 'Win!' div.classList.add('win') }else{ div.textContent = 'Lose!' div.classList.add('lose') } }); document.body.appendChild(div); } </script> </body> </html>
こんだけで実装できちゃいます。すごいねーJavaScript
各部解説
まずは
cssの方からいきます
body{ display: flex; flex-wrap: wrap; }
まずbody要素全体に対して
display: flex;
body内の要素を横並び
flex-wrap: wrap;
bodyの幅に合わせてbody内の要素を折り返し表示
今回は5つだけなので折り返し表示にはなっていませんが、数が増えた際に折り返し表示されるために使用しています。
.box{ width: 100px; height: 100px; background-color: skyblue; cursor: pointer; transition: 0.8s; margin: 0 8px 8px 0; text-align: center; line-height: 100px; }
boxクラス
上から順に
幅100px
高さ100px
背景色：スカイブルー
マウスが当たった時のカーソル：ポインター
0.8秒かけて変化
要素間：上0, 右8px, 下8px, 左0
表示させるテキストの左右位置：真ん中
表示させるテキストの縦幅100px
.win{ background-color: pink; border-radius: 50%; transform: rotate(360deg); }
winクラス
背景色：ピンク
枠線の丸み50%（真ん丸）
360°回転するアニメーション
.lose{ transform: scale(0.9); }
loseクラス
比率0.9の大きさに変える
続いてJavaScript
const num = 5; const winner = Math.floor(Math.random() * num);
numという定数に5を代入
winnerという変数を用意
右辺が少し複雑なのですが
まずMath.random()について
Math.random()は０から１未満の数字をランダムに生成します。
ここで重要なのは１未満であること。
１は含まれません。
0.45733749といったような乱数が生成されます。
次にこれにnumをかけています。numには5が代入されているので今回の場合Math.random() * 5となっています。
そうすることで０から５未満の乱数が生成されます。
最後にMath.floorを使用することにより、小数点以下を切り捨てます。
結果0から4までの「0・1・2・3・4」5つの整数がランダムで生成されます。
続いてfor文の中身を見ていきます
for(let i =0; i<num; i++){ const div = document.createElement('div'); div.classList.add('box'); div.addEventListener('click', () => { if (i === winner){ div.textContent = 'Win!' div.classList.add('win') }else{ div.textContent = 'Lose!' div.classList.add('lose') } }); document.body.appendChild(div); }
まずは
for(let i =0; i<num; i++){ }
この部分ですが
繰り返し処理の記述になっています。
let i で i という変数を定義
i < num iの幅をnum未満とします。（numには5が代入されています。）
i++とし、処理のたびiを１ずつ増やします
つまりiは0から1ずつ増えていきますが、5未満とされているのでiが４のときの、中身の処理を終了した時点でこの繰り返しは終わります。
続いて分割しながらfor文の中身を見ていきます。
const div = document.createElement('div'); div.classList.add('box');
まずは1行目
divという定数を用意し、document.createElement('div')を代入します。
document.createElement('div')でドキュメント内に('div')要素を作るという命令です。
ドキュメント内に生成するdiv要素をdivという定数に代入
って感じの処理です
・・・わかりづらいか？
2行目で
この代入されたdivという定数に対し、classList.add('box')
としています。
classList.add('box')は、cssで作ってあるboxクラスをこの定数divに付与する
といった処理になっています。
つまりここまでの2行で
for文はこの処理を5回繰り返すので
div要素を5つ生成し、それぞれにboxクラスを付与する
という処理になっています。
次
div.addEventListener('click', () => { })
これです。これはホントよく使うと思います。
divは頭から定義されている定数
addEventListener()
これは何らかのイベントが発生した時に。というような記述です
この際のイベントとは、前述のクリックされた時、ダブルクリックされた時、マウスオーバーされた時などのイベントを差します。
したがって今回の場合はdiv要素がクリックされた時にこの処理をしてね、という命令になります。
では中身を見ていきましょう
if (i === winner){ div.textContent = 'Win!' div.classList.add('win') }else{ div.textContent = 'Lose!' div.classList.add('lose') }
if文ですね
if(条件){処理1}else{処理2}
です
if=もし
(条件)・・・何々なら
{処理1}・・・この処理してね
else・・・それ以外は
{処理2}・・・こうしてね
今回の場合は
もし
iがwinnerと同じなら（i番目の処理のiとランダムで生成されたwinnerという定数が一緒なら）
ん？ランダムで生成されたwinnerっていう定数とi番目に生成されたdiv要素のi番目が同じタイミングの場合には、、、かな？
伝わるかな？
div要素にwinクラスを付与して[Win!]と表示してね。
それ以外は
loseクラスを付与して[Lose!]と表示してね
といった処理になります。
もし、ランダムに生成された数字が0だったら、一番最初に生成された（iが0の時に生成された）div要素にwinクラスが付与されるといった感じでしょうか？
そしてクリックされた時にCSSで指定しているtransformをしながら[Win!]と表示されるといった感じでしょうか？
いった感じでしょうか？www
そして最後
document.body.appendChild(div);
ボディ要素に子要素として定数div（div）要素を追加する。
というような処理になっています。
全体の流れとしては
定数を用意する
for文でdiv要素を作る
appendChildで表示する
となっています！
今回はここまで
次回は・・・JSかなー？
それではまた次回！
Ruby 文字列に使用できる便利なメソッド
Rubyメソッド(備忘録) vol.11
目次
- .chop!
- .gsub!
今回も備忘録としてRuby関連の記事になっています。
文字列の最後の１文字を取り除く
マウスの「ス」を取り除く
str = 'マウス' result = str.chop! puts result
# 出力結果 マウ
最後尾の１文字を取り除いた結果を出力します。
逆に、最後の１文字を出力したい場合には
str = 'マウス' result = str[-1] puts result
とすることで・・・
# 出力結果 ス
最後の１文字を出力することができます。
文字列の一部を変換する
マウスの「ス」を「ル」に変換
str = 'マウス'
result = str.gsub!('ス','ル')
puts result
第一引数に変換対象の文字、第二引数に変換後出力したい文字を指定します。
# 出力結果 マウル
変換された結果が出力されます。
今回はここまで
次回は・・・またRuby！
それではまた次回！
Ruby 特定の文字を数える
Rubyメソッド(備忘録) vol.10
目次
- .count()
今回も備忘録としてRuby関連の記事になっています。
文字列の中に特定の文字がいくつあるのか数える
mmmTECHmmmという文字列にmがいくつ入っているのか数える
str = 'mmmTECHmmm'
result = str.count('m')
puts result
# 出力結果 6
TECH前のmが3つ、後のmが3つカウントされます。
ちなみに、「文字列」がいくつ入ってるか数えようとして・・・
input = 'yes no yes yes no no no yes'
result = input.count('yes')
puts result
# 出力結果 12
となってしまい（yの数）+（eの数）+（sの数）の合計が出力されてしまいます。
なので、文字列を数えたい場合には
input = 'yes no yes yes no no no yes'
result = input.scan("yes").length
puts result
このようにscanとlengthを合わせて使用すると数えることが出来ます。
# 出力結果 4
times文でyesの数分だけ処理するとかに使用できますね。
今回はここまで
次回は・・・またRuby！
それではまた次回！
