MENU
  1. ホーム
  2. Next.js
  3. Next.jsにGoogleアナリティクスを設定する完全ガイド【2025年最新版・初心者向け】

Next.jsにGoogleアナリティクスを設定する完全ガイド【2025年最新版・初心者向け】

Next.js

Next.jsで作成したWebサイトのアクセス解析をしたいけれど、Googleアナリティクスの設定方法がわからず困っていませんか？本記事では、Next.js公式パッケージを使った最も簡単な方法から、詳細なカスタマイズが可能な手動実装まで、バージョン別に初心者の方にもわかりやすく解説します。

目次

Googleアナリティクスとは？なぜ必要なのか

Googleアナリティクス（Google Analytics）は、Googleが無料で提供しているアクセス解析ツールです。Webサイトの訪問者数、ページビュー、ユーザーの行動パターンなどを詳細に分析できます。

Googleアナリティクスを導入する3つのメリット

データに基づいた意思決定ができる

どのページがよく見られているか、どこから訪問者が来ているか、どのコンテンツが人気なのかを数値で把握できます。感覚ではなく、具体的なデータに基づいてサイト改善の方針を決められます。

ユーザー行動の理解が深まる

訪問者がサイト内でどのような動きをしているか、どこで離脱しているかを追跡できます。これにより、ユーザーエクスペリエンスの問題点を発見し、改善につなげられます。

マーケティング効果の測定が可能

広告キャンペーンの効果測定、SNSからの流入分析、コンバージョン率の計測など、マーケティング施策の成果を具体的に評価できます。

GA4とユニバーサルアナリティクスの違い

現在のGoogleアナリティクスは「GA4（Googleアナリティクス4）」と呼ばれるバージョンです。2023年7月に旧バージョン（ユニバーサルアナリティクス）のサポートが終了したため、現在はGA4を使用します。

GA4では、測定IDが「G-」から始まる形式になっています。これが重要なポイントです。

事前準備：Googleアナリティクスアカウントの作成

Next.jsへの実装を始める前に、Googleアナリティクスのアカウントと測定IDを取得しましょう。

ステップ1：Googleアカウントでログイン

Google Analyticsにアクセスし、Googleアカウントでログインします。アカウントがない場合は、無料で作成できます。

ステップ2：プロパティの作成

アカウント名の設定

最初に「アカウント」を作成します。アカウント名は、自社名やプロジェクト名など、管理しやすい名前を付けましょう。

プロパティの設定

次に「プロパティ」を作成します。プロパティ名はWebサイト名を設定することが一般的です。タイムゾーンは「日本」、通貨は「日本円（JPY）」を選択します。

ビジネス情報の入力

業種やビジネスの規模について簡単な質問に答えます。この情報は、Googleアナリティクスが適切なレポートを提供するために使用されます。

ステップ3：データストリームの作成

「ウェブ」を選択し、以下の情報を入力します。

  • WebサイトのURL：あなたのサイトのURL（例：https://example.com）
  • ストリーム名：わかりやすい名前（例：「メインサイト」）

「ストリームを作成」ボタンをクリックすると、測定IDが表示されます。

ステップ4：測定IDをコピー

画面に表示される「G-XXXXXXXXXX」という形式の測定IDをコピーしてください。このIDをNext.jsプロジェクトで使用します。

測定IDは、「管理」→「データストリーム」からいつでも確認できるので、わからなくなった場合でも安心です。

Next.jsのバージョンを確認する

設定方法はNext.jsのバージョンによって異なります。まず、自分のプロジェクトがどのルーターを使用しているか確認しましょう。

使用しているルーターの見分け方

プロジェクトのルートディレクトリを確認してください。

App Routerを使用している場合

  • appディレクトリが存在する
  • Next.js 13以降で導入された新しいルーティングシステム

Pages Routerを使用している場合

  • pagesディレクトリが存在する（appディレクトリはない）
  • Next.js 12以前から使われている従来のルーティングシステム

確認できたら、該当する設定方法に進みましょう。

【推奨】@next/third-partiesを使った最も簡単な設定方法

Next.js公式が提供する@next/third-partiesパッケージを使うと、わずか数行のコードでGoogleアナリティクスを設定できます。初心者の方には、この方法を強くお勧めします。

@next/third-partiesとは？

@next/third-partiesは、Next.jsチームが開発した公式パッケージで、GoogleアナリティクスやGoogle Tag Managerなどのサードパーティスクリプトを簡単に統合できます。

このパッケージを使うメリット

  • 設定が超簡単：数行のコードだけで完了
  • パフォーマンス最適化済み：自動的に最適な読み込み戦略を適用
  • 公式サポート：Next.jsチームが保守しているため安心
  • 型安全：TypeScriptの型定義が組み込まれている
  • メンテナンス不要：Next.jsのアップデートに合わせて自動更新

ステップ1：パッケージのインストール

ターミナルで以下のコマンドを実行します。

npm install @next/third-parties@latest

yarnを使用している場合は以下です。

yarn add @next/third-parties@latest

ステップ2：環境変数の設定

プロジェクトのルートディレクトリに.env.localファイルを作成し、測定IDを追加します。

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

G-XXXXXXXXXXの部分を、先ほどコピーした実際の測定IDに置き換えてください。

ステップ3：App Routerでの実装

app/layout.tsxに、わずか2行追加するだけで完了です。

// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        {children}
        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || ''} />
      </body>
    </html>
  )
}

これだけです！たったこれだけで、Googleアナリティクスが動作します。

より安全な実装（環境変数チェック付き）

本番環境でのみ有効にする場合は、以下のようにします。

// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const gaId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

  return (
    <html lang="ja">
      <body>
        {children}
        {gaId && <GoogleAnalytics gaId={gaId} />}
      </body>
    </html>
  )
}

ステップ4：Pages Routerでの実装

Pages Routerを使用している場合は、pages/_app.js（または.tsx）に追加します。

// pages/_app.js
import { GoogleAnalytics } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  const gaId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

  return (
    <>
      <Component {...pageProps} />
      {gaId && <GoogleAnalytics gaId={gaId} />}
    </>
  )
}

ステップ5：動作確認

開発サーバーを起動して確認しましょう。

npm run dev

ブラウザでhttp://localhost:3000にアクセスし、開発者ツール（F12キー）のConsoleタブで以下を実行します。

console.log(window.gtag)

関数が表示されれば成功です。また、Google Analyticsのリアルタイムレポートで、自分のアクセスが表示されるか確認してください。

@next/third-partiesでのカスタムイベント送信

ボタンクリックなどのカスタムイベントは、従来通りgtag関数で送信できます。

'use client'

export default function ContactButton() {
  const handleClick = () => {
    // イベント送信
    if (window.gtag) {
      window.gtag('event', 'button_click', {
        event_category: 'engagement',
        event_label: 'お問い合わせボタン',
        value: 1,
      })
    }
    
    console.log('お問い合わせページへ移動')
  }

  return (
    <button onClick={handleClick}>
      お問い合わせ
    </button>
  )
}

sendGTMEventヘルパー関数の使用

@next/third-partiesは、より簡単にイベントを送信できるヘルパー関数も提供しています。

'use client'

import { sendGTMEvent } from '@next/third-parties/google'

export default function ContactButton() {
  const handleClick = () => {
    // シンプルにイベント送信
    sendGTMEvent({ 
      event: 'button_click', 
      value: 'お問い合わせボタン' 
    })
    
    console.log('お問い合わせページへ移動')
  }

  return (
    <button onClick={handleClick}>
      お問い合わせ
    </button>
  )
}

sendGTMEventを使うと、window.gtagの存在チェックが不要で、よりシンプルなコードになります。

手動実装：より詳細な制御が必要な場合

@next/third-partiesは非常に便利ですが、以下のような場合は手動実装を検討してください。

手動実装が適している場合

  • 読み込みタイミングを完全に制御したい
  • 複雑な条件分岐でアナリティクスを有効化したい
  • パッケージの依存関係を増やしたくない
  • レガシーなプロジェクトで互換性が心配

ここからは、手動でGoogleアナリティクスを実装する方法を解説します。

App Router（Next.js 13以降）での手動実装

ステップ1：環境変数ファイルの作成

.env.localファイルを作成します（既に作成済みの場合はスキップ）。

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

ステップ2：Google Analyticsコンポーネントの作成

app/components/GoogleAnalytics.tsxファイルを作成します。

// app/components/GoogleAnalytics.tsx
import Script from 'next/script'

export default function GoogleAnalytics() {
  const gaId = process.env.NEXT_PUBLIC_GA_ID

  if (!gaId) {
    return null
  }

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gaId}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
    </>
  )
}

コードの解説

Scriptコンポーネントは、Next.jsが提供する最適化されたスクリプト読み込み機能です。strategy="afterInteractive"を指定することで、ページが操作可能になった後にスクリプトを読み込みます。

ステップ3：レイアウトファイルへの追加

// app/layout.tsx
import GoogleAnalytics from './components/GoogleAnalytics'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <GoogleAnalytics />
        {children}
      </body>
    </html>
  )
}

ステップ4：ページ遷移の自動追跡

ページ遷移を自動的に追跡する機能を追加します。

// app/components/GoogleAnalytics.tsx
'use client'

import { usePathname, useSearchParams } from 'next/navigation'
import Script from 'next/script'
import { useEffect } from 'react'

export default function GoogleAnalytics() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const gaId = process.env.NEXT_PUBLIC_GA_ID

  useEffect(() => {
    if (!gaId) return

    const url = pathname + searchParams.toString()
    
    if (window.gtag) {
      window.gtag('config', gaId, {
        page_path: url,
      })
    }
  }, [pathname, searchParams, gaId])

  if (!gaId) {
    return null
  }

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gaId}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
    </>
  )
}

Pages Router（Next.js 12以前）での手動実装

ステップ1：_document.jsの作成または編集

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  const gaId = process.env.NEXT_PUBLIC_GA_ID

  return (
    <Html lang="ja">
      <Head>
        {gaId && (
          <>
            <script
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
            />
            <script
              dangerouslySetInnerHTML={{
                __html: `
                  window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
                  gtag('js', new Date());
                  gtag('config', '${gaId}', {
                    page_path: window.location.pathname,
                  });
                `,
              }}
            />
          </>
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

ステップ2：_app.jsでページ遷移を追跡

// pages/_app.js
import { useRouter } from 'next/router'
import { useEffect } from 'react'

const pageview = (url) => {
  if (window.gtag) {
    window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
      page_path: url,
    })
  }
}

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      pageview(url)
    }
    
    router.events.on('routeChangeComplete', handleRouteChange)
    
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

カスタムイベントの送信方法

ページビューだけでなく、ボタンクリックやフォーム送信などのカスタムイベントも追跡できます。

イベント送信用ユーティリティの作成

プロジェクトのルートにlibフォルダを作成し、gtag.tsファイルを作成します。

// lib/gtag.ts
export const GA_ID = process.env.NEXT_PUBLIC_GA_ID

export const event = ({ action, category, label, value }: {
  action: string
  category: string
  label: string
  value?: number
}) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value,
    })
  }
}

コンポーネントでの使用例

'use client'

import * as gtag from '@/lib/gtag'

export default function ContactButton() {
  const handleClick = () => {
    gtag.event({
      action: 'click',
      category: 'Button',
      label: 'お問い合わせボタン',
      value: 1,
    })
    
    console.log('お問い合わせページへ移動')
  }

  return (
    <button
      onClick={handleClick}
      className="bg-blue-600 text-white px-6 py-2 rounded"
    >
      お問い合わせ
    </button>
  )
}

よく使われるカスタムイベントの例

ダウンロードボタンの追跡

gtag.event({
  action: 'download',
  category: 'File',
  label: 'PDFカタログ',
  value: 1,
})

外部リンクのクリック追跡

gtag.event({
  action: 'click',
  category: 'Outbound Link',
  label: 'GitHub',
  value: 1,
})

動画再生の追跡

gtag.event({
  action: 'play',
  category: 'Video',
  label: '製品紹介動画',
  value: 1,
})

開発環境での除外設定

開発中は、テストアクセスがアナリティクスデータに含まれないようにすることをお勧めします。

@next/third-partiesを使用している場合

// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const gaId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
  const isDevelopment = process.env.NODE_ENV === 'development'

  return (
    <html lang="ja">
      <body>
        {children}
        {/* 本番環境でのみ有効化 */}
        {!isDevelopment && gaId && <GoogleAnalytics gaId={gaId} />}
      </body>
    </html>
  )
}

手動実装の場合

// app/components/GoogleAnalytics.tsx
export default function GoogleAnalytics() {
  const gaId = process.env.NEXT_PUBLIC_GA_ID
  const isDevelopment = process.env.NODE_ENV === 'development'

  if (isDevelopment || !gaId) {
    return null
  }

  return (
    // ... スクリプト
  )
}

TypeScript使用時の型定義

TypeScriptを使用している場合、gtag関数の型定義を追加すると便利です。

型定義ファイルの作成

// types/gtag.d.ts
export interface GtagEvent {
  action: string
  category: string
  label: string
  value?: number
}

declare global {
  interface Window {
    gtag: (
      type: 'config' | 'event' | 'js',
      targetId: string | Date,
      config?: {
        page_path?: string
        event_category?: string
        event_label?: string
        value?: number
      }
    ) => void
    dataLayer: any[]
  }
}

export {}

実装方法の比較

どの方法を選ぶべきか、比較表でまとめました。

項目@next/third-parties手動実装（App Router）手動実装（Pages Router）
設定の簡単さ◎ 超簡単（2行）○ やや簡単○ やや簡単
コード量◎ 最小限△ 中程度△ 中程度
カスタマイズ性○ 基本機能は十分◎ 完全制御可能◎ 完全制御可能
保守性◎ 自動更新△ 手動メンテナンス△ 手動メンテナンス
パフォーマンス◎ 自動最適化○ 手動最適化が必要○ 手動最適化が必要
依存関係△ パッケージ追加◎ 追加なし◎ 追加なし
推奨度◎ 初心者に最適○ 経験者向け○ 経験者向け

結論：どれを選ぶべきか

  • 初心者や標準的な使用：@next/third-partiesを強く推奨
  • 細かい制御が必要：手動実装を選択
  • パッケージを増やしたくない：手動実装を選択

動作確認の方法

設定が正しく動作しているか、以下の方法で確認しましょう。

リアルタイムレポートでの確認

最も簡単な確認方法です。

  1. Google Analyticsにログイン
  2. 左メニューから「レポート」→「リアルタイム」を選択
  3. 自分のサイトにアクセス
  4. リアルタイムレポートに「1」ユーザーが表示されれば成功

ブラウザの開発者ツールでの確認

Consoleタブでの確認

開発者ツール（F12キー）を開き、Consoleタブで以下を実行します。

console.log(window.gtag)
console.log(window.dataLayer)

どちらもundefinedでなければ、スクリプトが正しく読み込まれています。

Networkタブでの確認

  1. 開発者ツールの「Network」タブを開く
  2. ページをリロード
  3. フィルターに「google-analytics.com」または「gtag」と入力
  4. リクエストが表示されれば、データが送信されている

Google Tag Assistantでの確認

Chromeブラウザの拡張機能「Google Tag Assistant」を使用すると、より詳細な確認ができます。

  1. Chrome Web Storeから「Tag Assistant Legacy (by Google)」をインストール
  2. 拡張機能を有効にしてサイトにアクセス
  3. タグが正しく動作しているか確認

よくあるトラブルシューティング

データが表示されない

測定IDが正しいか確認

.env.localファイルの測定IDが正しいか、再度確認してください。G-から始まる形式になっているはずです。

開発サーバーを再起動

環境変数を変更した場合は、必ず開発サーバーを再起動してください。

# Ctrl + C で停止してから
npm run dev

ブラウザのキャッシュをクリア

ブラウザにキャッシュされた古いスクリプトが原因の場合があります。キャッシュをクリアするか、シークレットモードで確認してください。

本番環境でのみ動作しない

環境変数がデプロイされているか確認

Vercel、Netlifyなどのホスティングサービスを使用している場合、環境変数を設定する必要があります。

Vercelの場合

  1. プロジェクトの設定ページを開く
  2. 「Environment Variables」セクションに移動
  3. 変数を追加（NEXT_PUBLIC_GA_MEASUREMENT_IDまたはNEXT_PUBLIC_GA_ID）
  4. 再デプロイ

Netlifyの場合

  1. サイト設定を開く
  2. 「Build & deploy」→「Environment」に移動
  3. 環境変数を追加
  4. 再デプロイ

エラー「gtag is not defined」

このエラーは、Googleアナリティクスのスクリプトが読み込まれる前にgtag関数を呼び出そうとした場合に発生します。

解決方法

イベント送信関数で、window.gtagが存在するかチェックしてから呼び出します。

export const event = ({ action, category, label, value }) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value,
    })
  }
}

パフォーマンスへの影響を最小限にする

Googleアナリティクスの読み込みが、Webサイトのパフォーマンスに影響を与えないように工夫しましょう。

非同期読み込みの活用

Next.jsのScriptコンポーネントでstrategy="afterInteractive"を使用することで、ページの初期表示後にスクリプトを読み込みます。これにより、ユーザーが最初にコンテンツを見るまでの時間（First Contentful Paint）に影響を与えません。

<Script
  strategy="afterInteractive"  // ページ操作可能後に読み込み
  src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
/>

strategyオプションの種類

  • beforeInteractive：ページが操作可能になる前に読み込む（重要なスクリプト用）
  • afterInteractive：ページが操作可能になった後に読み込む（推奨）
  • lazyOnload：アイドル時に読み込む（優先度の低いスクリプト用）

Googleアナリティクスの場合、afterInteractiveが最適なバランスです。

@next/third-partiesの利点

@next/third-partiesを使用すると、これらのパフォーマンス最適化が自動的に適用されます。これも、公式パッケージを推奨する理由の一つです。

条件付き読み込み

本当に必要なページでのみGoogleアナリティクスを読み込むことも検討できます。

export default function GoogleAnalytics() {
  const pathname = usePathname()
  const gaId = process.env.NEXT_PUBLIC_GA_ID
  
  // 管理画面など、追跡不要なページでは読み込まない
  const shouldTrack = !pathname.startsWith('/admin')
  
  if (!gaId || !shouldTrack) {
    return null
  }
  
  // ... スクリプトの読み込み
}

Next.jsプロジェクトでの実践例

実際のプロジェクトでの活用例をいくつか紹介します。

ブログサイトでの活用

// 記事ページコンポーネント
'use client'

import { useEffect } from 'react'
import * as gtag from '@/lib/gtag'

export default function BlogPost({ post }) {
  useEffect(() => {
    // 記事カテゴリを追跡
    gtag.event({
      action: 'view_content',
      category: 'Blog',
      label: post.category,
      value: 1,
    })
  }, [post.category])

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

ECサイトでの活用

// カートに追加ボタン
const handleAddToCart = (product) => {
  // カートに追加
  addToCart(product)
  
  // イベントを送信
  gtag.event({
    action: 'add_to_cart',
    category: 'ecommerce',
    label: product.name,
    value: product.price,
  })
}

サービスサイトでの活用

// 資料ダウンロードボタン
const handleDownload = () => {
  gtag.event({
    action: 'download',
    category: 'Lead Generation',
    label: '会社案内PDF',
    value: 1,
  })
  
  // ダウンロード処理
  window.open('/documents/company-profile.pdf')
}

Google Tag Managerとの併用

より高度なタグ管理が必要な場合は、Google Tag Manager（GTM）の使用も検討できます。

@next/third-partiesでGTMを使う

// app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        {children}
        <GoogleTagManager gtmId="GTM-XXXXXX" />
      </body>
    </html>
  )
}

GTMを使用すると、コードを変更せずに管理画面からタグを追加・編集できます。複数のマーケティングツールを使用する場合に便利です。

まとめ

Next.jsにGoogleアナリティクスを設定する方法を、最新の公式パッケージから手動実装まで詳しく解説しました。

最も簡単な方法：@next/third-parties（推奨）

  1. npm install @next/third-parties@latestでインストール
  2. 環境変数に測定IDを設定
  3. layout.tsxまたは_app.jsに<GoogleAnalytics gaId={gaId} />を追加
  4. 完了！

手動実装（詳細な制御が必要な場合）

  • App Router：コンポーネントを作成してlayout.tsxに追加
  • Pages Router：_document.jsと_app.jsを編集

重要なポイント

  • 測定IDは環境変数で管理する
  • 開発環境では無効化する
  • プライバシーポリシーに記載する
  • パフォーマンスへの影響を最小限にする
  • カスタムイベントで詳細な分析を行う

どの方法を選ぶべきか

  • 初心者や標準的な使用：@next/third-partiesを強く推奨
  • 細かい制御が必要：手動実装を選択
  • パッケージを増やしたくない：手動実装を選択

Googleアナリティクスは、Webサイトの成長に欠かせないツールです。データを定期的に分析し、ユーザー体験の改善やコンテンツの最適化に活用しましょう。

最初は基本的なページビュー追跡から始め、慣れてきたらカスタムイベントやコンバージョン追跡など、より高度な機能を導入していくことをお勧めします。データに基づいた意思決定が、サイトの成功につながります。

参考リンク

この記事を参考に、あなたのNext.jsプロジェクトにもGoogleアナリティクスを設定して、データドリブンなサイト運営を始めましょう！

Next.js
プログラミングの独学におすすめ
プログラミング言語の人気オンラインコース
独学でプログラミングを学習している方で、エラーなどが発生して効率よく勉強ができないと悩む方は多いはず。Udemyは、プロの講師が動画で実際のプログラムを動かしながら教えてくれるオンライン講座です。講座の価格は、セール期間中には専門書籍を1冊買うよりも安く済むことが多いです。新しく学びたいプログラミング言語がある方は、ぜひUdemyでオンライン講座を探してみてください。
Udemyの詳しい案内はこちら

関連記事

目次