PHP

フォーマットを作る！PHPのsprintf関数の使い方【初心者向け】

プログラミング初心者向けにPHPで書くsprintf関数の使い方について解説しています。繰り返し何度も使うような文言はフォーマットに入れて簡単に使えたほうが効率的でしょう。数値や文字列などフォーマットにできるので、ぜひ覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

PHPで書くsprintf関数の使い方について解説しています。

指定のフォーマットを作ることができ、使い回すのに役立ちます。効率的に開発作業が進められるはずなので、ぜひ使い方を理解しておきましょう。

実際にソースコードを書きながら説明しているので、書きながら実行結果を見て覚えていってください。

なお本記事は、TechAcademyのPHPオンライン講座の内容をもとにしています。

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

田島メンター！「こんにちは、〜〜さん」って会員サイトとかだといろんな人に送ると思うんですけど、ああいうフォーマットってPHPでどう書くんですか〜？

sprintf関数っていうのを使うんだけど、聞いたことないよね！？

ないですね・・・

この関数は書きながら説明していった方が分かりやすいから、自分でも書いてみてね♪

sprintf関数とは

sprintf関数は「あるフォーマットに従った文字列を返す」関数です。・・・という説明をしてもわかりづらいので、例で説明します。

例えば、「太郎君はりんごを7個食べました。」と「ジョン君はドーナツを100個食べました。」という2つの文章は、「太郎」と「ジョン」、「りんご」と「ドーナツ」、「7」と「100」の部分が違います。

逆に言えば、「◯◯君は〜〜を△△個食べました。」の部分が共通している文章です。こういう文字列を作る時にsprintf関数がとても便利なのです。

では、実際に書き方を見ていきましょう。

[PR] PHPを学んで未経験からWebエンジニアを目指す方法とは

sprintfの書き方

sprintf関数は、以下のように記述します。

sprintf(文字列のフォーマット, 入力したい文字１,　入力したい文字２,　・・・)

文字列のフォーマットに関しては様々な書き方があるため、ここではよく使われるもののみを紹介します。基本的な使い方は同じです。

先程の例でご説明すると、「（名前）君は（食べ物）を（個数）個食べました。」に「名前」「食べ物」「個数」を入れたいので

"%s 君は %s を %d 個食べました。"

と書きます。「%s」には文字列を、「%d」には数値を代入することができます。ですので、

太郎 君は りんご を ７ 個食べました。

という文章を作成したい場合には、

sprintf("%s 君は %s を %d 個食べました。", "太郎", "りんご", 7)

と書くことで、「太郎君はりんごを 7個食べました。」という文字列が返ります。

%sや%d以外にも、「%f」は浮動小数点数や「%u」は符号なしの整数などを設定できます。

実際に書いてみよう

実際にプログラムを書いてみましょう。先程の太郎君とジョン君の例をプログラムで書いてみます。

format1.php
---------------------------------------------
<?php
$format = "%s 君は %s を %d 個食べました。n";
echo sprintf($format, "太郎", "りんご", 7);
echo sprintf($format, "ジョン", "ドーナツ", 100);
?>

———————————————
以下、実行結果です。

実行結果
---------------------------------------------

太郎 君は りんご を 7 個食べました。
ジョン 君は ドーナツ を 100 個食べました。

---------------------------------------------

また、少し変わったsprintf関数の使い方として、「ゼロ埋め」という使い方があります。

例えば、学籍番号で1番の人を「00001」のように表記したい場合があります。これもsprintf関数で実装できます。

それでは書いてみます。

format2.php
---------------------------------------------
<?php
// %0(桁数)d と指定することで、左側に0を埋めてくれます。
$format = "あなたの学籍番号は、 %05d です。n";
print(sprintf($format, 1));
print(sprintf($format, 1234));
?>
---------------------------------------------

以下、実行結果です。

実行結果
---------------------------------------------

あなたの学籍番号は、 00001 です。
あなたの学籍番号は、 01234 です。

---------------------------------------------

一桁の数値も四桁の数値もきちんとゼロ埋めしてくれていますね。

まとめ

sprintf関数は多機能な関数のため、使いこなすにはなかなか難しい関数かもしれません。

ですが、使い慣れることによって簡単に実装できるようになったり、ソースコードの量を減らしてくれるしてくれるでしょう。ぜひsprintf関数を活用してみて下さい。

数字のゼロ埋めはたしかによく見ますね！

そうそう！桁数を合わせたい時は便利なんだよね！

他にもいろいろ使えるんですか？

例えば数字に「+」を表示したり、文字をちょっと左寄せにしたり右寄せにすることができるよ！

そうなんですね〜！他のもいろいろ書いてみようと思います！

また、PHPを勉強していて、

もっと効率的に勉強したい
誰かに聞きながら学びたい
自分でWebサービスを作りたい

と思ったことはないでしょうか。

そんな方のために、TechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。

PHPで配列を比較して要素を取得する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで配列を比較して要素を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

PHP

今さら聞けない！XAMPPをインストールする方法【超初心者向け】現役エンジニアが解説

プログラミング初心者にとって、開発環境の構築は最初難しいこともあると思います。そこで、今回は開発環境のうち、使われることも多い「XAMPP（ザンプ）」を...

PHP

PHPで変数のスコープを使う方法【初心者向け】

プログラミング初心者向けに、PHPの基礎を紹介する記事です。今回は、変数のスコープを使う方法について解説します。なお本記事は、TechAcademyのP...

PHP

Laravelでバリデーションを使う方法【初心者向け】

Laravelでバリデーションを使う方法について解説します。 Webアプリケーションで会員登録やログインなどの機能を作る上で欠かせない処理なので、ぜひ使い...

PHP

PHPのexec関数を使って外部コマンドを実行する方法【初心者向け】

execで外部コマンドを実行する方法について解説しています。 LinuxコマンドなどPHPにない外部のコマンドを使い慣れている人は便利な関数なので、ぜひ覚...

PHP

PHPのvar_dumpで変数や配列の内容を出力する方法【初心者向け】

今回は初心者から上級者まで必ず覚えておきたいvar_dumpの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...

PHP

あわせてよく読まれている記事

JavaScriptでsprintfを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでsprintfを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次sprintf関数とはsprintfの書き方実際に書いてみようまとめそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでsprintfを実装する方法について詳しく説明していくね！大石ゆかりお願いします！はじめに文字列の変換に関する内容です。文字列の変換にはreplaceメソッドやテンプレート文字列などが用意されていますが、今回は対象の文字列を置換するだけでなく、フォーマットも整えて置換する方法を説明します。 CDNライブラリのsprintf.min.jsを利用します。 CDNの組み込みは、他にもライブラリを組み込むときなどの参考にしてください。 MDN:replace MDN:テンプレート文字列 sprintfとは C言語やPHPなどにある関数で、指定した書式に変換した文字列を返します。 JavaScriptにはsprintfという関数はありません。実際のsprintfの使用例と結果を見たほうがわかりやすいので、PHPで紹介します。 echo sprintf("テックアカデミージュニアでは %d 歳から学べるコースがあります。", 9); この処理の結果は、%dという文字が9という数字に差し替えられ、echoという出力関数によって下記のように出力されます。テックアカデミージュニアでは 9 歳から学べるコースがあります。他にも書式の指定方法はたくさんあります。たとえば、指定の桁数で0埋めをしたり、複数の文字を差し込むなどです。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはsprintfを実装する方法 JavaScriptで同様の処理をしたい場合は、書式指定の方法を網羅して置換するような関数を作成します。もしくは、すでにsprintfを再現したライブラリ（部品）がありますので、それらを使うことでも実装できます。楽に素早く実装するという観点から、ライブラリを使った方法を下記の項目で紹介します。 1．ライブラリを探すライブラリを探す際は、欲しい機能名やライブラリというキーワードで検索するのも1つの方法です。今回はJavaScriptのライブラリを探すのに便利なサイトのSearchLibsでsprintfのライブラリを探します。 SearchLibsのサイトでキーワードを　sprintf　として検索すると、いくつかライブラリが出てきます。ライブラリの概要と名前から一番欲しい機能に近い「sprintf-js」を使うことにします。 2．ライブラリを読み込む「sprintf-js」のライブラリをダウンロードして読み込んでも良いです。今回は手っ取り早く読み込めるJavaScriptのライブラリなどを配信しているCDN（Content Delivery Network）のcdnjsから、「sprintf-js」を検索して配信しているURLを使って読み込みます。 CDNを使うと、下記のようなURLで直接ライブラリを読み込むことができます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script> 実際に書いてみよう今回のsprintf.jsの場合は、読み込むだけでsprintfという関数が使えるようになるので、関数を呼び出すだけです。 let result = sprintf("テックアカデミージュニアでは %d 歳から学べるコースがあります。", 9); console.log(result);//console => テックアカデミージュニアでは 9 歳から学べるコースがあります。最初に紹介したsprintfの使用例と同じ処理が、JavaScriptでsprintf関数を使って実行できたことが確認できました。ここまではreplaceメソッドやテンプレート文字列とほぼ同じですが、sprintf関数では、桁を指定した0埋めもできます。 0埋めは、%dとしていたところを%03dというように、%の後に0を記述してその後に桁数という記述します。 let result = sprintf("テックアカデミージュニアでは %03d 歳から学べるコースがあります。", 9); console.log(result);//console => テックアカデミージュニアでは 009 歳から学べるコースがあります。他には「%u」で絶対値（符号なしの数値）や「%0-3」などマイナスを使うことで右詰めにできます。まとめライブラリを使ったsprintf関数の使い方を紹介しました。特にライブラリをCDNで読み込むと少ないコードで様々な機能を実装できるようになりますので、ぜひ活用してくださいね。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ JavaScriptを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

JavaScript

Rubyでsprintfを使う方法を現役エンジニアが解説【初心者向け】

Rubyでsprintfを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。田島悠介今回は、Rubyに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Rubyでsprintfを使う方法について詳しく説明していくね！大石ゆかりお願いします！ sprintfとは与えられた引数を指定フォーマットの文字列として返します。似たような名前のprintfは「文字列として出力（表示）する」のに対して、今回のsprintfは「文字列として返す」点が異なります。 sprintfやprintfのフォーマットの指定形式はいろいろな言語でほぼ共通の形式となっているので、ぜひ覚えてしまいましょう。 sprintfを使うメリットや使われるケース文字列の「左寄せ」や、数値の「桁のゼロ埋め」や、「小数点以下の桁指定」など、文字列のフォーマットを指定したいときに便利です。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはsprintfを使う方法主に以下の形式で使用します。 sprintf( "フォーマット", 戻したい値 ) フォーマットの指定についてはいろいろありますが、主に次のものを覚えておきましょう。 rn ：表示を改行させます。 %幅d : 整数値を指定の桁数で右詰めにします。 %-幅d ：整数値を指定の桁数で左詰めにします。 %+幅d ：整数値を符号付きで表示します。 %0幅d : 整数値の余った空白をゼロで埋めます。 %幅.小数点以下桁数f ：小数点以下の桁数を指定しています。 %幅s ：文字列を右詰めで表示します。 %-幅s ：文字列を左詰めで表示します。 decimal の「d」、float の「f」、string の「s」と覚えるとよいでしょう。実際に書いてみよう # 数値を右詰めで指定します。 str = sprintf("%10d", 123) p str #=> " 123" # 数値を左詰めで指定します。 str = sprintf("%-10d", 123) p str #=> "123 " # 数値を符号付きで指定します。 str = sprintf("%+10d", 123) p str #=> "

Ruby

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次sprintf関数とはsprintfの書き方実際に書いてみようまとめそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

PHPで小数点以下を表示する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで小数点以下を表示する方法について解説します。そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPで小数点以下を表示する方法について詳しく説明していくね！大石ゆかりお願いします！ PHPで少数点以下の数字を扱うには、浮動小数点型（float型）を使います。変数を定義するときに、小数点をつけた数字を代入すれば、自動的に浮動小数点型になります。 $a = 10.0; では、この数字を表示する方法を見ていきましょう。小数点以下を表示する通常の出力では、整数型、浮動小数点型に関わらず、小数点以下が0の場合は、整数として表示されます。 $a = 10.0; $b = 10; echo $a; // 10が表示される。 echo $b; // 10が表示される。これを少数点以下まで表示するためには、フォーマットを指定して出力する方法があります。小数点以下を表示するための関数として、printfとsprintfとnumber_formatがあります。 printfとsprintfとの違いは、値の出力を標準出力に出力するのか、戻り値として返すのかの違いです。 printfは値を標準出力に出力し、sprintfは値を戻り値として返します。これらの関数は、出力する値を特定のフォーマットに従って整形します。 1つ目の引数に表示する内容、2つ目以降の引数にフォーマットに沿って表示したい値を取ります。小数点を表示するには、「%.2f」というフォーマットを使います。ここでの整数「2」は、小数点以下第二位までを表示するという指定です。 $a = 10.0; printf("%.2fn", $a); // 10.00と表示される。 ※sprintfも同様の引数をとります。また、number_formatでは、1つ目の引数に表示したい数字、2つ目の引数に小数点以下第何位まで表示するかを指定します。 $a = 10.0; echo number_format($a, 2); // 10.00と表示される。このように、それぞれ小数点以下第何位まで表示するかを指定して表示できます。実際に書いてみようそれでは、実際に小数点以下の出力内容を確認してみます。下記のように、3つの数字を用意して、それぞれの関数で出力します。 ※var_dump関数は、値の型を確認するために用います。 <?php $a = 10.0; $b = 10; $c = 1/3; var_dump($a); var_dump($b); var_dump($c); echo "---- printf ----n"; printf("%.2fn",$a); printf("%.2fn",$b); printf("%.2fn",$c); echo "---- sprintf ----n"; echo sprintf('%.2f',$a)."n"; echo sprintf('%.2f',$b)."n"; echo sprintf('%.2f',$c)."n"; echo "---- number_format ----n"; echo number_format($a, 2)."n"; echo number_format($b, 2)."n"; echo number_format($c, 2)."n"; ?> 出力結果は下記のようになります。 float(10) int(10) float(0.33333333333333) //---- printf ---- 10.00 10.00 0.33 //---- sprintf ---- 10.00 10.00 0.33 //---- number_format

PHP

JavaScriptで複数のプルダウンメニューを連動させる方法を現役エンジニアが解説【初心者向け】

JavaScriptで複数のプルダウンメニューを連動させる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介複数のプルダウンメニューを連動させる方法について詳しく説明していくね！大石ゆかりお願いします！プルダウンメニューとはプルダウンメニューとは、複数の選択肢の中から1つを選んでもらう際に利用するメニューです。選択前にはデフォルト状態の選択肢が表示されており、プルダウンメニューをクリックすることによって選択肢一覧が表示され、選択肢の中から1つを選択すると、選択した要素がその後表示され続けるというものです。 webページでは性別を選択してもらうときや、住んでいる県を選択してもらう際によく利用します。プルダウンメニューの設定方法プルダウンメニューを配置するにはselectタグで利用し、選択肢をoptionタグで配置していきます。以下は性別を選択するためのプルダウンメニューを配置しています。 <select name="gender"> <option value="">選択してください <option value="0">男性 <option value="1">女性 </select> このように設定すると選択肢の一番上の要素である”選択して下さい”が選択された状態で表示されますが、以下のようにselected要素を設定することで初期の選択状態を変更することが可能です。 <select name="gender"> <option value="">選択してください <option value="0" selected>男性 <option value="1">女性 </select> このようにすると”男性”が選択された状態で表示されます。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは複数のプルダウンメニューを連動させる方法複数のプルダウンメニューを連動させたい場合もあるでしょう。例えば、住所を選択するフォームを作成した際に、選択した県によって市の選択肢を変更したい場合などです。 JavaScriptを使えばこういった場合に複数のプルダウンメニューを連動することによって、ある選択肢を選択した際には別のプルダウンメニューに任意の選択肢を表示させることが可能です。実際に書いてみよう今回は好きな食べ物を入力してもらうフォームを作成し、食べ物のカテゴリを選ぶとカテゴリにあった食べ物の選択肢が表示されるようなものを作成してみましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>好きな食べ物</title> <script src="script.js"></script> </head> <body> <p>食べ物のジャンル</p> <select name="category" id="category"> <option value="">選択してください</option> <option value="0">和食</option> <option value="1">アジア料理</option> <option value="2">ヨーロッパ料理</option> </select> <p>好きな食べ物</p> <select name="food" id="food"> <option value="">選択してください</option> </select> </body> </html> script.js window.onload = function() { // 好きな食べ物の選択肢 food = document.getElementById("food"); // ジャンルの選択肢が変更された際の動作 category = document.getElementById("category"); category.onchange = changeCategory; } // ジャンルの選択肢が変更された際の動作 function changeCategory() { // 変更後のカテゴリを取得 var changedCategory = category.value; if (changedCategory == "0") { // カテゴリに和食が選択された場合 setJFootds(); } else if (changedCategory == "1") { // カテゴリにアジア料理が選択された場合 setAsianFoods(); } else { // カテゴリにヨーロッパ料理が選択された場合 setEuropeFoods(); } } // 和食の選択肢を設定する function setJFootds() { // 好きな食べ物の選択肢を空にする food.textContent = null; // 和食の選択肢 var jFoods = [ {cd:"", label:"選択して下さい"}, {cd:"0", label:"寿司"}, {cd:"1", label:"おでん"}, {cd:"2", label:"そば"} ]; jFoods.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; food.appendChild(op); }); } // アジア料理の選択肢を設定する function setAsianFoods() { // 好きな食べ物の選択肢を空にする food.textContent = null; // アジア料理の選択肢 var asianFoods = [ {cd:"", label:"選択して下さい"}, {cd:"3", label:"インドネシア料理"}, {cd:"4", label:"ベトナム料理"}, {cd:"5", label:"インド料理"} ]; asianFoods.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; food.appendChild(op); }); } // ヨーロッパ料理の選択肢を設定する function setEuropeFoods() { // 好きな食べ物の選択肢を空にする food.textContent = null; // ヨーロッパ料理の選択肢 var europeFoods = [ {cd:"", label:"選択して下さい"}, {cd:"6", label:"イタリア料理"}, {cd:"7", label:"カリフォルニア料理"}, {cd:"8", label:"モロッコ料理"} ]; europeFoods.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; food.appendChild(op); }); } それでは、ソースコードの解説を行っていきます。まずindex.htmlですが、食べ物のジャンルのセレクトボックスと好きな食べ物のセレクトボックスを配置しています。好きな食べ物のセレクトボックスの選択肢は食べ物のジャンルが選択された際にjavascriptにて追加していくので初期状態の選択肢のみ用意しておきます。次にscript.jsの解説です。window.onloadにhtmlが読み込み終わった際に行われる動作を設定していきます。ここでは選択肢をプログラム上で操作するためにdocument.getElementByIdで各セレクトボックスを取得しています。また、食べ物のジャンルが変更された際にchangeCategory()関数が呼ばれるよう設定しています。changeCategory()関数では、選択された選択肢によって好きな食べ物のセレクトボックスの中身を入れ替えています。実際の入れ替え処理はsetJFoods()、setAsianFoods()、setEuropeFoods()の各関数内で行っています。入れ替え処理用の各関数内で行っている処理の流れはすべて同じで、選択肢要素の配列を作成、選択肢の数だけ好きな食べ物のセレクトボックスに追加という処理を行っています。いかがでしたでしょうか、このようにJavaScriptを使うことによってhtml上の要素を自由に操作することができます。今回の記事を参考にぜひいろいろな動作の実現にチャレンジしてみてください！監修してくれたメンター黒木一志（くろきかつし） TechAcademyジュニアのゲームアプリコースを担当しています黒木です。現在は会社員としてシステムエンジニアをしております。会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

JavaScriptで即時関数を使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。今回は、JavaScriptで即時関数を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。目次sprintf関数とはsprintfの書き方実際に書いてみようまとめそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。注意書き本記事で解説されている「無名関数」「即時関数」という概念は、現在のJavaScript開発においてはあまり意識されなくなりました。もともと即時関数はグローバル汚染といって、むやみにグローバル変数を増やさないための方法の1つでもありました。アロー関数という関数の記述法や、constやletといった宣言法が新たに生まれた今、即時関数をあまり意識せずとも安全なコードが書けるようになっているのです。参考：JavaScriptのアロー関数の使い方を現役エンジニアが解説【初心者向け】参考 : JavaScriptで書く「var,let,const」の違いと使い分け方法とはいえ、教養として「無名関数」「即時関数」を学んでおくと、今まで気づかなかったJavaScriptの仕組みが見えてくるかもしれません。上記の注意書きを踏まえた上で、ぜひ記事を閲覧してみてください。関数とは、処理に名前をつけてまとめたものです。無名関数とは、関数名のない関数です。即時関数は、英語で IIFE (Immediately Invoked Function Expression）と呼ばれる即時実行関数式です。関数とは関数とは、処理に名前をつけてまとめたものです。これにより、他の場所から関数を呼び出して使用できます。つまり、何度も利用する処理の場合、呼び出すだけで簡単に利用できます。 fonctionを使い、次のように定義します。 function 関数名( ) { 処理 } 大石ゆかり関数は名前を付けて処理を定義するものですよね？functionで定義すると後ろのほうに書いても、前で使えるんでしたっけ？田島悠介その通り！ただ、JavaScriptの関数には名前をつけないで書くことができる無名関数というのもあるんだよね。大石ゆかり名前がない関数も書くことができるんですか？ [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは無名関数とは無名関数とは、その名の通り関数名なしに関数を定義できるものです。無名関数を利用することは、高階関数を利用する際にコードがシンプルになるというメリットにもつながります。高階関数とは、関数自体を引数や戻り値として扱うことができる関数のことをいいます。高階関数では、引数になる関数が1回きりしか使わない関数の場合が多く、そのため無名関数にすることでコードをシンプルにできます。また、無名関数にすることでグローバルスコープ名を定義する必要がないため、結果的に関数名の重複によるエラーを減らすことにもつながります。通常の関数と無名関数の比較次のプログラムをもとに、名前付き関数と無名関数を比較してみましょう。 function( ) { 処理 } 通常の関数 sumという関数名で定義した関数を、変数answerに代入してconsole.logで呼び出します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> function sum(a,b){ var result

JavaScript