What's New Qiita

20190804のvue.jsに関する記事は6件です。

  • 投稿日：2019-08-04T21:56:16+09:00

Laravel5.8でVuetifyをインストール

はじめに

Vuetifyは2019年7月に2系へとバージョンアップしました。
しかし、まだまだ情報が少ないので、とりあえず1系でVuetifyを使いたい方向けです。

環境構築

まずはLaravelのプロジェクトを作りましょう。

composer create-project "laravel/laravel=5.8.*" myapp

必要なnodeモジュールをインストール。
vuetify@1で1系の最新がインストールされます。

npm install
npm install vue-router vuetify@1 css-loader material-design-icons-iconfont

vuetify1.5.16が入りました。

package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "css-loader": "^3.1.0",
        "material-design-icons-iconfont": "^5.0.1",
        "vue-router": "^3.0.7",
        "vuetify": "^1.5.16"
    }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-04T19:53:12+09:00

Nuxt+Typescript+Auth0で認証してみる

はじめに

「Auth0を使って認証機能を実装」

Nuxt+Javasrciptで動作する記事は見かけたのですが、Nuxt+Typescriptで動作する記事が見つからなかったので、記載してみました。

下記にソースを置いています。
https://github.com/ryuzo-nakata/nuxt-auth0

0.環境

下記のバージョンで動作しています。

$ npm -version
6.9.0

$ node -v
12.1.0

$ nvm --version
0.34.0

1.Nuxtを使えるようにする

1-1.初期化

nuxt-auth0というフォルダを作成して、npm installでpackage.jsonを作成します。

$ mkdir nuxt-auth0
$ cd nuxt-auth0

$ npm init

1-2.npxインストール

npxをインストールされていない方は、下記のようにインストールしてください。

$ npm install -g npx

1-3.create-nuxt-app

Nuxt.js プロジェクトの雛形を作成します。

$ npx create-nuxt-app

自分の環境では、nuxtのバージョンが2.8.1になっていました。

2. Typescriptを使えるようにする

2-1. Typescriptをインストール

Typescriptに必要なものをインストールします。

$ npm install @nuxt/typescript ts-node vue-property-decorator

2-2. tsconfig.jsonの作成

nuxt-auth0/tsconfig.jsonを作成します。

nuxt-auth0/tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": false,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/vue-app",
      "@types/node"
    ]
  }
}

2-3. nuxt.config.tsへ変更

nuxt.config.jsからnuxt.config.tsへ変更します。

中身は下記のように変更します。

nuxt-auth0/nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // Type or Press `Ctrl + Space` for autocompletion
}

export default config

これでTypescriptが使えるようになりました。

3. Auth0を使えるようにする

3-1 Auth0のDomainとClient ID

Auth0（https://auth0.com/jp/）
サインアップし、Applicationsを選択すると、下記の図のように表示されます。

auth0.png

DomainとClient IDの値を、のちほど使います。

3-2 Auth0のCallback

次に、Callbackを下記のように設定します。

callback.png

3-3. Auth0をインストール。

nuxtへauthに必要なものをインストールします。

$ npm install @nuxtjs/axios @nuxtjs/auth

3-3. nuxt.config.tsにAuthの設定を追加する

nuxt-auth0/nuxt.config.tsに下記の設定を追加します。
auth0のdomainとclient_idは、上記の図の値をいれます。

nuxt-atuth0/nuxt.config.ts
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
  auth: {
    strategies: {
      auth0: {
        domain: 'Your Domain',
        client_id: 'Your Client ID'
      }
    },
    redirect: {
      login: '/',  // 未ログイン時のリダイレクト先
      logout: '/',  // ログアウト後のリダイレクト先
      callback: '/callback',  // コールバック
      home: '/home',  // ログイン後のページ
    }
  },
  router: {
    middleware: 'auth'
  },

3-4. ページの作成

auth0の使い方を見たいだけなので、ログイン画面、ログイン後の画面、コールバックの画面を作成します。

ログイン画面

nuxt-atuth0/pages/index.vue
<template>
  <div>
    <h1>Login Page</h1>
    <button @click="authenticate">Login</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class Index extends Vue {
  authenticate() {
    this.$auth.loginWith('auth0')
  }
}
</script>

ログイン後の画面

nuxt-atuth0/pages/home.vue
<template>
  <div>
    <h1>Login Success</h1>
    <p>User Name: {{this.$auth.$state.user.name}}</p>
    <button @click="logout">Logout</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({})
export default class Logout extends Vue {
  logout() {
    this.$auth.logout();
  }
}
</script>

コールバックの画面

nuxt-atuth0/pages/home.vue
<template>
  <h1>callback</h1>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class CallBack extends Vue {}
</script>

3-5. 各ページ認証してるか確認する

nuxtのmiddlewareを実装します。
nuxt.config.tsのrouterで、authを読み込むように設定しています。

nuxt-atuth0/middleware/auth.ts
export default function ({ store, redirect }) {
  if (!store.state.auth.loggedIn) {
    redirect('/');
  }
}

3-6. storeにindex.tsファイルを追加する

storeにindex.tsファイルがないとエラーになるので、下記のようにファイルだけ追加しておきます。

nuxt-atuth0/store/index.ts






3-7. $authをプロパティに追加する



エディタ上で$authプロパティをうまく認識してくれず、エラーを表示してしまします。。。



このままでも動作はするのですが、なんでだろう？教えてすごい人。



ひとまず、エラーを出さないようにするために、下記のように$authプロパティを自分で設定して回避しました。





nuxt-atuth0/nuxt.config.ts


declare module 'vue/types/vue' {
  interface Vue {
    $auth: any
  }
}







4. 動作



ローカルホスト上で動作してみましょう。



npm run dev




http://localhost:3000/へアクセスすると、NuxtがTypescriptで動作しています。




ログイン画面



login.png



loginボタンを押すと、Auth画面へ遷移します。




Auth画面



auth.png



auth0を使って、Signup / Login できます。




ログイン後の画面



success.png



ログイン後に表示されます。




おわりに



Nuxt+Typescript+Auth0で認証できるようになりました。

nuxt.config.tsのstrategiesを追加すれば、ソーシャルログインをいろいろ増やすことができるので、サービスによって追加してみましょう。


    

  



    
    
        
  • 
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            このエントリーをはてなブックマークに追加
        
    • 
        
  • 
            Qiitaで続きを読む 
        
    • 
    
















  

    

    

    


      

        
    
          
  •  投稿日：2019-08-04T12:59:00+09:00
    • 

        

      

      

        Vue.jsでHPを作成する - 開発環境を整える
      





      



    

  


  

      

    


はじめに



転職活動用のポートフォリオを作るにあたりインデックス的なHPを作成することにしました。

なお、筆者は文系出身。SIerにてJava、PHPの業務経験がありますがプライベートでのアウトプットは行ったことがないです。

なお、どこでどう躓いたかどう対策したかを記録する目的もあり、手戻りである部分を残しております。

手戻りがない形で最初からきれいに作れる手順は「参考」に書かれているサイトなどで確認できますので、特別な理由がなければそちらを参照されることをお勧めします。



また、ここではVue、Git、GitHub、GitHubPages、VisualStudioCodeを使った「開発環境の構築」や「開発方針・開発手法の確立」までをまとめております。

具体的なHP作成の過程は別にまとめようと思います。




HP作成に当たる過程




READMEの検討



最初はHP作成は考えておらず、GitHubのREADME.mdをきれいに整えてポートフォリオへの導線を作ろうと思いましたが、いきなりGitHubのリポジトリが見えるのが文系にはどうも受け付けなく方向チェンジ。

readme.jpg

markdown方式である程度整えられることだけ確認した…。  




Pages



GitHub PagesというホスティングサービスがHP作成の要件にマッチしていたのでこちらを使って作成することに。



    

  • 静的サイト (HTML や CSS, 画像など) を公開できる。JavaScript も動作。
    • 

  • 独自ドメインを割り当てることも可能です。(https://ユーザまたは組織名.github.io/リポジトリ名)
    • 

  • 無料。
※ポートフォリオ（まだない）は動的なRubyやGoを作成予定なので別途サーバーとドメインを取得する必要があるが、インデックスHPならここで十分。
    • 





最終目標



目標は以下とした。インデックスページを作るだけならべた書きでできるのだけれどせっかくならここでも何かしたい。



    

  • Java、PHP、HTML、CSS、javascriptの基礎はすでにあるため新しい技術を使って作成する。
    • 

  • ついでにこのHPもポートフォリオの一部にする。
    • 

  • ポートフォリオ（まだない）へのリンクを貼る機能。
    • 

  • 作成したものをGit管理し、GitHubで参照できるようにする。
    • 

  • その他、上記の事をQiitaに書き、技術の勉強方法の確立、アウトプットの癖付けを行う。
    • 





技術選定



ポートフォリオは別に作る予定なので、ここにあまり時間をかけられないこともあり学習コストの低いVue.jsを選択。

他候補は、Reactでした。




Vue.jsを学習



Vue.js とは？

こちらを一通り読みました。




いよいよ使ってみる



ここでは、Vueでの開発ができることとGitHubへのアップロード手順を確立する。




インストール





直接組み込む方法


<script src="https://cdn.jsdelivr.net/npm/vue"></script>






このように直接jsに1行書くだけでVue.jsは使えるがついでにこのHPもポートフォリオの一部にするを考慮すると冗長になる構成は避けたかったのと、いくつかの使えない機能（Jestなど）ものちに使いたかったためCLIを利用。




yarnを入れる



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





Vue CLI をグローバル環境にインストールする



$ yarn global add @vue/cli
$ yarn global add @vue/cli-init





プロジェクト作成



$ vue init webpack homepage-project

? Project name homepage-project
? Project description A Vue.js project
? Author yuko
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm




webpackはテンプレート。諸々の質問に答えてセットアップを待つ。





開発用のコマンドが表示される


# Project initialization finished!
# ========================
To get started:
  cd homepage-project
  npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack








表示された通りに実行


$ cd homepage-project
$ npm run dev
 DONE  Compiled successfully in 3150ms
 I  Your application is running here: http://localhost:8080






開発用モードでサーバが稼働したのでブラウザに「http://localhost:8080」を打って画面が表示されることを確認

終了するときは、Control+C




フォルダ構成の把握



PROJECT_ROOT
  ┣ build
  ┣ config
  ┣ node_modules
  ┣ src
    ┣ assets       #画像やCSS、その他javascriptなどの静的ファイルが含まれる
    ┣ components   #.vueの拡張子がついたコンポーネントファイルが含まれる
    ┣ router       #ルーティング用の設定ファイルが含まれる
    ┣ App.vue      #index.htmlに出力されるvue側のインデックスファイル
    ┗ main.js      #各種ファイルをインポートして管理するエントリーポイント用ファイル
  ┣ static
  ┣ test
  ┗ index.html     #ルートファイル




index.js、src/配下を触る必要があることを把握

参考：vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ

参考：vue-cliで始めるVue.jsチュートリアル (1)




ビルドにより生成されるパッケージ



さらに構成把握のためビルドを行い、初期状態では存在していないdistを作成します。





これにより/distディレクトリが作成される


$ npm run build








このdist以下が最終的にHPとして公開される部分となる


PROJECT_ROOT
  ┣ dist
    ┣ static
    ┣ index.html







設計



フォルダ構成の把握にて確認した内容を元に開発方針を整理。とりあえず以下の方針で動作確認を行います。




用意されたテンプレートをどう使っていくか



    

  • /src/router/index.js
    
まずは、作成するHPのコンテンツへのルーティングの設定。
    
/へアクセスしたときのルーティング先をHelloWorldから変更もしくはサブディレクトリのルーティングを追加することが考えられるが、ざっと探した限りHelloWorldは残している方が多いので、一旦サブディレクトリ作成の方針にする。
    
また、HPコンテンツのコンポーネントファイルをインポートする。
    • 

  • /src/components/
    
HPコンテンツのコンポーネントファイルを追加。
    • 

  • /src/assets/
    
HPコンテンツの画像などを格納する。（（（今は何も考えられない）））
    • 





ファイル管理



次は、ファイル管理です。筆者はsvn（TortoiseSVN）での業務経験があります。

大好きなツールなのですが、今回はGitを使います。

参考：いちばんやさしいGit&GitHubの教本 人気講師が教えるバージョン管理&共有入門

参考：Visual Studio CodeでGitを使う  




設定



まずはGitの確認をしたところすでに入っている模様（yarn入れた時に入った？）



$ git --version
git version 2.20.1 (Apple Git-117)




コミット時に記録されるアカウント情報の設定を行います。





ユーザー名：XXXXXX／メールアドレス：XXXX@XXXX


$ git config --global user.name XXXXXX
$ git config --global user.email XXXX@XXXX







ファイル管理の方向性



動作確認しながらの更新が想定されるので、masterに直接コミットするのではなく

別のブランチを作成しそちらにコミットして確認、問題なければmasterにマージという形をとることにします。



Repositorie
  ┣ masterブランチ    //公開用
  ┣ gh-pagesブランチ　//作業用細かい修正はこちらで行っていく




gh-pagesなのは、後述しますがGitHub Pagesを使えるブランチ名がmasterかgh-pagesのため。

開発中は、gh-pagesをGitHub Pagesとして設定して動作確認、

ひと段落したら、masterへのマージを行いGitHub Pagesの設定をmasterに変更をイメージしています。



なお、初回はmasterにコミットしそこからブランチを分けて開発という進め方ですので初回コミットはmasterに対して行います。




ローカルリポジトリを作成



方向性が決まったところで、先ほどつくったプロジェクトをファイル管理できるようにしていきます。



１．ディレクトリの作成

先ほどのプロジェクトをディレクトリとするのでここでは何もしません。



２．Gitリポジトリに変換



$ cd homepage-project //ファイル管理したいプロジェクトのルートに移動
$ git init            //Gitリポジトリに変換
$ git status          //Gitのステータス確認
On branch master
No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    .babelrc
    .editorconfig
    .eslintignore
    .eslintrc.js
    .gitignore
    .postcssrc.js
    README.md
    build/
    config/
    index.html
    package-lock.json
    package.json
    src/
    static/
    test/

nothing added to commit but untracked files present (use "git add" to track)




ここでいくつかのファイルやディレクトリがないことに気づく。

自動的に管理対象としない除外ファイルを判断してくれているようです。

ログファイルや生成物（ここではdist配下）はファイル管理しない方がいいよねということでしょう。



$ cat .gitignore 
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln




distはパッケージファイルなので確かにファイル管理すべきではないと思われます。

ただ今回はGitHub Pagesが公開先ということもあり、そのままコミットできるようにします。





コメントアウト


$ vi .gitignore
----------------
#/dist/






出てくるようになりました。



$ git status
On branch master
No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    .babelrc
    .editorconfig
    .eslintignore
    .eslintrc.js
    .gitignore
    .postcssrc.js
    README.md
    build/
    config/
    dist/
    index.html
    package-lock.json
    package.json
    src/
    static/
    test/

nothing added to commit but untracked files present (use "git add" to track)





コミット



$ git add .                     //ステージングエリアに登録
$ git commit -m "first commit"  //コミットとメッセージ





リモートリポジトリの作成



GitHubにうつり、「New Repository」を押下し、必要な情報を入力したリポジトリを作成

image.png



作成したリポジトリを開くと何をすればいいか状況に合わせて書いてある。今回は下のパターンなのでそのままコマンドを実行

image.png



$ git remote add origin git@github.com:c3drive/homepage-project.git
$ git push -u origin master
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.




GitHubに公開鍵がなくてエラーになりましたので、PCの公開鍵をGitHubに登録します。




公開鍵の設定



パソコンのSSH Keyを生成します。





XXXXX@XXXXXはメールアドレス


$ ssh-keygen -t rsa -b 4096 -C "XXXXX@XXXXX"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/XXXXX/.ssh/id_rsa):  //鍵の保管場所を確認しEnter
Enter passphrase (empty for no passphrase): //パスフレーズを入力してEnter
Enter same passphrase again:  //再度パスフレーズを入力してEnter






作成された公開鍵をコピー



$ pbcopy < /Users/XXXXX/.ssh/id_rsa.pub 




GitHubのSettings>SSH and GPG keysにて「New SSH key」を押下しコピーしたキー内容を入力する。

image.png



再度コマンドを実行し、パスフレーズを入れる





add後エラーになっているままの場合は1目はエラーになります


$ git remote add origin git@github.com:c3drive/homepage-project.git
$ git push -u origin master
Enter passphrase for key '/Users/XXXXX/.ssh/id_rsa': 






b

無事GitHub上のリモートリポジトリに表示されるようになりました…！

image.png



警告が出ているので確認します。

image.png

それぞれバージョンを上げろと言われていました。

webpackはプロジェクトを作る時に指定しているテンプレート。

よく見ると以下のような記述がありました。





webpack-bundle-analyzer vulnerability found in package.json 26 minutes ago





package.jsonを確認すると依存関係で上記の記述があるのでGitHubの指定通りに直せばよさそうです。

以後のファイル変更は当初の予定通りmasterとは別のブランチをきって行う予定のためいったん放置します。





TODOメモ


- package.jsonのUpgrade webpack-bundle-analyzer to version 3.3.2 or later.対応
- package.jsonのUpgrade webpack-dev-server to version 3.1.11 or later. 対応







GitHubPagesの設定の確認



動作確認のため、Repository>SettingsからGitHub Pagesの設定を確認します。

image.png

以下の公開ができるようです。



    

  • masterブランチ
    • 

  • masterブランチ/docs
    • 

  • gh-pagesブランチ　※現在表示されておらずこの名前のブランチを作成したときに限り表示
    • 




参考：https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages  



masterはVueプロジェクトのソースとdistという構成ですが、静的なHTMLとして公開できるのはdistのみですのでmaster全体を公開する必要はなさそうです。

GitHubPagesにとってはdocsが公開ディレクトリ扱いの様ですので、以下の修正を後で行うことにします。





TODOメモ


- package.jsonのUpgrade webpack-bundle-analyzer to version 3.3.2 or later.対応
- package.jsonのUpgrade webpack-dev-server to version 3.1.11 or later. 対応
- 開発用のブランチはgh-pagesとする
- Vueから生成されるパッケージをdistからdocsへ変更
- すでに作られているdistを削除する
- .gitignoreでコメントアウトしたdistのイン（存在しないディレクトリになるので行ごと削除がいいかもしれません）






現時点で、master/docsはないのでいったんmasterを公開する設定にして動作確認。

真っ白です。コンソールよりindex.htmlで読み込んでいるファイルのパスが「/」ルート指定です。

しかしこれらのファイルは、「/homepage-project/dist/」配下にあります。

image.png



こちらは相対パスにするように修正します。





TODOメモ


- package.jsonのUpgrade webpack-bundle-analyzer to version 3.3.2 or later.対応
- package.jsonのUpgrade webpack-dev-server to version 3.1.11 or later. 対応
- 開発用のブランチはgh-pagesとする
- Vueから生成されるパッケージをdistからdocsへ変更
- すでに作られているdistを削除する
- .gitignoreでコメントアウトしたdistのイン（存在しないディレクトリになるので行ごと削除がいいかもしれません）
- パッケージの参照ファイルを相対パスに変更







課題の管理



GitHub Pagesの表示の確認ができませんでしたが、ワンパス通してみて色々と問題点がわかりました。

これから開発用のブランチを切り、TODOの消化（問題の修正）とHP作成を行っていくのですが、GitHubにIssuesというタブがあるのでTODOをこちで管理してみようと思います。

image.png



参考：チーム開発を変える「GitHub」とは？〜Issuesの使い方〜【連載第3回】



必要事項を入力します。対応するのは自分しかいないので自分を選択し、ラベルはデフォルトを使いました。

image.png

すべてのTODOをIssuesに移せました。

image.png




プロジェクトの管理



ここで課題の進捗状況やタスクの消化状況を把握するのにProjectを作った方がいいことに気づく。

参考：新入社員におくるGitHubでのプロジェクト管理の初歩



詳細割愛しますが、Projectのタスク管理を試したかったのでHPとしてProjectを作成。

よく見かけるのは「TODO」「DoingやDeveloping」「Reviewing」「Done」の4種類ですが、

GitHubが用意したPresetは「To do」「In progress」「Done」の3種類であり、

「In progress」を「Doing」と「Reviewing」でMoveの設定を分けるイメージが湧かなかったので

3種類で運用することにしました。（手動でのタスク移動前提、状況の可視化という意味で「Doing」は現場では必須かと思いますが、自分はMoveの設定を試したかったので混乱するカラムはやめるという判断です）

設定はそれぞれ以下の通り。



    

  • TODOカラム：未着手のタスク（まだない）やIssueはここ。
    
Newly addedは、Issueが登録されたとき、自動的にこのカラムに追加設置されるように設定
    
※今回は先にIssueを作ってしまったので手で登録しました。以後Issue作成時にProjectを紐づけてつくると自動でここに来るようになる
    
image.png
    • 

  • Reviewingカラム：レビュー中
    
プルリクされたものはここに来るイメージです。
    
image.png
    • 

  • Doneカラム：終わったもの
    
マージやクローズされたIssueはここに来る。
    
image.png
    • 




参考：プロジェクトボードの自動化について  




開発用ブランチの作成



ブランチを作成します。



$ git branch gh-pages //ブランチの作成
$ git branch          //ブランチの状態の確認
  gh-pages            //gh-pagesが作成されているが
* master              //まだ使用しているのはmaster




チェックアウトにて使用ブランチの変更





切り替わったことを確認


$ git checkout gh-pages        //ブランチ切り替え
Switched to branch 'gh-pages'
$ git branch
* gh-pages                     //切り替わったことを確認
  master






この時点ではローカルリポジトリでの作業のみのためGitHubで確認はできません。

作成したブランチをリモートリポジトリに反映します。



$ git push -u origin gh-pages




GitHubで作成したブランチが認識されたので、ついでにGitHubPagesも変更しておきます。



image.png




開発ツールの導入



ここで、コマンドラインでの環境構築ではこれ以上進めるのが厳しいと判断し、VSCodeでの環境を構築する。




なお、コマンドラインのみで開発すると以下のような手順となる。



１．ファイル編集



$ vi xxx




２．ビルド





エラーがある場合


$ npm run dev
 WARNING  Compiled with 1 warnings
  ✘  http://eslint.org/docs/rules/key-spacing  Missing space before value for key 'component'  
  src/router/index.js:19:17
        component:Portfolio
                   ^
✘ 1 problem (1 error, 0 warnings)
Errors:






３．http://localhost:8080で動作確認

４．修正がある場合、Controll+Cで終了し、１へ




Visual Studio Codeのインストール



参考：Visual Studio CodeでVue.jsアプリケーションの開発環境を構築する



１．microsoft.com - Visual Studio Codeより、インストール。

２．左ペインからinstallを押下して、必要な拡張機能を適用する。



    

  • Japanese Language Pack for Visual Studio Code　日本語化
    • 

  • Vetur　Vueファイルのためのツール
    • 

  • ESLint　JavaScript のための静的検証ツール
    • 




１．VSCodeにて、ファイル編集

２．ビルド（これはVSCodeのターミナル上でも今まで開いていたターミナルでもどちらでも）

３．http://localhost:8080で動作確認

４．修正がある場合、１へ(2、3はこのままリアルタイムで反映されるようになる）




開発




ブランチでの動作確認



Webサイトの開発の前にIssueを解消してBranchでのWebサイト表示ができるようにします。




まずはSecurity Alartsの対応



    

  • webpack-bundle-analyzerが古い #1
    • 






package.json(警告では、3.3.2以上でしたが最新バージョンがあったのでそちらを記載）


    "webpack-bundle-analyzer": "^2.0.1", // 変更前
    "webpack-bundle-analyzer": "^3.4.1", // 変更後






変更をコミットしリモートリポジトリにpush

ここで、コメントに対応するIssueの番号をつけると紐づけてくれる。





変更をコミットしpush


$ git add package.json 
$ git commit -m "Security Alerts Measure #1"
[gh-pages 67e37d4] Security Alerts Measure #1
 1 file changed, 1 insertion(+), 1 deletion(-)
$ git push






    

  • webpack-dev-serverが古い #2
    
こちらも同じように対応を行う。
同時にコミットをしなかったのはIssueの単位でコミットしたかったため。（pushは一緒でもよかった…。）
    • 




GitHubで確認するとIssueにコミットが紐づいていることがわかる

image.png



projectはこう

image.png



Securityの警告、masterも対応しないと消えないようなので、一旦#1,2の対応のみでプルリクエストを出します。

image.png



一人で開発しているためレビュアーは指定できなかったのでタイトル、説明、アサイン、Project、マイルストーンなどセットし「Create pull request」を押下

image.png



Projectを見ると、紐づけたマイルストーンがReviewingカラムに自動で移動していました。

（Issueはダメなのか…）

image.png



作成されたPull Requestのレビュー承認をしようとしたら本人はできない模様。

image.png



仕方ないのでそのまま「Merge pull request」を押下してマージ。

image.png



マージされたようです！

image.png



Security Alartが消えました。

image.png



リモートリポジトリで行なった作業（マージ）をローカルに反映させます。





マージはmasterに対して行なった変更なので、作業中のブランチをmasterに切り替えてから行います


$ git checkout master //ブランチの切り替え
$ git branch          //masterに切り替わっていることを確認
  gh-pages
* master
$ git pull origin master //リモートリポジトリから変更を反映







失敗1/2



Pull requestと同時にIssueをCloseさせるべきだった 

Projectを確認すると、マイルストーンは移動しましたが、Issueは手動でCloseが必要な様子。

image.png

IssueタブにてそれぞれCloseしたら無事Doneへ移動しました。

こちら、マージする時のコメントに「[close #1 #2]」としてたらおそらくマージと同時にIssueがクローズされ、CloseがMove条件となっているDoneカラムへの移動も同時に行われたのかなと思います。 

参考：Closing issues using keywords




失敗2/2



マージ時に開発用ブランチのコミット履歴まで残してしまった

masterへのコミットを必要最低限にする為に開発用ブランチを作っているのに全コミットが載ってしまう状態。

image.png

これは、マージ時にデフォルトで履歴を残す方法が選択されているのをそのまま使ってしまったのが原因でした。



    

  • Create a merge commit：マージ元のコミット履歴、マージそのものの履歴が残る
    • 

  • Rebase and merge：マージ元のコミット履歴だけ残る
    • 

  • Squash and merge：マージ履歴が残る
    • 




参考：GithubでのWeb上からのマージの仕方3種とその使いどころ



やりたいことを叶えるだけなら「Squash and merge」を選べば良さそうなのですが、

現時点では以下のレビュアーがソースをレビューする単位はある程度細かい単位が望ましい認識です。

特に「Squash and merge」にした場合、もっと多くの開発者がいてブランチも複数あるような状態だと特定のコミットだけ競合など発生した時や特定のコミットを選択するなども不可に見えます。

しかしmasterは綺麗にしたく、開発用ブランチは１日の終わりなどの動作しない状態でのコミットも含まれます。

まとめると以下の状態です。



    

  • 開発用ブランチ
    
コミットはなんでもない単位でも行いたい
    • 

  • masterブランチ
    
コミットはリリースの単位など大きい単位を想定
    • 




今回は一人開発なので問題ないですが、現場で使う際、レビューが現実的な単位になりません。

そこで以下のようにブランチ構成を変えることにします。



    

  • 開発者作業用ブランチ
    
コミットはなんでもない単位でも行いたい
    
ある程度のまとまりで、Create a merge commitにて、リリース用ブランチへマージ
    • 

  • リリース用ブランチ
    
Issueの単位などある程度のまとまりをコミット
    
リリースできる状態になったら、Squash and mergeにて、master用ブランチへマージ
    • 

  • masterブランチ
    
コミットはリリースの単位など大きい単位を想定
    • 




※複数のリリースが並行することも考えるとやはりmasterでの競合の可能性があるので、「Squash and merge」はあまり使わない方がいいかもしれません。




ファイル管理の方向性（変更）



発覚した問題により変更します。





変更前


Repositorie
  ┣ masterブランチ    //公開用
  ┣ gh-pagesブランチ　//作業用細かい修正はこちらで行っていく








変更後


Repositorie
  ┣ masterブランチ    //公開用
  ┣ gh-pagesブランチ　//リリース用
  ┣ devブランチ       //作業用細かい修正はこちらで行っていく






これに伴い、devブランチをgh-pagesからの派生として作成します。



$ git branch dev gh-pages //ブランチの作成（第三引数には派生元を指定）
$ git checkout dev        //ブランチの切り替え
$ git branch
* dev
  gh-pages
  master
$ git push -u origin dev //devブランチをリモートリポジトリに反映





Issueの対応に戻る



Security Alarts以外の対応を「devブランチ」を使って行なっていきます。

以下を繰り返し、Issueを消化していく

１．ローカルリポジトリの「dev」を修正（場合により再ビルド）

２．コミット・push

３．リモートリポジトリに対してIssueの単位でdev -> gh-pagesへプルリクエスト

image.png



Projectの状況はこうなりました。

image.png

これまで発覚した問題点が解消し、TODOが0件になったのでHP作成用のIssueを新たに作りました。




HPを作っていく



作る前にざっくりマイルストーンを作りました。

image.png

紐づけているIssueはこんな感じ。

image.png



これより、このIssueをつぶしていく形でHPを作成していきますが、

開発方針や開発手法は一旦まとまったため、HP作成については別の記事にまとめようと思います。




お疲れさまでした



自分の今までの勉強法は、本を買ってきてその通りに作ってしまって実務で応用が利かないところがあったのでこういう勉強の仕方は面白かったです。

自分は先を見て計画を立てるため着手前にかなり調査を行います。

調査に当たり、先駆者様たちの記事で、手戻りがない形で先んじて言及してくださっているものが多く、

その対応をしなかった場合後ほど手戻りが出ることがある程度想定されましたが、

自身が公式ドキュメントやソースから読み解いた対応ではないものを人様の記事を見てコピペしている現状を打破したく、

手戻りがあることを想定したままあえて躓きなぜその対応が必要なのかかみ砕きながら進めました。



いつかは公式ドキュメントやソース解読により、先駆者のいない技術の先読みをある程度できるようになることが目標ですが、まだ先の様です。




つづき



HPを作成していきますが、こちらは別の記事にまとめます（まだ）


    

  



    
    
        
  • 
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            このエントリーをはてなブックマークに追加
        
    • 
        
  • 
            Qiitaで続きを読む 
        
    • 
    
















  

    

    

    


      

        
    
          
  •  投稿日：2019-08-04T03:54:12+09:00
    • 

        

      

      

        Vue.js 単一ファイルコンポーネントの作成とRouterの設定
      





      



    

  


  

      

    


新規ファイルを作成する



src/components/〇〇.vueを作成し、タグを追記します。



<template>
<div>
    <h1>ここの文字を表示します</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>





インポートする



src/views/Home.vue(例)



  <div class="home">
下記を削除する
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

※ここでインポートする
<〇〇/>>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

※ここでインポートする
import 〇〇 from '@/components/〇〇.vue'

export default {
  name: 'home',
  components: {
    HelloWorld,

※ここに追記する
    〇〇
  }
}
</script>




これで、表示することができました。




Vue Routerの設定



src/router.js



import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
※ここから下を変更します
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})



    

  



    
    
        
  • 
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            このエントリーをはてなブックマークに追加
        
    • 
        
  • 
            Qiitaで続きを読む 
        
    • 
    
















  

    

    

    


      

        
    
          
  •  投稿日：2019-08-04T00:20:05+09:00
    • 

        

      

      

        Vue.js 基本のファイル構成について
      





      



    

  


  

      

    


publicフォルダ



public」と「src」という２つのフォルダによて構成されています。publicには「index.html」という通常のhtmlファイルが入っています。これが、アプリのビューの大元になります。




srcフォルダ



主に編集するのはsrcフォルダになります。srcフォルダには、「assets」「components」「views」という３つのフォルダに加えて、「App.vue」「main.js」「router.js」という３つのファイルがあります。




assetsフォルダ



画像やテストデータなど、静的なファイルを保管する場所です。




componentsフォルダ



Vue.jsでは、ページ内の各要素（ヘッダー、フッター、リストなど）を「コンポーネント」という区分に小分けして管理します。コンポーネントファイルの名前は大文字で始めることが慣習化しています。




viewsフォルダ



各ページ用のファイルを保管する場所です。コンポーネントがインポートされ使用されていることがわかります。このように、Vue.jsアプリでは、ページ用のvueファイル側でコンポーネント用のvueファイルをインポートして使うことになります。




App.vue



App.vueは、各ページのベースです。ヘッダーやフッターなど、全ページに共通して表示させたいコンポーネントは、このファイルでインポートします。の部分が、viewsフォルダ内の各ページ用のファイルを受け取って表示させる役割を担っています。




main.js



全ページに反映させたいJavascriptコードを書くためのファイルです。




router.js



ルーティングの設定を行う際に編集します。



routes: [
{
      path: '/',
      name: 'home',
      component: Home
    },




実際に編集するのはroutes:の中になります。


    

  



    
    
        
  • 
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            このエントリーをはてなブックマークに追加
        
    • 
        
  • 
            Qiitaで続きを読む 
        
    • 
    
















  

    

    

    


      

        
    
          
  •  投稿日：2019-08-04T00:08:24+09:00
    • 

        

      

      

        Vue.js　環境構築
      





      



    

  


  

      

    


公式リファレンス



https://jp.vuejs.org/




npmをインストール



macの場合、ターミナルでコマンドを入力して実行します。

Node.jsをインストールすることで、自動的にnpmもインストールされます。

Node.jsをインストールするには、Homebrewというパッケージ管理ソフトを使う方法が最も簡単です。



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




brew install node




インストールが終わったらそれぞれのバージョンを確認してみましょう。



node -v




npm -v





Vue CLIをインストール



バージョンを指定したい場合には指定してください。



npm install -g @vue/cli




インストールが完了したらバージョンを確認しましょう。



vue --version





Vue.jsのアプリを作成する



まずデスクトップに移動します。



cd Desktop




次にアプリを作成します。



vue create アプリ名




実行すると選択できるようになりますので、作成したいアプリに合わせて選択しましょう。

今回は、以下のようにします。



Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
❯ Manually select features




? Check the features needed for your project: (Press <space> to select, <a> to toggle 
all, <i> to invert selection)
❯◯ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing




? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n) Y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by def
ault): 
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus 




Y/NはYを選択します。以上でデスクトップにアプリのディレクトリが作成されました。




アプリを起動する



cd アプリ名




npm run serve




App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.2:8080/




ブラウザでlocalにアクセスしてVueのロゴが表示されていれば完了です。


    

  



    
    
        
  • 
            
        
    • 
        
  • 
            
            
        
    • 
        
  • 
            このエントリーをはてなブックマークに追加
        
    • 
        
  • 
            Qiitaで続きを読む 
        
    • 
    


















						

					


					

						


							



    

									
日付別

								


  





    

									
タグ一覧