<p>最近はPaizaのスキルチェックで自分がどのくらいJavaScriptを理解してコードを書けるのか試してみているのですが、その中で今まで使用してこなかったメソッドがたくさんあったので備忘録としてまとめることにしました。</p><h2 id="h6c41de053e">String.prototype.split()</h2><p style="text-align: start">split()は文字列を指定した区切り文字で分割して、新しい配列に格納するメソッド。<br>例えば</p><div data-filename="index.js"><pre><code class="language-javascript">const array = &quot;1,2,3,4,5,6,7,8,9&quot;;</code></pre></div><p>上記のような文字列が存在するときに、各文字列の中身を分割したい文字列で配列に展開したい場合などに使用する。</p><div data-filename="index.js"><pre><code class="language-javascript">const str = &quot;1,2,3,4,5,6,Hello,World&quot;;

const array = str.split(&quot;,&quot;);

console.log(array); // [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;Hello&quot;, &quot;World&quot;]</code></pre></div><p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank" rel="noopener noreferrer nofollow">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split</a></p><h2 id="h309965709e">Array.prototype.splice()</h2><p style="text-align: start">splice()は配列の中で特定の要素を追加・削除・置き換えが可能。<br>例えば <code>const array = [1, 2, 3, 4, 5];</code>この配列に</p><div data-filename="index.js"><pre><code class="language-javascript">// インデックス2から2つの要素を削除
array.splice(2, 2);
console.log(array); // 出力: [1, 2, 5]

// インデックス1に新しい要素を追加
array.splice(1, 0, &apos;a&apos;, &apos;b&apos;);
console.log(array); // 出力: [1, &apos;a&apos;, &apos;b&apos;, 2, 3, 4, 5]

// インデックス0から3つの要素を削除し、新しい要素を追加
array.splice(0, 3, &apos;x&apos;, &apos;y&apos;, &apos;z&apos;);
console.log(array); // 出力: [&apos;x&apos;, &apos;y&apos;, &apos;z&apos;, 4, 5]</code></pre></div><p>そういえばTodoアプリ作成で使った覚えがある（1回きり）</p><p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice" target="_blank" rel="noopener noreferrer nofollow">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice</a></p><hr><p>使用メソッドが増えるたびにどんどん更新していきます。</p>

Paizaのスキルチェックで実際に使用したメソッドをまとめていきます。

Paizaで学んだJavaScriptのメソッドたち

<p>Reactなどでオブジェクト形式で記述する際に条件分岐でそのオブジェクトにプロパティを追加したい場合にどのように記述するのがベストなのかわからなかったのでメモ。</p><h2 id="hcb9dacb773">結論</h2><p>スプレッド構文を使う。</p><p>例ではReactで特定のパスが取得されている場合に<code>style</code>のプロパティを追加する。</p><div data-filename="Component.tsx"><pre><code class="language-typescript">export const Component = () =&gt; {
  return (
    &lt;div
      style={{
        backgroundSize: &apos;cover&apos;,
        backgroundPosition: &apos;center center&apos;,
        ...(path &amp;&amp; {
          backgroundImage: `url(&quot;${IMG_URL}${path}&quot;)`,
        }),
      }}
    /&gt;
  )
}</code></pre></div><p>これで<code>path</code>が存在しない場合はbackground-imageは追加されなくなる。</p><h2 id="h8d78e14043">感想</h2><p>スプレッド構文は既存の配列やオブジェクトを展開したり複製するのに使うイメージだったけど、こういう使い方もあるんだな〜と。こういうの聞けるからChatGPT様様です。</p>

オブジェクトの中で条件分岐させたいけどやり方がわからなかったので調べてみました

JavaScriptに関連する記事一覧

Paizaで学んだJavaScriptのメソッドたち

オブジェクトの中で条件分岐させる