2021-01-02

nuxt.jsでプロジェクトを作成する（インストール～Hello Nuxt！）

Nuxt.js

Nuxt.js をインストールする

プロジェクトを作成する

npx create-nuxt-app projectName

まずは上記コードをターミナルに記入する。
projectNameはプロジェクトごとに指定する。

その後、いくつか質問されるので用途に合わせて選択していく。

プロジェクト名は？

? Project name: (projectName)

プロジェクト名を質問される。
デフォルト（何も記入せずエンター）では１つ前に記入したプロジェクト名となる。

使用する言語は？

? programing language (Use arrow keys)
> JavaScript
  TypeScript

使用する言語を質問される
矢印キーで選択しエンターキー。

使用するパッケージは？

? package manager (Use arrow keys)
> Yarn
  Npm

パッケージマネージャに関する質問をされる。
慣れている方を選択すればOK。

使用するUIフレームは？

? Choose UI framework (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

UIのフレームワークについて質問される。
使用する場合は使用するフレームワーク選択しエンターキー。

使用するモジュールは？

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ( ) Axios
  ( ) Progressive Web App (PWA)
  ( ) Content

モジュールを選択するかについて質問される。

Axiosは最低限チェックしたほうが良くて、PWAは好みです。 Content はブログなど静的サイトジェネレータライクに利用する場合に導入すると良いようです。
参考サイト

~~ぜんぶ選択しても問題はなそうなので、わからなければとりあえず選択しておくのも手かもしれない。~~

【追記：2021.1.3】後で導入可能みたいなので、無理に選択する必要はないかもしれない。逆にぶつかり合うこともあるらしいので。

使用するコードツールは？

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint
 ( ) commitlint

使用するツールについて質問される。

ESLint 括弧やスペースの使い方などの書式スタイルを統一してくれるツール
Prettier コードフォーマッターツール
Lint staged files Git のコミット時などに Lint のエラーやワーニングがあるとコミットできなくするツール
StyleLint CSS の書式スタイルを統一してくれるツール
commitlint Git のコミット規約（commit convention）に従わせるためのツール

~~ぜんぶ選択しても問題はなそうなので、わからなければとりあえず選択しておくのも手かもしれない。~~

【追記：2021.1.3】全部選択したところ、フォーマットエラーが起こりすぎて作業時間が削られた。チームで作業する分にはコードが統一されるメリットがあるが、無意味に全部選択するのは悪手かもしれない。commitlint は削除した。

使用するテストフレームワークは？

? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO

テストフレームについて質問される。

SPAにするか？

? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか質問される。
ユニバーサルアプリケーションはサーバーサイドレンダリング（SSR）を行う。
逆にシングルページアプリケーションはSSRを行わない。
作るアプリに合わせて選択する。

デプロイターゲットは？

? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting)

デプロイターゲットについて質問される。
Server (Node.js hosting) はサーバーサイドレンダリングを行う設定。
Static (Static/JAMStack hosting) は静的サイト用の設定。

開発時の環境ツールは？

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests

開発時に使うツールについて質問される。
jsconfig.json を設定しておくと、VS Codeで開発する際に正しくシンタックスエラーやハイライトが出るようになる。
Semantic Pull Requests はGitのcommitメッセージとPull Requestにおけるタイトルの付け方をチェックしてくれる。

インストールする CI ツールは？

? Continuous integration: (Use arrow keys)
> None 
  GitHub Actions (GitHub only)

インストールする CI ツールについて質問される。
特に指定がなければNoneで問題ない。

バージョンコントロールシステムは？

? Version control system: None: (Use arrow keys)
> Git
  None

バージョンコントロールシステムについて質問される。
特に指定がなければNoneで問題ない。

プロジェクト作成完了！

Successfully created projectName

これで作成完了。

 To get started:

        cd projectName
        npm run dev

  To build & start for production:

        cd projectName
        npm run build
        npm run start

To get started: の通りにコマンドに記述していく。

最後に匿名で情報収集をしてもいいか？

? Are you interested in participation? (Y/n)

最後に、使用状況の匿名データ収集をしてもいいか聞かれるので回答する。

Hello Nuxt

これでやっと環境構築が完了する。
ブラウザで２つの重なり合う三角形が登場すればNuxt.js のスタートに立てる。

重要だけれど最後に

当然だけれドキュメントが正確なので、ドキュメントを見て作業することをおすすめする。
Nuxt.js - ユニバーサル Vue.js アプリケーション

2021-01-01

JavaScriptのquerySelectorAllで取得したNodeListのスタイルやクラスを操作する

JavaScript

サンプルコード

<!-- HTML -->
<p class="a">A</p>
<p class="a">A</p>
<p class="a">A</p>

<button class="js-triger">文字色を変更する</button>

<script>
    const btnTriger = document.querySelector('.js-triger');
    btnTriger.addEventListener('click', ()=>{
        const all = document.querySelectorAll('.a');
        console.log(all); // NodeList(3) [p.a, p.a, p.a]
        for (const elem of all) {
            elem.style.color = 'red';
            elem.classList.add('add')
        }
    });
</script>

はまった（間違った）コード

<script>
    const btnTriger = document.querySelector('.js-triger');
    btnTriger.addEventListener('click', ()=>{
        const all = document.querySelectorAll('.a');
        console.log(all); // NodeList(3) [p.a, p.a, p.a]
        all.style.color = 'red';
        all.classList.add('add')
    });
</script>

実行すると下記エラーが表示される。

Uncaught TypeError: Cannot set property 'color' of undefined at HTMLButtonElement.<anonymous>

つまりall.styleが未定義とのこと。
原因はquerySelectorAllの返り値がNodeListであるため。
NodeListはノードの集合であるため、個々にスタイルやクラスを操作する必要がある。

解決方法

NodeList - Web API | MDN
上記サイトを参考に。

forで回して処理をする

サンプルコードとは違うが、下記コードでも実現可能。

for (let i =0; i <all.length; i++) {
    all[i].style.color = 'red';
    all[i].classList.add('add')
}

サンプルコードで使用したfor...of文を使用すればもっと簡潔に書ける。
ソースはサンプルコード参照。

2020-12-31

JavaScriptのセレクタ取得で、複数要素を否定する

JavaScript

セレクタ取得で複数否定するには

まずは１つを否定する

const elm = document.querySelectorAll('.class:not(.notClass)');

:not(否定する要素)で否定する要素を指定する。

気になる複数否定は

const elm = document.querySelectorAll('.class:not(.notClass01):not(.notClass02")');

:not(否定する要素)を複数続ける。
つまり、:not(否定する要素):not(否定する要素)でOK。
意外とシンプルなやり方だった。

サンプルコード

<!-- HTML -->
<p class="a"></p>
<p class="a b"></p>
<p class="a c"></p>

<script>
    const all = document.querySelectorAll('.a');
    const all_notB = document.querySelectorAll('.a:not(.b)');
    const all_notBC = document.querySelectorAll('.a:not(.b):not(.c)');
    console.log(all); // NodeList(3) [p.a, p.a.b, p.a.c]
    console.log(all_notB); // NodeList(2) [p.a, p.a.c]
    console.log(all_notBC); // NodeList [p.a]
</script>

そんなに使う場所もなければ、使わずに済むことが１番かもしれない。

2020-12-29

JavaScriptでスムーススクールを実装する

JavaScript

サンプルコード

const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
  for (let i = 0; i < smoothScrollTrigger.length; i++){
    smoothScrollTrigger[i].addEventListener('click', (e) => {
      e.preventDefault();
      const href = smoothScrollTrigger[i].getAttribute('href');
      const targetElement = document.getElementById(href.replace('#', ''));
      const rect = targetElement.getBoundingClientRect().top;
      const offset = window.pageYOffset;
      const gap = 60;
      const target = rect + offset - gap;
      window.scrollTo({
        top: target,
        behavior: 'smooth',
      });
    });
  }

分解考察

正規表現を用いアンカーリンクを取得する

const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');

a要素のhref属性値の文頭が#であるものをすべて取得する。

ページ遷移イベントのキャンセル

e.preventDefault();

aクリック時にpreventDefault();を実行しページ遷移のイベントを中止する。

諸々、定義する

const href = smoothScrollTrigger[i].getAttribute('href');

クリックした要素のhref属性をhrefと定義する。

const targetElement = document.getElementById(href.replace('#', ''));

#を空にしたhrefのidを持つ要素を取得する。
つまり、飛び先こと。

const rect = targetElement.getBoundingClientRect().top;

飛び先、ブラウザ表示領域からの位置を取得する。

const offset = window.pageYOffset;

現在のスクロール位置を取得する。

const gap = 60;

固定ヘッダーの場合は高さをを指定する。
ここでは60としているが、レスポンシブとかでヘッダー高さが変わる場合は動的に取得すること。
※別記事にて（予定）

const target = rect + offset - gap;

飛び先トップからの位置 + 現在のスクロール位置 - 固定ヘッダーの高さをtargetに代入する。

window.scrollToメソッドでスクロールさせる

window.scrollTo({
    top: target,
    behavior: 'smooth',
});

window.scrollToメソッドを使用しスクロールさせる。
飛び先とスクロールの振るまいはオプションで指定する。
なお、スクロールの振るまいは下記２択とのこと。

滑らかにアニメーションするのか、一回のジャンプで瞬時に行うのか

2020-12-22

JavaScriptでスクロールを判定する

JavaScript

サンプルコード

サイトを100px以上スクロールした時に背景を黒にする。

<script>
    window.addEventListener("scroll", function(){
    const scrollPos = document.querySelector('html')
    const rectTop = scrollPos.getBoundingClientRect().top
    const  scrollHeight = rectTop * '-1';
        if (scrollHeight> 100) {
            scrollPos.style.backgroundColor="#000000";
        } else {
            scrollPos.style.backgroundColor="#ffffff";
        }
    })
</script>

解説というか考え方

スクロールで処理スタート

    window.addEventListener("scroll", function(){})

必要要素を諸々定義づける

    const scrollPos = document.querySelector('html')

スクロール対象、つまり今回はサイト全体を対象にしたいので、全体であるHTMLを定義する。

    const rectTop = scrollPos.getBoundingClientRect().top

getBoundingClientRect()は要素の寸法と、そのビューポートに対する位置を返すメソッド。
つまり今回はHTMLの.top位置を返すようになる。
対象がHTMLなので最初に返すのは０。
その後スクロールされるたびに「‐１、‐２、‐３......」と位置を返してくる。

    const  scrollHeight = rectTop * '-1';

なんとなく不等号の計算がわかりにくくなるので、正数にする。

返り値によって処理をする。

        if (scrollHeight> 100) {
            scrollPos.style.backgroundColor="#000000";
        } else {
            scrollPos.style.backgroundColor="#ffffff";
        }

先ほどの正数にする処理を省く場合は、if (scrollHeight < -100) {にすれば問題ない。

2020-12-22

JavaScriptでクラスを管理する「classList」

JavaScript

サンプルコード

クリックでクラスをトグルさせる

<button class="base_class_01">クリックでクラスをつけたり外したりする</button>
<script>
    const toggleClass = document.querySelector('.base_class_01');

    // クリックでクラスがトグルする
    toggleClass.addEventListener('click', ()=>{
        toggleClass.classList.toggle('toggleClass');
    });
</script>

クリックでクラスを付与する

<button class="base_class_02">クリックでクラスを付与する</button>
<script>
    const addClass = document.querySelector('.base_class_02');
    // クリックでクラスを追加する
    addClass.addEventListener('click', ()=>{
        addClass.classList.add('addClass');
    });
</script>

クリックでクラスを削除する

<button class="base_class_03 deleteClass">クリックでクラス(deleteClass)を削除する</button>
<script>
    const deleteClass = document.querySelector('.base_class_03');
    // クリックでクラス(deleteClass)を削除する
    deleteClass.addEventListener('click', ()=>{
        deleteClass.classList.remove('deleteClass');
    });
</script>

クラス（containsClass）が付与されているかを確認する

<button class="base_class_04 containsClass">含まれている</button>
<button class="base_class_04">含まれていない</button>
<script>
    const containsClass = document.querySelectorAll('.base_class_04');
    // クリックしたボタンにクラス（containsClass）が付与されているかを確認する
    for (let i =0; i < containsClass.length; i++) {
        containsClass[i].addEventListener('click', ()=>{
            if (containsClass[i].classList.contains('containsClass')) {
                alert('yes'); // 含まれていれば「yes」
            } else {
                alert('no'); // 含まれていなければ「no」
            }
      });
    }
</script>

2020-12-20

CSSのメディアクエリは最新のBootstrapに準ずれば間違いない

CSS

Bootstrapに準ずる間違いない最新メディアクエリ

デバイスの種類が増え続け、たびたび悩まされているメディアクエリの数値。
長いものには巻かれろ理論でBootstrapに巻かれことにした。

ブレークポイント	接頭辞	ビューポートの範囲
極小（X-Small）	なし	<576px
小（Small）	sm	≥576px
中（Medium）	md	≥768px
大（Large）	lg	≥992px
特大（Extra large）	xl	≥1200px
超特大（Extra extra large）	xxl	≥1400px

ブレークポイント～Bootstrap5設置ガイド

そもそもBootstrapとは

世界で最も人気のあるフロントエンドのコンポーネントライブラリ。レスポンシブウェブデザインでモバイルファーストを実現しています。
Bootstrap - 世界で最も人気のあるフロントエンドのコンポーネントライブラリ

世界で最も人気があるとのことなので、これより長いものはない。
現時点でBootstrapを使用したことはないが、メディアクエリの数値は拝借することにする。