JavaScript関連のことを調べてみた

【DAY24】投稿画面における文字数の表示(1)

## はじめに
Laravelを用いてQ&Aサイトを作成しています。質問に対して文字数制限を設けているので、入力時に何文字書いたかわかると便利だと思い、その機能を実装することにしました。
以下の本を参考にしました。
[1冊ですべて身につくJavaScript入門講座](https://www.amazon.co.jp/%E3%80%90Amazon-co-jp-%E9%99%90%E5%AE%9A%E3%80%911%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-DL%E7%89%B9%E5%85%B8-JavaScript%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC%E3%83%88-%EF%BC%91%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%

プログラマーが落ち着かなくなるコードを書いてみた #4 (究極の意味不明を作る)

どうもこんにちはクソコードが大好きなAtsu1209です。
今日はクソコード第四弾です。

第一弾

https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a

第二弾

https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb

第三弾

https://qiita.com/Atsu1209jp/items/ebee2ed3c07093b6696f

番外編

https://qiita.com/Atsu1209jp/items/b88c5e5ccbf037e76565

このシリーズ結構やってて草

# 今回やること
第二弾の記事にこんなコメントをいただきました。
`パッと見何をやりたいかわかるコードはクソコードではないｗｗｗ`
なら挙動もコードもなにもかもが意味不明なものつくろう
ということです。

# 作る
説明するより見てもらったほうが早い気がするので早速書いちゃいます。
“`html:index.html

javascript/typescriptの非同期関数について

## はじめに
今年フロントエンドエンジニアに転職して、自分が学習した非同期関数についてまとめたいと思います。
もし解釈が間違っている&補足など、アドバイスがあれば教えていただきたいです!

## 非同期関数とは
javascriptは基本的に一つの処理しかできず、並行処理ができません

javascriptの非同期処理で使用するメソッドは主に（**async**・**await**・**Promise**）の3つ存在します。

**async** :
・非同期関数の宣言に使用します。asyncを関数の前に付けることで、その関数の返り値Promiseにします。
**await** :
・非同期処理が終了するのを待機します。
・awaitはasync関数内でのみ使用でき、ます。そのため、次の処理で返り値を使うことができます。
**Promise** :
・非同期処理の結果を表現するオブジェクトです。Promiseは3つの状態を持ちます。
・pending: 未解決（処理が終わるのを待っている状態）
・resolved: 解決済み（処理が完了し、無事成功した状態）
・rejected

【JavaScript 】JavaScriptの関数宣言と関数式について

# はじめに
最近JavaScriptの基礎力を上げようと思い練習問題を毎日解いています。教材が少し古いものでfunction関数を使っていました。そこで発生した疑問である関数宣言と関数式についての記事になります。

# 関数の定義の仕方
JavaScriptの関数の定義の仕方には２種類があります。「***関数宣言***」「***関数式***」という2つの種類があります。

## 関数宣言
`function`を使い関数を宣言します。

“`javascript
function hello() {
console.log(“Hello World”)
}

hello();

// 出力結果　Hello World
“`
`hello`関数を宣言した後に関数の関数を実行します。

“`javascript
function sum(num_1, num_2) {
return num_1 + num_2;
}

console.log(sum(1, 2));

// 出力結果 3
“`
`hello`関数を宣言した後に引数を渡して関数を実行します。

## 関数式
関

JavaScriptの復習③

# はじめに
今回は、Chapter4の復習をまとめていきます。これを踏まえて、CSSのクラスを切り替えで出来ることを考えます。

# 背景色を切り替える

See the Pen
背景色を切り替える by Uka Suzuki (プー、　プップ。モールス信号の送信ゲーム。（モールス信号勉強用。）



### モールス信号の送信速度をスライダーで調整できす。送信中の文字が画面中央に大きく表示されるようにしています。モールス符号も表示します。（モールス信号勉強用。）

“`html




JavaScriptのパッケージマネージャーってなんでたくさんあるんですか？

# A. 一番メジャーなnpmの問題を解決するため
JavaScriptを使う開発者であれば、一度は「パッケージマネージャー多すぎないか…？」と思ったことがあると思います。
npm、yarn、pnpmなど、Node.js上で動作するものだけでもいくつか存在しますし、最近ではNode.js以外のJavaScriptランタイム用のパッケージマネージャーも登場しています。

本記事では、これらのパッケージマネージャーがどれくらい存在するのか、そしてそれぞれが解決しようとしている問題について説明します。

## 1. どんなパッケージマネージャーがあるのか？
改めてどんなパッケージマネージャーがあるのかをご紹介

### Node.jsで動くパッケージマネージャー
– **npm**
– **yarn**
– **pnpm**

### Node.jsで動かないパッケージマネージャー
– **bun**
– **deno**

これらのパッケージマネージャーの特徴について詳しく見ていきます。

## 2. こんだけ多くのパッケージマネージャーがあるのって、npmがそんなにダメなの？

最も

元記事を表示

【Vue】refはrefをアンラップするって理解してる？

↓refでいっぱい囲っちゃえ

“`ts
const num = ref(ref(ref(ref(ref(123)))))
“`
123を出力するには、、
“`ts
console.log(num.value.value.value.value.value)
“`
かと思いきや上記は誤りでエラーとなる。。

“`ts
console.log(num.value)
“`
が正解。

—

じゃあこれは？

“`ts
const obj = ref({
num: ref(123)
})
“`

これもアンラップされるので、

“`ts
console.log(obj.value.num)
“`
が正解。

# いつ困るの？

僕の場合こんなこととしててref in refが生まれました。

“`ts
const useUser = (id: number) => {
const profile = ref()
const fetchProfile = () => {
profile.value = ‘Hello’
}
r

SafariのみCookieからデータ取得できない現象に苦しめられた話

## 背景
toC向けのフォームにて広告等流入経路識別のために独自IDを割り振り、URLパラメータへそれぞれ埋め込んでいた。

## どんな仕組みか
各経路からWebフォームへ遷移する際にURLパラメータの各情報をCookieへ格納。その後コンバージョンでパラメータも併せて送信することで流入経路の識別に活用していた。

## 問題点

### プライバシーの観点から、トラッキングやCookie無効化設定をしているユーザが増えている
Cookieありきで構築したシステムの信頼性が揺らいでおり、フローの調整が必要

### Cookie利用可否判定のロジックが十分でない
元々は以下のようにdocuent.cookieの中身をチェックして判定していた。

“`js
if(document.cookie != “”){
//処理
}
“`

GTM・GAを利用していたこともあり、document.cookieが空のままフォームを訪れる状況は想定外だった。
ただし昨今のSafariではサードパーティスクリプトの呼び出しをブロック、または遅延させるようになっているようで、ユーザの初回訪問時に上

p5.js の v1.11.0 で追加された「paletteLerp()」を試す

[p5.js の release のページ](https://github.com/processing/p5.js/releases)で、v1.11.0 のリリース情報を見ていたら「paletteLerp()」というのが気になって、この記事を書きました。


## paletteLerp()
paletteLerp() の詳細は、以下を見ると情報が書いてあります。

●paletteLerp
　https://p5js.org/reference/p5/paletteLerp/


サンプル等は、以下の通りで

AWS SDK v3をシンプルに使う開発環境

# 概要

小さなWebアプリを作るときにフレームワークを使わずにシンプルに開発環境を作るメモです(いつもJavaScriptのプロジェクトの開始方法を忘れてしまうので)。ドキュメントによると`Amazon Web Services バージョン 3 (V3) はブラウザビルダーをサポートは終了しました`ということで、バンドルが必須になってしまったので、できるだけ簡単に構築してみます。

サンプルとしてAWS SDK v3を使ってS3のオブジェクトを取得するスクリプトを作成します。

## 前提とする環境
Rocky Linux 9.4でmise-en-place環境下のnode.js 22を使いました。

ここでは以下の環境がセットアップされていることを前提とします。

– mise-en-place — https://mise.jdx.dev/
– プロジェクト毎の仮想環境を簡単に構築できるプログラムです

使わない場合はnode.js(とgit)があれば使用可能だと思います。

大きな流れとしては以下です。

1. mise環境ファイルを設定
1. esbuildとaw

ChatGPTと一緒にJavaScriptをゼロから勉強する記録【JSの関数】#02

# はじめに
こんにちは。web開発未経験からwebアプリケーションエンジニアになるため、勉強を始めようと思い記事にいたします。
私のこれまでの経験はC言語を嗜む程度であり、コンピュータサイエンスに関する知識がゼロのところからのスタートとなりますので暖かく見守っていただけると幸いです。最終的にはReact、Next.jsとモダンなweb開発?へと繋げていけたらと思います。また、初学者の方は、私の記事と一緒に勉強していけたらと思います。
よろしくお願いいたします！

# 1. アロー関数（簡潔さが命！）
アロー関数はコードを短く、シンプルに書けるから、実戦ではよく使われるらしい。特にコールバック関数や、関数の中でシンプルな処理をしたいときに便利だと。

例えば、配列の各要素を2倍にするなら、アロー関数

ジョブカンの出退勤を行うAPIの作成【Google Cloud Functions】

## やりたいこと

iPhoneのショートカット機能を使ってジョブカンの出退勤を行いたかったのでメモ

## 流れ
iPhoneのショートカット機能でPOST送信を行う
引数として
・ジョブカンID
・パスワード
・出退勤パラメータ

以上を受け取り、ジョブカンのスクレイピングを行い
出退勤処理を行う

無料で使いたかったのでデプロイ先はGoogle Cloud Functionsとした

## コード

“`Node.js
const puppeteer = require(‘puppeteer’);
const dayjs = require(‘dayjs’);
const localeData = require(‘dayjs/plugin/localeData’);
const utc = require(‘dayjs/plugin/utc’);
const timezone = require(‘dayjs/plugin/timezone’);
require(‘dayjs/locale/ja’);

dayjs.extend(localeData);
dayjs.ex

CodeWars オススメ問題 #5

# はじめに

個人的に好きなアルゴリズム学習サイト「CodeWars」の問題をシェア。

週1くらいのペースで、全10回を目指す予定。

:::note
CodeWarsはいいぞ！の紹介は[こちら](https://qiita.com/kohki_takatama/items/2ae2808b931e943262b8)

CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題

https://www.codewars.com/kata/517abf86da9663f1d2000003/javascript

### 問題
書式の変換問題です。エンジニアには馴染み深い問題ですね。
今回は、`ケバブケース`・`スネークケース` から `キャメルケース` に変換します。

“`
“the-stealth-warrior” -> “theStealthWarrior”

“The_Stealth_Warrior” -> “TheStealthWarrior”

“

独り身で「おかえり」もなく寂しいので、玄関で歓声を浴びることにした

## 家に帰っても返事はありません
私は独り身のため、家に帰って「ただいま」と言っても、「おかえり」は返ってきません。
そこで、家に帰ったタイミングでテンションが上がるように、玄関で歓声を浴びることにしました。

HC-SR04という超音波センサー（写真上側）を用いて距離を測ることで、玄関を通ったかどうかを判断しました。

## 作成したもの
obnizに超音波センサーを繋いで、一定の距離より近くを通ると音声ファイルが自動的に流れるものを作成しました。

イメージは以下の通りです。

【豆記事】日付の配列から休・祝日を判定して真偽値の配列を返す

# 1. 概要
休みの日か平日かどうかを判定するような機能がプロジェクトを作っていく中で必要になったので、忘備録も兼ねて作ったものを紹介しようと思います。

ただ、今回の仕組みは外部APIありきなので、このAPIの仕様が変わったりサービスが終了したらうまく機能しなくなります。業務用で堅牢さが求められるような場面においてはそぐわないかもしれないことをご承知おきください。

# 2. 祝日の取得
祝日の判定は少々面倒だと思います。年によって若干異なる可能性がありますし、日曜日にかぶったら月曜日が振替休日になってしまうので、この処理をするコードも必要です。
ということで、この部分の処理だけでも結構大変なのでこれは外部APIに頼ることにしました。今回使っていくのは[holidays-jp](https://holidays-jp.github.io/)というサイトが提供してくださっているAPIです。

早速コードの中身を見ていきましょう。

“`typescript
function isObj(value:unknown):value is Object{
return value !

【小ネタ】簡単なClipboardの機能を実装する

# 1. 概要
ちょっとした小ネタなので忘備録も兼ねて短めに内容をまとめます。

今回実装しているプロジェクトで、クリップボードを実装する要件があったので実装してみました。あまりNext.jsにおいてクリップボードを組み込む記事がないように感じたので、今回はUI面も含めてクリップボードの作り方を紹介しようと思います。

# 2. Clipboard

早速コードを紹介しようと思います。
UIライブラリーはchakra-uiを使用していて、アイコンはreact iconsを使用しています。

“`tsx
“use client”;

import { Center, Tooltip } from “@chakra-ui/react”;
import { useState } from “react”;
import { FaCheck } from “react-icons/fa6”;
import { MdErrorOutline, MdOutlineCopyAll } from “react-icons/md”;

export default function ClipBoard

ファーストパーティcookie,サードパーティcookie,パラサイトcookie 3種類のHTTP Cookieについて

# はじめに
cookieとは簡単に言えば、ウェブブラウザに保存される小さなデータです。
主に以下の3つの用途で使われます。

– セッション管理: ユーザーのログイン状態、ショッピングカート、ゲームのスコア、またはその他のユーザーセッションに関するサーバーが覚えておくべきその他のものの保持
– パーソナライズ: 表示言語や UI テーマのようなユーザー設定
– トラッキング: ユーザーの行動の記録および分析

また、cookieは基本的に`ファーストパーティcookie`と`サードパーティcookie`の2種類に分けられます。
この記事ではファーストパーティcookieとサードパーティcookieに加え、`パラサイトcookie`の3種類のcookieの違いについて解説します。

# cookieの設定
ウェブブラウザにcookieを設定する(別名:焼く)方法には以下の2種類があります。
2種類の方法について知ることで3種のcookieの違いが分かりやすくなると思いますのでこの記事で紹介します。

### 1.JavaScriptの[document.cookie](https://

迫真画像加工部 ～フラクタルと化した先輩～

## 先駆者様

https://zenn.dev/baroqueengine/articles/ccf3ac7a2c9332

## 結論

https://mogamoga1024.github.io/image-to-fractal/

## 解説

と言っても、アルゴリズムは先駆者とほぼ同じ。
そのため、差分を説明する。

“`js:複雑スコアの計算：先駆者様
const error = (hist.reduce((prev, cur, i) => prev + cu

業界完全未経験の30歳が案件参画しました。

新卒から務めた業界大手整体サロンを辞め、完全未経験のIT企業に転職しました。
そんな私が案件参画まで何をしたのか、どんな会社で勤めているのかなどを書いていきます。

## 私について
– 学歴：体育学部4年大学卒業
– 職歴：業界大手整体サロンへ入社 6年間勤務したのちに現在のIT企業へ転職
– 転職理由：整体業界のDX化に貢献したいと思い転職を決意
– プログラミング経験：なし、転職後に社内のカリキュラムを履修
– 現在は：某大手企業のコーポレートサイトの改修にフロント側で携わっています

## 現在の会社へ入社してから今まで
転職活動は、現在勤めている会社と同じような会社を数社受けました。
内容としては、【未経験からでも挑戦ができる】【社内のカリキュラム制度が充実している】【一般稼働をしながら勉強ができる】といった会社です。
現在の会社に入社を決めたのは、単純に面接官が自分のやりたいことに対して共感し、そうなるための道筋や入社後何ができるのかを詳しく丁寧に伝えてくださったことです。
あとは、コワーキングスペースを展開している会社なので、勉強をするのに良い環境と感じたからです。

#