bind()メソッドを使ってみませんか？（初めて使うJavaScriptのbind）

# はじめに
JavaScriptの`bind()`は簡単に言えば、あらかじめ作成した関数のパラメーター（this）を変更して新しい関数を作れるメソッドです。

英単語bindの意味をそのまま辿ると「拘束」や「結びつけ」といった意味がでてきて、何ができるのかわかりにくりですね。

少し強引に言葉を補って…

:::note info
すでにある他の関数を**拘束**して
他のオブジェクトのパラメータ（this）や引数と**結びつけ**
新しい関数を生成する
:::

と読み替えると、bind()の動きが少しイメージしやすくなるかもしれません。
構文に当てはめてみると以下のようになり少し簡単そうに見えてきませんか？

“`javascript:
// すでにある他の関数.bind(パラメータthis, 引数1, 引数2, … ,引数N)
func.bind(thisArg, arg1, arg2, … ,argN)
“`

以下より、飛行機の「空を飛ぶ」という機能を拘束し
パラメータを車に結びつけて車が空を飛ぶ
といったサンプル作りながら、bind()の使い方を紹介

レガシーなシステムのコードを勉強がてら、自分なりに最適化してみる

# Perlは好きですか？

こんにちは。自分は、Pythonを主言語として、いつも書いていますが、
今回、自社システムを学ぶためにも書かれているコードを勉強しつつ、コーディングしてみた話です。

システムは、かれこれ十数年クラスの凄いシステムです。
当時、師匠が一人で作ってくださり、今もなお現役として稼働し続けているシステムで、
全てPerlで書かれているCGiとなります。
セキュリティ的な面はさておき、コード自体は、特にPerlっぽさもないコーディングに仕上がっており、今後使われるかは不明です。
また、これら勉強を通してためになった部分を最も個人的にためになった箇所だけを抜粋し、こちらに投稿させて頂きます。

それでは、始まります。
###### ※なお、公開しているコードは一部を抜き出したもので、不完全であり、コピペでは動きません。　

## IPカメラ(ネットワークカメラ)から画像を取得したい。

弊社システムでは、必須な項目であり、現場のカメラから画像を取得し、システム上に表示させなくてはイケません。
そこで、弊社のシステムでは登録された情報からカメラに直接アクセス、または間

Echo Showで遊んでみた②

これは[DeafEngineers Advent Calendar 2022](https://qiita.com/advent-calendar/2022/deafengineers)の23日目の記事です。

デフエンジニアの会はデフ（＝ろう・難聴＝聴覚障害者）のエンジニア、また、聴者（＝耳が聴こえる人）エンジニアで構成されているグループです。

みなさんこんにちは、湘南生まれの横浜育ち、新しもの好き「てん」です。
よろしくおねがいしますｂ

前回の「[Echo Showで遊んでみた①](https://qiita.com/tenpro21/items/321987cd5176a6830342)」の続きです。

# 前回のスキルを試してみて
いろいろ試していくうちにアレクサスキルを自作できるということなので、どのようにできるか調べてみたところ、下記の通り。
**◎Alexaスキル開発**
Alexa Skills Kitで提供されているデザインやAPI、コンポーネントを使って開発し共有できる

https://developer.amazon.com/ja-JP/alexa/al

p5.jsでキャンバスに円を敷き詰めたいので頑張ってみる。

## はじめに
一部ではたこやきとかとも言われている者です。

もうそろそろクリスマスというところで、アドベントカレンダーも終わってしまいますね。

さて、今回この記事では、p5.jsでキャンバスに円を敷き詰めるために頑張ってみたいと思います。
解説する系の記事もいいけど、よくわからんけど頑張ってる姿を実況する記事も好きなので。。

クリエイティブコーディング的なものが好き〜〜みたいな記事は[ここ](https://qiita.com/koya_kimura/items/35df3442526454797ec1)に書いています。
アドベントカレンダーにしたくせにはじめに以外を全く書いてないのは触れてはいけないパンドラの箱です。

## 完成希望図
ざっくりとイメージはこんな感じです。
ここで言うところの敷き詰めるは「**大きさも位置もランダムに配置された円が一部分も重なることなく描画されている**」状態を指しています。
今までは難しそうで遠ざけていましたが、一旦やってみます。
非技術者がJavaScriptフレームワーク・ライブラリの違いを調べてみた

技術研修を提供しているカサレアルでは、JavaScriptのフレームワーク、ライブラリを学ぶコースをいくつか用意しています。
お客様から研修のご要望を伺う際、「JavaScriptフレームワークのおすすめどれですか？」と相談を受けることもあります。

JavaScriptが何かは分かっているものの、数多のJSフレームワーク、ライブラリの違いって何だろう？
いや、そもそもフレームワークとライブラリの違いは？と疑問があったので、調べてみました。

## フレームワークとライブラリの違い

フレームワークはWebアプリケーションの
・骨組み
・土台
・ひな形
・設計を再利用でき効率化するもの

ライブラリはWebアプリケーションの
・部品
・汎用性の高いパーツのコレクション
・コードを使い回し効率化を可能にしたもの
・開発効率を上げプログラムを軽くするもの

あらゆるサイトで調べ、色んな表現が出てきました。

ですが、調べてみると、どれがフレームワークでどれがライブラリなのかという解釈は、人それぞれのように感じました。
というのも、カサレアルではReactやVue.jsをライブラリと紹介して

[Day23] ドキュメント part3

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 2.1.9 要素サイズとスクローリング
### 知らない単語
– ジオメトリとは
– コンピュータグラフィックスにおける描画対象の形状や、形状を定義づける頂点の座標や線分、面などの図形を表す式の係数といったデータの組み合わせを意味する

### 学んだこと
要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできるプロパティについて

– ジオメトリ

幅、高さや他のジオメトリを提供する要素プロパティは常に数値で、ピクセルと仮定される

【Alpine.js】Livewireのプロパティと連携させるなら@entangle使いまヒョ

# ＠entangleとは
LivewireとAlpine.jsのプロパティを共有することができます。

# 何ができるのか
Alpine.js、Livewireのプロパティの値を変更させると、もう一方のプロパティの値も変更されます。
プログラミング言語で言い表せば、PHPとJavaScriptを相互に連携させることができるというワケ。

# コード例（公式ドキュメントより）

“`php
// Livewireのコンポーネント

class Dropdown extends Component
{
public $showDropdown = false;

public function archive()
{
…
$this->showDropdown = false;
}

public function delete()
{
…
$this->showDropdown = false;
}
}
“`
“`html
@entangleでLivew

Litで作ったコンポーネントをReactで使う

## この記事の概要

UIライブラリーをWeb Componentsで作って、ReactでもVueでもSvelteでも、色々な場所で使えたら嬉しくないですか？
私は結構夢がある話だと思っています。

というわけでその素振りをしてみました。
ユーザー規模的にReactを題材にしていますが大筋は他のフレームワークでも変わらないはずです。

## Litとは？

Litとは、Web Componentsを構築するためのライブラリです。
通常のWeb Componentsは記述量が多いのと書き方が若干特殊に見えるので、Litが上手くラップして書きやすくしてくれます。

https://lit.dev/

## Lit環境（export側）の構築

まずはLit側の準備です。
公式のスターターキットがJavaScriptとTypeScript用それぞれ用意されているのですが、ちょろっと試すには重厚な印象でした。

https://github.com/lit/lit-element-starter-js

https://github.com/lit/lit-element-starter-t

コードをきれいにしたい

## これは何？
javascriptのコードが解析されていい感じに整形されるようにします。
– リンター(解析): ESLint
– フォーマッター(整形): prettier

## ESLint
“`
npm init @eslint/config
“`
インストールすると、設定に関する質問がいくつかあるのでそれに答えます。

“`style guide“`は“`Airbnb“`が1番人気のようです。
“`Airbnb“`の設定は日本語にも訳されていて、わかりやすいと思います。

https://github.com/mitsuruog/javascript-style-guide

↓ “`Google“`、“`Airbnb“`、“`Standard“`の大まかな違いは以下の記事にまとめられています。

https://betterprogramming.pub/comparing-the-top-three-style-guides-and-setting-them-up-with-eslint-98ea0d2fc5b7

“`.esli

初めまして、Vue.js

こんにちは！
最近、Vue.jsに入門したので、その内容について書いていきたいと思います。
# そもそもなぜ学ぶのか？
### 社内の取り組みで必要だから
1つ目の理由が社内の取り組みで必要だからです。
JSフレームワークを仕事で使う機会は今のところ多くはないのですが、時代の流れとともに必要になる時が必ずきます。
その時に備えて、Webアプリ制作の知見を貯めておく取り組みを社内で行なう予定です。
この取り組みでVue.jsを使用するので、最低限の知識をインプットしておく必要があります。

### 理由もなく使ってこなかったから
2つ目の理由が、特にこれといった理由もなくVue.jsに触れてこなかったからです。
Vue.jsよりもReactが人気なイメージがあるからReactの勉強だけをすれば良いかー、といった感じで今まではReactのみを勉強していました。
ただ、それぞれに良いところ悪いところがあるはずなので、今回の勉強を通してその辺りを明確にしていければと思っています。
ということで、さっそく内容に入ります。

# Vue.jsの特徴
### ディレクティブ
Vue.jsには**ディ

JavaScriptの配列関係のメソッドまとめ

:sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles:
**:evergreen_tree: We wish you a merry Christmas :snowman2:
:flag_jp: And a happy New Year! :sunrise_over_mountains:**

元記事を表示

Jasmine と Mocha の違いは？

昨日は Mocha について調べていきました。

https://qiita.com/kotaro-caffeinism/items/ff3be5354bedc08ea404

これまで私が使ってきたテストフレームワークとして他に「Jamine」があり、Mocha と何が違うのか今ひとつわからなかったため今回は Jasmine について調べてみました。

## Jasmine とは

**BDD（ビヘイビア駆動開発）用の JavsScript テストフレームワークです。** ブラウザ JavaScript と Node.js に対応しています。

BDD は振る舞いの検証に焦点を当てた開発手法であり、TDD（テスト駆動開発）の派生です。「この振る舞いはスペックに合っているか？」を検証するためのテストコードを書いていきます。

Jasmine のサンプルコードを見ていきましょう。

“`js
describe(“A suite”, function() {
it(“contains spec with an expectation”, function() {

元記事を表示

ReactHooksについてまとめる（Other Hooks useDebugValue）

# 概要

ReactHooksの[Other Hooks](https://beta.reactjs.org/apis/react#other-hooks)についてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。

今回はuseDebugValue編です。

## useDebugVlue
useDebugValueは、React DevToolsのカスタムHookにラベルを追加するためのReact Hookです。

### カスタムHookにラベルを追加する
useOnlineStatusを呼び出すコンポーネントには、
OnlineStatus: “Online “のようなラベルが表示されます。

“`jsx
import { useDebugValue } from ‘react’;

function useOnlineStatus() {
// …
useDebugValue(isOnline ? ‘Online’ : ‘Offline’);
// …
}
“`

![スクリーンショット 2022-12-21 1.16.4

元記事を表示

Webpack v4 から v5に上げたので、やったことをまとめる

[Qiita株式会社のカレンダー](https://qiita.com/advent-calendar/2022/qiita-inc)の23日目は @kyntk が担当します。

—

今年、webpackをv4からv5にアップデートしました。
すんなりアップデートとはいかず、いくつか変更したところがあったので、やったことを記載していきます。

元々上げなくてはと思っていたものの着手できていなかったのですが、webpack v4が使っているacornのバージョンに依存して[optional chainingのエラー](https://github.com/webpack/webpack/issues/10227)が起きていたり、watchでCPUをめちゃくちゃ使ってしまうといったことが起きていたりしたので、今回アップデートに踏み切りました。

## v5へのアップデートについて

webpackはv4からv5に上げる際に変更点がとても多いです。それだけでなく、v5でもマイナーバージョンが**75**あるので、影響範囲を確認するだけでも大変でした。

v4からv5で差分が多く、Bra

元記事を表示

[TypeScript,Jest] JestでオリジナルのMatcherを作ってテストをしよう

# はじめに

こんにちは！

みなさん、jestでテストを書いていて **「xxxっていう値が返ってくるのをテストしたいけど組み込みのメソッドだとテストできない。。どうしよう」** となったことはありませんか？

実は、jestには **`expect.extend`** という関数が用意されていて自分オリジナルの※Matcherを作ることができるんです。(※ **`toBe`,`toHaveBeenCalled`** などテスト書くときに書くあれです。)

本記事では、自分がこの記事を書くきっかけになった **”ある値の型が `特定の型 | null` となるかどうか”** をチェックするMatcherの作成を通して、CustomMatcherの作成方法を解説します。

# 本記事のゴール

**自分だけのCustomMatcherを作成できるようになる**

# 準備

まずはTypeScript x Jestを実行できる環境を作成します。もしそれが面倒でちゃっちゃと試したい場合は、筆者のレポジトリ(https://github.com/ironkicka/jest-custom

元記事を表示

Stimulus に入門してみた

Rails7 のデフォルトでインストールされる JavaScript フレームワーク Stimulus に入門してみます。

まずは公式のハンドブックやリファレンスを読みながら雰囲気を掴んでいこうと思います。

https://stimulus.hotwired.dev/

## Stimulus とは

HTML を中心に置いている JavaScript のフレームワークです。
React や Vue は空のページを作成してサーバーサイドから JSON を返し SPA を実現していますが、 Stimulus は通常のサーバーサイドレンダリングを強化するように設計されています。

Stimulus は Railsに依存しているわけではないですが、Rails7 にデフォルトで入っている Turbo と組み合わせるとSPAのようなUIを実現できます。

## 3つのコアコンセプト

Stimulus には3つのコアコンセプトがあります。

### コントローラー

コントローラーは DOM 要素と JavaScript オブジェクトを繋げます。`data-controller`属性でコント

元記事を表示

Promise.allを複数入れ子で使ってみる

“`javascript:test.js:
const main = async () => {
const promises = [];
for (let i = 1; i < 4; i++) { promises.push(new Promise((resolve) => {
setTimeout(() => {
const msg = `promise${i}:${performance.now()}`;
console.log(msg);
resolve(msg) ;
}, 1000 ) ;
}));
}
const promise4 = new Promise((resolve) => {
setTimeout(() => {
const msg = `promise4:${performance.now()}`;
console.log(msg);
resolve(msg) ;
}, 1000 ) ;
}

元記事を表示

JavaScript DOMの取得

# DOMとは
JavaScriptからHTMLを操作する仕組み。

## DOMツリーとは
HTMLの内容をツリー上に表現したもの。
DOMツリー内の各要素のことをノードと呼ぶ。
https://zenn.dev/miumi/articles/2924832e3b3f940f8

## 要素の取得
## 特定のID名を持つノードを指定する
“`html

挨拶

こんにちは

さようなら

“`
“`javascript
const target = document.getElementById(‘main’);
console.log(target);
//こんにちは
//さようなら
“`
※documentとは
window.documentというWebブラウザーが標準で用意しているオブジェクトwindowの一部。HTMLを操作するためのもの。windowは省略できる。

### HTMLタグ名でノード

元記事を表示

JavaScript クラスとインスタンス

# クラスを使う背景
このように同じ情報を持った複数のオブジェクトがあると書きづらくごちゃごちゃする。

“`javascript
const tanaka = {
lastName: ‘tanaka’,
firstName: ‘taro’
}

const suzuki = {
lastName: ‘suzuki’,
firstName: ‘jiro’
}

const sato = {
lastName: ‘sato’,
firstName: ‘saburo’
}
“`
# クラスとは何か

だから使いまわせる情報を持った型のようなものを持っておく。
これがクラス。
“`javascript
class Profile{
constructor(lastName, firstName){
this.lastName = lastName;
this.firstName = firstName;
}
}
“`
# インスタンスとは何か

雛形となるクラスを用いて新しく(new)作っ

元記事を表示

JavaScriptのビルドインオブジェクト

JavaScriptではたくさんのオブジェクトが元から用意されている。
ほぼ全ての値はこれを利用して作られたもの。

例えば、
“`javascript
console.log()
“`
は分解すると
consoleオブジェクトのlogメソッド。
consoleに紐づく様々なメソッドが用意されており、それを使っている。

“`javascript
const str = ‘hello’;

console.log(str.length);
console.log(str.toUpperCase());

//5
//HELLO
“`

## Mathオブジェクト

ex) Mathオブジェクトのroundメソッドを利用して50~100までのランダムな値を取得する
“`javascript
const generateRoundNum = (start, end) => Math.round(start + Math.random() * (end – start));
console.log(generateRoundNum(50, 100));
“`

https://

元記事を表示