JavaScript入門講座|アロー関数について学ぼう

JavaScript
うさタブ
うさタブ

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

ユウキ
ユウキ

アロー関数??

うさタブ
うさタブ

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プログラムセット sample1sample1です(){
documentHTMLに.write書き出して(“Hello World”+<br/>改行して);
}
sample1sample1を実行して();

ていう意味ッピ!

アロー関数の書き方

うさタブ
うさタブ

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

うさタブ
うさタブ

<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プログラムセット sample2 = () => を作ります {
documentドキュメントを.write書き出してください(Good morningグッドモーニング+<br/>改行してください);
}
sample2();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アロー関数sampleを作ります = (A,B引数はA,Bです) => {
documentドキュメントを.write( 書き出しますA+B+<br/>改行します);
}
sample3sample3を実行して(5,1 引数は A=5, B=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 変数名 = (引数) => {命令文} で書くことができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました