課外活動８

今日から数日かけて Nuxt.js でダミー企業のウェブサイトを作ります．

Nuxt.js とは？

Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。 はじめに - Nuxt.js

Nuxt.js は，Vue アプリケーションを作成するためのフレームワークということですが，Vueアプリケーションとはどのようなものなのでしょうか？

Vue.js とは？

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 はじめに — Vue.js

Vueは，「ユーザーインターフェイスを構築するためのプログレッシブフレームワーク」です．

user interface

the way a computer gives information to a user or receives instructions from a user

ユーザがコンピュータにデータを入力したり，情報を引き出したりする操作方法の総称

progressive

1. in favour of new ideas, modern methods and change
2. happening or developing steadily

日本語に訳すとするならば，「進歩，前進」という意味です．

まず，アプリケーションを作成したとします．その後，環境の変化などにより機能を拡張したりする必要が出てきたとします． このとき，アプリケーションはprogressiveに変化していきます．必要となるフレームワークもprogressiveに変化することで無駄の無いものとなります．

Vueの作者であるEvan You氏のスライド https://slides.com/evanyou/progressive-javascript#/20

Nuxt.js でプロジェクトの作成

npx create-nuxt-app <プロジェクト名>でnuxt.jsの環境が整います．

Powershell で以下のコマンドを打ってください．

npx create-nuxt-app szm-corp

? Project name szm-corp
? Project description (My peachy Nuxt.js project) szm-corp website
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Universal
? Author name iPolyomino
? Choose a package manager npm

create-nuxt-app は nuxt.js のプロジェクトを簡単に作成することができるコマンドです． node.js のプロジェクトは，必要となるパッケージの管理で悩むことがありますが，このコマンドを使うことによって簡単に始めることができます．

Choose features to install で，Linter / Formatter, Prettier を選択しています．（選択は矢印キーとスペースで行うことができます．） Linter があることによってソースコードのセミコロンの位置などが統一され，読みやすいものとなります．

自力で修正するのは非常に疲れるので，エディッタに自動整形を行うプラグインを入れることをおすすめします．
Extensions で prettier を導入します．
Settings で format on save を選択します．
この設定をすることによって，保存したタイミングで自動的に整形されます．

UI framework は，vuetify を用いています．いろいろなフレームワークがありますが，私の好みでvuetifyを選択しました．今後の記事もvuetifyを利用したもので書いていきます．

vuetifyjs.com

# ローカル環境でNuxt.jsを動かす

プロジェクトのフォルダに入り， npm run dev コマンドを打ちます． Vue アプリケーションを作成するフレームワーク

cd szm-corp
npm run dev

開発用サーバが立ち上がり，http://localhost:3000/ へアクセスすることによって作成したウェブサイトを確認することができます．

GitHubにプロジェクトをpushする．

コードをGitHubに上げます．GitHubで管理することによって，あとで紹介するNetlifyとの連携を行うことができます．

リポジトリの作成

先日と同じようにGitHubからリポジトリを作成します．

Initialize READMEのチェックを外す，Add .gitignore / Add LICENSE をNone にしておいてください．

create-nuxt-appで作成したディレクトリは既にgitが入っているためです．

リポジトリは自分のものを指定してください．

git add .
git commit -m "first commit"
git remote add origin git@github.com:iPolyomino/szm-corp.git
git push -u origin master

これで，GitHubにpush されました．

Netlify にデプロイする．

ビルドやデプロイなど，色々やってくれるウェブサービスです．今回作成するウェブサイトは静的サイトなので，このサービスを利用します．

www.netlify.com

GitHubアカウントでログイン（連携認証）してください．

ログイン後，新しくサイトを作成します．

ウィンドウが出てくるので，先程作成したリポジトリへのアクセスを許可します．

デプロイするブランチ，ビルドするコマンドと公開するフォルダの設定をします．

branch to deploy にはmaster，Build command は nuxt generate ，Public directory は dist と設定してください．

Deploy Site ボタンを押すと，ビルドが走ります．しばらく待つと，サイトが生成されURLが表示されます．

このURLにアクセスすることによってウェブサイトを確認することができます．

今後masterブランチに変更が加わるごとに自動でビルドが走りデプロイされるので，ウェブサイトの管理が非常に簡単です．

まとめ

Nuxt.js はVue アプリケーションを作成するフレームワーク

GitHub + Netlify 便利