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

初心者向けにJavaScriptでsprintfを実装する方法について現役エンジニアが解説しています。sprintfとは指定した書式に変換した文字列を返す関数です。JavaScriptには無いので、sprintfのように指定した書式に変換するライブラリを使う方法を解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでsprintfを実装する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでsprintfを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

sprintfとは

C言語やPHPなどにある関数で、指定した書式に変換した文字列を返します。JavaScriptにはsprintfという関数はありません。実際のsprintfの使用例と結果を見たほうがわかりやすいので、PHPで紹介します。

echo sprintf("テックアカデミージュニアでは %d 歳から学べるコースがあります。", 9);

この処理の結果は、%dという文字が9という数字に差し替えられ、echoという出力関数によって下記のように出力されます。

テックアカデミージュニアでは 9 歳から学べるコースがあります。

他にも書式の指定方法はたくさんあります。たとえば、指定の桁数で0埋めをしたり、複数の文字を差し込むなどです。

[PR] フロントエンドで挫折しない学習方法を動画で公開中

sprintfを実装する方法

JavaScriptで同様の処理をしたい場合は、書式指定の方法を網羅して置換するような関数を作成することになります。もしくは、すでにsprintfを再現したライブラリ(部品)がありますので、それらを使うことでも実装できます。

楽に素早く実装するという観点から、ライブラリを使った方法を下記の項目で紹介します。

実際に書いてみよう

JavaScriptのライブラリを使って実装する流れと方法を紹介します。

1.ライブラリを探す

ライブラリを探す際は、欲しい機能名やライブラリというキーワードで検索するのも1つの方法です。今回はJavaScriptのライブラリを探すのに便利なサイトのSearchLibsでsprintfのライブラリを探します。

SearchLibsのサイトでキーワードを sprintf として検索するといくつかライブラリが出てきます。ライブラリの概要と名前から一番欲しい機能に近い「sprintf-js」を使うことにします。

2.ライブラリを読み込む

「sprintf-js」のライブラリをダウンロードして読み込んでも良いです。今回は手っ取り早く読み込めるJavaScriptのライブラリなどを配信しているCDN(Content Delivery Network)のcdnjsから「sprintf-js」を検索して配信しているURLを使って読み込みます。

CDNを使うと、下記のようなURLで直接ライブラリを読み込むことができます。

https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js

3.ライブラリの実装をする

ライブラリのドキュメントを読み実装方法を確認します。今回のsprintf-jsの場合は、読み込むだけでsprintfという関数が使えるようになるので、実装といっても関数を呼び出すだけです。

let result = sprintf("テックアカデミージュニアでは %d 歳から学べるコースがあります。", 9);
console.log(result);

最初に紹介したsprintfの使用例と同じ処理が、JavaScriptでsprintf関数を使って実行できたことが確認できました。sprintf関数では、桁を指定した0埋めもできます。sprintf-jsでも再現できるか確認してみます。

0埋めは、%dとしていたところを%03dというように、%の後に0を記述してその後に桁数という記述になります。

let result = sprintf("テックアカデミージュニアでは %03d 歳から学べるコースがあります。", 9);
console.log(result);

下記のように3桁の0埋めをして出力されました。

テックアカデミージュニアでは 009 歳から学べるコースがあります。

 

まとめ

ライブラリを使ったsprintf関数の使い方を紹介しました。特にライブラリを探して読み込む流れは、いろいろな処理で応用できますのでおすすめです。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。