5WEB講師のお勤め日記WEB講師による、技術系メモブログです。HTMLやCSS、Javascriptといったコードはもちろん、デザインの標準ソフトであるPhotoshopやIllustratorの使い方も解説していきます。現役エンジニア兼デザイナーの備忘録ブログです。5前回までで、一通りプログラムが行なっている、4つの内容を解説し終えました。1.入力2.出力3.分岐4.繰り返しこの4つを意識していく事が大事です。今回は、主に「関数」と「イベント」について解説していきます。jQueryに入っていきます。1.jQueryの準備まず、jQueryを使える様にします。jQueryのファイルを読み込む事で、jQueryが使える様になります。今回は、googleで使えるCDNを利用しています。Developersjqueryのcdnの記述をコピーします。今回は、ver3.xを使います。HTMLファイルのhead要素の中にペーストします。これで、jQueryの文法を使う事が可能になります。jQueryを読み込んだ行の下に、scriptタグを記述します。この中にコードを書いていきます。2.jQueryの基本的な書き方jQueryは、以下の記述の内側に書いていきます。})の中にコードを書く事で、一度HTMLを読み込んで、javascriptを実行する準備が整った後に、コードを実行してくれます。要するに、例えば、「bodyタグに何かクラスをつけたい」という様な命令をjQueryで書いたとしても、bodyタグをブラウザが読み込む前に実行してしまっては、bodyタグにクラスをつけられません。})の中にjQueryのコードの文法でスクリプトを記述した場合、きちんと該当のタグなどのHTMLが読み込まれて、準備OKになった段階でスクリプトをスタートさせてくれます。3.関数について3-1.基本的な関数を作るそれでは、jQueryの準備ができたので、いよいよ関数を作っていきます。関数とは、ある一定の処理をまとめて書いておくことの出来る機能です。関数を作ることを、定義すると表現します。一度書いておけば、使いたい時に好きな様に実行する事が出来ます。関数の定義の仕方は、以下の様な感じです。関数名([引数]){処理}関数名は、好きな名前でOKです。引数自体の説明は後で行います。簡単な関数を定義して実行してみます。引数はとりあえず省略します。})の中に記述していきます。(){console.log("関数を実行します");}kansuという関数を定義しました。処理の内容は、console.logで文字を出力しているだけです。処理の内容は、今までとほぼ変わりませんが、関数の定義の文法としては問題ありません。この状態で、ブラウザで見てみても、なにも起こりません。関数は、定義だけしても何も起こらず、関数の実行をする必要があります。関数の実行の仕方は、以下の通りです。関数名([引数]);引数は、省略可能です。(説明は後で)では、以下の様にコードを書き換えてみます。「関数kansuを実行してください。}の中身が実行されます。結果、console.logが実行されます。※今の時点で、関数の有用性を理解するのは非常に難しいです。ファイルを読み込むのと同時に関数を実行している事になるので、関数を定義せず、そのまま処理を記述した場合と、結果が全く同じだからです。イベントの説明になったら、関数の有用性がわかると思いますので、ひとまずそういうものだと思っておいてください。3-2.引数について今まで省略してきた引数に関して説明します。関数の実行時に、定義された関数に、渡すことのできる値の事です。具体的な例で考えていきます。先ほど作った関数kansuは、「関数を実行します」という言葉をconsoleに出力します。引数を使うと、関数の実行時に指定した言葉をconsoleに出力する様にする事ができます。{console.log(mes);}kansuを実行する時に、引数として「引数でコンソール」という文字列を、定義されたkansuに渡す事ができます。kansuに渡されたデータは、mesという名前の変数に置き替わり、console.log(mes)で、出力されます。以上の様な流れの処理になります。mesは好きな名前で大丈夫です。以下の様な関数の定義方法でも問題ありません。kansu(abc){console.log(abc);}また、複数の引数を渡すことも出来ます。){console.log(hiki1);console.log(hiki2);}以上の様に、引数を複数使いたい場合は、各々順番に半角のカンマで繋いで記述します。3-3.戻り値について前述の関数kansuは、consoleを出力するだけが処理内容でした。場合によっては、関数に処理させた結果を、使いたい場合があります。二つの数値の値を受け取り、平均を出してくれる様な関数を用意した時に、その関数が作った平均の値を取得する方法が戻り値を使ったプログラムです。引数とは、データの向きが逆になります。処理の流れが複雑になってきました。整理して考えましょう。})内で、変数tensuuを定義。関数heikin(40,60)を実行2.関数heikinの中で、変数reが定義される。値として、num1に40が、num2に60が代入された後、その二つを足して2で割った値(平均のこと)を代入。3.関数heikinの中で、変数reを、戻り値としてreturnする。プログラムがどの様に処理されるのか、その流れを捉える事が大事です。4.イベントについてイベントとは、ユーザーの動作に合わせて処理を実行させる仕組みのことです。日本語にした時に、「〇〇したら」と略される物がイベントだと思って、概ね差し支えありません。「画面サイズを変えたら」などなどイベントには様々な物があります。「ボタンをクリックしたら、文字を出力する」というプログラムを作っていきます。$(セレクタ).on(イベント名,処理内容);以上の様な内容になります。セレクタは、cssセレクタが使えます。イベント名には、今回はclickが入ります。処理内容には関数を指定します。btnClick(){$("div").append("<p>クリックされた</p>");}「buttonタグをクリックしたら、関数btnClickを実行してください」という内容になります。関数btnClickは、divタグに「<p>クリックされた</p>」というHTMLを追加しています。よって、ボタンをクリックするたびに、「クリックされた」という文字が画面に表示されていきます。上記のコードは、以下の様に書き換えることも可能です。関数btnClickの代わりに、function〜が入ります。この方法だと、btnClickを別途定義する必要がなくなります。よって関数の名前を考える必要がありません。上記の書き方のfunction〜の事を、「無名関数」と呼びます。この書き方だと、同じ内容を別の処理で使いまわす事が出来ません。(無名な関数なので、関数を呼び出せない。)イベントの設定をする際は、やりたい内容が他でも使いまわす必要があるのかないのかを見極めて、通常の関数を使うか、無名関数を使うかを選択します。4.まとめ今回は、関数とイベントに関しての話が中心でした。関数だけしか知らないと、何のためにあるか解りにくいですが、ユーザーの動作が動く条件である、イベントと合わせて考えると解りやすいと思います。以下、on(イベント名,処理)の、イベント名の内、よく使うものを列挙します。