taka1156の投稿 - Crieit

Nuxt.jsにlintを導入してみた

2020-09-07T14:22:14+09:00

動機

以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。

その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)

アドバイスなどは大歓迎です。

知識が増えたら随時更新します。

https://blog.taka1156.site

https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中

↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)

環境

mac OS Catalina
Node.js v12.16.1
npm v6.14.3
yarn v1.22.0

手順

これらをインストール
- eslint関連
  yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint
- stylelint関連
  yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier
- prettier
  yarn add prettier
※ なんでprettierを入れたか
eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
(逆にprettierは細かい命名規則や処理に関するエラーは出さない?)

設定ファイルを書く

.eslintrc.json

{
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier/vue"
    ],
    "plugins": [
        "vue"
    ],
    "env": {
        "jest": true,
        "browser": true,
        "es6": true,
        "node": true
    },
    "globals": {},
    "rules": {
        "camelcase": [2,{"properties": "always"}],
        "quotes": [2,"single", { "avoidEscape": true } ],
        "eqeqeq": [2, "always", {"null": "ignore"}],
        "prefer-const": 2,
        "vue/component-name-in-template-casing": "off",
        "vue/no-v-html": "off"
    }
}

.stylelintrc.json

{
    "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
    "rules": {
        "color-no-invalid-hex": true,
        "color-hex-case": "lower",
        "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
    }
}

.eslintignore, .stylelintignore
※ storybook-static、coverage は storybookやjestを導入していると生成されるファイル

# ビルドファイル
dist
storybook-static
coverage

# 設定、モジュール
.nuxt
.storybook
node_modules

.prtteirrc.json

{
    "printWidth": 85,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": true,
    "arrowParens": "avoid"
}

scriptsを追加

"scripts": {
    "lint-js": "eslint --ext .js,.vue .",
    "lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
    "lint-js:fix": "eslint --ext .js,.vue . --fix",
    "lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
    "lint:check": "yarn lint-js & yarn lint-style",
    "lint:fix": "yarn lint-js && yarn lint-style",
    ...
}

お好みでvscode設定を追加
保存時に勝手にlint処理が走るようになるので便利
(vscode/setting.jsonに記述)

{
    "comments": "保存時にeslint、stylelintを自動実行",
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
}

まとめ

eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。

また、eslintルールについても、気になるものがあればまとめてみようと思います。

electron-vueでマークダウンエディターを作ってみた。

2020-05-10T20:43:39+09:00

はい、タイトルのまんまです。

先ほど、オーディオプレイヤー作ってまたかと言われそうですが、とりあえず書いていきます。
(開発順的にはこっちが先)

完成品

フルスクリーンモード

環境

Mac Book Pro (Catalina)
Node.js(v12.16.1)
vue-cli(3系)

ドキュメント: electron-vue 日本語
 ドキュメント: electron

先ほどと変わってないですね(^^;

使用したモジュール

BootStrap4
markdown-it-vue
fs(Node.jsに最初から組み込まれている)

仕様など

プレビューと入力エリアのスクロール同期、保存済みファイルの(差分検知後10~20sの)
オートセーブなど、最低限マークダウンエディターに必要なものは、追加しました。

それに加えて、Ctrl + S などデスクトップアプリならではの、ショートカットも実装し、Qiitaのスライドモード(---や***でsplitしてスライド用の配列を作る)のようなものも作成しました。

また、デスクトップである利点を生かして、フルスクリーン表示で共有できたら良いと思いwebkitのフルスクリーンの処理について調べて、実装してみました。
(electronは、Chromiumベースなので、どのOSの特殊な処理でもWebKitだけカバー、もしくは、Chromeを想定して開発すればいいのも利点?)

振り返り

今後の改良では、使用者がトークンを設定して、QiitaやmicroCMSに気軽に投稿しやすくなる機能も作成したいと思っています。

また、fsモジュールの書き方が少し読みにくいので、もう少し、node.jsのコアな機能について学ぶ必要があると感じました。

その他、electronに触れたことで、細かいブラウザのレンダリングエンジンや、JavaScriptのエンジンなど、単なるウェブ開発を少し超えたところの歴史や文化にも興味を持てたのは良かったと思います。

最近だと、Chromium版のedgeなどでChromiumが使われる機会が増えているので、今後どんな発展をしていくか、またそれらに対してユーザー、エンジニアの両面の立場から関わって行けることに楽しさを感じている今日この頃です。

electron-vueでオーディオプレイヤーを作ってみた

2020-05-10T17:41:44+09:00

Electron-Vueについて

なにそれ

electronというフロントエンド技術で、デスクトップアプリを作れるフレームワークがあり
それをvueで記述してビルドできるようにしてくれたもの(+ cliによる雛形作成)

(electronが使われている例: Atom、VScode、SlackとDiscordのデスクトップ版など)

環境

Mac Book Pro (Catalina)
Node.js(v12.16.1)
vue-cli(3系)

ドキュメント: electron-vue 日本語
 ドキュメント: electron

始め方

vue init simulatedgreg/electron-vue　プロジェクト名
で対話形式で、勝手にプロジェクトが出来上がるので、src/renderer以下にゴリゴリとコンポーネントを書く。

※ 灰色はテストで使用した音源[DOVA-SYNDROME]

mainは、主にウィンドウ関連の設定や開発時のプレビューの設定などが入っている。
rendererが主にいじる部分で、vuex、vue-ruterなどは普通のvueと同じ感覚で書くことができる。

詰まったところ

multispinnerがメンテされてない(githubのセキュリティ警告を気にする人)
listrを使おう
こちらを~~パクッ~~参考に作ったものelectron-vue build設定

(※node-multispinnerは最後の更新が4~5年前になっている。)
Mac系でプレビューもビルドも失敗する。
index.ejsのif (!process.browser) {を
if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) {に書き換え

それ以外は、ドキュメント通りにやればプレビューが見れるはず?

オーディオプレイヤーについて

完成品

※現物のサイズはこちら

使用したモジュール

electron-vue
JsMediaTags

仕様など

基本的には、JavaScriptのAudioオブジェクトを利用して曲の再生、停止を制御しています。
アーティストや曲のアートワークは、JsMediaTagsというものを利用して、トラックが遷移するたびに、ファイルパスを渡して穿り出すという形にしています。
設定はLocalStrageを使用して行う予定(開発中)

反省

vuexの使い方も含めて、課題が色々残っていますが、electron、vue, electron-vueそれぞれのドキュメントを行ったり来たりしながら、自分なりに動けたところは、良かったかなと思っています。

最後に

今後もこまめに成果物を公開していくので、コメント、マサカリなど色々ください〜