未分類 | あまブログ

【Vue3】ToDoリストアプリを作る

この記事ではVue.jsでToDoリストアプリを作成する方法を紹介します。 HTML, CSS, JSだけを使用し、データはLocalStorageに保存し、Vue3でOptions APIを使用します。 1. 実行環境 macOS：13.0.1 Node.js：18.12.1 npm：8.19.2 Vue：3.2.45 2. ToDoアプリの要件以下のToDoアプリを作成します。 ToDoが登録できる ToDoが一覧表示できる ToDoが編集できる ToDoが削除できる ToDoの処理状態を変更できる ToDoの処理状態ごとに表示できる 3. 作成手順 3-1. ToDoの登録と一覧表示 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ToDoアプリ</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="app"> <form @submit.prevent="addTodo"> <input v-model="newTodo" /> <button>登録</button> </form> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} </li> </ul> </div> <script type="module" src="app.js"></script> </body> </html> @submit.prevent HTMLFormElement: submit イベント - Web API | MDN イベント修飾子 | Vue.js app.js ...

VSCodeでNode.jsをデバッグする

VSCodeでNode.jsをデバッグする方法は主に以下の３つがあります。 Auto Attach JavaScriptデバッグターミナル launch.jsonを使ったデバッグこの記事では、Auto AttachとJavaScriptデバッグターミナルでのデバッグ方法を紹介します。 1. Auto Attach 1.コマンドパレット(shift + ⌘ + P)でToggle Auto Attachを選択 2.Alwaysを選択 Always：VSCodeの統合ターミナルで起動されたすべての Node.jsプロセスがデバッグされる以降はステータスバーのAuto Attachから設定変更可能 3.ブレイクポイントを設定して、VSCodeの統合ターミナルからNode.jsを実行統合ターミナルを開く： control + ` 2. JavaScriptデバッグターミナル JavaScriptデバッグターミナルで実行したNode.jsプロセスは自動的にデバッグされます。 1.ターミナルを開く(control + `) 2.ターミナルスイッチャーのドロップダウンメニューから「JavaScriptデバッグターミナル」を選択ターミナルスイッチャーのドロップダウンメニュー：ターミナルパネルの右側のvのようなマークまたはコマンドパレットでJavaScript Debug Terminalを選択 3.ブレイクポイントを設定して、JavaScriptデバッグターミナルからNode.jsを実行【参考】 Node.js debugging in VS Code

【Ruby3.1】lsコマンドを作る(OOP版)

非OOP版はこちら↓ 【Ruby3.1】lsコマンドを作る | あまブログ 1. 実行環境 macOS：13.0.1 Ruby：3.1.0 2. ソースコード ls.rb #!/usr/bin/env ruby # frozen_string_literal: true require_relative 'command' LS::Command.new(ARGV).list_files command.rb # frozen_string_literal: true require 'optparse' require 'pathname' require_relative 'file_stat' require_relative 'long_formatter' require_relative 'short_formatter' module LS class Command def initialize(argv) @params = argv.getopts('alr') @target_dir = Pathname(argv[0] || '.') end def list_files files = build_files @params['l'] ? LongFormatter.new(files).list_files : ShortFormatter.new(files).list_files end private def build_files pattern = @target_dir.join('*') paths = @params['a'] ? Dir.glob(pattern, File::FNM_DOTMATCH) : Dir.glob(pattern) paths = paths.reverse if @params['r'] paths.map { |path| FileStat.new(path) } end end end file_stat.rb ...

【Node.js】カレンダーのプログラムを作る

以下のカレンダーのプログラムをJavaScriptで、nodejsで実行するコマンドラインのプログラムとして作り直します。【Ruby 3.1】カレンダーのプログラムを作る | あまブログ 1. 環境 macOS：13.0.1 node：v18.12.1 2. ソースコード #!/usr/bin/env node const argv = require("minimist")(process.argv.slice(2)); const today = new Date(); const month = argv.m || today.getMonth() + 1; const year = argv.y || today.getFullYear(); const startOfMonth = new Date(year, month - 1); const endOfMonth = new Date(year, month, 0); console.log(` ${month}月 ${year}`); console.log("日月火水木金土"); process.stdout.write(" ".repeat(startOfMonth.getDay() * 3)); for (const d = startOfMonth; d <= endOfMonth; d.setDate(d.getDate() + 1)) { let day = String(d.getDate()).padStart(2, " "); const color_reverse = "\x1b[7m"; const color_reset = "\x1b[0m"; if ( d.getFullYear() == today.getFullYear() && d.getMonth() == today.getMonth() && d.getDate() == today.getDate() ) { day = `${color_reverse}${day}${color_reset}`; } process.stdout.write(`${day} `); if (d.getDay() == 6) { process.stdout.write("\n"); } } process.stdout.write("\n\n"); 【参考】 Date - JavaScript | MDN minimist - npm Loop through a date range with JavaScript - Stack Overflow 【Node.js】コンソール(CLI)出力に色や装飾をつける方法

【Git】git diffで差分を表示する

# インデックスと作業ディレクトリの比較 $ git diff # 最新のコミットとインデックスの比較 $ git diff --cached $ git diff --staged # 同義 $ git diff --cached HEAD # 同義 # 最新のコミットと作業ディレクトリの比較 $ git diff HEAD # コミット同士の比較 $ git diff HEAD HEAD~ $ git diff HEAD..HEAD~ # 同義 # ブランチ同士の比較 $ git diff topic..main # 特定のファイルのみ $ git diff -- ./file $ git diff HEAD -- ./file # git pullする前にリモート追跡ブランチとの差分を確認 $ git diff HEAD..origin/main # git pushする前にリモート追跡ブランチとの差分を確認 $ git diff origin/main..HEAD 覚え方：git diff [変更前]..[変更後] 【参考】 ...

【Git】git stashでコミットしていない変更を一時的に退避させる

1. 変更を退避する git stash = git stash push # 作業ディレクトリとインデックスの変更を退避 $ git stash push # 作業ディレクトリの変更を退避 $ git stash push -k # 作業ディレクトリとインデックスの変更 + 新規作成ファイルを退避 $ git stash push -u # 作業ディレクトリとインデックスの変更 + 新規作成ファイル + ignoredファイルを退避 $ git stash push -a # メッセージ付きでstashする $ git stash push -m "message" 2. 退避した変更を確認する # stashを一覧表示する $ git stash list # 特定のstashを表示する $ git stash show # stash@{0}を指定したのと同じ $ git stash show stash@{1} # 特定のstashの差分を表示する $ git stash show -p stash@{1} 3. 退避した変更を再適用する # 特定のstashを再適用する(stashは削除されない) $ git stash apply stash@{1} # 特定のstashを再適用して削除する(apply + drop) $ git stash pop stash@{1} applyとpopは共にデフォルトで、stashを作業ディレクトリに再適用する addしていた変更も、addされていない状態で戻るインデックスにも再適用したい場合は、後述の--indexオプションを使う popによってコンフリクトが発生した場合、そのstashは削除されない # 特定のstashを作業ディレクトリとインデックスに再適用する $ git stash apply --index stash@{1} $ git stash pop --index stash@{1} 4. 退避した変更を削除する # 特定のstashを削除する $ git stash drop stash@{1} # 全てのstashを削除する $ git stash clear 【参考】 ...

【Git】HEAD^(キャレット)とHEAD~(チルダ)の違い

Git - gitrevisions Documentation の以下の図がわかりやすい G H I J \ / \ / D E F \ | / \ \ | / | \|/ | B C \ / \ / A A = = A^0 B = A^ = A^1 = A~1 C = = A^2 D = A^^ = A^1^1 = A~2 E = B^2 = A^^2 F = B^3 = A^^3 G = A^^^ = A^1^1^1 = A~3 H = D^2 = B^^2 = A^^^2 = A~2^2 I = F^ = B^3^ = A^^3^ J = F^2 = B^3^2 = A^^3^2 What’s the difference between HEAD^ and HEAD~ in Git? - Stack Overflow の回答にある以下のスクリプトで上記のログを再現できる ...

【VSCode】ESLintとPrettierのインストールと設定

この記事ではESLint(静的検証ツール)とPrettier(コードフォーマッター)のインストールと設定方法、またこれらをVSCodeで使用する方法を紹介します。 1. ESLint Documentation - ESLint - Pluggable JavaScript Linter 1-1. インストール eslintをグローバルにインストール $ npm install -g eslint インストールを確認 $ eslint -v 1-2. 設定ファイル ESLint - Configuring ESLint eslintを使うには設定ファイルである.eslintrc.*が必要です。 .eslintrc.*で使えるファイル形式 JavaScript：.eslintrc.js JSON：.eslintrc.json YAML：.eslintrc.yml ここでは.eslintrc.jsonを使用します。設定ファイルの作成方法1：直接.eslintrc.*を作成方法2：eslint --initコマンドで対話形式で作成事前にpackage.jsonの作成が必要 eslint –initはnpm init @eslint/configと同じ設定ファイルのプロパティ .eslintrc.jsonの例 { "env": { "browser": true, "node": true, "es2022": true }, "extends": ["eslint:recommended", "prettier"], "overrides": [], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "rules": {} } env ESLint - Specifying Environments extends ESLint - Using eslint:recommended eslint-config-prettier parserOptions ESLint - Specifying Parser Options 1-3. コマンドラインでESLintを実行 $ eslint yourfile.js 検証した結果、問題がなければ何も表示されない ESLint - Command Line Interface 1-4. VSCodeとの統合 VSCodeにvscode-eslintをインストール ...

【nvm】Node.jsのインストールとバージョン管理

この記事では、Node.jsのバージョン管理ツールであるnvmのインストール方法・設定・使い方を紹介します。 1. nvmのインストール GitHub - nvm-sh/nvm：Install & Update Script 以下のコマンドを実行して、nvmのインストールスクリプトを実行 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash 上記により~/.nvmが作成され、~/.zshrc(bashの場合は~/.bash_profile)に以下が追記される export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion 上記3行目のbash_completionについて→GitHub - nvm-sh/nvm：Bash Completion ターミナル再起動後に以下を実行してnvmがインストールされたことを確認 $ nvm -v 2. .nvmrcファイルの自動読み込み設定 GitHub - nvm-sh/nvm： .nvmrc この設定をすることで、.nvmrcファイルがあるディレクトリに移動すると、自動でnvm useが実行され.nvmrcファイルに記載されているバージョンのnodeに自動で切り替わる ~/.zshrcに以下を追記して設定は完了 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")") if [ "$nvmrc_node_version" = "N/A" ]; then nvm install elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then nvm use fi elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] && [ "$(nvm version)" != "$(nvm version default)" ]; then echo "Reverting to nvm default version" nvm use default fi } add-zsh-hook chpwd load-nvmrc load-nvmrc .nvmrcファイルの中身はバージョンを記載するだけ ...

【Git】任意の箇所にコミットを挿入する

以下のようなコミット履歴がある A -- B -- C コミットBとコミットCの間に新しいコミットDを挿入したい A -- B -- D -- C やり方コミット履歴の確認 $ git log --oneline a065513 (HEAD -> main) コミットC 1e4ebc6 コミットB b4c8aca コミットA コミットBの後ろに挿入したいのでrebase -iでb4c8aca(コミットA)を指定 $ git rebase -i b4c8aca テキストエディタに以下が表示される pick 1e4ebc6 コミットB pick a065513 コミットC コミットBのpickをeditに変えてファイルを保存して閉じる edit 1e4ebc6 コミットB pick a065513 コミットC ファイルの修正を行い、以下を実行(通常のrebaseではgit commit --amendだが今回は新たなコミットを挿入するためgit commit) $ git add . $ git commit -m "コミットD" $ git rebase --continue コミットBとコミットCの間にコミットDを挿入できた 073d6f0 (HEAD -> main) コミットC a453e0f コミットD 1e4ebc6 コミットB b4c8aca コミットA 【参考】 ...