jQuery初心者のための書き方講座その2【関数の使い方】

この記事でわかること

jQueryには関数とメソッドというものがあり、どちらも似たような使い方で混同しやすいものです。実際メソッドの日本語訳も「関数」となるわけですから、違いを理解しておかないとますます混乱してしまうでしょう。ここでは、jQueryの関数の使い方について触れていきます。

システム
エンジニア

jQueryの関数ってどんな時に使っていくのでしょうか？

プロジェクト
マネージャー

関数とメソッドは混同しやすいのですが、使い方が違います。その辺を詳しく見ていきましょう。

jQueryの関数の基本構文

関数は一言でいうと、よく使う処理をまとめたものになります。コード内で同じ処理が何度も出てくる場合、Aという関数にまとめて、必要な時にAを呼び出すことで同じ処理を行えます。関数を使うことでコード全体もコンパクトで見やすいものになるので、積極的に活用していきましょう。

関数の基本構文例1 -関数宣言-

JavaScript

function test() { //ここに処理を記述 }

1 2 3 4 5

function test() {   //ここに処理を記述   }

名前（ここではtest）は自由につけることができますが、一般的にはどのような処理が行われるかがわかるようにつけるのがポイントです。

関数の基本構文例2 -関数式（関数リテラル）-

JavaScript

var test = function() { //ここに処理を記述 }

1 2 3 4 5

var test = function() {       //ここに処理を記述   }

JavaScriptならではの書き方になり、無名関数や匿名関数などとも呼ばれます。

引数の指定や戻り値を処理することも可能

関数では引数を指定した処理や、処理した結果を戻り値として受け取ることもできます。これにより、様々な処理を連携して実行することが可能です。

簡単な関数の例

まずは、簡単な関数処理の例を紹介します。

簡単な関数の例1

JavaScript

$(function(){ var test = 1; function count_up() { test = test + 1; } 　　count_up(); 　　console.log(test); });

1 2 3 4 5 6 7 8 9

$(function(){     var test = 1;       function count_up() {         test = test + 1;     } 　　count_up(); 　　console.log(test); });

実行結果

2

1

2

このコードでは、変数の値を1加える処理を行っています。

簡単な関数の例2

JavaScript

$(function(){ var test = ''; function string_change() { test = 'hello'; } 　　string_change(); 　　console.log(test); });

1 2 3 4 5 6 7 8 9

$(function(){     var test = '';       function string_change() {         test = 'hello';     } 　　string_change(); 　　console.log(test); });

実行結果

hello

1

hello

この関数では文字列操作を行い、変更された文字列を表示するようにしています。

システム
エンジニア

関数を使うとコードもきれいになるし、同じ処理を書かなくていいですね！

プロジェクト
マネージャー

関数と変数、メソッドを理解することが初心者卒業の一歩です。頑張って勉強していきましょう。

関数を使いこなしてコードをきれいに

関数を使う目的は、同じコードを繰り替えさないようにするためです。また、似たような処理を引数や条件分岐などで制御することにより、包括化することも可能になるので、関数を利用するだけでコード全体がコンパクトになります。コードが短くなることで、バグも少なくなり、不具合の解析も楽になるでしょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

• スマホアプリから業務系システムまで

  

  スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

• 充実した研修制度

  

  毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

• 資格取得を応援

  

  スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

• 東証プライム上場企業グループ

  

  オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

  安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

新着案件New Job

• 開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

  月給29万～30万円
  東京都品川区(大崎駅)
  • Windows

• 遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

  月給45万～60万円
  東京都港区(六本木駅)
  • JavaScript

• 病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

  月給30万～30万円
  東京都豊島区(池袋駅)
  • Windows

• 開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

  月給50万～50万円
  東京都豊島区(大塚駅)
  • JavaScript

• 債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

  月給62万～67万円
  東京都文京区(後楽園駅)
  • Windows

• PMO/東京都豊島区/【WEB面談可】/在宅勤務

  月給55万～55万円
  東京都豊島区(池袋駅)
  • Windows