モダンフロントエンド開発入門 - Node.jsの学習5

  • 導入
  • ブラウザ環境とNode.js環境におけるモジュールシステムの違い
  • なぜ、npmパッケージはブラウザから読み込めないのか
    • ES Modulesでrequireを使う方法
  • webpackでnpmパッケージをブラウザ環境で使う
  • webpack.config.jsの設定
  • webpackで開発用サーバー立ち上げ
  • フロントのビルドツール界隈の現状把握
    • 様々なビルドツール
    • スクランナー
    • Linter / Formatter
    • Minifier
    • トランスパイラー(JS/TS)
    • トランスパイラー(Sass/CSS
    • バンドラー
    • なぜバンドルする必要があるのか?
  • 次世代ビルドツール Vite
    • 開発サーバーとHMR
    • Native ESMを使った開発環境
  • Viteの特徴
  • Vite プロジェクトの作成とビルド
  • まとめ

導入

  • ブラウザとNode.jsでのモジュールの取り扱いの違いについて学ぶ。
  • 現在のフロントエンド開発はビルドツールが乱立しているため、それらについて学ぶ。
  • 各ツールの役割と特徴を捉えることで今後の指針とする

ブラウザ環境とNode.js環境におけるモジュールシステムの違い

// Common JSの書き方なので、ブラウザでは実行できない
const myModule = require("./sub")

// ES Modulesの書き方
import { helloFromSub } from "./sub.js"

helloFromSub()
function helloFromSub() {
  console.log("hello, sub")
}

// Common JSの書き方なので、ブラウザでは実行できない
exports.helloFromSub = helloFromSub
// or
module.exports = {
  helloFromSub,
}

// ES Modulesの書き方
export { helloFromSub }

なぜ、npmパッケージはブラウザから読み込めないのか

続きを読む

Apple MusicからAmazon Musicに移行したあと、マイミュージック一括ダウンロードを目指して

あらすじ

この間まで、Apple Musicを利用していました。
Macだけじゃなくて、Windowsからも聴き放題を利用しやすくしたいと思いました。
聴ける曲も考慮した結果、Amazon Musicに移行することに決めました。

プレイリストの移行

Amazon.co.jp: プレイリストをAmazonMusicにインポートする: デジタルミュージック

まず、上記の転送サービスを利用してプレイリストを移行しました。
移行後、違う曲・存在しない曲を取り込んでいるものがあったのでそれらを整理しました。
その後、Amazon Musicではマイミュージックを一括ダウンロードできないのが不便に感じました。
なので、全ての曲をプレイリストに追加してダウンロードしたいと思いました。

一括ダウンロードのためのプレイリスト作成

music.amazon.co.jp

  1. Amazon Musicをブラウザで開き、プレイリスト「ALL」を作成
  2. マイミュージックで開発者ツールを開く (プレイリストからも可能)
  3. addPlaylist.jsを実行して「ALL」に追加する
  4. 「ALL」プレイリストでダウンロードする
// 待機
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

// プレイリストに追加する処理
const addAllPlaylist = async (musicRow) => {
  const moreBtn = musicRow.querySelector("music-button[icon-name='more']")
  moreBtn.click()
  await sleep(1000)
  const menu = document.querySelector('div[role="menu"]')
  const addMenuBtn = menu.querySelector(
    'music-list-item[primary-text="プレイリストに追加"]'
  )
  addMenuBtn.click()
  await sleep(1000)
  // メニュー内、1番目のプレイリストに追加
  const addBtn = document.querySelector("music-button[icon-name='add']")
  addBtn.click()
  await sleep(2000)
  try {
    const dialogHeaderText = document.getElementById("dialogHeader").textContent
    if (dialogHeaderText === "重複曲") {
      document.getElementById("dialogButton2").click()
      await sleep(1000)
    }
  } catch (error) {
    await sleep(2000)
  }
}

// スクロール時の重複曲を排除しながらプレイリストに追加する
const musicDictArray = []
let musicRows, musicRows2, number, nextNumber
musicRows = document.querySelectorAll("music-container music-image-row")
while (true) {
  for (let musicRow of musicRows) {
    nextNumber = Number(musicRow.querySelector(".index").textContent)
    const title = musicRow.querySelector(".col1 music-link").textContent
    const album = musicRow.querySelector(".col3 music-link").textContent
    const musicDict = {
      number: nextNumber,
      title: title,
      album: album,
    }

    await addAllPlaylist(musicRow)
  }
  if (number - nextNumber > 5) {
    break
  }
  number = nextNumber
  window.scrollTo(0, window.scrollY + 840)
  await sleep(1000)

  // スクロール時の重複曲排除
  convertedMusicRows = [].map.call(musicRows, (element) => {
    return element
  })
  musicRows2 = document.querySelectorAll("music-container music-image-row")
  convertedMusicRows2 = [].map.call(musicRows2, (element) => {
    return element
  })
  musicRows = convertedMusicRows2.filter(
    (i) => convertedMusicRows.indexOf(i) == -1
  )
}

感想

ブラウザでAmazon Musicを読み込んだときにすべては表示されず、スクロールするたびに曲情報が読み込まれるところに少し引っかかりました。  
なんとか無事一括ダウンロードできるようになってよかったです。

MX MASTER 3sを買いました

腱鞘炎のため今まで、Logicool Liftを使っていました。
1年使ったので、新しいマウスを触りたいなと思いました。

そこで買ったのがMX MASTER 3sです。

Liftほどではないですがエルゴノミクス形状になっています。
使ってみたら、私的にはMX MASTER 3sの方が手が疲れませんでした。
サムホイールもデスクトップを切り替えるのがとても楽になりました。
一つ不満な点は、ホイールが気持ちよく回るフリースピンにしていたのですが、Smooth Scrollがガクガクしていました。
そこで、ScrollScroll Macをインストールしました。

www.smoothscroll.net

これで、完全に滑らかにスクロールできるようになりました。
しかし、マウス設定のソフトが3つ存在することになりました。

  • システム設定
  • Logicool Options+
  • SmoothScrool Mac

このことで、スクロールの動作が自然または標準に設定しづらくなりました。
スクロールを標準にした上で、サムホイールによるデスクトップ切り替えをスマホと同じようなスワイプ方向にしたかったです。
結果として、設定は以下の通りになりました。
作業がだいぶ快適になってよかったです。

追記

ChromeだけならSmoothScroll Macをインストールしなくても、拡張機能を入れればスムースにスクロールできました。

chromewebstore.google.com

  • 設定

自動データ収集ツールの実装 - Node.jsの学習4

  • スクレイピングとは
    • ブラウザで画面が表示されるまで
    • HTMLとは
  • 準備
  • Playwrightを使用する
    • Locatorで取得したい要素を特定する
    • Locatorの詳しい使い方
    • デバッグでコードを確認する
    • UIイベントをスクリプトで記述する
      • textContentとinnerTextの違い
    • ファイルへの書き込み処理
    • CSV形式でデータ保存
    • CSVに追加情報を書き込む
  • Google Spread Sheetの操作
    • Google Cloud初期設定
    • 【重要】Sheetのアクセスに必要な設定
    • セルの値の取得
    • .envを読み込んでいるコードのデバッグ方法
    • 環境変数を.envファイルに抽出
    • エラーが発生時の処理(例外処理)を記述
    • セルの書き込み
    • 行の追加
    • 行の更新
    • スクレイピングをSheetにまとめる
  • cron(スケジューラー)の使い方
    • スケジューリング(定期実行)の手法
    • 定期実行の結果をEmailで送信してみよう
    • スクレイピング→シート書込み→メール送信

スクレイピングとは

ブラウザで画面が表示されるまで

(要求されたデータを受信 - レスポンス)
サーバー
 ⇅
ブラウザ
(欲しい情報を要求 - リクエスト)

ブラウザがHTMLを解析して画面を作成.
データ: HTML, CSS, JavaScript, 画像など

HTMLとは

Webページの構造をタグを使って定義する書き方
タグごとに意味が異なる

  • h1~6 -> ページの見出しに使う
  • p -> 文章等に使う
  • a -> リンクを貼る時に使う
  • img -> 画像を挿入するときに使う
続きを読む

Node.jsでJSONファイルをrequireを使わず読み込みたい

方法

ES Modulesでrequireを使用してJSONファイルを読み込んでいたので、どうにかimportに統一したいと思いました。 調べてみると、fsモジュールのreadFileメソッドで出来るみたいです。

// require
import { createRequire } from "module"
const require = createRequire(import.meta.url)
const secrets = require("../../../google_secrets.json")

// import
import { readFile } from "fs/promises"
const secrets = JSON.parse(await readFile("./google_secrets.json"))

console.log(secrets.private_key)

無事読み込めました。 統一できて気持ちよかったです

参考にさせていただいた記事

iwb.jp

www.geeksforgeeks.org

Node.js バージョン管理 比較表

比較表

Tool macOS Linux (WSL) Windows スター数 (k) バージョン管理
ファイル
プロジェクト
切替
特徴 最終リリース日
nvm 71.6 .nvmrc スタンダード 2023-08-22
asdf 19 .tool-versions 複数言語の管理 2023-09-13
n 18.1 .nvmrc
.node-version
.n-node-version
macOSで導入しやすい 2023-10-15
fnm 13.9 .nvmrc
.node-version
処理速度が速い(Rust製) 2023-08-16
Volta 9 package.json 処理速度が速い(Rust製) 2023-06-25
nodenv 2.1 .node-version anyenv + nodenvの方が多い 2023-02-19
nodebrew 1 なし macOSで導入しやすい 2022-03-19

参考にさせていただいた記事

qiita.com

zenn.dev

zenn.dev

npmによるパッケージ管理 - Node.jsの学習3

  • npm(Node Package Manager)とは
  • なぜnpmが必要なのか
  • パッケージが読み込まれる流れ
  • package.jsonの中身
  • dependeciesとdevDependenciesの違い
  • npm installとバージョン
  • npm scriptの基礎
  • パッケージをscriptsに登録する
  • ローカルパッケージとグローバルパッケージの違い
  • パッケージを跨いだ開発方法
    • npm link を使う
    • dependencies に直接追記する

npm(Node Package Manager)とは

Node.js上で使用するパッケージを管理するツール
コマンド一つでパッケージのインストール、削除、更新が可能

なぜnpmが必要なのか

それぞれのライブラリをダウンロードしていたら、管理に手間が掛かるため

npm install lodash
import _ from "lodash"

const original = { prop: { nested: "value" } }

// オブジェクトの複製
const cloned = _.cloneDeep(original)
// 複製なので値を書き換えても元の値には影響しない
cloned.prop.nested = "new value"

console.log(original, cloned)
// { prop: { nested: 'value' } }
// { prop: { nested: 'new value' } }
続きを読む