Nuxt3を使えばWebサイトが作れるようになる！

どういうこと？

Webサイトを作成する、となると真っ先の思い浮かぶのはHTML,CSS,jsが一番に思い浮かぶと思います。「まず、!DOCTYPE htmlして、headとbodyの中身作ったらcssファイルつくって更新して、その後htmlファイルをリロードして反映されてるか確認し,,,,」と一から作るのは骨が折れます。 ですが、Nuxt3を使うと ・1ページ - 1ファイルでできる ・調整されたいい感じcssを使えるから、デザインで詰むことがなくなる ・毎回毎回htmlをリロードしなくて済む ...etc とかなり楽にWebサイト制作ができます。さらにjs部分も深く触ることができるため、プログラミングの勉強にもピッタリです！

実際にNuxt3でサイトを作ってみよう！

事前準備

まずは、Nuxt3を使う準備をしましょう。必要なものをインストールしたり、セットアップしたりする必要があります。(※これを「開発環境構築」と言ったりします。)必要なものはこれ、 1,node.js ←一旦そういうものが必要なんだな。程度に覚えておけば大丈夫です。 　(とりあえず最新の"安定版"を入れておくといいです。) 2,コードエディター ←プログラミングのコードが書きやすくなるやつです。 　とりあえずは Visual Studio Codeを入れておきましょう。 　(僕もこれを使っています。) ひとまずはこの２つさえあれば大丈夫です。

準備できたかの確認

上の二つだできたか確認してみましょう。 1,node.jsの確認 　cmd(Windowsの方)かターミナル(Macの方)を開き、以下のコマンドを実行してみましょう。

node --version

v18.17.1 のようにバージョン情報が出てくれば成功です。 2,のエディターに関しては、とりあえずそのエディターが起動できたらOKです。

Nuxt3をインストールしよう

準備ができたのでNuxt3をインストールし、実際にWebサイトを作っていきましょう！ ではまず、ソース(プログラミングしたもの)をどこにおくか決めましょう。 ※自分はDesktopに"Nuxt_products"みたいなフォルダを作り、その中におきました。 次に、cmdかターミナルを起動し、以下のコマンドを実行しましょう。 ・●●●：ソースをおく場所のパス　 　僕の場合だとC:¥users¥aaaaaa¥Desktop¥Nuxt_products ・△△△：プロジェクトの名前 　僕の場合、初めてのNuxt3サイトの意味を込めて init-nuxt3-site にしました。

cd ●●● npx nuxi init △△△

実行すると ~~~~(Y/n) みたいなものが出るかもしれませんが、それは「使用するNuxtのバージョンは~~~ですがよろしいですか？」みたいな質問です。なのでとりあえず(今回は特にバージョン指定しなくていいので)yを押してください。その後の質問もとりあえずyで進めてください。(質問内容もGoogle翻訳に書ければ理解できるものなので気になった方は見てみてください。) 完了すると先ほど決めたソースを置く場所の中にフォルダができています。(僕の場合はC:¥users¥aaaaaa¥Desktop¥Nuxt_products/△△△)これでもうほぼサイトの基礎はできている状態です！ では、そのできたフォルダまで移動し、必要なパッケージをインストールしてから実際にサイトを立ち上げてみましょう！ ※今回は一般的なパッケージ管理の npm を使用します。

cd △△△ npm i npm run dev

立ち上がったサイトを見てみよう！

上記のコードを実行したあと、http://localhost:3000/ を開いてみましょう。おそらく黒い背景で「Nuxt3」みたいな画面になります。これはデフォルトでできる画面なので問題ないです。 さぁ！これでサイトの"もと"ができましたね。あとはここに項目やデザインなどを肉付けするだけですね！ 次の記事では実際にここに色々と追加してみましょう！