<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>

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

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

<p>タイトルの通りです。Next.jsとTailwindCSSを使用してダークモードを実装してみたので、その備忘録になります。<br>ライブラリはテーマの切替・管理に<a href="https://github.com/pacocoursey/next-themes" target="_blank" rel="noopener noreferrer nofollow">next-themes</a>を使用しました。</p><p>まずはライブラリをインストール</p><pre><code class="language-zsh">npm install next-themes</code></pre><p>次に<code>_app.tsx</code>にnext-themesの<code>provider</code>を設置する。</p><p><code>attribute</code>を<code>class</code>にするとルート要素（<code>html</code>）に<code>dark</code>クラスが付与される。（デフォルトは<code>data-theme</code>属性）</p><p>OSの環境設定に基づいてライトとダークを切り替えるようにする場合は<code>enableSystem</code>を<code>true</code>にする。</p><div data-filename="_app.tsx"><pre><code class="language-typescript">import &apos;@/styles/globals.scss&apos;;
import type { AppProps } from &apos;next/app&apos;;
import { ThemeProvider } from &apos;next-themes&apos;;

const MyApp = ({ Component, pageProps }: AppProps) =&gt; {
  return (
    &lt;ThemeProvider attribute=&apos;class&apos; enableSystem={true}&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/ThemeProvider&gt;
  );
};

export default MyApp;</code></pre></div><p>次に<code>tailwind.config.js</code>にダークモードを利用するように設定する。指定は<code>media</code>と<code>class</code>があるが、今回は<code>class</code>で切替を行うので<code>class</code>を指定。<br><code>media</code>を指定した場合はOSの環境設定に基づいて設定される。</p><div data-filename="tailwind.config.js"><pre><code class="language-javascript">module.exports = {
  darkMode: &apos;class&apos;,
  ...</code></pre></div><p>ひとまずこれでダークモードの適用は完了で、TailwindCSSで指定してあげる場合は接頭辞に<code>dark:</code>をつける。</p><div data-filename="_document.tsx"><pre><code class="language-typescript">import { Html, Head, Main, NextScript } from &apos;next/document&apos;;

const Document = () =&gt; {
  return (
    &lt;Html&gt;
      &lt;Head /&gt;
      &lt;body className=&apos;dark:bg-primary-950 dark:text-body-white&apos;&gt; // ダークモード用の記述
        &lt;Main /&gt;
        &lt;NextScript /&gt;
      &lt;/body&gt;
    &lt;/Html&gt;
  );
};

export default Document;</code></pre></div><p>次にダークモード用の切替ボタンを作成する。こちらもライブラリを<code>import</code>して現在の<code>theme</code>がどちらなのかを判定してボタンを切り替える。</p><div data-filename="ChangeThemeButton.tsx"><pre><code class="language-typescript">import { useEffect, useState } from &apos;react&apos;;
import { useTheme } from &apos;next-themes&apos;;
import { BsSunFill, BsMoonStarsFill } from &apos;react-icons/bs&apos;;

export const ChangeThemeButton: React.FC = () =&gt; {
  const { theme, setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState&lt;boolean&gt;(false);

  useEffect(() =&gt; {
    setMounted(true);
  }, []);

  useEffect(() =&gt; {
    if (mounted &amp;&amp; theme === &apos;system&apos;) {
      setTheme(`${resolvedTheme}`);
    }
  }, [mounted]);

  return (
    &lt;button
      className=&apos;rounded-full p-2 transition duration-300 hover:scale-110 hover:bg-secondary-50 dark:hover:bg-secondary-900&apos;
      type=&apos;button&apos;
      aria-label={mounted ? (theme === &apos;dark&apos; ? &apos;ダークモード&apos; : &apos;ライトモード&apos;) : &apos;テーマ切り替え&apos;}
      onClick={() =&gt; setTheme(theme === &apos;dark&apos; ? &apos;light&apos; : &apos;dark&apos;)}
    &gt;
      {mounted &amp;&amp; (
        &lt;&gt;{theme === &apos;dark&apos; ? &lt;BsSunFill size={&apos;18px&apos;} /&gt; : &lt;BsMoonStarsFill size={&apos;1.2rem&apos;} /&gt;}&lt;/&gt;
      )}
    &lt;/button&gt;
  );
};

export default ChangeThemeButton;
</code></pre></div><p>初回は<code>theme</code>の<code>value</code>が<code>system</code>になるので、そこを初回+<code>theme</code>が<code>system</code>の場合に<code>resolveTheme</code>を使用して<code>dark</code>か<code>light</code>モードかを判別して、<code>setTheme</code>に格納してます。</p><p>あとは<code>theme</code>の値に合わせて切替を行うみたいな感じです。以上！</p><hr><h2 id="he45680f0bc">参考記事</h2><p><a href="https://github.com/pacocoursey/next-themes" target="_blank" rel="noopener noreferrer nofollow">https://github.com/pacocoursey/next-themes</a></p><p><a href="https://zenn.dev/taka_shino/articles/a6c176da799c91" target="_blank" rel="noopener noreferrer nofollow">https://zenn.dev/taka_shino/articles/a6c176da799c91</a></p><p><a href="https://yokinist.me/dark-mode" target="_blank" rel="noopener noreferrer nofollow">https://yokinist.me/dark-mode</a></p>

Next.jsとTailwindCSSを使用してダークモードを実装したのでその備忘録。next-themesライブラリを使用してダークモードの切替ボタンの作成までメモ。

Next.jsとTailwindCSSでダークモードを実装する

<p>Next.jsのOGPタグやmetaタグの記述などはどうするのか色々調べたところ、<a href="https://github.com/garmeeh/next-seo" target="_blank" rel="noopener noreferrer nofollow">next-seo</a>というライブラリを導入するのがよさそう。</p><p>導入は簡単で、まずはインストール</p><pre><code>npm install next-seo</code></pre><p>あとは特定のページでインポートして記述するだけ</p><div data-filename="Page.tsx"><pre><code class="language-typescript">import { NextSeo } from &apos;next-seo&apos;;

const Page = () =&gt; (
  &lt;&gt;
    &lt;NextSeo
      title=&quot;タイトル&quot;
      description=&quot;デスクリプション&quot;
    /&gt;
  &lt;/&gt;
);

export default Page;</code></pre></div><p>ただこれだと、指定ページのみに各種<code>meta</code>タグが入るので、デフォルトで基本のOGPや<code>meta</code>タグが入るようにする。</p><p>まずはデフォルト値を保存する設定ファイルを作成する。サイトタイトルやURLなどは環境変数に設定している値から<code>config</code>オブジェクトに代入し、そこから<code>props</code>へ代入している。</p><div data-filename="seoConfig.ts"><pre><code class="language-typescript">import { DefaultSeoProps } from &apos;next-seo&apos;;
import { SITE_NAME, TWITTER_USER_ACCOUNT, BASE_URL } from &apos;@/config&apos;;

const config = {
  siteName: SITE_NAME,
  twitterAccount: TWITTER_USER_ACCOUNT,
  url: BASE_URL,
};

const SEO: DefaultSeoProps = {
  titleTemplate: `%s - ${config.siteName}`,
  defaultTitle: config.siteName,
  themeColor: &apos;#000&apos;,
  openGraph: {
    url: config.url,
    type: &apos;article&apos;,
    siteName: config.siteName,
    title: &apos;&apos;,
    description: &apos;&apos;,
    images: [
      {
        url: `${config.url}/ogp.png`,
      },
    ],
    locale: &apos;ja_JP&apos;,
  },
  twitter: {
    handle: config.twitterAccount,
    cardType: &apos;summary_large_image&apos;,
  },
};

export default SEO;</code></pre></div><p>次に設定ファイルを_app.tsxで読み込み、<code>&lt;Component /&gt;</code>と同じ階層に<code>&lt;DefaultSeo /&gt;</code>コンポーネントを入れる。<br>この時、<code>&lt;DefaultSeo /&gt;</code>に設定ファイルを<code>props</code>で渡してあげる必要がある。</p><div data-filename="_app.tsx"><pre><code class="language-typescript">import &apos;@/styles/globals.scss&apos;;
import type { AppProps } from &apos;next/app&apos;;
import { ThemeProvider } from &apos;next-themes&apos;;
import { DefaultSeo } from &apos;next-seo&apos;;
import SEO from &apos;@/types/seoConfig&apos;;

const MyApp = ({ Component, pageProps }: AppProps) =&gt; {
  return (
    &lt;&gt;
      &lt;DefaultSeo {...SEO} /&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/&gt;
  );
};

export default MyApp;
</code></pre></div><p>これで設定ファイルに記述した内容で全ページに<code>head</code>タグが出力される。<br>それぞれの投稿の内容に合わせてタイトルやディスクリプションを設定したい場合には以下のようにする。</p><div data-filename="[id].tsx"><pre><code class="language-typescript">import { NextPage } from &apos;next&apos;;
import { NextSeo } from &apos;next-seo&apos;;

type PostPageProps = {
  post: Post;
};

const PostPage: NextPage&lt;PostPageProps&gt; = ({ post }) =&gt; {
  return (
    &lt;&gt;
      &lt;NextSeo
        title={post.title}
        description={post.description}
        openGraph={{
          title: `${post.title}`,
          description: `${post.description}`,
        }}
      /&gt;
      &lt;article className=&apos;mt-10&apos;&gt;...&lt;/article&gt;
    &lt;/&gt;
  );
};</code></pre></div><p>これで投稿ページはそれぞれのタイトルやディスクリプションで出力し、その他OGPなどについては設定ファイルで記述した内容に沿って出力される。</p><hr><h2 id="he45680f0bc">参考記事</h2><p><a href="https://github.com/garmeeh/next-seo" target="_blank" rel="noopener noreferrer nofollow">https://github.com/garmeeh/next-seo</a></p><p><a href="https://blog.stin.ink/articles/add-next-seo-to-blog" target="_blank" rel="noopener noreferrer nofollow">https://blog.stin.ink/articles/add-next-seo-to-blog</a></p>

Next.jsでSEO対策を行う際の方法について調べたところ、next-seoライブラリというものがあったので導入、カスタマイズをしてみました。

Next.jsでnext-seoを導入してSEO対策を行う

<p>モダンなフロントエンドの技術に触れてみたくてNext.jsとmicroCMSを使用して備忘録ブログを作成してみました。<br>ひとまず最小構成ということで、記事一覧と詳細のページのみの機能になってます。</p><p>ダークモード対応は個人的にやってみたことがなかったので実装してみました。いい感じです。</p><p>記事についてはNotion等にまとめてる知見とかをここに書き移していこうかなと思ってます。</p>

モダンフレームワークのNext.jsとmicroCMSを使って、小規模な備忘録ブログを作成してみました。

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

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

Next.jsとTailwindCSSでダークモードを実装する

Next.jsでnext-seoを導入してSEO対策を行う

お試しがてら備忘録ブログを作成した