たまには技術の話でも【Next.jsを触ってみた】
こんにちは、白井です。
今年の冬は暖かいなー、なんて考えてたら急に寒くなって
ようやく冬らしくなりましたね。
今年はまだあまり外に出ていないので、どこか雪景色を見に行っても楽しいかもしれません。
さて今回は、タイトルの通りですが
プロダクトの話だったり、チームビルドだったりという話は
割と他のメンバーも書いてたりするので、今回はエンジニアとしての初心に返って、、、
最近触る機会のあった Next.jsが面白かったので、定番のHallo world出来る所まで
ちょっとした紹介的な感じで書きたいと思います
■Next.jsとは
Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できます。本質的に汎用性があり、さまざまなターゲット（サーバー、サーバーレス、または静的）をサポートし、サーバーサイドのレンダリングは切り替えることができます。強力なモジュールエコシステムにより拡張可能で、REST や GraphQL エンドポイント、お気に入りの CMS や CSS フレームワークなどさまざまなものに簡単に接続できます。PWA および AMP のサポートは、Nuxt プロジェクトからは隔離されたモジュールにすぎません。NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。
引用：https://ja.nuxtjs.org/
いわゆるモダンWebと呼ばれるアプリケーションを開発する為のフレームワークです。
個人的なイメージとしては、単体だとごちゃつきがちな Vue.jsを良い感じにまとめることが出来る素敵な感じの何か、、というざっくりな感じです。
で、何が面白いのかというと、Vue.js(とその公式ライブラリ群)、webpackやBabelなどの強力な開発ツールを内包しつつも
それ自体はとてもシンプルなフレームワークになっている所、ゼロベースで始めると周辺技術から勉強しないとダメなので
人によっては学習コストかなり高めなんですが、構造自体はすごくわかりやすいです。
それに柔軟さが凄くて、サーバサイドでの動作から静的ページ生成してデプロイまで出来るという、、、
触る前は、動作させる為のサーバがなぁ、、、なんて考えてましたが、開発環境さえ構築してしまえば
かなり色んな案件にも柔軟に対応出来るんじゃないかなぁと
■とりあえず使ってみる【環境構築】
という訳で早速ですが、使ってみましょう！
公式によると npxというツールが用意されているようなのですが
今回は npmインストールして使いました(Node.js 入れれば使えるので)
※npm：Node.js用のライブラリやパッケージを管理するパッケージマネージャー
○構築環境
・MacOS
まず Node.jsが入っていないのでそこからスタート、nvmなる Node.jsのバージョン管理ツールがあるらしいのでインストール
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.2/install.sh | bashチェック
$ command -v nvm続いて Node.jsをインストール
$ nvm install --lts、、、ちなみにここで最新版を入れたんですが、Next.js使ってて、後で
モジュール追加した際に node-gypと grpcという2つのライブラリがうまくインストールできずにかなりハマったので
インストールするNode.jsのバージョンは気をつけた方が良いかもです
参考(Qiita)↓
バージョンチェックしてコマンドが通るか確認
$ npm -v■Next.jsをインストール
環境構築まで完了したら、あとはサクッといきましょう(ここからは公式チュートリアル通りです)
適当なところにプロジェクト用のディレクトリを作って
$ npm init -y$ npm install --save react react-dom next$ mkdir pagesインストールディレクトリに package.jsonファイルが生成されているので
適当なエディタで開いて下記を追記
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}保存しましたか？では早速起動してみましょう
■Next.jsでアプリを起動
起動は下記コマンド(開発モード)
$ npm run dev起動がうまく行くと http://localhost:3000にページが展開されます
まだ何もコンテンツを作っていないのでNext.jsのデフォルト404ページが表示されると思います。
■Hello world
最初のページを追加していきます
最初に作った pagesディレクトリ配下へ移動してファイルを作ります
$ cd pages$ touch index.js/作成したファイルをエディタで開いて下記を追記
const Index = () => (
<div>
<p>Hello Next.js</p>
</div>
)
export default Index
先の http://localhost:3000に再度アクセスしてみましょう
無事に表示されましたか？
■つづき
ひとまず Hello worldまでを紹介しましたが
公式のチュートリアルはまだ続きがあります。
・ページ間の移動〜ルーティング
・コンポーネントの使い方
・動的ページの出力
などなど、、、
個人的には
nuxt generateコマンドを使った静的ページ出力が楽しそうです。公式チュートリアル
翻訳(Qiita)
■まとめ
関連する技術が多いと冒頭で紹介しましたが、動かすだけなら比較的簡単なので
是非みなさんもここから色々作ってみましょう。
、、、で書き終わって読み返したら、ほぼ公式チュートリアルでした
次回もし続きを書くなら、色々触った結果を書きたいですね
半年後、、、くらい？なのでまた別のモノを触ってる気がしますが（笑
今回はこの辺で、ではでは
facebookでも情報を発信しています
facebookをフォロー
