MENU
お問い合わせ
主役になり損ねた星、木星。 | Jupyter事業 by Adecco Group
お問い合わせ
  1. ホーム
  2. Next.js
  3. Next.jsをゼロからマスターする Part 1

Next.jsをゼロからマスターする Part 1

Next.js

この講座では、Next.jsを触ったことがない人でも、実際に手を動かしながらNext.jsを学ぶことで、Next.jsの魅力を実感し、ウェブ開発の新たなステージへ進むお手伝いができれば嬉しいです。

目次

Next.jsって何？

Next.jsは、Reactをベースにしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実装できるのが特徴です。また、React.jsを拡張したJavaScriptライブラリでもあります。
React.js自体は、ユーザーインターフェースを構築するための強力なライブラリで、コンポーネントベースのアプローチを提供していますが、Next.jsを利用することで、より効率的にサーバーサイド処理や静的サイトの生成が可能になります。

JavaScriptの歴史

初期 (1995年)

JavaScriptは、1995年にBrendan EichがNetscapeで開発しました。
当初は「Mocha」と呼ばれ、後に「JavaScript」に改名されました。
JavaScriptは、動的なウェブページを作成するために設計され、ブラウザ上で動作するクライアントサイドのスクリプト言語でした。

1997年：ECMAScript 標準化

1997年にJavaScriptはECMAScript（ES）として標準化されました。
これにより、各ブラウザで同じ仕様に従ったJavaScriptの動作が可能になりました。
現在でもECMAScriptはJavaScriptの基盤となっており、後に多くのバージョンが登場します。

2000年代：Ajax とモダンWebアプリ

2000年代前半には、Ajax（Asynchronous JavaScript and XML）の導入により、JavaScriptが非同期でサーバーと通信し、ページをリロードせずにデータを更新できるようになり、Web 2.0の時代が始まりました。
この時期、JavaScriptはより重要な役割を担い、複雑なユーザーインターフェースを提供するアプリケーションが増えました。

2009年：Node.jsの誕生

2009年にRyan DahlによってNode.jsが開発されました。
これは、JavaScriptをブラウザの外で実行できるサーバーサイド環境です。
Node.jsはGoogleのV8 JavaScriptエンジン上に構築されており、高速で非同期なI/O操作を実現しました。これにより、フルスタック開発（クライアントサイドとサーバーサイドの両方でJavaScriptを使用する）が可能になりました。Node.jsは、NPM（Node Package Manager）を提供し、多数のオープンソースライブラリやモジュールを管理するエコシステムを構築しました。

2010年代：フレームワークの台頭

JavaScriptの人気が高まるにつれて、開発者向けのフレームワークやライブラリが続々と登場しました。
たとえば、2010年にはAngularJS、2013年にはReactが登場し、開発効率やパフォーマンスを大幅に向上させました。これらのツールは、シングルページアプリケーション（SPA）の開発を容易にし、よりインタラクティブなユーザー体験を提供するための土台となりました。

2016年：Next.jsの登場

2016年にVercel（当時はZeit）によってNext.jsが開発されました。
Next.jsはReactをベースにしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）、自動コード分割などを提供します。これにより、SEOやパフォーマンスが向上し、モダンなWebアプリケーションを簡単に構築できるようになりました。

React.js以外のメジャーなJavaScriptフレームワークとライブラリ

  1. Angular: Googleが開発した大規模アプリケーション向けのフレームワーク
  2. Vue.js: 軽量で柔軟性の高いプログレッシブフレームワーク
  3. Svelte: コンパイル時最適化を行う革新的なアプローチを持つフレームワーク
  4. Preact: Reactと似た API を持つ軽量な代替フレームワーク

これらのフレームワークやライブラリは、それぞれ独自の特徴や強みを持っており、プロジェクトの要件に応じて選択されることが多いです。

参考: @angular/core vs next vs react vs svelte vs vue | npm trends

React

Reactの公式ウェブサイト：https://reactjs.org/
Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。

主な特徴として

  • コンポーネントベースの設計を採用しています。
  • 仮想DOMを使用して効率的な更新を行います。
  • 主にクライアントサイドのレンダリングに焦点を当てています。

Reactは、Webアプリケーションの開発において、効率的でインタラクティブなユーザーインターフェースを作成するための強力なツールとして広く使用されています。

この横向きの図は、以下のプロセスを示しています。

  1. WebブラウザがWebサーバーにHTTPリクエストを送信
  2. WebサーバーがHTML/CSS/JSファイルを返送
  3. React.jsがDOMをレンダリング
  4. ユーザーがアプリケーションを操作
  5. React.jsが状態を更新し、必要に応じて再レンダリング
  6. 必要に応じて、React.jsがAPIサーバーにデータをリクエスト
  7. APIサーバーがデータを返送し、React.jsが表示を更新

Next.jsとReact.jsの違い

Next.jsは、Reactをベースにしたウェブアプリケーションフレームワークです。
Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリで、Next.jsはそれを拡張し、サーバーサイドレンダリングやルーティングなどの機能を追加しています。

Next.jsの公式ウェブサイト：https://nextjs.org/

主な違いは以下の通りです。

  • Reactは主にクライアントサイドのレンダリングに焦点を当てていますが、Next.jsはサーバーサイドレンダリングをサポートしています。
  • Next.jsは、ファイルベースのルーティングシステムを提供しており、ページナビゲーションの設定が簡単です。
  • Next.jsには、コード分割やプリフェッチなどの最適化機能が組み込まれています。

つまり、Next.jsはReactの機能を拡張し、より効率的かつ簡単にウェブアプリケーションを開発できるようにしたフレームワークと言えます。

この図は、Next.jsで作成されたWebアプリケーションにおけるサーバーとWebブラウザの関係を示しています。

  1. WebブラウザがNext.jsサーバーにHTTPリクエストを送信します。
  2. Next.jsサーバーがサーバーサイドレンダリングを行います。
  3. サーバーがHTML/CSS/JSをブラウザに返送します。
  4. ブラウザでクライアントサイドレンダリングが行われます。
  5. ユーザーがアプリケーションを操作します。
  6. 必要に応じて、ブラウザがAPIリクエストをサーバーに送信します。
  7. サーバーがデータを返送し、ブラウザが表示を更新します。

この流れにより、Next.jsはサーバーサイドレンダリングとクライアントサイドレンダリングを組み合わせて、高速で動的なWebアプリケーションを実現しています。

Next.jsの利点

Next.jsの利点を3つの点から解説します。

  • 利用者数：Next.jsは多くの開発者に支持されており、大規模なコミュニティを持っています。
    これにより、豊富な情報源、サポート、そしてサードパーティのツールやライブラリが利用可能です。
  • オールインのフレームワーク：Next.jsは、サーバーサイドレンダリング、ファイルベースのルーティング、コード分割、プリフェッチなどの機能を組み込んだオールインワンのソリューションを提供しています。
    これにより、開発者は個別の機能を統合する手間を省き、効率的に開発を進めることができます。
  • Vercelのエコシステム：Next.jsはVercelによって開発されており、Vercelのプラットフォームと密接に統合されています。これにより、デプロイメントや運用が簡単になり、スケーラビリティや性能の最適化が容易になります。
    また、Vercelの提供する様々なツールやサービスとの連携も容易です。

これらの利点により、Next.jsは効率的で柔軟性の高い開発体験を提供し、多くの開発者に選ばれているフレームワークとなっています。

GitHubのアカウント作成

それでは、GitHubのアカウントを作成していきましょう。

  • GitHubの公式ウェブサイト（https://github.com）にアクセスします。
  • トップページの「Sign up」ボタンをクリックします。
  • 必要な情報を入力します。
    • メールアドレス
    • パスワード
    • ユーザーネーム
  • メール通知の受信有無を選択します。
  • 人間であることを確認するためのCAPTCHAテストを完了します。
  • 「Create account」ボタンをクリックします。
  • 登録したメールアドレスに確認メールが送信されるので、メール内のリンクをクリックしてアカウントを有効化します。
  • アカウントの設定や個人情報の追加を行います。（任意）

これでGitHubのアカウント作成は完了です。
アカウントを作成後、リポジトリの作成やプロジェクトへの参加が可能になります。

StackBlitzでNext.jsのプロジェクトを作成する

次は、StackBlitzでNext.jsのプロジェクトを作成し、GitHubアカウントでログインする手順を説明します。

  • StackBlitzのウェブサイト（https://stackblitz.com)
  • 右上の「Sign In」ボタンをクリックします。
  • サインインオプションから「GitHub」を選択します。
  • GitHubの認証ページにリダイレクトされるので、GitHubのユーザー名とパスワードを入力してログインします。
  • StackBlitzのダッシュボードに戻ったら、「New Project」ボタンをクリックします。
  • プロジェクトタイプの一覧から「Next.js」を選択します。
  • 基本的なNext.jsプロジェクトのテンプレートが自動的に作成されます。
  • これで、StackBlitz上でNext.jsプロジェクトの開発を始めることができます。

この手順で、GitHubアカウントを使ってStackBlitzにログインし、Next.jsプロジェクトを簡単に開始することができます。

コードを書き換えてみよう

StackBlitzでNext.jsのプロジェクトを作成したので、その中のコードを少し書き換えてみましょう。

layout.tsxとpage.tsx関係

layout.tsxとpage.tsxは親子関係にあります。
layout.tsx ＝ 親コンポーネントとして、全体のレイアウトや共通のスタイルを定義します。
page.tsx ＝ 子コンポーネントとして、特定のページのコンテンツを定義します。

layout.tsxの中の

return (
<html lang=”en”>
<body className={inter.className}>{children}</body>

{children}がpage.tsxの内容を表示するようになっています。
layout.tsxはpage.tsxを包み込む役割を果たし、共通のスタイルや構造を提供します。

page.tsx

まず、app ⇨ page.tsxを開きます。
mainタグ以外のコードをすべて削除します。
次に、mainタグの下に「Hello World」と入力します。

export default function Home ( ) {
return(
<main className=”flex min – h -screen flex – col  items – center justify – between p – 24”>
Hello World
</main>
);
}

すると、画面右側に「Hello World」と表示されます。
このように、リアルタイムで画面を確認しながら作業をすることができます。

layout.tsx

次に、app⇨layout.tsxの一番下にある

return (
<html lang=”en”><body className={inter.className}>{children}</body>
{children}の前に<div>header</div>を追加します。

<body className={inter.className}>
<div>header</div>
{children}
</body>

{children}の上に<div>header</div>を追記すると、プレビュー画面の左上に「header」が表示されます。

<body className={inter.className}>
<div>header</div>
{children}
<div>footer</div>
</body>

{children}の下に<div>footer</div>を追記すると、プレビュー画面の左下に「footer」が表示されます。

いかがでしたか。初回は、Next.jsについてやGitHubアカウントの作成・StackBlitzでNext.jsのプロジェクトを作成し、GitHubアカウントでログインする手順を説明をしました。
StackBlitzにログインすることで、自分のプロジェクトをGitHubに保存したり、他のユーザーと共有したりすることができるようになりますよ。



​

Next.js
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次