jquery 関数の使い方をマスターしよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

関数の使い方をマスターしよう

jQuery|2018年11月03日

2018年11月03日
  • このエントリーをはてなブックマークに追加

関数とは、ある一定の処理を書き、呼び出し、使い回せるようにすることです。
何度も使うと考えられる処理は、使いまわせるように関数化が便利です。

  • 渡された数字に50足して表示させる
  • ポップアップ画面を表示する処理を関数化する
  • クリックし対象を一瞬震わせる処理を関数化しておく

ある数字に対して「ドル」と語尾につけるという処理を関数化したら。
渡した数字に対して「ドル」がつけられて返ってきます。

個別で処理を書き、自由に呼び出すことができます。
他の処理から呼び出して、何度も使い回すことが可能です。

同じような処理を、別のソースコードごとに何度も書く必要がなくなるでしょう。

例えば、パスワードを作り出す関数を作ったとします。
1度作っておけば、呼び出すだけで実行できます。
2度と同じ処理を書く必要はありません。

このように個別に頻出の関数を作っておき、あとで使い回せます。
関数が存在することにより、より効率的な書き方が出来るようになるのです。

今回は、プログラミングを効率化する「関数」を習得していきましょう。

ミッションの内容

今回のミッションは、少し難しいかもしれません。
わからなくても、時間をかけて、挑戦してみてください。

まず、ミッションの確認をしましょう。
その後、ソースコードの解説を読みながら進めてください。

基本は、ボタンを押すと「名前と年齢」を表示させる、という処理です。
ただ、表示するまでの過程を2つに分けました。

1つめはinputからお名前と年齢を入力して、alertでデータ表示させる形。
2つめは最初から表示されているデータを取得してalertで表示させる形です。

関数がどこに使われているかというと、データを表示させるalertです。

2つ処理があるからと言って、2回、alert表示の処理を書いているわけではありません。
alertで表示する形は同じです。
関数で1つにまとめ、各所から呼び出せるようにしています。

いちいち同じ処理を2回書くのは面倒くさいですからね。
名前と年齢をalertする関数を1つだけ作り、2つの処理から呼び出しているのです。

処理の流れは下記になります。

  • input要素から名前と年齢を取得する ( またはhtml要素から取り出す )
  • alertで名前と年齢を表示させる関数にデータを渡す
  • 関数がデータをalertで表示させる

なかなか再現できない場合は、下記のファイルをダウンロードしてみてください。

ソースコードの解説

これまでよりも、少し複雑です。
まず、htmlはこのようになっています。

<!--自分でhtmlに入力するフォームです。-->
<div style="background:#f4f4f4;margin-bottom:20px;padding:25px;">
    <h2>パターン1</h2>
    <input type="text" class="namedata" placeholder="お名前" />
    <input type="text" class="agedata" placeholder="年齢" />
    <button class="data1">表示する</button>
</div>
     
<!--予め決められたデータが入ったエリアです。-->
<div style="background:#f4f4f4;padding:25px;">
    <h2>パターン2</h2>
    <div><span class="namedata2">ささき</span>氏</div>
    <div><span class="agedata2">24</span>歳</div>
    <button class="data2">表示する</button>
</div>

htmlの用意ができたら、alertで表示する関数を作ってみましょう。

//関数showDataにnameとageを送って使うと、、
function showData(name,age){
    //alertで名前と年齢を表示します。
    alert(name+"さんの年齢は"+age+"歳です!");
};

関数は必ずfunctionからはじまります。

functionの隣にある文字 ( showData ) は関数の名前で、自由につけることができます。
呼び出す時に使いますので、わかりやすい名前をつけてみましょう。
関数の「機能」を表す名前だと、より分かりやすいですよね。
今回は、データを表示するだけなので、showDataとしています。

showDataの隣にある ( name,age ) は、変数です。

nameという変数に「名前」を入れ、ageという変数に「年齢」を入れます。
すると、function(関数)にデータを渡せるので、alertで表示できます。
function外部で定義された変数は、そのままだと関数内で使えません。
このように「値を渡してあげて」はじめて使うことが可能です。

あとはalertでデータを表示させてみましょう。

こうして作られた関数は、いつでも呼び出すことができます。
さっそく、名前と年齢を取得する処理を作り、呼び出してみてください。

難しく構える必要がありません。
関数以外は今までやってきたことだけです。

//.data1をクリックすると、、
$(".data1").click(function(){
    //.namedataの内容をnameに取得します。
    let name = $('.namedata').val();
    //.agedataの内容をageに取得します。
    let age = $('.agedata').val();
    //それらを関数に渡します。
    showData(name,age);
});

「.data1」をクリックすると、input要素から名前と年齢を取得します。
ここに関しては、過去にやっているので省略します。

新出なのはshowData(name,age);です。
これで、関数を呼び出しているんですね。

今回作った関数は「名前と年齢を受け取って表示」です。
先程作った「nameとageをalertで表示させる」という処理が呼び出されます。

変数nameとageにデータを入れたあと、呼び出してみましょう。
無事「〜〜さんの年齢は〜〜〜歳です」と表示されるはずです。

なんとなく、使い方はご理解いただけたでしょうか?

もう1つ、処理を書いていきます。
関数の良いところは「使い回し」です。
別の処理からも呼び出してみましょう。

//.data2をクリックすると、、
$(".data2").click(function(){
    //.namedata2のテキストをnameに取得します。
    let name = $('.namedata2').text();
    //.agedata2のテキストをageに取得します。
    let age = $('.agedata2').text();
    //それらを関数に渡します。
    showData(name,age);
});

上記の処理は、もともとHTMLに書いてあるデータを取得して表示させています。

.namedata2のテキストをnameにいれ、.agedata2をageに入れます。
その後は一緒で、showDataを呼び出して、alertで表示させます。

このように関数はある一定の処理をまとめ、使い回せる時に便利です。
開発の際はだいぶ重宝しますので、ぜひ使いまわしてみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら