
今回はアロー関数について勉強するッピ!

アロー関数??

function関数のように呼び出したい場所でプログラムセットを呼び出すモノっぴ!
アロー関数を覚えて、みんなと差をつけるッピよ~
- function関数についてのおさらに
- アロー関数について
- アロー関数の使い方
アロー関数について学ぼう
必要なもの


- メモ帳
- ブラウザ
が必要ッピ!
元になるコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>

このコードを元に勉強していくッピ~!
function関数

まずは今まで通りのfunction関数を使って見るッピ!
//今まで通りのfunction関数
function sample1(){
document.write("Hello World"+"<br/>");
}
sample1();


できた~!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
//今まで通りのfunction関数
function sample1(){
document.write("Hello World"+"<br/>");
}
sample1();
</script>
</body>
</html>

これが今までのfunction関数ッピ! これは
function sample1(){
document.write(“Hello World”+“<br/>“);
}
sample1();
ていう意味ッピ!
アロー関数の書き方

次はさっそくアロー関数を書いて見るッピ!

<script></script>の間に
//アロー関数
let sample2 = () => {
document.write("Good morning"+"<br/>");
}
sample2();
と入力して見るッピ!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
//今まで通りのfunction関数
function sample1(){
document.write("Hello World"+"<br/>");
}
sample1();
//アロー関数
let sample2 = () => {
document.write("Good morning"+"<br/>");
}
sample2();
</script>
</body>
</html>


おお! function関数みたいに文字がでたぞ~!
アロー関数とは?

アロー関数は、( => )を使って、function関数よりも短くシンプルに記述するプログラムセットッピ!

今回のアロー関数は
let sample2 = () => {
document.write(“Good morning“+“<br/>“);
}
sample2();
という意味ッピ!

でもこれ前のfunction関数より長くね?
アロー関数は短くてシンプルなことが特徴なんだろ?

良い質問ッピ~!
アロー関数は、計算や特定の処理をするときわかりやすくすることにたけるッピ!

今まで通りの関数では、こんな風に記述していたッピが、
function A (B){
return B + 10;
}
let A = B => B + 10;
アロー関数ではこんな風にシンプルに記述できるッピ!

でも今回はアロー関数の利点がわかりにくいッピね!
//今まで通りのfunction関数
function sample1(){
document.write("Hello World"+"<br/>");
}
sample1();
//アロー関数
let sample2 = () => {
document.write("Good morning"+"<br/>");
}
sample2();
これはプログラムの結果を document.write で出力してるからッピ!

ふーん、いろんなやり方があるんだなぁ
引数を使ったアロー関数

次は引数を使ったアロー関数を学ぶッピ!
<script></script>の間に
//引数を使ったアロー関数
let sample3 = (A,B) => {
document.write(A+B+"<br/>");
}
sample3(5,1);
と入力するッピよ~


お、なんか数字がでた!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ↓この下に入力してね!↓ -->
<body>
<script>
//今まで通りのfunction関数
function sample1(){
document.write("Hello World"+"<br/>");
}
sample1();
//アロー関数
let sample2 = () => {
document.write("Good morning"+"<br/>");
}
sample2();
//引数を使ったアロー関数
let sample3 = (A,B) => {
document.write(A+B+"<br/>");
}
sample3(5,1);
</script>
</body>
</html>
アロー関数で引数を使った計算をする

今回使ったアロー関数の引数・・・
これは、
let sample3 = (A,B) => {
document.write(A+B+“<br/>“);
}
sample3(5,1);
ていう意味ッピ~!

なるほど~
勉強になったぜ

詳しくは下のサイトを見るッピ!
勉強になるッピよ~
全体のコードの確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ↓この下に入力してね!↓ -->
<body>
<script>
//今まで通りのfunction関数
function sample1(){
document.write("Hello World"+"<br/>");
}
sample1();
//アロー関数
let sample2 = () => {
document.write("Good morning"+"<br/>");
}
sample2();
//引数を使ったアロー関数
let sample3 = (A,B) => {
document.write(A+B+"<br/>");
}
sample3(5,1);
</script>
</body>
</html>
- アロー関数は、従来の関数 function{命令文}よりシンプルに記述できる
- アロー関数は、let 変数名 = (引数) => {命令文} で書くことができる

上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!