- 1. モジュールバンドラとは
- 2. JavaScriptの実行環境とは
- 3. 【javascript】someメソッド,everyメソッドについて
- 4. selectを変更する前に一旦それでいいか確認するjs
- 5. eslint –initで `enforce code style`が選べなくなっていたことの調査メモ
- 6. Javascript+PHP+MySQLで面接室の予約システムを作ってみた
- 7. Node.js と ws でシンプルな WebSocketサーバー ＋ Node.js v22 でフラグなしで使える WebSocket
- 8. Node.js で Readline をシンプルに使う（1桁の数字の入力を扱う）
- 9. JavaScript: ブンポー圧縮
- 10. cached-providerを作ってみた
- 11. 5-①.JavaScript のオブジェクト(Object)
- 12. ==（等価演算子）と===（厳密等価演算子）の違い
- 13. ESLint入門：JavaScriptコードの改善と使い方ガイド
- 14. 【TypeScript】実はクロージャ外で型ガードしてもクロージャ内部では型判定の結果が無効化されていた
- 15. 【もしアノ】もしもアノニマスが優しい心の持ち主だったら🎭
- 16. Vue3 + VeeValidate4 を SFC 無しで使用する
- 17. ついに魔法の絨毯にのって空を飛べる日が来た
- 18. 【React / JS】Enterキーで入力を確定する方法【日本語入力対応】
- 19. 【JavaScript】ESMとCJSの違い
- 20. 【個人開発】色彩検定1級合格のデザイナーが本気で「色彩検定の色名アプリ」を作った話
モジュールバンドラとは
# この記事は
モジュールバンドラに関してわかってるようで何もわかってなかったので基本的なことを整理してまとめたメモ。
# モジュールバンドラとは
モジュールバンドラとは文字通りモジュールをバンドルするもの。## モジュールとは
変数や関数をまとめたもの。モジュールシステムが導入されたJavaScriptでは、処理内容に応じてファイルにモジュールを分けて管理することができ、１つのモジュールは１つのJavaScriptファイルに対応する。このモジュールシステムには、Node.js環境下のCommonJSにて組み込まれているモジュールシステムや、2015年にECMA Script2015のモジュールシステムであるES Modulesなどいくつかの形式がある。## モジュールをバンドルするとは
複数のJavaScriptファイル（モジュール）を一つにまとめること。ただ単にまとめるわけではなく、モジュール構文を解析し依存関係を解決しながら一つにまとめて実行できる形にしてくれる。依存関係を解決するというのは、モジュール間の依存関係が正しく解決され、各モジュールが必要な順番で読み込まれ
JavaScriptの実行環境とは
# この記事は
JavaScriptの実行環境に関してわかってるようで何もわかってなかったので基本的なことを整理してまとめたメモ。
# JavaScriptの実行環境
JavaScriptには大きく分けて二つの実行環境がある。
– Webブラウザ
– OS上で実行されるランタイム環境## Webブラウザ
Webブラウザは、クライアントサイドでJavaScriptコードを実行するための環境。
JavaScriptで書かれたコードを解析・実行するエンジンが搭載されていれば（基本的に搭載されている）WebブラウザでJavaScriptを実行することができる。ブラウザ上で動作するものなので、後述のランタイム環境で実行されるもののようにOSの機能にはアクセスできない。### 主なJavaScriptエンジン
| Webブラウザ | JavaScriptエンジン | ひとこと |
| ————– | ———-
【javascript】someメソッド,everyメソッドについて
## `some`メソッド
`some`メソッドは、配列の中の少なくとも1つの要素が条件を満たすかどうかをチェックします。条件を満たす要素が見つかると、`true`を返します。もし全ての要素が条件を満たさなければ、`false`を返します。
### 使用例
“`javascript
const numbers = [1, 2, 3, 4, 5];const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true （2や4などが条件を満たします）
“`上記の例では、配列`numbers`の中に少なくとも1つの偶数があるかどうかをチェックしています。`some`メソッドは、偶数が見つかると`true`を返します。
## `every`メソッド
`every`メソッドは、配列のすべての要素が条件を満たすかどうかをチェックします。すべての要素が条件を満たすと`true`を返し、1つでも条件を満たさない要素があると`false`を返します。
selectを変更する前に一旦それでいいか確認するjs
“`
Document
eslint –initで `enforce code style`が選べなくなっていたことの調査メモ
# はじめに
ESLintはJavaScriptやTypeScriptのコード品質を保つためのツールですが、最近のアップデートで設定方法が変わり、一部のオプションが削除された。`npm eslint –init`コマンドを実行して選択肢が変わっており、変なハマり方をしたため、調査結果を備忘として記載します。
### 期待した選択肢
“`bash
? How would you like to use ESLint? (Use arrow keys)
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
“`### 最新の選択肢
“`bash
? How would you like to use ESLint? (Use arrow keys)
To check syntax only
❯ To check syntax and find problems
“`ESLintを8.0.0
Javascript+PHP+MySQLで面接室の予約システムを作ってみた
## 記事の概要
エンジニア未経験からの挑戦ということで企業様へアピールするためのポートフォリオを作成してみました。
作成手順と機能、工夫したところ、課題点を書き出してみようと思います。### プロフィール
27歳 男性
ITは全くの未経験(前職は営業)
就労移行支援にて０からプログラミングを学ぶ。
**ポートフォリオ作成は期間2ヵ月～2か月半**（思ったより苦戦しました…）## 目的
* JavascriptとPHPを
使いつつDBとの連携も行えるよう経験を積む
* 今の自分のレベル感を企業に判断してもらう
* 素のJs、PHPでどこまで書けるかチャレンジ# スペック
**言語**
Javascript (Vanilla Js)
PHP 8.0.19**DBMS**
MySQL Ver 8.0.Node.js と ws でシンプルな WebSocketサーバー ＋ Node.js v22 でフラグなしで使える WebSocket
## はじめに
以前から利用している「ws」と、Node.js v22 でフラグなしで使えるようになった WebSocket を組み合わせる話です。### ws
以下の ws は WebSocketサーバーを準備するのに使います。●ws – npm
https://www.npmjs.com/package/ws### Node.js v22 で WebSocket利用
Node.js v22 でフラグなしで使える WebSocket は、以下に書かれているものです。●Node.js — Node.js 22 is now available!
https://nodejs.org/en/blog/announcements/v22-release-announce#websocket
ブラウザと同様に、WebSocketサ
Node.js で Readline をシンプルに使う（1桁の数字の入力を扱う）
Node.js でキー入力をシンプルに取得したい、という状況があり、以下の標準モジュールを使った簡素なプログラムを作ってみました。
●Readline | Node.js v22.3.0 Documentation
https://nodejs.org/api/readline.html元にするプログラムは、上記のページに書かれているものです。
“`javascript
const readline = require(‘node:readline’);
const { stdin: input, stdout: output } = require(‘node:process’);const rl = readline.createInterface({ input, output });
rl.question(‘What
JavaScript: ブンポー圧縮
今回は文法圧縮の記事となります。より正確には`RePair`と呼ばれる有名な手法の改良版の紹介です。本家は[この辺に](https://code.google.com/archive/p/re-pair/downloads)あります。
## 本家の問題点
圧縮、伸長ともに再帰関数を利用しており、容易にstack overflow(segmentation fault)を起こす事が知られています。
ついでにその再帰の最も深い所で、不要な1 bitの符号化が毎回発生しており、圧縮率の低下を招いています。不要と言えば、まれに不要なpairingも発生します。
そしてもう1つ、単純にbit列を書き込んでいるだけなので、工夫すれば圧縮率はまだまだ良くなるという事。
## 実装
圧縮率を高めるためにCBT符号を利用します。例によって`compress`が圧縮関数、`decompress`が伸長関数。`compress`の引数`cut`は0～3の数値を指定。大きい程計算量が増えます。速度が犠牲になりますが、僅かに圧縮率が上がる可能性があります。
“`js
{const primes=functiocached-providerを作ってみた
# はじめに
キャッシュとは、一度取得したデータを一時的に保存しておき、次回同じデータが必要になったときに再取得せずに素早く提供する仕組みです。例えばAPIからデータを取得する場合、最初のリクエスト時にそのデータをキャッシュに保存しておき、次回からはキャッシュからデータを返すようにすると、処理が速くなります。しかし、初回のデータを取得している間にも次のリクエストが来るかもしれません。ロックを取得して待たせるという選択肢がないTypeScript/JavaScriptの場合、このようなケースを綺麗に扱うのは意外と難しいものです。
その問題を解消するために書いた自作ライブラリの紹介です。
[cached-provider on npm](https://www.npmjs.com/package/cached-provider)
# 基本的な構成
## ObjectIdMapper
JavaScriptのObjectには固有のIDがありません。そのため、Objectに対してロック処理をするためには、Objectを一意に識別する仕組みが必要になります。ObjectIdMapperは5-①.JavaScript のオブジェクト(Object)
# Objectオブジェクト
> 警告: 記事に機械翻訳するものがあるので、学習メモとして保存され、参考学習用のみ## 概要
JavaScriptネイティブで提供される「Object」オブジェクト(最初のOが大文字であることに注意)のための様々な方法を紹介します。
JavaScriptの他のオブジェクトはすべて`Object`オブジェクトから引き継がれます。つまり、それらのオブジェクトはすべて`Objectのインスタンス。
`Object`オブジェクトのネイティブメソッドには、`Object`自身のメソッドと`Objectのインスタンスメソッドの2種類があります。
** (1) `Object`オブジェクト自体のメソッド**。
「自身的アプローチ」とは`Object`オブジェクトに直接定義するアプローチ。
“`javascript
object.print = function (o) {console.log(o)};
“`上記のコードでは`print`メソッドは`Object`オブジェクト上で直接定義されています。
**(2) `オブジェクト`の例の方法*
==（等価演算子）と===（厳密等価演算子）の違い
業務でコードレビューを行っている時に、メンバーのソースで意図せず”==”と”===”が混在していたので。
改めて違いについて記事にしてみます。# 等価演算子（==）と厳密等価演算子（===）の定義
JavaScriptでもTypeScriptでも、等価演算子は非推奨で、厳密等価演算子を用いることが推奨されています。”==”と”===”は厳密には異なる挙動を示します。
MDNのドキュメントを確認してみましょう。### 等価演算子
> 等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。*厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。*https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality
### 厳密等価演算子
> 厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。＊等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なESLint入門：JavaScriptコードの改善と使い方ガイド
# はじめに
こんにちは、Gakken LEAP のエンジニアの Minami です。
フロントエンド開発にあたり、品質の向上・チームメンバー間での実装レベルの統一を目的として、ESLintを導入しました。今回は、初歩的な部分にはなりますが、備忘録的な意味も込めてまとめてみました。—
# ESLintとは
ESLintは、JavaScriptのコードを解析して構文エラーや慣用的な問題を見つけるツールです。プログラムの品質や保守性を高めるために役立ちます。
—
# 導入方法
1. **`Node.js`のインストール**: ESLintを使うには、まず`Node.js`をインストールします。`Node.js`はJavaScriptを実行するための環境です。
2. **プロジェクトの初期化**: プロジェクトのフォルダでコマンドを実行して、プロジェクトを初期化します。
~~~bash
npm init -y
~~~3. **ESLintのインストール**: ESLintをプロジェクトに追加します。
~~~bash
n【TypeScript】実はクロージャ外で型ガードしてもクロージャ内部では型判定の結果が無効化されていた
# 問題！！
以下コードを実行すると何が出るでしょうか！？
“`tsx
function getUrls(url: string | URL, names: string[]) {
if (typeof url === “string”) {
url = new URL(url);
}return names.map(name => {
url.searchParams.set(“name”, name)
return url.toString();
});
}console.log(getUrls(“http://localhost:8080”, [“test”]))
“`## 答え！！
クロージャ内で引数urlの型が分からないのにURL型のメソッドを使おうとしてエラーになります。
つまり型判定の結果が無効化されちゃっています…..
