20210122のvue.jsに関する記事は2件です。

投稿日：2021-01-22T16:12:40+09:00

vue-element-adminにPrettierを導入する

vue-element-adminにPrettierを導入して、ESLintと競合しないようにするメモです。

環境

MacOS Big Sur

Node.js 14.15.1

npm 6.14.8

やりたいこと

保存時にPrettierで整形できるようにする

PrettierとESLintの整形が競合しないようにする

方針

現在推奨されているのは、eslint-config-prettierでESLintのフォーマットに関するルールをオフにして、ESLintとPrettierを個別に実行する方法のようなので、その方針でやります。

手順

Prettierの導入

Prettierの設定をESLintに寄せる

Prettierとの競合をチェックして、ESLintのフォーマットルールをオフにする

1. Prettierの導入
terminal
npm install prettier
インストールしたら、VSCodeのPrettierの拡張機能をインストールして、setting.jsonに以下を追記します。
setting.json
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
    },
    "[css]":{
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}
これでファイル保存時にPrettierでフォーマット出来るようになると思います。

2. Prettierの設定をvue-element-adminのESLintの設定に寄せる

既に存在するファイルに合わせるために、ひとまずPrettierの設定をvue-element-adminのESLintの設定に寄せることにします。

まず、プロジェクトルートに.prettierrc.jsを作成して、以下を追記します。
.prettierrc.js
module.exports = {
  singleQuote: true,
  semi: false,
  arrowParens: 'always',
  trailingComma: 'none',
  printWidth: 100
}
上の4つの設定はESLintに寄せるための設定です。printWidthに関しては、デフォルトでは80なのですが、80だと（特にVueのテンプレートが）縦に長くなって読みづらかったので100にしました。

この設定を

src/store/modules/user.js

src/views/login/index.vue

の２つで試してみると、JSファイルに関しては競合しませんでしたが、Vueファイルは少し競合していました。

Vueファイルで競合している箇所には、
// prettier後
<el-button
    :loading="loading"
    type="primary"
    style="width: 100%; margin-bottom: 30px"
    @click.native.prevent="handleLogin"
    >Login</el-button
>
// ESLint後
<el-button
    :loading="loading"
    type="primary"
    style="width: 100%; margin-bottom: 30px"
    @click.native.prevent="handleLogin"
>Login</el-button>
のようなところがありますが、これは以下のようにすると解決します（prettierが折り返すときに上手くいかないようです）。
// こうすると競合しなくなる
<el-button
  :loading="loading"
  type="primary"
  style="width: 100%; margin-bottom: 30px"
  @click.native.prevent="handleLogin"
>
  Login
</el-button>
他の競合箇所は次の章で直すことにします。

3. Prettierとの競合をチェックして、ESLintのフォーマットルールをオフにする

ESLintにはフォーマットをさせない方針なので、ESLintからフォーマットに関するルールを削除します。eslint-config-prettierをextendすればフォーマットのルールをオフに出来るのですが、extendsよりrulesが優先されるようなので、結局rulesを消す必要があります。

まずはeslint-config-prettierを導入します。eslint-config-prettier
terminal
npm install --save-dev eslint-config-prettier
.eslintrc.js
module.exports = {
  extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier'], // prettierを追記
}
次にPrettierとの競合をチェックして、フォーマットに関するルールを消します。以下のコマンドでPrettierとの競合をチェックすることが出来ます(eslint >= 7.0が必要なようなのでアップデートします)。
terminal
npx eslint-config-prettier src/views/login/index.vue
実行結果
❯ npx eslint-config-prettier src/views/login/index.vue 
npx: installed 1 in 1.424s
The following rules are unnecessary or might conflict with Prettier:

- array-bracket-spacing
- arrow-spacing
- block-spacing
- brace-style
- comma-dangle
- comma-spacing
- comma-style
- dot-location
- eol-last
- generator-star-spacing
- indent
- jsx-quotes
- key-spacing
- keyword-spacing
- new-parens
- no-extra-parens
- no-extra-semi
- no-floating-decimal
- no-mixed-spaces-and-tabs
- no-multi-spaces
- no-multiple-empty-lines
- no-spaced-func
- no-trailing-spaces
- no-whitespace-before-property
- object-curly-spacing
- operator-linebreak
- padded-blocks
- semi
- semi-spacing
- space-before-blocks
- space-before-function-paren
- space-in-parens
- space-infix-ops
- space-unary-ops
- template-curly-spacing
- vue/html-closing-bracket-newline
- vue/html-closing-bracket-spacing
- vue/html-end-tags
- vue/html-indent
- vue/html-quotes
- vue/max-attributes-per-line
- vue/mustache-interpolation-spacing
- vue/no-multi-spaces
- vue/no-spaces-around-equal-signs-in-attribute
- wrap-iife
- yield-star-spacing

The following rules are enabled with config that might conflict with Prettier. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- curly
- vue/html-self-closing

The following rules are enabled but cannot be automatically checked. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- no-unexpected-multiline
- quotes
1番上のグループは不要そうなので、該当するルールがeslintrcにあれば消します。vueに関するルールは残しておきました（max-attributes-per-lineを消すと縦に長くなってしまったため）。

該当するルールを消してもう一度チェックすると以下のようになりました。
❯ npx eslint-config-prettier src/views/login/index.vue
The following rules are unnecessary or might conflict with Prettier:

- vue/html-closing-bracket-newline
- vue/html-closing-bracket-spacing
- vue/html-end-tags
- vue/html-indent
- vue/html-quotes
- vue/max-attributes-per-line
- vue/mustache-interpolation-spacing
- vue/no-multi-spaces
- vue/no-spaces-around-equal-signs-in-attribute

The following rules are enabled with config that might conflict with Prettier. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- curly
- vue/html-self-closing

The following rules are enabled but cannot be automatically checked. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- no-unexpected-multiline
- quotes
とりあえずこれで良しとします。

あとはbrタグが競合していたので、rulesに以下を追記して直しました。参考
.eslintrc.js
module.exports = {
  rules: {
    "vue/html-self-closing": [2, {
      "html": {
        "void": 'always',
      }
    }],
}
これでprettierとESLintの競合が（ほぼ）起きなくなりました。あとはコミット前にprettierを実行するようにpackage.jsonに追記します。
package.json
{
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "prettier --write", // 追記
      "eslint --fix",
      "git add"
    ]
  }
}
以上です。ESLintからフォーマットに関するルールを完全に消そうと思うと、extendsしているルールを見る必要がありそうですが、とりあえずこれで良しとします。

Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング
 ESLintのRulesのドキュメント

感想

Prettierはガチガチに整形してくれるイメージがありましたが、整形結果が一意では無いことを知りました。Prettierを使うとVueのスタイルガイドに添えないところが少し出てくるのかなぁと思いました。

参考

Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-22T11:07:11+09:00

ブログラミング学習サイトDonblerに有料レッスンを投稿してみた

ブログラミング学習サイトDonbler

2021年1月にリリースされたDonblerというサービスが気になっている。このサイトどうやらエディタを内臓(Progateのような？)していてサイト内で完結するらしい。
Progateとなにが違うのか検証してみたところレッスンは公式ではなくユーザが投稿できてさらに有料にもできる仕様らしい。この点はUdemyと似ているがUdemyは動画のレッスンに対してDonblerはテキストベースのレッスンである。これはエンジニアにとっては嬉しい仕様なのではないだろうか。
今回はProgateとUdemyの融合体であるDonblerに試しに有料レッスンを投稿してみることにする。

今回投稿したレッスンのリンクを貼っておきます！興味のある方は買ってみてください！
VUEで使える様々なライブラリ紹介

投稿方法

Donblerのレッスンの投稿方法は公式のnotionに書いてある。以下リンク。
Donbler公式Creator Wiki | レッスン投稿手順
こちらにある通り進めてみる。

1.テンプレートダウンロード

https://github.com/donbler/lesson-template/releases
公式wikiにある上記URLから好みのテンプレートをダウンロードする。
テンプレートは2種類あるが内容は変わらないので自分の環境にあった方をダンウンロードした方がいいと思われる。

2.投稿可能なレッスンの種類

現在Donblerでは以下3種類のレッスンが投稿できるそう

HTML/CSS

JS

PHP

今回はこの中からHTML/CSS、JSを選んでVUEのライブラリを紹介するレッスンを作ってみる

3.setting.ymlの編集

setting.ymlでは

タイトル

詳細

ターゲット

各チャプターのタイトル

の4つを設定する。
ymlファイルなのでとても編集しやすかった。
また、文字数はどれくらいいけるのか気になったので検証してみたがタイトルは100文字程度らしい。
以下実際に投稿したsetting.ymlである
setting.yml
# レッスンのタイトルを入力してください
title: vueで使える様々なライブラリ紹介
# レッスンの説明を入力してください
description: |-
  このレッスンではvueで使えるライブラリを紹介しています！チャプター1ではvueの導入、そのあとのチャプターから様々なライブラリを紹介していきます！
  vueを触ったことがない人でも気軽に扱える内容になっています！ぜひ受講してしみてください！
# レッスンの対象ユーザーを入力してください
target: |-
  JavaScript初心者やフレームワークに興味がある人
# チャプターのタイトルを入力してください
chapter:
  - VUEを導入してみよう！
  - vue-scroll-toで美しいページ内リンク！
  - vue-social-shareingでSNSの人気者！
  - vue-selectで簡単にセレクトボックス！
4.実際にレッスンを作る

ここからは実際にレッスンの中身を作っていく。
公式では

markdown

サムネイル

ソースコード

の順になっているが個人的には

ソースコード

markdown

サムネイル

の手順の方が自分にはあっているのかなと感じたので後者の手順で解説していく。

4-1.ソースコード

自分が選択したテンプレートのHTML/JS/CSSにおいて少し注意することがあった。
普段ならHTMLにJSやCSSを不紐付ける必要があるがDonblerの場合それが不要らしい。投稿時かレッスンの実行時かに補正してくれているのであろう。

少し不安だったのがCDNでのライブラリやフレームワークが使えるかどうかである。vueを使うにはnpmかyarnが主流だと思われるがDonblerではそれが使えない。となると残るはCDNである。
結果からいうとなんの問題もなくvueを導入することができた。これはなかなか拡張性があるのではないだろうか。

また、当レッスンではvueの導入方法とライブラリ3種類の説明をしたレッスンを作成した。この時少しアドバイスがあるとすれば先ほども言った通りHTML/CSS/JSそれぞれリンクさせる必要はないと言ったが逆に編集しづらいという弱点もあった。しかし、これはレッスンの作成を投稿ページのプレビューでやってしまえばなんの問題もなくサクサク作ることができた。

最後にここが一番大事な要素だと思われるコメントアウトによるソースコード隠しである。
これはみていただいた方がよい。
var app = new Vue({// :cut
  el: '#app',// :cut
  data: {// :cut
    message: 'Hello Vue!'// :cut
  }// :cut
})// :cut
以上のようにコメントアウトに:cutと入れることで見本には表示されるが受講時には非表示になるので問題を作る時やユーザーに入力してほしい部分には積極的に使っていきたい。
注意点があるとしたら答えには表示されるので２重で表示されない工夫が必要になる。具体例をあげると
<div id="app">
    <button v-scroll-to="'#element'">ここから</button>
    <div id='element'>ここにスクロール</div>
  </div>
これは　vue-scroll-toを使う時のHTMLである。
この時ユーザーにはv-scroll-to="'#element'"だけをを入力してもらいたいがbuttonタグ丸ごと非表示にしてその下に見せておきたいコードを書くと答えで表示される時にダブって表示されるのであまりよろしくない。
この時は以下のように解決することができる
<button 
  v-scroll-to="'#element'" 
  >ここから</button>
<div id='element'>ここにスクロール</div>
上記のようにすることでピンポイントで非表示にすることができるようになる。

4-2.markdown

解説や問題等の作成は皆さまお馴染みmarkdownで作成することができる。この時気をつけることは特になかった。

4-3.サムネイル

サムネイルは登録しなくてもDonblerがデフォルトで設定してくれるらしいので無理して作る必要はなさそう。しかし、サムネイルはレッスンの購入数に直接影響があるので作れるのであれば作った方がいいと思われる。

5.有料レッスンの投稿

ここで有料レッスンの投稿手順について説明しておく。

5-1.有料レッスン投稿申請

有料レッスンを投稿するにはどうやら別サイトのアカウントを登録して審査を通す必要があった。
Donblerにログインした後、下記リンクから有料レッスン投稿申請が可能である。
https://donbler.com/userinfo/sales
この申請は個人情報を入力するくらいで特に難しい点はなかった。また、審査は入力後すぐに終わった。

5-2.振込講座登録

振込口座を登録するフォームを入力する必要がある。当たり前といえば当たり前である。ただ、ここもフォームに入力して登録さえしてしまえば良いだけなので問題はなかった。

有料レッスン申請から振込口座登録まで数分で終わった。
特につまるところもなく登録できるので有料レッスンを投稿する可能性がある人は登録しておいて損はないかもしれない

5-3.レッスン投稿

ここでやっと有料レッスンが投稿できる。
投稿ページは右上のアイコンからレッスンを投稿メニューを押すと飛べる。
ここにあるフォームでは

レッスンレベル

レッスンのカテゴリ

テンプレートのsetting.yml

価格設定

サムネイル

テンプレートのcontens

の6つである。

5-3-1.レッスンのレベル

このフォームではレッスンのレベルを選択することができる。
今回のレッスンは何も知識ない人でも受講できるレッスンなので初心者向けとする。

5-3-2.レッスンのカテゴリ

レッスンのカテゴリは3つあって

HTML/CSS

JS

PHP

の3つである。
当レッスンはHTML/CSS/JSなので今回のカテゴリはhtmlcssとjsの2つである

5-3-3.setting.yml

ここにはテンプレートで編集したsetting.ymlを投稿する。
何かしら問題があるときちんとエラーが出てくれるので助かる。

5-3-4.価格設定

今回一番大事な価格設定である。
今回は価格は1000円に設定し、無料枠の設定もできるようなので設定してみた。
無料枠はとりあえず最大数の3に設定した。

5-3-5.サムネイル

画像のサイズや比率の違いが気になって投稿してみたがどうやらきちんと整形してくれてるっぽい。
今回はフリー画像を使用した。

5-3-6.contens

これがないと話にならない！
ここではテンプレートのcontentsファイル丸ごとを選択して投稿する。
ファイルを選択した後、間違えたファイルを投稿した場合のためか再度チェックしてくれるのでOKを押す。

以上で投稿完了である。

今回のレッスンの投稿確認ページを参考に添付しておく。

6.レッスンの審査

どうやらDonblerにレッスンを投稿するには審査が必要らしい。
とりあえず審査が終わるまで待った後、無事公開された。

以上で有料レッスンの投稿の流れは終了である。

7.終わり

今回Doonblerにレッスンを投稿してみたが、受講者側に立って考えた時Udemyのように動画レッスンもいいが自分の場合動画を見るよりテキストの方が早く進めるので自分にとっては嬉しい。また、環境構築不要で買った瞬間勉強ができるので初心者にはオススメのプログラミング学習サイトになりそうである。今はリリース後ということもありレッスン数はあまり多くないが今後増えて行くのではないかと思う。
今後Donblerで生計を立てるような亡者が現れて来ると思うとワクワクしてきた筆者であった。

　 Tweet
Qiitaで続きを読む