検索結果0件」

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

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

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

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


    Vue.jsとは?

    Vue.jsとは、「JavaScriptを使って、Webでアプリを作ることができる便利な道具集」のことです。

    この様なアプリを作るために作られた道具集を、専門用語で「フレームワーク」といいます。
    つまりVue.jsとは、「Webアプリを作ることができる、JavaScriptフレームワーク」の一つです。

    Vue.jsの特徴

    • 学習コストが低い
      • HTMLを書くのと同じ様な感覚でコードが書けます。
    • 日本語のドキュメントがある
      • 公式に日本語のドキュメントがあるので、日本人でも開発がしやすい。
    • 実績も豊富
      • Githubのスター数も多く、LINEやnoteなどの有名なサービスにも使われている。

    環境構築をする

    以下の方法で、ご使用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

    プロジェクトを作成する

    以下のコマンドを入力して、vue-cliをインストールしてください。

    $ npm install -g @vue/cli

    vue-cliのインストールが完了したら、以下のコマンドを入力して、Vue.jsのプロジェクトを作成します。

    $ vue create vue-project

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

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

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

    $ cd vue-project

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

    $ npm run serve


    改造してみる

    ローカルサーバーを立ち上げられたら、実際に改造してみましょう😊
    フォルダの中のsrcに移動してください。
    この中に、Index.vueというファイルを作ってみてください😀

    新しいファイルを作ってみる

    先ほど作った、Index.vueに、以下のコードを追加してみましょう😊

    <template>
      <div>
        Hello World!
      </div>
    </template>

    作ったファイルを読み込んでみる

    src/main.jsのコードを、以下の様に編集してください。

    import Vue from 'vue'
    import App from './Index.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

    画面に以下の様に「Hello World!」の画面が表示されていたら、ファイルがちゃんと読み込まれています😊

    CSSを使ってみる

    先ほど作ったIndex.vueのコードを、以下の様に編集してください。

    <template>
      <div>
        <h1>Hello World!</h1>
      </div>
    </template>
    
    <style>
    h1 {
      color: #ff0000;
    }
    </style>

    画面に以下の様に、Hello World!の文字が赤くなっていたら、無事にCSSが適用されています😊


    Componentを作ってみる

    Vueには部品(Component)を作る機能があります。
    これを使う事で、

    • Header
    • Footer
    • Sidebar
    • Navigation

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

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

    などのメリットがあります。

    Headerを作ってみる

    早速、HeaderをComponentで作ってみましょう😊
    src/componentsフォルダに、Header.vueファイルを作成します。

    次に作ったHeader.vueファイルに、以下のコードを追加します。

    <template>
      <header>
        Headerです
      </header>
    </template>
    
    <script>
    export default {
      name: 'Header',
    }
    </script>

    Headerを呼び出してみる

    Index.vueに以下のコードを追加して、作ったHeaderを呼び出してみましょう。

    <template>
      <div>
        <Header />
        <h1>Hello World!</h1>
      </div>
    </template>
    
    <script>
    import Header from './components/Header.vue'
    
    export default {
      components: {
        Header
      }
    }
    </script>
    
    <style>
    h1 {
      color: #ff0000;
    }
    </style>

    以下の画像の様に、Headerが呼び出されていたら成功です😊

    HeaderのCSSを変えてみる

    VueはComponent毎に、CSSやJavaScriptの処理を書き込めます。
    以下のコードを書き加えて、Headerのデザインを変えてみましょう。

    <template>
      <header>
        Headerです
      </header>
    </template>
    
    <script>
    export default {
      name: 'Header',
    }
    </script>
    
    <style scoped>
    header {
      background: #ffffff;
      border-bottom: 1px solid #e7e8ea;
      padding: 24px;
    }
    </style>

    以下の様に画面のデザインが変わっていたら、成功しています😊


    データバインディングを使ってみる

    Vueには「データバインディング」という機能があります。
    簡単に説明すると、「外側の動的な処理データを、画面に表示することができる機能」です。

    今回はデータバインディングを体験するために、かんたんなテキストを表示させてみましょう😊
    Index.vueのHello World!を、以下の様にコードを修正して、データバインディングで呼び出してみます。

    <template>
      <div>
        <Header />
          <h1>{{ hello }}</h1>
      </div>
    </template>
    
    <script>
    import Header from './components/Header.vue'
    
    export default {
      data () {
        return {
          hello: 'Hello World!'
        }
      },
      components: {
        Header
      }
    }
    </script>
    
    <style>
    h1 {
      color: #ff0000;
    }
    </style>

    かんたんな計算式を表示させてみる

    以下の様に、returnの部分のソースコードを書き加えて、かんたんな計算式の結果を画面に表示させてみましょう。

    <template>
      <div>
        <Header />
          <h1>{{ hello }}</h1>
      </div>
    </template>
    
    <script>
    import Header from './components/Header.vue'
    
    export default {
      data () {
        return {
          hello: 'Hello World!' + 'Vue.JS'
        }
      },
      components: {
        Header
      }
    }
    </script>
    
    <style>
    h1 {
      color: #ff0000;
    }
    </style>

    以下の画面の様に、Hello World!に、Vue.JSの文字がくっついていたら成功です😊


    ページを作ってみる

    次は他のページを作ってみましょう😊
    src/componentsに、新しくPagesというフォルダを作成します。
    そのフォルダの中に、

    • Index.vue
    • About.vue

    というファイルを作ります。

    Index.vue

    以下の様にコードを書いてください。

    <template>
      <div>
        <h1>Indexページです</h1>
      </div>
    </template>

    About.vue

    以下の様にコードを書いてください。

    <template>
      <div>
        <h1>Aboutページです</h1>
      </div>
    </template>

    ルーティングを設定してみる

    ルーティングとは、「どのページがどのURLに対応するのか、指定する事」をいいます。
    Webアプリは普通のHTMLと違い、ページを追加してURLを入力しただけでは、ページ遷移することはできません。
    必ずルーティングを設定して、ページのURLを指定する必要があります。

    ここから先は、少し難しいかもしれませんが、頑張ってついてきてください😅

    vue-routerを使う

    ターミナルで以下のコードを入力して、vue-routerをインストールします。

    $ npm install vue-router

    インストールしたら、srcフォルダにrouter.jsというファイルを追加して、以下のコードを入力します。

    import Vue from "vue";
    import Router from "vue-router";
    
    import Index from "./components/Pages/Index";
    import About from "./components/Pages/About";
    
    Vue.use(Router);
    
    export default new Router({
      mode: "history",
      routes: [
        {
          path: "/index",
          component: Index
        },
        {
          path: "/about",
          component: About
        }
      ]
    });

    vue-routerを読み込む

    src/main.jsを以下のコードの様に編集して、vue-routerを読み込みます。

    import Vue from 'vue'
    import App from './Index.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app')

    index.vueの設定を変更する

    src/index.vueに以下のコードを追加して、画面遷移が行える様にします。

    <template>
      <div>
        <Header />
        <h1>{{ hello }}</h1>
        <router-link to="/index">Index</router-link>
        <router-link to="/about">About</router-link>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    import Header from './components/Header.vue'
    
    export default {
      data () {
        return {
          hello: 'Hello World!' + 'Vue.JS'
        }
      },
      components: {
        Header
      }
    }
    </script>
    
    <style>
    h1 {
      color: #ff0000;
    }
    </style>

    リンクをクリックすると、<router-view></router-view>の中で、遷移した画面が読み込まれます。
    URLもきちんと変更されます😊
    リンクをクリックして、以下の画面が出たら成功しています。


    最後に

    今回は軽くVue.jsについて触れて、かんたんなプロジェクトを作ってみました。
    Vue.jsは「Single Page Application(SPA)」と呼ばれる技術を使っています。
    SPAには、

    • 非同期通信による滑らかな画面遷移
    • ネイティブアプリと遜色がないUX
    • APIによる高い拡張性

    などの特徴があります。
    これを使えば、WordPressなどではできなかった、いろいろなことができる様になります。
    かんたんに導入することができるので、最初に学ぶJavaScriptフレームワークに良いと思います😊

    フロントエンドエンジニアが凄い足りなくて、フリーランスのフロントエンドエンジニアの単価は、めちゃくちゃ高いです❗️
    例を挙げると、レバテックフリーランスで検索すると、Vue.jsを使うエンジニアの単価は大体「月60万〜85万」ぐらいみたいですね😊

    これだけもらえるなんて、いいな〜
    僕もフロントエンドエンジニアに転職しようかなぁ😅

    学ぶものも多いですが、FrontHacksさんが、そこらへんを漏れなく全て教えてくれている、動画教材をご用意されています😊
    特徴として、

    • 「MENTA」という教わりたい人と教える人のマッチングサービスで、1位のエンジニアが教えてくれる
    • 主要なフロントエンドの技術である、「React」「Vue」2つの動画講座がある
    • 質問し放題
    • 352本の動画本数
    • ソースコードのバージョン管理である「Git」も教えてくれる
      • 現場に入るには必須の技術です
    • 他の教材ではなかなか教えてくれない、「テストコードの書き方」も教えてくれる
      • 現場に入るには必須の技術です

    などなど、結構数え切れないぐらいの特徴がありますね〜
    お値段は「15万円」と少々高額ですが、動画の本数と、実践に近いカリキュラム、実績がある講師の方が教えてくれるのだから、とても安いものだと思います😊
    月85万円の単価が取れるエンジニアになれば、余裕で回収できますからね〜

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

    ではでは、またね〜🤗

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

    広告