JavaScriptの関数の書き方と使い方【引数と戻り値について】

• JavaScriptの関数の書き方、使い方
• JavaScriptの引数、戻り値について
• JavaScriptの関数の応用サンプル

• 2021年6月からWebデザインの職業訓練校で学んでいます（6ヶ月コース）
• 使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」

1. プログラムの構造を理解しやすくなる
2. 関数は何度でも呼び出せる

1．他のプログラムでもよく使われる方法
function 関数名( [引数] ){
　処理
}

2．javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
　処理
}

3．アロー関数
const 関数名 = ( [引数] ) => {
　処理
}

function kansu1( ){
　console.log('関数1');
}

const kansu2 = function( ) {
　console.log('関数2');
}

const kansu3 = ( ) => {
　console.log('関数3');
}

kansu1( );
//出力結果：関数1

kansu2( );
//出力結果：関数2

kansu3( );
//出力結果：関数3

//シンプルなファンクションの書き方
function aisatsu() {
　console.log('Hello');
　}
aisatsu();

//変数に格納する書き方
const outputSeconds = function () {
　const now = new Date();
　console.log(now.getSeconds());
　}
outputSeconds();
//出力結果：その時の時刻（秒）

//アロー関数の書き方
let creatMail = ( ) => {
　console.log('Koichiです。');
　console.log('アロー関数です。');
　};
creatMail( );
//出力結果：
Koichiです。
アロー関数です。

const taxin = (kakaku)=>{
　console.log(kakaku*1.1);
}

taxin(1000);
//出力結果：1100

taxin（12000）;
//出力結果：13200

const heikin = (num1,num2) =>{
　console.log((num1 + num2) / 2);
}

heikin(4,8);
//出力結果：6

<script>
　const taxin = (kakaku) => {
　const zeikomi = kakaku ＊ 1.1;
　const zeikomi_t = Math.floor(zeikomi)
　console.log(zeikomi_t);
　}

　taxin(1000);
　taxin(2000);
　taxin(100000); //バグが出る

　const heikin = (n1, n2) => {
　console.log((n1 + n2) / 2);
　}

　heikin(4, 8);
　heikin(5000, 3000);
</script>

//出力結果：
1100
2200
110000
6
4000

let Mail = (recv) => {
　console.log(recv + '様');
　console.log('Koichiです。');
　console.log('いつもお世話になっております。');
　};
Mail('山本');

//出力結果：
山本様
Koichiです。
いつもお世話になっております。

let createmail = (recv, bill) => {
　let msg = `${recv}様
Koichiです。
今月の請求額は${bill}円です。`;
　console.log(msg);
　};

createmail('山本', 40000);
//出力結果：
山本様
Koichiです。
今月の請求額は40000円です。

let createm = (recv, bill) => {
　let msg = recv + '様\n'
　+ 'Koichiです。\n'
　+ '今月の請求額は' + bill + '円です。';
　console.log(msg);
　}

createmail('山本', 40000);
//出力結果：同上

<script>
　const pref = (p) => {
　　pref_obj = {
　　'北海道': '札幌市',
　　'青森県': '青森市',
　　'岩手県': '盛岡市',
　　'宮城県': '仙台市',
　　'秋田県': '秋田市',
　　'山形県': '山形市',
　　'福島県': '福島市',
　　'茨城県': '水戸市',
　　'栃木県': '宇都宮市',
　　'群馬県': '前橋市',
　　'埼玉県': 'さいたま市',
　　'千葉県': '千葉市',
　　'東京都': '新宿区',
　　'神奈川県': '横浜市',
　　'新潟県': '新潟市',
　　'富山県': '富山市',
　　'石川県': '金沢市',
　　'福井県': '福井市',
　　'山梨県': '甲府市',
　　'長野県': '長野市',
　　'岐阜県': '岐阜市',
　　'静岡県': '静岡市',
　　'愛知県': '名古屋市',
　　'三重県': '津市',
　　'滋賀県': '大津市',
　　'京都府': '京都市',
　　'大阪府': '大阪市',
　　'兵庫県': '神戸市',
　　'奈良県': '奈良市',
　　'和歌山県': '和歌山市',
　　'鳥取県': '鳥取市',
　　'島根県': '松江市',
　　'岡山県': '岡山市',
　　'広島県': '広島市',
　　'山口県': '山口市',
　　'徳島県': '徳島市',
　　'香川県': '高松市',
　　'愛媛県': '松山市',
　　'高知県': '高知市',
　　'福岡県': '福岡市',
　　'佐賀県': '佐賀市',
　　'長崎県': '長崎市',
　　'熊本県': '熊本市',
　　'大分県': '大分市',
　　'宮崎県': '宮崎市',
　　'鹿児島県': '鹿児島市',
　　'沖縄県': '那覇市'
　　}
　console.log(pref_obj[p]);
　}

　pref('大分県');
</script>

//出力結果：大分市

let 変数 ＝ ( ) => {
　関数内で実行する文
　return 結果の値;
};

<script>
　const large_num = (num1,num2) => {
　　let larger;
　　if(num1 > num2){
　　　larger = num1;
　　　}else{
　　　larger = num2;
　　　}
　　return larger;
　}

　const apple = 120;
　const banana = 100;

　const num = large_num(apple,banana);
　console.log('りんごとバナナの金額の高い方は、' + num + '円です。');

　const tonergawa = 322;
　const tamagawa = 138;

　const num2 = large_num(tonegawa,tamagawa);
　console.log('利根川と多摩川の長い方は、約' + num2 + 'kmです。')

</script>

let addCharge = (bill) => {
　return bill ＊ 1.07 ;
};
console.log(addCharge(40000));

//出力結果：42800

let addCharge = (bill) => {
　console.log(bill * 1.07);
　};

addCharge(40000);
//出力結果：42800

1．他のプログラムでもよく使われる方法
function 関数名( [引数] ){
　処理
}

2．javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
　処理
}

3．アロー関数
const 関数名 = ( [引数] ) => {
　処理
}