日本一やさしいプログラマーのブログ

わけあって世界で1ばんやさしいプログラム入門をつくる事になりました

世界で1ばんやさしいプログラム入門5(関数編の前半)

前回は

世界で1ばんやさしいプログラム入門4(変数応用編) - 日本一やさしいプログラマーのブログ

 

りんごの合計金額を計算するプログラムを書きました。

今回はりんご、ばなな、みかん、いちごの合計金額を計算せよ!

  • りんご5個1つ120円
  • ばなな2個1つ100円
  • みかん4個1つ110円
  • いちご3個1つ90円

と言われたら前回と同じ方法でいくと

 

  • りんごの計算
    taxRate = 10
    apple = 5
    price = 120
    totalPrice = apple * price
    totalPrice + totalPrice / taxRate

  • ばななの計算
    taxRate = 10
    banana = 2
    price = 100
    totalPrice = banana * price
    totalPrice + totalPrice / taxRate

  • みかんの計算... (省略)

といったように長いし、面倒ですね。

短くスッキリできれば良いですよね?

 

そこで 関数 というものを使って短くする方法を解説します。

小学校でならった関数の事は忘れてください。

意味もしらなくてOKです。(ただのプログラムの中の名称ですw)

 

前回までは一行で完結したプログラムを書いていましたが今回からは
数行のプログラムを書きます。

 

そこで

Windowsの方は「メモ帳」

Macの方は「テキストエディット」

を使います。どちらも最初からインストールされているものです

 

今後はこの2つを「テキストエディタ」と呼びます

 

それぞれ自分の環境のものを起動します。

 

私の環境はMacなので画面は「テキストエディット」で解説します。
Windowsのメモ帳もほとんど変わりは無いので心配いりません。

 

f:id:belcrod5:20201105183621p:plain

起動すると何も書いていない真っ白なウインドウが表示されますね

 

では、ここに前回までで解説したプログラムを書いてみます。

1 + 1 と書いてみます。

 

f:id:belcrod5:20201105183816p:plain こうなりますね

次にテキスト全体を選択してコピーします。

f:id:belcrod5:20201105183921p:plain

ショートカット

Windows :CTRL + c

Mac:Command + c

 

コピーした内容を Chromeのコンソールに貼り付けます。

f:id:belcrod5:20201105184108p:plain

あたりまえですがこうなりますと

 

  1. テキストエディタからコピー
  2. Chromeのコンソールにペースト
  3. エンターで実行して確認

を繰り返していきます。

 

では前回で解説した「りんご5個1つ120円で消費税は10%」のプログラムを

テキストエディタに記述してみましょう

 

taxRate = 10
apple = 5
price = 120
totalPrice = apple * price
totalPrice + totalPrice / taxRate

 

f:id:belcrod5:20201105184559p:plain

全て選択してコピーしChromeのコンソールに貼り付けます。

 

f:id:belcrod5:20201105184832p:plain

そしてエンターを押して実行させます。

f:id:belcrod5:20201105184745p:plain

複数行のプログラムが1度に実行された事がわかりました。

これで関数を記述する準備ができました。

 

さっそく始めたいところですが

関数とはどんなものかと言うと複数の計算を一度に行ってくれる
工場のようなイメージをしてもらえるとわかりやすいと思います。

 

例ば

f:id:belcrod5:20201105191439p:plain

入口に材料を入れると出口で完成したモノ(計算結果)が出てくるといった感じです
上の図を見てうんざりした人は大丈夫!日本語の解説の方がわかりにくい可能性があります。

 

では早速、簡単な関数を作ってみます。

 

function test(){

}

 

これが関数というものになります。

順番に解説すると

f:id:belcrod5:20201105185513p:plain

function 読み方:ファンクション 日本語:関数
となり。これは関数ですよ〜、関数の始まりですよ〜
ということになります。

f:id:belcrod5:20201105191743p:plain

次に test の部分は名前になります。自分で自由につけることができます。
test という名前の関数ですよ〜 という事になります。

 

f:id:belcrod5:20201105191945p:plain

次に丸カッコは今は説明をスキップします。決まりだと思っていてください。

f:id:belcrod5:20201105192213p:plain

次に波カッコの青い部分は 関数の中身の始まりを意味し、赤い部分は終わりを意味します

 

つまり以下のようになります。

 

f:id:belcrod5:20201105192534p:plain

関数の書き方はこのような決まりとなっています

ちなみに上で説明してきた test 関数は波カッコの中身が何もないので
何も実行されない工場になります。

 

それでは試しに簡単に関数の中身を追加してみましょう〜

 

function test(){
    return 1
}

return 1 を追加しました。 return は読み方:リターン、意味は戻すです。

工場の出口から 1 を戻す、出した とイメージしてください。

 

テキストエディタに書いてChromeコンソールにコピペしてエンターしてください。

 

f:id:belcrod5:20201105193652p:plain

(undefined、読み方:アンデファインド、意味は「未定義」)

結果は何もおきませんでした。

 

関数という工場を作ったけど、工場を動かしていないからです。

工場(関数)の動かし方は

test()

と書きます。

関数の名前丸カッコ()です。 Chromeのコンソールに書いて
動かしてみましょう〜

 

f:id:belcrod5:20201105193958p:plain

1と表示されました。

testという工場の出口から1が出ました。

 

どうでしょうかわかりましたでしょうか?

ちょっと長くなったので前半と後半でわけますね

 

次は関数の後半です

世界で1ばんやさしいプログラム入門6(関数編の後半) - 日本一やさしいプログラマーのブログ

 

わからない事あれば質問おまちしていますー