世界で１ばんやさしいプログラム入門6（関数編の後半）
前回は
世界で１ばんやさしいプログラム入門5（関数前編：準備） - 日本一やさしいプログラマーのブログ
関数の簡単な書き方を解説しました。
次は関数の中身をりんごの計算をできるものに変更します。
前回の続きで
function test(){
return 1
}
↓
以下のように「りんごの価格の合計」の計算のプログラムに修正します。
function test(){
apple = 5
price = 120
totalPrice = apple * price
return 1
}
次に test関数を実行 します
test()
結果がまた１になりました。出口から1が出ている事になります。
return 1 としているからです。
出口から合計金額を出すために
return 1 を
return totalPrice に変更してみます。
function test(){
apple = 5
price = 120
totalPrice = apple * price
return totalPrice
}
そして test() で実行もします
600 !! りんごの合計金額が出口から出てきました。
完成です
と言いたい所ですが、このままでは 600 しか返さないので
あまり使いみちがありません。
前回の記事の冒頭で言いました目的は
- りんご５個１つ120円
- ばなな２個１つ100円
- みかん４個１つ110円
- いちご３個１つ90円
上記の計算を
短くスッキリできれば良いですよね？
そこで 関数 というものを使って短くする方法を解説します。
という事が当初の目的でした。
そこで関数を修正していきます。
先程まで作っていた関数は一旦おいといて
新しく以下の関数を書き
Chromeに貼り付けて実行してみてください。
function test(abc){
return abc
}
実行する記述は今回は
test(123)
と書きます。
123 が返ってきました。次は
test(456)
と書いて実行
456が返ってきました
123 を指定すると 123
456 を指定すると 456
が返ってくる
123が入口から入って何の加工もされないまま出口から出てきたイメージです
このように関数には入り口に 変数 を指定できるのです。
説明ばかりになってきたので実際にやってみましょう
前回つくったりんごの合計金額の計算関数が以下のものですね
function test(){
apple = 5
price = 120
totalPrice = apple * price
return totalPrice
}
これを関数の入り口で値を指定できるように修正します
function test(apple){
price = 120
totalPrice = apple * price
return totalPrice
}
apple = 5 を消して test(apple) かっこの中に appleを移動しました。
では Chrome に貼り付けて実行してみましょう
先程の関数を貼り付けた後に test(5) を実行する
600 が返ってきます。
つまり関数に 5を渡す ということは apple に 5 が入ります。
りんごが5個の時の計算がされたと言うことになります。
それでは
test(1)
test(2)
test(3)
と「りんごが１つの時、２つの時、３つの時」の合計金額を出してみましょう〜
120, 240, 360 と数によって合計金額が簡単に出せましたね！
もう少し改良すれば「ばなな、みかん、いちご」も対応できます！
apple を count （カウント：日本語で数）に変更します。
function test(count){
price = 120
totalPrice = count * price
return totalPrice
}
これで「りんご」専用ではなくなりました（結果一緒ですけどｗ）
次に果物の値段はそれぞれ違うので価格を変えれるようにします。
price = 120 を消して countと同様に入り口から渡せるようにします。
function test(count, price){
totalPrice = count * price
return totalPrice
}
入り口から変数を２つ渡す時はカンマ（,）で区切ります
←カンマってこれね
実行する時も ２つ指定します
りんご５個で値段が120円の時は
test(5,120)
こちらもカンマで２つ指定します
実行してみると
できました！成功！
イメージはこんな感じですね。これができればあとは簡単
- りんご５個１つ120円
- ばなな２個１つ100円
- みかん４個１つ110円
- いちご３個１つ90円
あとは上記の内容を関数に入れて実行します。
- test(5,120)
- test(2,100)
- test(4,110)
- test(3,90)
うまくいってます！
あ！消費税の計算を忘れていました。
消費税は変動しないと仮定して関数に渡せないようにします
function test(count, price){
totalPrice = count * price
taxRate = 10
totalPrice = totalPrice + totalPrice / 10
return totalPrice
}
消費税の計算は
世界で１ばんやさしいプログラム入門4（変数応用編） - 日本一やさしいプログラマーのブログ
で解説しています。
消費税が計算された事が確認できました！
これで果物が何種類あっても短いプログラムで簡単に計算できるようになりました
どうでしたでしょうか？簡単ではないですかｗ
わからない事があればご意見お待ちしております。
世界で１ばんやさしいプログラム入門5（関数編の前半）
前回は
世界で１ばんやさしいプログラム入門4（変数応用編） - 日本一やさしいプログラマーのブログ
りんごの合計金額を計算するプログラムを書きました。
今回はりんご、ばなな、みかん、いちごの合計金額を計算せよ！
- りんご５個１つ120円
- ばなな２個１つ100円
- みかん４個１つ110円
- いちご３個１つ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です。（ただのプログラムの中の名称ですｗ）
前回までは一行で完結したプログラムを書いていましたが今回からは
数行のプログラムを書きます。
そこで
Windowsの方は「メモ帳」
Macの方は「テキストエディット」
を使います。どちらも最初からインストールされているものです
今後はこの２つを「テキストエディタ」と呼びます
それぞれ自分の環境のものを起動します。
私の環境はMacなので画面は「テキストエディット」で解説します。
Windowsのメモ帳もほとんど変わりは無いので心配いりません。
起動すると何も書いていない真っ白なウインドウが表示されますね
では、ここに前回までで解説したプログラムを書いてみます。
1 + 1 と書いてみます。
こうなりますね
次にテキスト全体を選択してコピーします。
ショートカット
Windows ：CTRL + c
Mac：Command + c
コピーした内容を Chromeのコンソールに貼り付けます。
あたりまえですがこうなりますと
を繰り返していきます。
では前回で解説した「りんご５個１つ120円で消費税は10%」のプログラムを
テキストエディタに記述してみましょう
taxRate = 10
apple = 5
price = 120
totalPrice = apple * price
totalPrice + totalPrice / taxRate
全て選択してコピーしChromeのコンソールに貼り付けます。
そしてエンターを押して実行させます。
複数行のプログラムが１度に実行された事がわかりました。
これで関数を記述する準備ができました。
さっそく始めたいところですが
関数とはどんなものかと言うと複数の計算を一度に行ってくれる
工場のようなイメージをしてもらえるとわかりやすいと思います。
例ば
入口に材料を入れると出口で完成したモノ（計算結果）が出てくるといった感じです
上の図を見てうんざりした人は大丈夫！日本語の解説の方がわかりにくい可能性があります。
では早速、簡単な関数を作ってみます。
function test(){
}
これが関数というものになります。
順番に解説すると
function 読み方：ファンクション 日本語：関数
となり。これは関数ですよ〜、関数の始まりですよ〜
ということになります。
次に test の部分は名前になります。自分で自由につけることができます。
test という名前の関数ですよ〜 という事になります。
次に丸カッコは今は説明をスキップします。決まりだと思っていてください。
次に波カッコの青い部分は 関数の中身の始まりを意味し、赤い部分は終わりを意味します
つまり以下のようになります。
関数の書き方はこのような決まりとなっています
ちなみに上で説明してきた test 関数は波カッコの中身が何もないので
何も実行されない工場になります。
それでは試しに簡単に関数の中身を追加してみましょう〜
function test(){
return 1
}
return 1 を追加しました。 return は読み方：リターン、意味は戻すです。
工場の出口から 1 を戻す、出した とイメージしてください。
テキストエディタに書いてChromeコンソールにコピペしてエンターしてください。
（undefined、読み方：アンデファインド、意味は「未定義」）
結果は何もおきませんでした。
関数という工場を作ったけど、工場を動かしていないからです。
工場（関数）の動かし方は
test()
と書きます。
関数の名前 に丸カッコ()です。 Chromeのコンソールに書いて
動かしてみましょう〜
1と表示されました。
testという工場の出口から1が出ました。
どうでしょうかわかりましたでしょうか？
ちょっと長くなったので前半と後半でわけますね
次は関数の後半です
世界で１ばんやさしいプログラム入門6（関数編の後半） - 日本一やさしいプログラマーのブログ
わからない事あれば質問おまちしていますー
世界で１ばんやさしいプログラム入門4（変数応用編）
前回は
世界で１ばんやさしいプログラム入門３（変数編） - 日本一やさしいプログラマーのブログ
で変数の基本について学びました
今回は前回の応用編で具体的に変数をどう使うかです。
では小学校で習いそうな問題を例にあげて説明していきます。
りんごを５つ買いました、りんご１つの値段は120円です。
合計はいくらでしょうか？
計算式と答えは
5 x 120 = 600
ですね。
ではこちらを変数を使ってプログラムに書き直します。
りんごは英語でアップル。スペルはapple。appleが５個ということで
apple = 5
となります。
値段は英語でプライス。スペルはprice。priceは120円なので
price = 120
となります。
では実際にコンソールに記述してみましょう。
apple = 5
price = 120 （全部半角だよ）
これでそれぞれの変数の中身に数値が入りました。
次にプログラムで掛け算は * となりますので
apple * price と記述します。
600と表示されれば成功ですね！
なんとなくプログラムっぽくなってきましたね
その調子です
少しひねって、りんご数を5個から7個に変更してみましょう
どう書くかわかりますか？
apple = 7
ですね。実行します（半角〜）
それではまた合計を求めてみましょう
apple * price
840円に変更されました！
ちょっと難しいかもしれませんがさらにひねってみましょうか？
消費税を追加します。
難しそう！
一旦、算数式を書いてみましょう
りんご７個を買いました。りんご１つ120円で消費税率は10%です。
合計金額はいくらでしょうか？
合計 ＋ 合計の10%
7 x 120 + 7 x 120 ÷ 10
となりますね。
それではプログラムに書き直して見ましょう〜
まずは合計を変数にいれます
合計は英語でトータル。スペルはtotal。それと金額のpriceを合わせて
totalPrice とします。なので
totalPrice = apple * price
となります。
totalPriceの中に840が入りました。
先程の算数の式
7 x 120 + 7 x 120 ÷ 10 に置き換えると
totalPrice + totalPrice / 10 になりますね
せっかくなので税率も変数にしましょう
税率？英語でどうかくの？
そういう時は私はグーグル翻訳を使っています。
taxRate = 10
税率に10を入れます。
では税率を変更した式に直します
totalPrice + totalPrice / taxRate
924になりました！すごい！
taxRate を変更するだけで税率の変更した計算を簡単にやりなおせるようになりますね。
どうでしたか？やさしいですか？
ちょっとやさしくなかったかもしれませんねｗ
次回は
世界で１ばんやさしいプログラム入門5（関数前編：準備） - 日本一やさしいプログラマーのブログ
今回の式をさらに簡単に使えるようにできる関数の説明です。
世界で１ばんやさしいプログラム入門３（変数基本編）
前回の
世界で１ばんやさしいプログラム入門２（算数編） - belcrod5’s blog
では算数の計算をしていました。
次はその計算結果を保持する方法を解説します。
せっかく計算して出した答えなのでなくならないようにしたいですよね？
プログラムの世界では計算結果や値を保持できるモノの名前を
「へんすう」と言います。 漢字では「変数」と書きます。
小学校の時に習った 変数 の事は一旦は忘れてください
意味を知りたくなるかもしれませんが
全く気にしなくてOKです。（私も知りませんｗ）
この変数 は何でも入る箱のようなものをイメージしてください。
それではその 変数 という箱の中に計算結果を入れる方法を解説したいと思います。
変数に入れるイメージ↓
ぽいっと
プログラムで書くと以下のようになります。
このように記述します。
abcは箱の名前で、箱の名前は自分で自由に決める事ができます。
「abcという名前の箱に2を入れた」という意味になります。
それでは実際にやってみましょう
前回の手順でGoogle Chromeのコンソールを開き
まずおさらいで
1 + 1 と入力してエンターをします（全部半角）
もちろん 2 が表示されます
次に
abc = 1 + 1 と入力してエンターをします（全部半角）
2が表示されました
はいった？？
では確認してみましょう〜
abc と入力してエンターをします（全部半角）
2と表示されました。
abc = 2という事になります
ここまで大丈夫ですか？やさしい？
では次に abc + 1 とするとどうなるかわかりますか？
やってみましょう〜
abc + 1 と入力してエンターをします（全部半角）
3と表示されました。
とうことですね！
ちょっとひねって
abc = abc + 1
これはどうなるかわかりますか？
abc = abc + 1 と入力してエンターをします（全部半角）
3と表示されました。
では abc の中身をのぞきましょう
abc と入力してエンターをします（全部半角）
abc の中身が 3になったようです
2 + 1 の結果がabcの中に入ったと言うことになります。
今までは計算結果を変数に入れていましたが
計算なしでも変数に数字を入れる事ができます
変数 = 値
def = 2 と入力してエンターをします（全部半角）
def には2が入りました
次は変数と変数の算数に挑戦してみましょう〜！
abc - def
どうなるかわかりますか？？
abc - def と入力してエンターをします（全部半角）
1と表示されました
3 - 2 なので 1という結果になりました。
今回はちょっとだけレベルアップしましたがわかりましたでしょうか？
ご意見あればコメントからどうぞ〜
次は
世界で１ばんやさしいプログラム入門２（算数編）
前回の
世界で１ばんやさしいプログラム入門１（準備編） - belcrod5’s blog
で「デベロッパーツール」のConsole（コンソール）の画面になっていますでしょうか。
↑この状態です。
↑この辺りをクリックしてください。
カーソルが表示されてテキスト入力できるようになります
では早速。
1 + 1 と入力してみてください。（全部半角！）
↑こんな感じになりましたか？
入力した下の行には 1 + 1 の結果の 2が表示されています。
エンターを押して完了させましょう！
このようになります。
これは立派なプログラムです！ おめでとう（笑）
1 + 1 というプログラムが実行されて2という結果がでました。
やさしい？
では次！
2 - 1
結果は1でしたね。引き算もできました。
2 * 3 （掛け算）
10 / 2 （割り算）
世界で１ばんやさしいプログラム入門だったでしょうか？（笑）
これでプログラムで計算をすることができるようになったと思います。（りっぱなプログラマー🎉）
次回は
世界で１ばんやさしいプログラム入門３（変数編） - 日本一やさしいプログラマーのブログ
世界で１ばんやさしいプログラム入門１（準備編）
世界で１ばんやさしいプログラム入門ブログをめざして行きたいと思います。（いろいろあって）
対象：主婦、小学校高学年以上
では早速。
まずはプログラムを作る準備をします。
世界で１ばんを目指すので準備もやさしくします！！
ダウンロード、インストール不要です。（スマフォは不可）
PCでこのページを開いているブラウザから以下の手順を行います。
「・・・」 → その他のツール → デベロッパーツール（Chromeの場合）
（他のブラウザでも大体同じですが Chromeの方が説明が簡単かもです）
むずかしい？できましたか？
すると、こんなの（下の）が表示されたかと思います。
項目が多くて見るだけで嫌になりますよね。。
今回はこのウインドウの中でも1%くらいしか使わないので全然覚える必要ありません。
この「開発ツール」ウインドウの「Console」（コンソール）をクリックします
こんな（下）画面になれば準備完了です！
世界で１ばんやさしいプログラム準備でしたでしょうか？
次回は
