この記事では、ヘッドレスブラウザ(Chrome)でRailsアプリのJavaScriptをデバッグする方法を紹介します。 この方法を用いると、ヘッドレスブラウザでも通常のChrome DevToolsのデバッグと同じようにページのライブビューを表示しながらデバッグすることが可能…

この記事ではReactにおけるスプレッド構文の使い方を解説します。 Reactにおいて、スプレッド構文は主にstateが保持するオブジェクトや配列を更新する際に使われます。 1. オブジェクトのスプレッド構文 ネストしたオブジェクトの場合 2. 配列のスプレッド構…

この記事では、ESモジュール(ECMAScriptモジュール, JavaScriptモジュール)のimportとexportの使い方を紹介します。 Node.jsでESモジュールを使う方法は以下を参照ください。 ama-tech.hatenablog.com 1. 名前付きエクスポート(Named exports) 2. デフォルト…

この記事ではVue.jsで基本的なSPA(Single Page Application)を作成する方法を紹介します。 create-vueを使用 Vue3でComposition APIを使用 データはLocalStorageに保存 PiniaやVue Routerは使用しない 1. 実行環境 2. アプリの要件 3. 作成手順 3-1. create-…

この記事ではnpmパッケージの公開・バージョンアップ・削除方法を紹介します。 npmパッケージを公開するには、事前にnpmアカウントの作成とGitHubリポジトリの作成が必要です。 docs.npmjs.com 1. 環境 2. npmパッケージの公開 2-1. package.jsonの作成 2-2.…

この記事では、Node.jsでメモの追加・一覧・参照・削除ができるコマンドラインアプリを作成します。 データの保存先にはJSONファイルを使い、JavaScriptのclass構文を使って作成します。 1. 実行環境 2. アプリの要件 2-1. メモの追加 2-2. メモの一覧 2-3. …

CLIでフラッシュ暗算ができるnpmパッケージを作成しました。 www.npmjs.com npmパッケージの公開方法は以下を参照ください。 ama-tech.hatenablog.com この記事では、JavaScriptでフラッシュ暗算ゲームを作成する方法を解説します。 1. 実行環境 2. フラッシ…

この記事ではVue.jsでToDoリストアプリを作成する方法を紹介します。 HTML, CSS, JSだけを使用し、データはLocalStorageに保存し、Vue3でOptions APIを使用します。 1. 実行環境 2. ToDoアプリの要件 3. 作成手順 3-1. ToDoの登録と一覧表示 3-2. ToDoの削除…

以下のカレンダーのプログラムをJavaScriptで、nodejsで実行するコマンドラインのプログラムとして作り直します。 ama-tech.hatenablog.com 1. 環境 macOS：13.0.1 node：v18.12.1 2. ソースコード #!/usr/bin/env node const argv = require("minimist")(pr…

この記事ではESLint(静的検証ツール)とPrettier(コードフォーマッター)のインストールと設定方法、またこれらをVSCodeで使用する方法を紹介します。 1. ESLint 1-1. インストール 1-2. 設定ファイル 1-3. コマンドラインでESLintを実行 1-4. VSCodeとの統合 …

この記事では、Node.jsでESモジュール(ECMAScriptモジュール, JavaScriptモジュール)を使う方法を紹介します。 バージョン情報 node：v16.18.0 方法1：モジュールファイルの拡張子をmjsにする foo.mjs export const foo = "foo"; main.mjs import { foo } fr…

1. 関数宣言(Function declaration) 1-1. 関数宣言の巻き上げ 2. 関数式(Function expression) 2-1. 名前付き関数(Named function) 2-2. 無名関数(Anonymous Function) 3. アロー関数(Arrow function expression) 3-1. アロー関数の省略記法 4. メソッド定義…

この記事ではJSONの基礎と、RubyでJSONファイルを扱う方法を紹介します。 1. JSONの基礎 1-1. JSON(JavaScript Object Notation)とは 1-2. JSONの表記方法 JSONのデータ型 1. 文字列(string) 2. 数値(number) 3. 真偽値(boolean) 4. ヌル値(null) 5. オブジ…

JavaScript初心者でも簡単に作れるゲームが知りたい！ ゲームの作り方の詳しい解説やソースコードも見たい！ 本記事の内容 ゲームの完成形とソースコード ゲームの作り方の解説 この記事は、JavaScriptの基礎文法を一通り学んで「実際に何かを作ってみたい！…