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 変数名 = (引数) => {命令文} で書くことができる

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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