検索結果0件」

    【月単価85万+αのエンジニアへの道】Nuxt.jsを使って、簡単にプロジェクトを作る

    【月単価85万+αのエンジニアへの道】Nuxt.jsを使って、簡単にプロジェクトを作る

    こんにちは、シンヤです!

    今回は、【月単価85万+αのエンジニアへの道】Nuxt.jsを使って、簡単にプロジェクトを作るというテーマで、お話しいたします。
    なお、以下に解説するやり方はMacでのやり方となります。


    Nuxt.jsとは

    Vue.jsとは、「Vue.jsを使って、アプリケーションをより便利に作れる様にした、フレームワーク」のことです。
    Vue.jsについては、以前書きましたこちらの記事をご参照ください。

    Nuxt.jsの特徴

    • 便利な機能が最初からついている
      • Vue.jsを使う場合、metaタグを変えたり、SEO対策が必要ですが、それらを標準で備えている。
    • ルーティングを自動で行ってくれる
      • 個別で指定したルーティングを、Nuxt.jsは自動的に行ってくれます。
    • カスタマイズ性能は低い
      • 予め必要な機能やルール付がされているのは、すぐアプリを作れる反面、ルール外の事は行いにくくなっています。

    上記を加味すると、必要な機能は予めインストールされているので、すぐアプリ作りができます。
    反面フレームワーク外の事をするなどの、柔軟性の高い使い方ができないのが、デメリットになってきます😅


    環境構築をする

    以下の方法で、ご使用中のMacに環境を構築していきます。
    既に環境構築済みの方は、こちらの項目は飛ばして読んでください。
    少し難しいかもしれませんが、頑張ってついてきてください😅

    ターミナルを起動する

    まずは、ターミナルの起動を行います。
    Mac下部の「Launchpad」で、「terminal」と入力して出てきたアイコンを、クリックしてください。

    Homebrewのインストール

    以下のコマンドを入力して、Homebrewをインストールします。

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    インストール後、以下のコマンドを入力して、Homebrewのバージョンが表示されたら、成功しています😊

    $ brew -v
    #> Homebrew 1.2.3
    #> Homebrew/homebrew-core (git revision 7212; last commit 2017-07-02)

    Nodebrewのインストール

    以下のコマンドを入力して、Nodebrewをインストールします。

    $ brew install nodebrew

    インストール後、以下のコマンドを入力して、Nodebrewのバージョンが表示されたら、成功しています😊

    $ nodebrew -v
    #> nodebrew 1.0.0

    Nodebrewを使える様にする

    以下のコマンドをターミナル上で入力して、環境変数を追加します。

    $ vi ~/.bash_profile

    ターミナルの画面が変わったら、

    1. キーボードの「I」を押す
    2. 「export PATH=$HOME/.nodebrew/current/bin:$PATH」のコードを追加する。

    以下の様な画像になっていればOKです。

    コードを追加したら、

    1. 「esc」キーを押す
    2. 「:wq」と入力する
    3. 「Enter」を押す

    以上で、コードの保存が終わり、エディターが閉じます😊

    Nodebrewのセットアップ

    以下のコマンドを入力して、先ほど作ったbash_profileを反映させます。

    $ source ~/.bash_profile

    次に以下のコマンドを入力して、Nodebrewをセットアップします。

    $ nodebrew setup

    Node.jsのインストール

    以下のコマンドを入力して、Node.jsをインストールします。

    $ nodebrew install-binary v12.13.1

    次に以下のコマンドを入力して、インストールしたNode.jsを使える様にします。

    $ nodebrew use v12.13.1

    インストール後、以下のコマンドを入力して、Node.jsのバージョンが表示されたら、成功しています😊

    $ node -v
    #> v12.13.1

    プロジェクトを作成する

    以下のコマンドを入力して、Nuxt.jsのプロジェクトを作成します。

    $ npx create-nuxt-app nuxt-project

    nuxt-projectの部分は、好きな名前に変更してください。
    質問形式で色々と聞かれますが、特にカスタマイズする必要はないので、全てEnterを押していただいて構いません。

    ローカルサーバーを立ち上げる

    ターミナルから以下のコマンドを入力して、作成したフォルダに移動します。

    $ cd nuxt-project

    移動後、以下のコマンドをターミナルで入力してください。
    入力後http://localhost:3000にアクセスして、下記の画面が表示されたら、正常にローカルサーバーが立ち上がっています😊

    $ npm run dev


    ディレクトリ構造を理解する

    Nuxt.jsはデフォルトのVueとは違い、どこにどのファイルを入れるという様な、ディレクトリ構造が決まっています。
    規則外の場所にファイルを追加しても動きませんので、まずディレクトリ構造を理解しましょう。

    • assets
      • CSSや画像やフォントなどは、ここに入れます。
    • components
      • Component(部品)はここに入れます。
    • layout
      • 画面全体の基本的なデザインをここに入れます。
        Nuxt.jsはまずこのlayoutのファイルを読み込み、その後画面の差分を切り替えていきます。
    • middleware
      • 画面を読み込む前に処理したい内容を、ここに入れます。
    • pages
      • ここに切り替えていきたい画面を入れていきます。
        ルーティングは自動的に行われます。
    • plugins
      • インスタンス化する前に実行したい、JavaScript プラグインを入れます。
        わかりやすく言うと、読み込むJSファイルをここに入れていきます。
    • static
      • favicon, rotots.txt, sitemap.xml など、ほぼ変更されない静的ファイルを入れていきます
    • store
      • 状態を格納してくれる機能である「Vuexストア」のファイルを入れます。
        今回は覚えなくても問題ないです😅
    • nuxt.config.js
      • Nuxt.jsの設定ファイルです。
        設定を変更したい場合は、このファイルを編集します。

    改造してみる

    それでは、ディレクトリ構造が理解できたところで、実際にNuxt.jsのファイルを改造してみましょう😀
    layout/default.vueファイルを開いて、以下の様にソースコードを編集してください、

    <template>
      <main>
        <Nuxt />
      </main>
    </template>
    
    <style>
      body {
        background: #f8f8f9;
      }
      main {
        text-align: center;
      }
    </style>

    これでmainタグで、全ての要素が囲まれました。
    ついでに余計なCSSは、全て削除しちゃいましょう😊

    <Nuxt />の部分が、画面を切り替えていく場所になります。
    こうすれば、常にmainタグで囲まれた中身を変更していくことになります😊

    index.vueを編集してみる

    基本的なレイアウトの変更ができたので、次に読み込まれているindex.vueを編集していきます。
    pages/index.vueファイルを開いて、以下の様にソースコードを編集してください。

    <template>
      <div>
        <h1>Indexページです</h1>
      </div>
    </template>
    
    <style>
      h1 {
        color: red;
      }
    </style>

    以下の様な画面になっていれば、成功しています😊


    layoutを変更してみる

    前述のディレクトリ説明にも書きましたが、
    「layout」ディレクトリを変更すると、画面を切り替えても変わらない、共通のデザインを作ることができます。
    早速、共通のレイアウトを作ってみましょう😊

    layout/default.vueを、下記のように編集してください。

    <template>
      <main>
        <p class="layout-paragraph">共通のLayoutです。この部分はページを切り替えてもデザインが変わりません。</p>
        <Nuxt />
      </main>
    </template>
    
    <style>
      body {
        background: #f8f8f9;
      }
      main {
        text-align: center;
      }
      .layout-paragraph {
        background: lightskyblue;
      }
    </style>

    以下の様な画面になっていれば、成功しています😊


    Componentを作ってみる

    Nuxt.jsだけじゃなくアプリの特典の一つなのですが、
    部品(Component)を作って、画面毎にデザインを切り貼りして使い回すことができます。
    これを使う事で、

    • Header
    • Footer
    • Sidebar
    • Navigation

    などなど、部品を切り分けて、画面毎に呼び出して使うことができます。
    これにより、

    • 部品の管理がやりやすくなり
    • 作るファイルが少なくなる
    • それぞれの画面で部品を使いまわせる
    • 複数人でのファイル管理がやりやすくなる

    などのメリットがあります。
    Nuxt.jsの場合このComponentの格納の方法が決まっています。

    「components」に、新しくファイルを追加する

    componentsディレクトリに、新しくHeader.vueを追加してください。
    その後、以下のコードを追加してください。

    <template>
      <header>
        これはヘッダーです
      </header>
    </template>
    
    <style>
      header {
        background: lightyellow;
      }
    </style>

    作成いたしましたら、layout/default.vueに以下のコードを追加してください。

    <template>
      <main>
        <Header />
        <p class="layout-paragraph">共通のLayoutです。この部分はページを切り替えてもデザインが変わりません。</p>
        <Nuxt />
      </main>
    </template>
    
    <style>
      body {
        background: #f8f8f9;
      }
      main {
        text-align: center;
      }
      .layout-paragraph {
        background: lightskyblue;
      }
    </style>
    
    <script>
    import Header from '../components/Header.vue'
    
    export default {
      components: {
        Header
      }
    }
    </script>

    以下の様な画面になっていれば、成功しています😊


    画像を追加してみる

    Nuxt.jsは画像を格納するディレクトリも決まっています。
    具体的には、先ほども申し上げた通り「assets」ディレクトリに格納します。
    staticディレクトリでもいいのですが、assetsディレクトリに入れると勝手に圧縮してくれるので、assetsディレクトリに入れたほうがいいです😅

    では、早速画像を追加してみましょう❗️
    まずは、画像を用意します。
    用意する画像はなんでもいいです😀
    今回は以下の画像を使いました。

    まずはassetsフォルダに、作成した画像を入れてください。
    次にcomponents/Header.vueに、以下のコードを追加してください。

    <template>
      <header>
        <img src="~/assets/headerImage.jpg" alt="">
        これはヘッダーです
      </header>
    </template>
    
    <style>
      img {
        display: block;
        margin: auto;
      }
      header {
        background: lightyellow;
      }
    </style>

    headerImage.jpgはファイル名なので、ご自身で付けた名前に変更してください。

    assetsディレクトリに入れたファイルは、必ず~/assetsのように、
    先頭に「チルダ(~)」もしくは「アットマーク(@)」を付けなければいけません。
    つける記号は、どちらでもいいです😀

    以下の様な画面になっていれば、成功しています😊


    ページを追加してみる

    では次に、実際にページを追加してみましょう😊
    pagesディレクトリに、

    • about.vue
    • policy.vue

    以下の2つのファイルを追加して、それぞれ下記のように修正します。

    about.vue

    <template>
      <div>
        <h1>Aboutページです</h1>
      </div>
    </template>
    
    <style>
      h1 {
        color: skyblue;
      }
    </style>

    policy.vue

    <template>
      <div>
        <h1>Policyページです</h1>
      </div>
    </template>
    
    <style>
      h1 {
        color: yellowgreen;
      }
    </style>

    追加したらcomponents/Header.vueに、以下のコードを追加してください。

    <template>
      <header>
        <img src="~/assets/headerImage.jpg" alt="">
        これはヘッダーです
        <nav>
          <a href="/">indexページ</a>
          <a href="/about">aboutページ</a>
          <a href="/policy">policyページ</a>
        </nav>
      </header>
    </template>
    
    <style>
      img {
        display: block;
        margin: auto;
      }
      header {
        background: lightyellow;
      }
    </style>

    以下のようにリンクが追加されて、ページ遷移ができれば問題ないです。
    Nuxt.jsはルーティングも自動的に行ってくれます😊


    まずはVue.jsを学んでみるのがいい

    ここまでざっとNuxt.jsの使い方を解説しましたが、まずはNuxt.jsの技術元である「Vue.js」の使い方を学ぶのがいいと思います。
    Nuxt.jsには冒頭でも説明した通り、

    • 便利な機能が最初からついている
    • ルーティングを自動で行ってくれる

    などの機能が最初からついていますが、まずVue.jsの技術を学ばないと、恩恵がどれぐらいあるかわからないと思います。
    「ルーティング」とかまずどのような技術なのか、わからないと思うので😅
    Vue.jsの技術はそのままNuxt.jsに転用できるので、学んでおいて損はないです😊

    Vue.jsの技術は、以前僕が書いたこちらの記事で学習できます😊
    【月単価85万エンジニアへの道】vue-cliを使って、簡単にVue.jsのプロジェクトを作る

    Vue.jsが使えるエンジニアは、単価でいうと大体「月60万〜85万」ぐらいみたいですね😊

    なお、今回記事にさせていただきましたソースコードは、こちらのRepositoryに公開しております。

    ではでは、またね〜🤗

    • 【月単価85万+αのエンジニアへの道】Nuxt.jsを使って、簡単にプロジェクトを作る

    広告