
新しくNuxt.jsのプロジェクトを作成してから、`vue-loader`を使ってSCSSを導入するまでの手順です。公式にあるテンプレート利用しています。

SCSSとしていますがSassでも同様にできます。

## 環境

- Windows 10 Home
- Node.js v10.15.1
- npm 6.4.1
- yarn 1.15.2

Node.js / npm（ + yarn）の導入手順はこちらで紹介しています。
- [Windows](https://www.suzu6.net/posts/124-yarn-windows/)
- [Mac](https://www.suzu6.net/posts/45)
- [Ubuntu系](https://www.suzu6.net/posts/81-npm-install-ubuntu)

### 導入したもの

- node-sass: ^4.12.0
- nuxt: ^2.0.0
- sass-loader: ^7.1.0

## Nuxt.jsのプロジェクト作成

[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation)に従ってスターターテンプレートを使ってプロジェクトの作成を進めます。
個別にインストールしてスクラッチで作成することもできますが、`nuxt.config.js`の書き方など些細な点で悩むことが多いためテンプレートを使うことをお勧めします。

`<project-name>`は**sample**としておきます。

### create-nuxt-app を使用する

この項は[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation#nuxt-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)通りに進めて問題ないです。

```sh
# by npx
> npx create-nuxt-app sample

# by yarn
> yarn create nuxt-app sample
```

インストールが進み、sampleのフォルダが作成されました。
続いていくつか質問されます。
カーソルの位置のものを選択しています。
スタイルはスクラッチで開発する予定だったため、今回はUIフレームワークを使っていません。

```sh
? Project name (sample) # プロジェクト名は？
? Project description (My posh Nuxt.js project) # プロジェクト説明は？
? Author name (suzu6) # 制作者は？
# パッケージマネージャを選択
? Choose the package manager 
> Yarn
  Npm
# UI フレームワークを選択
? Choose UI framework (Use arrow keys) 
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
# サーバのフレームワークを選択
? Choose custom server framework (Use arrow keys) 
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# モジュールを選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support
# リントツールを選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
# テストのフレームワークを選択
? Choose test framework (Use arrow keys)
  None
> Jest
  AVA
# モードを選択（nuxt.configで変更可能）
? Choose rendering mode (Use arrow keys)
  Universal (SSR)
> Single Page App
```

インストールに成功したらのフォルダに移動して、立ち上げてみます。

```
> cd sample
> yarn dev
```

[http://localhost:3000/](http://localhost:3000/)でサイトを確認できます。


![template](/images/posts/170/173/1.png)


## SCSSを使えるようにする

本題です。

[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)をインストールして`.vue`の中で`<style lang="scss">`を使えるようにします。

参考：[プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors)

### vue-loaderをインストール

`SCSS`に必要なモジュールをインストールします。

```sh
# by npm
> npm install sass-loader node-sass --save-dev

# by yarn
> yarn add npm install sass-loader node-sass
```
`pakage.json`
```json
  "dependencies": {
    "nuxt": "^2.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0"
  },
```

これで、`.vue`ファイル内で`SCSS`が使えるようになりました。
Nuxt.jsのホットリロードによってSCSSの修正が即座に反映され、開発が進みます。
以下のように`<style lang="scss">`を使えます。

```html
<style lang="scss">
.red {
  color: red
}
</style>
```

## 共通のSCSSファイルの設定

続いて、プロジェクトで共通のスタイルもSCSSで書けるようにします。

### .scssファイルを作成

`/assets/sass/app.scss`を作成して、読み込みませます。
同じフォルダのSCSSファイルをimportできるか試すため`variables.scss`と`common.scss`も同時に作成します。

`/assets/sass/app.scss`
```scss
// Variables
@import 'variables';

// common
@import 'common';
```

`/assets/sass/variables.scss`
```scss
$color-bg: rgb(248, 255, 187);
```

`/assets/sass/common.scss`
```scss
body {
    background-color: $color-bg;
}
```

背景色を変更するだけです。

### nuxt.config.jsの設定

`nuxt.config.js`にファイルのパスとSCSSであることを示せば勝手にやってくれます。
すごく簡潔だった。

`nuxt.config.js`
```js

  /*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' },
  ],
```

背景色が変わりました！
こちらもファイルを保存するだけで変更がすぐに反映されるため、スタイルをいじるのが楽しくなります。

![2](/images/posts/170/173/2.png)

共通のSCSSには`nuxt-sass-resources-loader`も必要かと思っていたが、`nuxt.config.js`への記述だけで済んだ。

参考：[Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする](https://qiita.com/mimoe/items/890c4e681dac7c38322b)


Nuxt.jsのプロジェクトを作成してSCSSを導入するまで

登録フォームで目のアイコンのあるフォームを見かける。
クリックすると入力したパスワードの平文が確認でき、打ち間違いを防止出来るため便利ですね。
それをCSSとjQueryで作成しました。

## パスワードの表示/非表示を切り替えるフォーム

まずは作ったフォームを確認してみてください。
パスワードのフォームのアイコンを押すと合わせて表示・非表示を切り替えます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/images/posts/125/toggle-eye.js"></script>

<div class="pw-form">
    <form  class="pw-form-container">
        <p><input type="email" placeholder="Email"></p>
        <p>
          <input type="password" placeholder="Password"  value="no_bug_no_job">
          <span class="field-icon">
            <i toggle="#password-field" class="mdi mdi-eye toggle-password"></i>
          </span>
        </p>
        <p>
            <input type="submit" value="submit" onsubmit="return false;" disabled="disabled">
        </p>
    </form>
</div>

CSSは`F12`で検証してください。
Macは`⌘`+`option`+`i`（[【Mac】ChromeのデベロッパーツールをF12で開くよう設定する方法](https://www.suzu6.net/posts/1/)）。

※ Emailのフォームは飾りです。ボタンはパスワードをどこへも送りません。

<style>

.pw-form {
    width : 80%;
    min-width : 300px;
    max-width : 500px;
    margin : auto;
    background-color : #fafafa;
    padding : 10px;
}
.pw-form-header,
.pw-form p {
  margin-top: 0;
  margin-bottom: 0;
}

.pw-form-header {
  background: #28d;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.pw-form-container {
  background: #ebebeb;
  padding: 12px;
}

/* Every row inside .pw-form-container is defined with p tags */
.pw-form p {
  padding: 12px;
}

.pw-form input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}

.pw-form input[type="email"],
.pw-form input[type="text"],
.pw-form input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}

/* Text fields' focus effect */
.pw-form input[type="email"]:focus,
.pw-form input[type="text"]:focus,
.pw-form input[type="password"]:focus {
  border-color: #888;
}

.pw-form input[type="submit"] {
  background: #28d;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}

.pw-form input[type="submit"]:hover {
  background: #17c;
}

/* Buttons' focus effect */
.pw-form input[type="submit"]:focus {
  border-color: #05a;
}

.field-icon {
  color: #555;
  float: right;
  margin-right: 15px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
</style>

## 利用したライブラリ

- jquery 3.3.1
- materialdesignicons.css 3.5.95

アイコンのフォントに[Material Design Icons](https://materialdesignicons.com/)を使いました。
[Font Awesome](https://fontawesome.com/)などアイコンのフォントを使っても大丈夫です。


## コードの解説

### パスワードの表示・非表示

パスワードの表示・非表示の切り替えは`type`を変更します。

<div class="pw-form">
    <form  class="pw-form-container">
        <p>
          <label>type=text</label>
          <input type="text" placeholder="text" value="type=text">
        </p>
        <p>
          <label>type=password</label>
          <input type="password" placeholder="password" value="type=password">
        </p>
    </form>
</div>

```html

<input type="password">


<input type="text">
```

### 目のアイコンとの連動

目のアイコン<i class="mdi mdi-eye"></i>のクリックを検知して`type`を変更します。
一緒に目を閉じたアイコン<i class="mdi mdi-eye-off"></i>にも変更します。

**HTML**
```html
<form>
    <input type="password" placeholder="Password">
    <span class="field-icon">
        <i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
    </span>
</form>  
```

**javascript**
```js
// パスワードの表示・非表示切替
$(".toggle-password").click(function () {
    // iconの切り替え
    $(this).toggleClass("mdi-eye mdi-eye-off");

    // 入力フォームの取得
    let input = $(this).parent().prev("input");
    // type切替
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
```


<div class="pw-form">
    <form class="pw-form-container">
      <p>
        <input type="password" placeholder="Password" value="VivaLaVida">
        <span class="field-icon">
            <i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
        </span>
      </p>
    </form>
</div>

アイコンをクリックしたとき、アイコンのクラスと`<input>`のtypeを変更します。

`toggleClass("mdi-eye mdi-eye-off")`は実行のたびに、クラスを与えたり消したりを繰り返す。
初めから`mdi-eye`のクラスはあるので、最初のトグルでは`mdi-eye`が消え`mdi-eye-off`が付く。
次はその反対。。。と繰り返す。


$(this).parent().prev("input");`は親要素の隣接する`<input>`タグを取りに行っています。
その後、typeを確認して切り替えている。

### ソースコードの全文

長いのでPlayCodeというサービスに置きました。

[PlayCode](https://playcode.io/276568?tabs=console&script.js&output)

## 参考

パスワードの入力フォームを作るうえで参考になりそう。

- [言語別：パスワード向けの正規表現](https://qiita.com/mpyw/items/886218e7b418dfed254b)

- [登録フォームにおけるパスワード確認用の入力欄は必要か](https://uxmilk.jp/18568)

「ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パスワード確認が原因で離脱しています。」
パスワード確認を廃止し、パスワードの表示切替を導入したほうが良い。
間違ったパスワードは再発行してもらうことで解決するのでは。

- [maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！](https://qiita.com/kawaz/items/d462a05c113b8e063736#comment-31858b02023fac3424de)

maxlength=20の欄にユーザが30文字のパスワードを張り付けたとき、20文字で切られる。
プログラム側もそれを知るすべがない。
今後、推奨の文字数が増えることもあるためmaxlengthを使って上限は設けないほうがよさそう。

Nuxt.jsのプロジェクトを作成してSCSSを導入するまで

パスワードの表示/非表示を切り替えるフォームのCSSとjQuery