はじめに
お久しぶりです。リッキーです。
突然ですが、今日は私の仕事でも触れているプログラムについて、基礎的な部分や簡単な始め方を紹介してみたいと思います。
この記事では、「Next.js」というものについて紹介していきます。
よろしかったら読んでいってください。
Next.jsの概要
まずNext.jsというのは、Webアプリケーションを作成するためのフレームワークと呼ばれるものです。ここで、Webアプリケーション？フレームワーク？と感じた方もおられると思います。
Webアプリケーションはアプリの種類なのですが、ここでは詳しく理解しなくても大丈夫です。
フレームワークというのは、簡単に言うとカードゲームの構築済みデッキで、これがあればWebアプリケーションを手軽に作れるようになる(前述の例でいうと、カードバトルが手軽に始められる)というものです。
とりあえず動かしてみる
細かい話は置いておいて、まずはNext.jsで作られたアプリをWindowsマシン上で実際に動かしてみます。以下の手順にしたがってやってみてください。
1.Node.jsのインストール
初めに、以下リンクからNode.jsのWindowsインストーラー(.msi)をダウンロードしてください。Node.jsはプログラムの実行環境と呼ばれるもので、作ったプログラムを動かすときに必要になります。
https://nodejs.org/ja/download
ダウンロードしたファイルを実行して、画面の指示に従ってNode.jsのインストールを進めてください。ライセンス同意のチェック以外は、全てそのままでいいと思います。
2.Visual Studio Codeのインストール
次に、以下リンクからVisual Studio CodeのWindowsインストーラー(.exe)をダウンロードしてください。
https://code.visualstudio.com/download
ダウンロードしたファイルを実行して、画面の指示に従ってインストールを進めてください。
Visual Studio Codeはコードエディタの一つで、スマホやPCに標準で入っているメモ帳アプリと基本的な機能は同じです。
ただしVisual Studio Codeはプログラムを書きやすくする機能が豊富なので、プログラミングをしていこうと思っている方におすすめです。
3.Next.jsのインストールとプロジェクト作成
先ほどインストールしたVisual Studio Codeを起動してみてください。そして左上のメニューから、Terminal->New Terminalの順に選択してください。
すると、下半分に新たな画面が表示されると思います。これはターミナルといって、マシンにしてほしい操作を文字で伝えるものです。
例えば皆さんがWordを使うときにアイコンをマウスでクリックして起動させると思いますが、それを全て文字で行うと考えてください。プログラミングをする上ではこのターミナルはよく使います。
少し話がそれましたが、このターミナルを利用してNext.jsのインストールとプロジェクト(1つのアプリに対するプログラムのまとまり)の作成をしていきます。ターミナルに以下のコマンドを入力してエンターキーを押してください。
「TestApp」の部分は、プロジェクト名になります。好きな文字列を入力してください。
npx create-next-app TestApp
入力後、ターミナル上でWould like to～と聞かれると思いますが、全てYesを選んでください。自動でNext.jsのインストールとプロジェクト作成が行われます。
4.サンプルプロジェクトの実行
お待たせしました！先ほど作成されたプロジェクトはそのままでも動くようになっているので、動かしてみましょう。
まずはターミナルに以下のコマンドを順番に入力してそれぞれエンターキーを押してください。「TestApp」の部分は、先ほど入力したプロジェクト名にしてください。
cd TestApp
npm run dev
アプリの起動には少し時間がかかるので、30秒ぐらい待ってから
http://localhost:3000
を開いてください。
画面中央にNext.jsと表示されれば成功です。お疲れさまでした！
おまけ.画面のプログラム部分
以上でNext.jsをとりあえず動かしてみるという目的は達成しましたが、表示された画面がどのファイルに書かれているか触れておきたいと思います。エクスプローラーを開いて、プロジェクトのフォルダから、src->appの中にあるpage.tsxを開いてください。この中に画面を作るために必要な要素がたくさん詰まっています。次回は、このファイルの内容を説明しながら、オリジナルの画面を作ってみたいと思います。
export default function Home() {
return (
<div className=”flex gap-4 items-center flex-col sm:flex-row”>
(省略)
</div>
);
}
さいごに
Next.jsの紹介、その始め方について説明していきました。
コメントいただけると励みになります。
ご覧いただきありがとうございました。
コメント