技術メモ

プログラミングとか電子工作とか

Nuxt.jsが2.9になってからTypeScriptの対応が変わったようです。

f:id:ysmn_deus:20190719124755p:plain

どうも、靖宗です。
一生環境構築してる気がします。フロントもう嫌や・・・
ということでTypeScriptの対応がなにやら変わった?ようなので公式に沿ってセットアップしてみます。

Nuxtプロジェクトのセットアップ

ここに関してはいつも通りです。
よければ以前の記事をどうぞ。

TypeScriptのセットアップ

公式サイトのSetupに沿って進めます。
まずは必要なパッケージのインストールをyarnで行います。

yarn add -D @nuxt/typescript-build @nuxt/types

コンフィグファイルnuxt.config.js編集

コンフィグファイルを編集します。

buildModulesという項目に@nuxt/typescript-buildを追加します。

...
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
...

tsconfig.jsonの追加

tsconfig.jsonを追加します。
一応tscコマンドで追加しますが普通に作成して大丈夫だと思います。

tsc --init

一応ここまでの設定で動作はするようです。

nuxt.configをtsにする

これもうjsのままの方がええんでない?って気もしてきましたが、一応対応します。

必要パッケージのインストール

nuxt.configをtsにする場合はnode環境にもTypeScript対応が求められますので@nuxt/typescript-runtimeが必要になります。
yarnで追加していきますが、-Dではなく普通に依存関係に追加するようです。

yarn add @nuxt/typescript-runtime

package.jsonの編集

yarn devの実行をnuxtからnuxt-tsに変更します。

...
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
...

以上でNuxt.jsでTypeScriptを利用できるようになるみたいです。
煩雑なパッケージ関係が整理された感じではありますが、ちょっと手間が増えた感もありますね。
そのうちnuxtのウィザードに追加されそうな気はします。

ついでにLintにも対応する

つまり以前の記事はもう古い。もうしわけないです・・・

パッケージのインストール

これも必要なパッケージがあるのでインストールします。

yarn add -D @nuxtjs/eslint-config-typescript

.eslintrc.jsを編集

.eslintrc.jsに先ほどのパッケージ情報を追加していきます。

...
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
...

Prettier周りでたまに前後関係が効いてくる場合があるので念のため、Prettierよりは前に追加しました。

package.jsonを編集

package.jsonにlintのコマンドが記載されていますので、それを編集しておきます。といっても.tsを付け加えるだけですが。

...
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
...

試しにyarn lintを実行するとnuxt.config.tsがチェックされているのが分かります。

parserの変更

parserがbabel-eslintのままだと色々ESLintに怒られる時があります。なのでparserを@typescript-eslint/parserに変更しておきます。
まずは必要なパッケージをインストールします。

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.jsを編集

parser: 'babel-eslint'

を消去して

  parserOptions: {
    parser: '@typescript-eslint/parser'
  },

を追記します。また、plugins'@typescript-eslint'を追加しておきます。

vueファイルなどにも対応

vueファイルではscriptタグにlang属性を付与することでTypeScriptとしてvueファイルのスクリプトを記載することができます。
ですが、lang="ts"を付けるだけではCannot find moduleとか怒られるのでその辺を対応します。

本当はtsconfig.jsonincludeオプションを利用することで解決できるかと考えていましたが、どうにも解決しませんでしたので

qiita.com

こちらを参考にして、srcディレクトリにshims-vue.d.tsを作成し、tsconfig.jsonfileを追加することで対応しました。
これでたぶんnuxt開発ができる筈!

参考

qiita.com

qiita.com

qiita.com

Nuxt.jsでTypeScriptが使いたいので、ESLintをいじる

f:id:ysmn_deus:20190820122936p:plain

靖宗です。
前回ESLintを設定したんですが、できればコレからはTypeScript(以下TS)を積極的に利用していきたいと考えています。
なので、TSにあった.eslintrcにしていきます。

Nuxt.jsのプロジェクトのセットアップ

別の記事を参照されたし。

パッケージの導入

TSを利用するのに必要な様々なパッケージを導入します。

yarn add ts-node @nuxt/typescript

もしTSを使うのが初めての人はyarn add typescriptも追加です。グローバルインストールかどうかはお任せしますが、多分グローバルで良いと思います。

tsconfig.jsonの作成

TSの設定ファイル(tsconfig.json)を作成します。
一応コマンドから新規作成します。

tsc --init

内容は実践TypeScriptのものを参考に作成します。

nuxt.config.js → nuxt.config.ts

TSを利用していくのでnuxt.config.jsだけ特別扱いはよくありません。
nuxt.config.tsに名前を変更し、内容を少々変更します。

NuxtConfigurationという型を適応するために一度定数として宣言し、最後にexportしています。
基本的にこれで問題無く動く・・・と思います。

.eslintrc.js

パッケージの追加

nuxt.configはjsからtsにしたんですが、.eslintrc.jsやjest.config.jsはtsに対応してないっぽい(そもそも読み込まない?)みたいなので、しかたなくjsのまま行きます。
(特にロジックを書いていく訳でも無いのでまぁいいでしょう)
まずはパッケージを追加していきます。yarnでインストールしていってもいいですが、色々多いのでpackage.jsonに追記してyarn addするのが良いと思います。

...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
    "fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore .",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/axios": "^5.3.6",
    "nuxt": "^2.0.0",
    "nuxt-buefy": "^0.3.2",
    "ts-node": "^8.3.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "^2.0.0",
    "@typescript-eslint/parser": "^2.0.0",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-jest": "^24.1.0",
    "eslint": "^6.1.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-vue": "^5.2.3",
    "jest": "^24.1.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.16.4",
    "sass-loader": "^7.2.0",
    "vue-eslint-parser": "^6.0.4",
    "vue-jest": "^4.0.0-0"
  }
...

babel-eslintは敢えて取り除きました。

.eslintrc.jsの編集

基本は以前の記事のeslintrcを踏襲します。

www.tech-note.info

vuetifyを入れる際にはpluginとかが必要になってくると思います。

以上で基本的には動く筈。

参考

qiita.com

Nuxt.jsでいっつもやるやつ(初期の環境構築)

f:id:ysmn_deus:20190719124755p:plain

どうも、靖宗です。

最近Nuxt.js(Vue.js)をさわり始めたのですが、フロントよわよわ界隈としてはなかなか良さげです。
(React.js触ってる人も両方やるとより理解度が高まるかも?という動機で触ってました)
毎回機能を作り込むまでは同じなので、自分用メモとして記事にしておこうと思います。

Nuxt.js プロジェクト構築

create nuxt-appでプロジェクト作成

まずはどのフレームワークでも大体同じだと思いますが、npxやyarnで初期プロジェクトを作成していきます。
最近npxはnodistにバンドルされないと言うことを知ったのでyarnでやります。

yarn create nuxt-app [PROJECT-NAME]

プロジェクトの設定はよしなに。
僕は

  • パッケージマネージャーはYarn
  • UI frameworkはVuetify.js
  • server frameworkはとりあえず無し
  • moduleはAxiosのみon
  • linter+Prettier両方on(よくわかんないけど雰囲気で使ってる)
  • test frameworkはJest
  • rendering modeはとりあえずSSRでやっとく(SPAとかに切り替えるの楽だし)

というかんじです。
この辺は慣れてきたら変わるでしょうが、いまはこんなで。

Vuetify使ってるとエラー吐きまくる

なんか下書きの時はうまくいってなかったんですが今はうまくいくみたいです
参考までに項目は残しておきます。
(indexはどうせ綺麗にするので)

たぶんVuetifyを入れたらエラーだらけになると思います。

✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

たぶんyarn lint --fixとかで修正できるのかもしれませんがなんか自分の環境ではうまくいかなかったので指摘がある箇所を手動で修正します。
どうせindex.vueとかはごっそり書き換えるので綺麗にします。

あとはpages/inspire.vueとかcomponents/VuetifyLogo.vueとか消す。これでたぶん通る。

Vuetifyとか使って無くても

一旦作成できたらyarn devぐらいはしてみてもいいかも。パッケージマネージャーのバグとかでそもそも動かない!とか発生する可能性があるので。

IDEの設定

これは人に寄りけりなのでJetBrain系じゃない人はスルーで。
WebStormのNew ProjectでEmpty Projectとして先ほど作成したプロジェクトフォルダをLocationに設定。

とりあえずRunでyarn devが走って欲しいので、右上のAdd Configuration...からRunの設定を追加。
設定するのは

  • Scripts: dev
  • Package manager: yarn

のとこだけ。設定できたらとりあえず動かしてみる。

とりあえずこれでOK。

WebStormのESLint(Prettier)の設定

この辺を参照。

qiita.com

メニューのPreference → Tools → File Watchers から追加します。
一覧の左下のプラスマークから追加しますが、「Prettier」という設定があるのでそこから修正するのが早いかもしれません。
一応自分はJavaScriptとTypeScriptとVueファイルの3種類のファイルウォッチャーを追加しました。

ESLintの設定

上でファイルウォッチャーとか登録すると、yarn generateするとえぐいことになるので.eslintignoreを設定しておきます。
任意ですが、たぶん.nuxtdistnode_modulesあたりを避けておけば問題無いと思います。

.nuxt/
dist/
node_modules/

ディレクトリを変更する

Dockerとか使い出すとプロジェクトルートがぐちゃぐちゃになるので、Vueのファイル群は別の所に変更します。
srcディレクトリを作成して移動します。

mkdir src
mv assets components layouts middleware pages plugins static store ./src

ついでにREADME.md群を消去

find ./src -name README.md -type f | xargs rm -f

このままでは動かないのでnuxt.config.jsを変更。

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
+  srcDir: 'src',
  head: {

...

srcDir: 'src',を追加

とりあえずここでもyarn devを走らせておく。

とりあえずSSR(サーバーサイドレンダリング)の生成できるか試す

後から「なんかgenerateできへんねんけど・・・」とならないためにSSRを視野に入れてるならこの辺もやっとく。
特に設定変更していなければyarn generateで生成できるはず。

yarn buildが通るかもチェックしとくといいかも(基本的にyarn generateが通れば通る?)

ESLintのホットリロード

公式にも書いてあるとおり、ESLintをホットリロードできるようにしておきます。

環境変数とかの設定

dotenv入れるかどうか問題みたいなのもあるみたいなのですが、とりあえず現段階では導入してみたいと思います。
yarn add @nuxtjs/dotenvでモジュールを追加しておきます。

.envファイルを作成して設定したい環境変数をいれときます。とりあえずFirebaseを使う事が多いのでGOOGLE_APPLICATION_CREDENTIALSを設定したい場合は

GOOGLE_APPLICATION_CREDENTIALS = key.json

と書いておき、nuxt.config.js

require('dotenv').config()
...
  modules: [
    ...
    '@nuxtjs/eslint-module',
    '@nuxtjs/dotenv'
  ],
  env: {
    GOOGLE_APPLICATION_CREDENTIALS: process.env.GOOGLE_APPLICATION_CREDENTIALS,
  },

としておきます。ファイル頭のrequire('dotenv').config()ですが、ECMAScriptっぽくかくなら

import dotenv from 'dotenv'
dotenv.config()

ともできるっぽいですが、2行になるしどちらが美しいかは分かりません・・・

今後別の環境変数を追加する際は、.envファイルとnuxt.confi.jsの両方をいじることになると思います。

環境変数を切り替えるケースであれば、.envファイルを二つ使って実行することもできるそうです。

blog.ikedaosushi.com

gitの設定

何はともあれgitで管理しておいた方がいいのは間違いありません。
とりあえずデフォルトでgitは設定されているので、コミット+プッシュしておきましょう。

CircleCIの設定

Jestを導入したという事はできればテストは自動でやって貰いたいものです。
CircleCIの設定ファイルを追加しておきます。

これであとはGitHubにCircleCIへのWebhookを追加しておけばdevelopブランチへのコミットで自動テストしてくれます。たぶん。

追加するかもしれないこと(メモ)

routerのbaseを指定(環境変数

faviconなどhead周りの設定

PWAの設定(最初に選んでればやらなくていい?)

Nuxt.jsでESLint(Prettier)が使いたいけどよくわかんなくなったのでまとめた

f:id:ysmn_deus:20190810104633p:plain

こんにちは、靖宗です。
特にチームでのJavaScript案件はやってないんですが、チームじゃなくてもESLintを導入するべきなんじゃないかと感じ、導入してみることにしました。
とはいえよくわかんないので記事にしながら学習します。
とりあえず今回はTypeScriptを対象としていません。別の記事にまとめます。

ESLint

ESLintとは?

ESLintは2013年の6月にNicholas C. Zakasさん(オライリーの「ハイパフォーマンスJavaScript」などの著者)によって作られたツールです。
実行前にJavaScriptソースコードを解析するもので、基本的な間違いを検出するだけでなく、フォーマット(セミコロンの有無など)も検出して指摘してくれます。
まさにチーム開発では重宝されるツールでしょう。

他に似たツールにJSLintなどがあったのですが、最近ではあまり聞かなくなりました。
基本的にはESLint一択なんでしょう。

導入方法

使うプロジェクトでnpmかyarnでインストールすれば良さげです。

npm install eslint --save-dev

or

yarn add -D eslint

設定ファイルを作らなければただ容量を食ってるだけの代物ですが、基本準備はこれだけです。
ただ、今回はNuxt.jsで使う想定なので、nuxtのプロジェクトを作成しながら設定していきたいと思います。

Nuxt.jsのプロジェクトを作成する

まずはコマンドでnuxtのプロジェクトを作成します。

yarn create nuxt-app eslint-test

プロジェクト名はeslint-testとしました。

...
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)

nuxtのウィザードに従ってESlintとPrettierを有効にしました。
Jestまで色々書くか微妙ですが、とりあえず導入しておきます。

.eslintrc(ESLintの設定ファイル)の作成

.eslintrcを作成します。
この設定ファイルは6種類の記述手段があるらしく

  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

というファイルに記述することができるそうです。
package.jsonに記述する方法はファイルが少なくて済むんですが、煩雑になるので避けた方が良いのでは?と思います。
nuxtなどで用意すると.eslintrc.jsが勝手に生成されるので、基本これで行きます。

ちなみに一番最初に書かれている中身がこれ

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
  plugins: [
    'prettier'
  ],
  // add your custom rules here
  rules: {
  }
}

とりあえず詳細は後回しにするとして、設定ファイルはcreate nuxt-appで用意すれば既に生成されています。

ESLintの実行

試しにstore/index.jsを生成して適当な事を書いてみます。

function helloWorld() {
  console.log('hello!')
}

helloWorld();

ESLintをコマンドから実行してみます。
ESLintは

eslint [JavaScriptファイル名]

で実行可能です。
プロジェクトのルートフォルダで

node_modules/.bin/eslint store/index.js

を実行します。

プロジェクトのパス/eslint-test/store/index.js
  5:13  error  Delete `;`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

prettier/prettierのルールでセミコロンが着いてる!しばくぞ!と怒られています。どうやらprettierの方ではデフォルトでセミコロンは悪役の様です。
こういったフォーマットの規約などをチェックするのがESLintの役割です。

--fix

ちなみにエラー分を見ると「1 error and 0 warnings potentially fixable with the --fix option.」とあります。こういう場合は

node_modules/.bin/eslint store/index.js --fix

と実行すると、該当箇所を良い感じに修正してくれます。
ただし、後述するようにこの辺は全部Prettierに任せようと思います。
(とは言っても実行されるコマンドは同じみたいですが)

ESLintの設定ファイル

ここでようやくESLintの設定ファイルに関して見ていきましょう。

ルールの追加(rules)

ESLintのルールを追加するには設定ファイルに追記していきます。
細かい設定は.eslintrc.jsrulesに記載します。

...
    "rules": {
        "semi": ["error", "always"]
    }

設定項目はESLintの公式サイトや諸先輩方の設定ファイルを参考にさせて貰うとして、基本的には
設定項目: [設定のオンオフ, オプションの値]
という構成になります。設定のオンオフはerror(あったらエラーを送出する), warn(警告だけする), off(無視)が設定できます。
オプションは設定項目で色々ですが、例えばsemiではalwaysにすると「無いと怒る」、neverにすると「あると怒る」といった感じです。

ルートの指定(root)

nuxtのウィザードでESLintの設定ファイルを生成するとrootという設定項目があります。
これは「プロジェクトルートがここなので、これ以上親の階層は気にしなくて良い」という設定のようです。
ESLintは階層ごとに配置することもできるそうなので(たぶんそんなに頻繁にすることはない)、どこまで親をたどるのか明確にするときに設定するのでしょう。
基本そのままで大丈夫そうです。

環境の設定(env)

初期設定ではbrowsernodeがtrueになっていると思います。
スクリプト実行環境を指定出来るオプションのようで、ブラウザとNode.jsで実行されることを想定しています。
基本このままでも大丈夫そうですが、念のためes6jestを追加しておきます。

...
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true
  },
...

parserOptionsの設定(parserOptions)

上記でes6を追加しましたが、それだけではimport文などのES Moduleの機能までチェックできないようです。
そこで、設定ファイルの項目parserOptionsを設定していきます。

...
  parserOptions: {
    "sourceType": "module"
  },  
...

parserOptionsの項目に"sourceType": "module"を追加します。
これでES6に対応したはずです。

また、デフォルトではbabel-eslintが設定されていますが、いろんな設定を付加してくれる反面いろいろありすぎて推奨されない見方もあるそうなので、個人的な判断ですが削除します。
ちなみに、たぶんなんですがbabel-eslintを設定しておけばes6の記述と上記のmoduleの記述は不要になると思います。お好きな方をどうぞ。

ついでにJSXもチェックできるようにしておきます。

...
  parserOptions: {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
...

nuxtなんであんま使わないと思いますが。

拡張ルールセット(extends)

ライブラリなど既に定義されているルールを取り込みたい時があります。むしろそれだけで事足りる事が多いんじゃないでしょうか?
そういうときの設定項目としてextendsがあります。nuxtのデフォルトでは何種類か指定されていると思います。

基本的な流れとしては

  • npmかyarnでルールを追加する
  • "extends"に追記する

といった感じです。楽勝ですね。
試しにかの有名なairbnbのルールを適応してみます。パッケージはeslint-config-airbnb-baseです。

yarn add -D eslint-config-airbnb-base

お次にeslintrcに追記。

...
  extends: [
    'airbnb-base',
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
...

一番上に追記したのは、'plugin:prettier/recommended'の設定が後ろに回さないとうまく動かない事があるという噂を聞いたことがあるからです。
この噂に従い、基本的に後から追加したものは上から順に追記していきます。(ここは曖昧なので気になる方は調べて下さい。)

プラグイン(plugins)

先ほどのextendsのなかにplugin:prettier/recommendedなどplugin:で始まるものがあります。
これらはpluginsの項目で設定したプラグインの推奨設定で、プラグインを導入すると使えるルールだそうです。
全部extendsでどうにかならんの?という気がしないでもないんですが、おそらく内部構造的にプラグインとして別途読み込まなければならないルール(たとえば、上記のES6なんかはES Moduleの為にparserOptionsが必要になったのは内部構造によるもの)の際にはpluginに追記する必要があるんでしょう。
このへんは導入するルールによるものかと思います。その都度確認しましょう。

今回はnuxtの為に導入しているので、vueのルールを追加します。
なんでデフォルトで入らないか謎ですが、追加で加えていきます。

yarn add -D eslint-loader eslint-plugin-vue

大体セットでeslint-loaderも追加してるんですが、ホットリロードの為だと思います。
設定ファイルを書き換えます。

...
  extends: [
    'airbnb-base',
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: [
    'vue',
    'prettier'
  ],
...

'plugin:vue/recommended'を追加したついでに'eslint:recommended'も追加しました。

ESLintの設定はだいたいこんなもんで良さそうです。

Prettier

PrettierはESLintと併用されることの多いソースコードを整形してくれるツールです。
要するにeslint --fixのつよいバージョンといったところでしょうか。
eslintだけでもええやん!て気もするんですが、どうも整形機能としてはPrettierの方が優れているらしく、併用するひとが多いイメージです。
冗長なのが嫌いな方は別に導入しなくても良いと思います。(チェック自体はESLintがやってくれるので)

導入方法

nuxtのウィザードで導入すると設定は既に完了しています。
後から導入する場合はeslint-config-prettiereslint-plugin-prettierをyarnかnpmでインストールすれば大丈夫だと思います。
設定に関しては

...
  extends: [
...
    'prettier',
    'prettier/vue',
...
    'plugin:prettier/recommended'
  ],
  plugins: [
...
    'prettier'
  ],
...

が該当します。

Prettierのルール

Prettierはあくまで補助ツールなので、全ての構文チェックなどはしていません。
イメージとしてはESLintの苦手な整形部分"だけ"を担当しているツールという認識が正しそうです。
なので、extendsの'plugin:prettier/recommended'を一番最後に持ってこないとPrettierで整形したあとにESLintで怒られる構文になったりするので、必ずこの設定は最後に書きましょう。

また、prettierの設定はESLintのrulesに記載することができ、

...
  rules: {
    "prettier/prettier": [
      "error",
      {
        "semi": true
      }
    ]
  }
...

と書くことで、ESLintでセミコロン無しを警告するし、Prettierでコードフォーマットする際にセミコロンを追加したりできます。
基本的にESLintでもPrettierでも指定出来る設定はPrettierで設定するのが良さそうです。(どうせ上書きされるので)
Prettierで指定出来るオプションは下記の通りです。

prettier.io

その他

大体上記までで設定などは完了なのですが、ESLintやPrettierはファイルウォッチャーなどで「保存したら勝手に整形する」といった設定が望ましいです。(いちいちコマンド実行するのはめんどい)
nuxt公式のホットリロードを設定しておけばローカルでサーバーを動かしている際にチェックできるのでそれで良いと思いますが、気になる方はお使いのIDEのファイルウォッチャーにeslintのコマンドを登録するのをお勧めします。

参考

eslint.org prettier.io qiita.com qiita.com qiita.com yokotakenji.me

YouTube Data API (v3)でOAuthを使ってAPIを使う準備 その1

どうも、靖宗です。

最近YouTubeAPIを触ることがあってメモ代わりに記事にします。
OAuthあたりはよく忘れるので・・・

オープンな情報ならAPI Keyを作成するだけで簡単なのですが、ユーザーに紐付いた操作などをする場合はOAuthの認証が必要です。
今回はAPI Keyの方は言及しませんがもしかしたらそのうち書くかも。

Google Cloud Platformで下準備

まずはGoogle Cloud Platform(GCP)のダッシュボードからプロジェクトを作成し、その元にアプリケーションを登録します。

console.cloud.google.com

アクセスするとログイン画面がでるので、APIで操作したいアカウントでログインします。

f:id:ysmn_deus:20190408112851p:plain

プロジェクト作成

プロジェクト毎に認証情報は異なる方が都合が良いのでプロジェクトを作成します。
左上の「プロジェクトの選択」から作成します。

f:id:ysmn_deus:20190408212505p:plain

f:id:ysmn_deus:20190408212642p:plain

f:id:ysmn_deus:20190408213001p:plain

プロジェクト名は各自好きに設定して下さい。

「作成」というボタンを押すと、ダッシュボードに戻されて右上でなんか進みます。
暫くすると「プロジェクト「○○」を作成」と表示されればプロジェクトの作成が完了していると思います。

OAuthクライアント

お次にアプリケーションの登録を行います。
左上のメニューマークから

f:id:ysmn_deus:20190408213445p:plain

f:id:ysmn_deus:20190408213602p:plain

APIとサービス」→「認証情報」を選択します。
プロジェクトが選択されてないと「このページを表示するには、プロジェクトを選択してください。」という表示が出ると思うので、右上の「プロジェクトの選択」から先ほど作成したプロジェクトを選択します。

f:id:ysmn_deus:20190408213847p:plain

プロジェクトが選択されていれば、「認証情報」という窓が表示されていると思うので、認証情報を作成していきます。

f:id:ysmn_deus:20190408214020p:plain

今回はOAuthを利用するのでOAuthクライアントIDを選択します。

f:id:ysmn_deus:20190408214059p:plain

同意画面の設定

進むと「OAuth クライアント ID を作成するには、まず同意画面でサービス名を設定する必要があります。」と警告されていると思います。
ユーザーがOAuthを利用する際に「承認しますか?」と聞かれるページに表示されている情報を設定して下さいという意図です。確かにそれがないと始まらない。
同意画面の設定ボタンを押して設定しときます。

f:id:ysmn_deus:20190408214314p:plain

設定画面が表示されますので、必要な情報を入力します。
とりあえず動かしたいって方はおそらく

  • アプリケーション名
  • サポートメール

だけ設定しておけばローカル環境では動きそうです。
もしサービスを運用するドメイン(URL)なども決まっている場合は「承認済みドメイン」の箇所を設定しておいて下さい。
たぶんここを設定してないとなにがしかのトラブルに巻き込まれます(不正な認証情報だとか云々?しらんけど)。
実際にOAuthを利用するサービスにする場合はちゃんとポリシーなんかのアドレスも設定して下さい。

f:id:ysmn_deus:20190408214903p:plain

設定できたら「保存」を押して同意画面の設定を完了します。

f:id:ysmn_deus:20190408215016p:plain

クライアントIDの作成

同意画面の設定を完了できればようやくクライアントIDの発行ができます。

f:id:ysmn_deus:20190408215210p:plain

今回はWebアプリケーションを想定して一番上の「ウェブアプリケーション」を選択します。

承認済みのJavaScript生成元

ちょっと画像に入れ忘れてたんですが、ローカル環境で開発する際は「承認済みのJavaScript生成元」に"http://localhost"や"http://127.0.0.1:8000"などを設定しておかないとGoogleにはじかれます。

承認済みのリダイレクト URI

また、認証情報を取得してそのまま情報をアプリケーションのDBに格納したいというケースも考えられますが、そういった際にリダイレクトされるURL(URI)を「承認済みのリダイレクト URI」に設定しておきます。
例えば、承認済みのリダイレクト URIを"http://localhost/oauth/"に設定しておくと、OAuthの認証が終わった後に"http://localhost/oauth/?code=xxxxxxxxxxxxxx"へリダイレクトされます。
これを利用してアプリケーションは"アプリケーションのURL/oauth/?code=[認証トークン]"というルーティングに処理を書いておくことで認証トークンを取得することができます。

あとはYouTube Data APIを有効にするだけなんですが、別記事に記載します。

Windows 10 Home (64bit)でDockerの環境を構築する

どうも、靖宗です。
Docker for Windowsが出現してからWindowsでDockerを利用するのが簡単になりました。
とはいえ自分の利用しているWindowsがHomeでDocker for Windowsが利用できない人もいるんじゃないでしょうか?ぼくもその一人です。
(アップグレードしろよという突っ込みは受け付けません)
どうやら広大なネットの海で調べたところ、Windows 10 HomeではDocker Toolboxで一応動かせるようなので、そちらのセットアップをしていきたいと思います。

基本的に下記の記事を参考にさせていただきました。

qiita.com

インストーラーを手に入れる

なんてことないのですが、Docker公式としてはあまりToolboxの方を利用して欲しくないのか分かりにくい所にインストーラーがある気がします。
DockerToolboxのリリース一覧から取得しろとのことです。

github.com

f:id:ysmn_deus:20190805123509p:plain
ここ

今回は「18.09.3」というバージョンをダウンロードしましたが、未来にこの記事を見ている人はより新しいバージョンのインストーラーがあると思います。
(上から見てって「Assets」というところにexeファイルがあるのを選んで下さい。) ダウンロードできたら基本的にはインストーラーに従って進めて行きます。

インストール

f:id:ysmn_deus:20190805123824p:plain

自分はこんなかんじですが、Gitがインストールされてない方などはチェックボックスがついてそうです。
要らないことないのでインストールしておくことをお勧めします。

f:id:ysmn_deus:20190805123936p:plain

自分はデスクトップが汚れるのは許せないので「Create a desktop shortcut」はチェックを外しておきます。
この辺はご自由にどうぞ。

DockerToolboxを起動

最後まで順調に進めば「Docker Quickstart Terminal」というショートカットが表示されると思います。
ダブルクリックで起動!

無事くじらAAが表示されればセットアップは完了です。

f:id:ysmn_deus:20190805124639p:plain

試しにコンテナを起動してみる

試しにニンジンXのコンテナを起動してみます。
Dockerの基本的な利用方法については割愛しますが、nginxというコンテナを起動します。

docker run --name ninjin -d -p 8080:80 nginx

f:id:ysmn_deus:20190805125219p:plain

基本的にインストールし終わってパスが通ってる状態であればDocker Quickstart Terminalのコンソールからコマンドを打たなくてもPowerShellやcmd.exeでdockerコマンドが通ると思います。

VirtualBox上のVMのポートフォワーディング

Docker for Windowsならたぶんここでブラウザに「http://localhost:8080」でnginxが表示されると思うのですが、今回はDockerToolboxを利用しているのでもう一手間要ります。
VirtualBoxに「default」という仮想マシンが作成されていると思いますが(環境によっては変わる?)、このVM上でDockerが動いています。

f:id:ysmn_deus:20190805131139p:plain

なので普通にコンテナを起動すると、ポートフォワーディングはdefaultという仮想マシンへ渡されます。
なので、なにも設定していないとWindows側からは見れません。

f:id:ysmn_deus:20190805131813p:plain

今回はnginxをdefaultというVMには8080に渡しているので、defaultからWindowsへ8080に渡す設定を追加します。
VirtualBox仮想マシンなのでVirtualBoxで設定します。

f:id:ysmn_deus:20190805132007p:plain

f:id:ysmn_deus:20190805132023p:plain

f:id:ysmn_deus:20190805132037p:plain

defaultのポートフォワーディングが設定できれば、Windowsのブラウザ上からもnginxへとアクセスできるようになります。

f:id:ysmn_deus:20190805132127p:plain

ブラウザ上で「localhost:8080」にアクセスすれば、nginxのデフォルト表記が確認できると思います。

f:id:ysmn_deus:20190805132202p:plain

FusionPCBで基板製作+部品実装(PCB+PCBA)を発注する一連の流れまとめ

f:id:ysmn_deus:20190612190424p:plain

どうも、靖宗です。
FusionPCBで基板製作から部品調達+部品実装までしてもらって楽しようという記事です。
防備録としての意味合いも込めて記事にしておきます。
部品を国内から送る方法は需要があれば別途記事にします。
※2019/06/12 現在のまとめです。ちょいちょい変わったりすると思うので、お気を付けて。
※2019/06/13 追記

準備

Gerberデータ作成

一応基板の設計は終わってるものとします。
Gerberデータの作成方法はFusionPCB公式サイトで詳しく記載がありますのでそちらをご覧下さい。
デザインルールなどをチェックするのをお忘れなく。

BOMデータ作成

基板のみ作りたいって人はこの項目を飛ばして貰って構いません。
実装の際に部品表が必要になりますので、そちらを作成していきます。
部品表のテンプレートがあるので、そちらをダウンロードして作成してください。
(リンク切れの場合はFusionPCBのサイトから直接ダウンロードしてください。)

Eagleを使っている方はPartlistなどを出力して部品表を作成するのが良いと思います。
一応PartlistからBOMの基礎となるデータを出力するPythonスクリプトを置いておきますので自己責任でご利用ください。

https://www.axfc.net/u/3985652&key=deus

実装情報(任意)

※この項目は現在調査中ですので参考程度でお願いします。

実装図などをアップロードできるようになったみたいなので、この辺の情報があるとFusionPCBの人達は楽かも。
連絡回数を少なくして迅速に実装してもらうなら準備しておいた方が良いかもしれません。
Eagleで回路を設計しているなら

  • ボード図(PDF, brdを印刷→PDFなどで対応、もしくはImageなど?)
  • 配置情報(Partlist)

ぐらいあると丁寧かも。

見積

Gerberデータアップロード

GerberデータとBOMデータができていればウェブ上から見積がすぐ取れます。
FusionPCBのPCBのページからGerberデータをアップロードします。

f:id:ysmn_deus:20190612184109p:plain

アップロードできれば、念のためガーバービューアで閲覧しておく事をオススメします。

f:id:ysmn_deus:20190612184350p:plain

基板の作成枚数が10以外の場合はパラメータのところで変更してください。

BOMデータアップロード

各パラメータを入力し終えたら「実装サービス」という欄をクリックし、実装情報やBOMデータなどをアップロードします。
実装枚数が10以外の場合は、「実装枚数」と書かれた箇所を変更してください。

f:id:ysmn_deus:20190612184654p:plain

BOMデータが問題無くアップロードできれば見積が完了します。

f:id:ysmn_deus:20190612185028p:plain

もしFusionPCB側でウェブ見積できない部品(実装実績がない部品)があれば、部品見積の一番上に表示が出てきますので、部品を調達するために必要な情報を「購入リンク」から入力しましょう。だいたいDigiKeyにある部品なら調達してくれるのでDigiKeyのリンクを張っておけば問題無いかと思います。

f:id:ysmn_deus:20190612185621p:plain

部品を国内から送るとき

この場合はカスタマーサポートへの連絡が必須です。
(調達価格と実装価格が変わるので、特殊なBOMを作って貰うのにメールでのやりとりが必要です。)
迅速丁寧に対応して貰えるので恐れずに fusion.jp@seeed.cc へ連絡を送りましょう。
この辺はまた別途詳細をまとめます。

カートに入れる+購入手続き

上記までが問題無く終わっていれば上部に価格が反映されているので、「カートに追加」ボタンでカートに追加します。
カートに追加した以降は、日本語で案内がでているので大丈夫だと思います。
PayPal支払とクレジットカード支払が使えたと思います。)

決済後

担当者とのやりとり

購入手続きが完了すると、担当者から連絡があると思います。
日本語で丁寧に対応してくださるので、指示に従って必要な追加データや修正点などあればメールベースでやりとりすることになります。

納期

おおよそ25日前後と考えておいた方が良さそうです。
これは勝手なイメージですが、おおよそ基板製造に2営業日程度、実装に3営業日程度なのですが、部品調達にどうしても時間がかかっている(税関などの影響?最近は厳しいみたいです)ようです。
なので、もし実装を急いでいる場合は事前に部品を調達しておいて、国内から部品を発送したほうが実装期間の短縮には繋がるかもしれません。その分手間は増えますが。
部品を送付する際の手順はまた気が向けば。