あなたのスキマ埋めます！padStart()を学んだ - ネットワークエンジニアで高きを目指せ（横浜編）

あなたのスキマ埋めます！padStart()を学んだ

どうもお久しぶりです。執筆活動があまりに忙しくてBlogの更新が止まってしまいました申し訳ございません。少し時間ができたので、カレンダー作りの続きをやることにしました。それにしても結構学ぶことが多くてびっくりします。いや、自分の勉強がだいぶ不足しているだけなのでしょうが。ココナラも勉強用に早くもっと使いたいのですが忙しくてできてない。

今週のお題「わたしのアウトプット方法」

今週はどうもタグ付けでキャンペーンをはてなブログ主催でやっているようです。詳しくは下記の通り。

blog.hatenablog.com

私のアウトプット方法はもう皆さん知って通り下記のパターンでやっています。

①ブログを書く。私は実は昔のブログと合わせると10年以上ブログを書き続けているヘビーユーザーですからね。ブログでのアウトプットが最も多いですね。

②cyberjaya.xyzを利用してアウトプットをする。もはやデザイン性ゼロのあのブログもプログラミング技術を試すという意味では非常に役に立ちますね。

③マインドマップを利用する。
実はここ最近マインドマップをはじめてみました。優秀な方はよくやられているようなので私も真似をしてみることにしました。ちなみに利用しているマインドマップアプリは以下の通りです。

play.google.com

マインドマップはスマホアプリが一番かと思いますね。
指で操作するのでデザインもやりやすいかと。

本日のコンテンツ
〇前の桁数を埋めるpadStart()について
〇後ろの桁数を埋めるpadStart()について

■前の桁数を埋めるpadStart()について
どっかで学んだかもしれないけど知らないメソッドだからまとめてみた。

どこで利用されているのかというと、例えば2桁とか、3桁までは必ず表したい時などに使用される。例えば、1の場合一桁しか数字がないから「1」にしかならないけど「001」とすれば3桁になる。
こういう時はpadStart()というメソッドを使えばよい。

ちなみに、caniuse.comによるとIEは非対応らしい。

caniuse.com

使い方は以下の通り。

変数 = String.padStart(したい桁数,埋める文字);

詳しくは下記のcodepenで実際に動かしてみてほしい。

See the Pen padStart() by tsuyunaruhito (@tsuyunaruhito) on CodePen.

では下記のように簡単にコードの解説をしたい。

  document.getElementById("padStart1").addEventListener("click", function() {
    let pad = "1".padStart(1, "0"); 
    document.getElementById("demo").innerHTML 
　　= "変数 = String.padStart(１桁にしたい,前から埋める文字列);";
    document.getElementById("demo1").innerHTML = pad});

変数padにHTMLのPタグをクリックを押した後に変更するコードとなっています。

変数padには"1"という文字が含まれており、padStartの引数の中には望みの桁数と、埋める文字列が入っています。padStartと書いているくらいなので前から望みの桁数まで引数の文字列で埋めていきます。

最初のボタンでは引数の中は（1,"0"）となっているので、望みの桁数は1桁で、それまで0で埋めていくのですが、最初から1桁しかないのでそのまま1が出てきます。

2つ目のボタンでは（2,"0"）となっているので、桁数は2桁となります。

XX＝2桁

そのうち、一桁目は"0"で埋めるので”０”が来ます。

後は普通に1が来ます。

3つ目は3桁にしたくて00で埋めて、最後に1が来ています。

■後ろの桁数を埋めるpadEnd()について

PadStartがあるんだ、Endもあるんだろ？って勘のいい読者の方は中に入るかもしれません。

ちなみに私は思いもしなかったです。あります。

  document.getElementById("padEnd1").addEventListener("click", function() {
    let pad3 = "1".padEnd(1, "0"); 
    document.getElementById("demo2").innerHTML 
　　= "変数 = String.padEnd(１桁にしたい,後ろから埋める文字);";
    document.getElementById("demo3").innerHTML = pad3});