JavaScript関連のことを調べてみた2022年12月06日

SpringBoot + MyBatis ふりかえり

# 記事を書く理由
業務で初めて、SpringBoot + MyBatisを使ったバックエンドの開発を行ったので
忘れないように備忘録として残そうと思ったからです。
それと、私と同じように初めて触れる人の助けになれたらなと思っています。

# そもそもMyBatisって？

>MyBatis はカスタム SQL、ストアドプロシージャ、高度なマッピング処理に対応した優れた永続化フレームワークです。

と書くのは簡単なのですが、私は配属されるまで、O/Rマッパーというものを私はよく理解していませんでした。

以下の記事がとても参考になりました。
https://qiita.com/wanko5296/items/d7829f18d4827cecd4f6

端的にオブジェクトとリレーショナルデータベースの紐づけですね。

以上で、MyBatisの説明を終えて
次からは、私が実際に作ったコードのサンプルと一緒に解説していこうと思います。

# ディレクトリ構成

– entity
　┗Test.java
– controller
┗TestController.java
– model

【vue】Geolocation APIで現在地情報を取得する

## 実装
JSのGeolocation API を仕様することで簡単にユーザーの位置情報を取得することができます。
今回はVue3のcomposition api の中で使用しています。

“`js
import { ref, onBeforeMount} from ‘vue’
import VueGeolocation from ‘vue3-geolocation’

//現在地情報を取得する関数を用意
const current = ref({
position: undefined,
lat: undefined,
lng: undefined,
getLocation: () => {
VueGeolocation.getLocation()
.then((coordinates) => {
current.value.position = coordinates
curren

【ChatGPT】師走の忙しい時期に借りた猫の手が進化しすぎてひょえーと思った話

最近めっきり寒くなってきましたね
いかがお過ごしでしょう

[私とあなたの Advent Calendar 2022](https://qiita.com/advent-calendar/2022/trade_eco) への記事の投稿をしていきます


# 主題：『ChatGPT』 がえげつない
今回取り上げるネタは、『ChatGPT』 についてです

取り上げようとした経緯としては、

最近話題になってるけど、どんなもんかな
↓
へー、無料でチャットサービス使えるんだー
↓
え、これえげつないな・・・
↓
ひょえー

・・・こんな感じです

ひょえーと思ったところを重点的に書きます

# ことの始まり
師走の忙しい時期に差し掛かろうというとき

うちの部署のリーダーが「11月分の勤務実績の入力確定忘れずにやってね」

という投稿をした

それ

クリックした要素にモザイクをかけるブックマークレット


# スクショ撮影時にモザイクをかけたい

本番環境の画面確認中に不具合を発見した際など、スクリーンショットを撮影してSlackやプロジェクト管理ツールに貼りたいケースがたまにあるかと思います。

しかし、弊社が運営している『[CoupLink](https://couplink.jp)』の場合は、マッチングアプリになりますので、ユーザーの顔写真や自己紹介文が至るところに表示されており、スクショ内にも映り込むことになります。

例えSlackのようなクローズドな場であっても、ユーザーの顔写真等が含まれるスクショが飛び交うことは、利用者の心理的には気持ちの良いものではないため、本番環境のスクショ添付時は必ずモ

[Day6] オブジェクト: 基本 part2

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

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

## 4.5 コンストラクタ、 new 演算子
### 知らない単語
– コンストラクタとは
– クラスからオブジェクトを作成した際に、クラスに中で1回だけ自動的に実行される特殊なメソッド

### 学んだこと

– コンストラクタ
コンストラクタはクラスの中に書ける
例えば
class hello {
constructor
}
などの書き方ができる

– コンストラクタ関数
コンストラクタ関数は2つのルール

1,名前は大文字で始める
2,「new」演算

SvelteKitの構築と、SkeletonUI実装とテーマについて

# はじめに

`SvelteKit`での開発をはじめ、
どのUIコンポーネントライブラリを使おうか悩んだところ、
`Skeleton`を発見。

面白そうだし使ってみることに。

せっかくなので、SvelteKitの導入から書いていきます。


# 環境

* node.js v18.12.1
* npm

# 導入方法

1. `SvelteKit`構築

“`bash
$ npm create svelte@latest
Need to install the following packages:
create-svelte@2.0.0-next.198
Ok to proceed? (y) y

create-svelte version 2.0.0-next.198

【Web Componentsを学ぶ】HTML Template編

# はじめに
この記事ではWeb Componentsを利用する準備のためにHTML Templateを紹介する記事です。Web Componentsとは他のコードから独立して利用できる再利用可能なコンポーネント(要素)を指します。
Web Componentを利用するために必要な他の要素として[Custom Elementについての記事](https://qiita.com/KokiSakano/items/1ffa65a1adb3f7c11112)、[Shadow DOMについての記事](https://qiita.com/KokiSakano/items/21e511313e64e70c2221)も書きましたので併せてご覧ください。なお、この記事ではCustom Elementは知らなくても進めることができますがShadow DOMについての知識は多少要求します。

# HTML Templateとは
`template`と`slot`の二つの要素はHTMLに表示されないHTMLのテンプレートを書くことができ、それをHTML Template呼びます。Vueを触ったことがある方に

TypeScript文法(基礎編) 変数とは何かから解説

# TS Playground
TypeScriptの文法を試す際、
playgroundを使うと手軽で便利。
https://www.typescriptlang.org/play

# 変数とは

変数とは、
よく箱に例えられることが多いが、
そもそも素朴な疑問としてなぜ箱が必要なのか思うはずだ。

変数は確かに値が入っている箱ではあるのだが、
そうした箱を使う理由は、
**値などに名前をつけたいからと考えればいい。**

例えば、
ラーメン屋の売上が100000円で、
曜日によって、
ラーメン屋の売上から1000円引いたり、
300円引いたりと、売上額に対して色々計算をする場合、
変数を使わないと、
“`
console.log(100000 – 1000)
console.log(100000 – 300)
“`

のように、パット見上の数字が何を表しているのかよくわからない。

そこで変数を使って、
それぞれをいわゆる箱に入れると、
変数名に好きな名前をつけることができるので、
(※変数名にできないものもあるがそれは後ほど解説する)

“`
const uriage =

なでしこさんでSVGを描画したい！

　なでしこさんでは、標準でcanvasへの描画ができる命令が備わっており、手軽にいろいろお絵かきすることが出来ます。

https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E6%8F%8F%E7%94%BB&show

　でも、それとは別にSVG画像の描画がしたい！　と思ったワケです。

# ＳＶＧとは
　SVGは、**ベクター形式**の画像ファイル形式です。
　正しくは、すけーらぶるべくたーぐらふぃっく、とか言うラシイです。

https://developer.mozilla.org/ja/docs/Web/SVG

　JPEGやPNGなどのラスター形式の画像は、拡大するとぼやけてきちゃったりドットが見えてきちゃいます。キャンバスの描画もコレです。
　ところが、ベクター形式ってのは、**どんなに拡大しても画像が劣化しない**ってコトなんですよ！
　まあ、写真なんかは逆にアレなんですが、図形やアイコンなんかにはとてもイイですよね☆
　文字なども、無駄にアンチエイリアスがかからないのでいつでもくっきり、ぼやけることがありません。

Pleasanterで簡単なTODOリストを作ってみる

本記事は、[OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/pleasanter) の6日目の記事です。

# 前置き
[こちら](https://qiita.com/Implem/items/f47b37c2ab561b5cf356)の記事より、TODOリストとか簡単にできそうかなと思い作ってみました。

# TODOリストの仕様
特に期限などの管理は想定せず、タスクの完了・未着手を管理するだけ単純なものを考えてみました。

ざっくり仕様
・Pleasanterにタスクを登録
・一覧画面上のボタンを押すことでタスク完了にする
・完了後は未着手に戻すこともできる

ポイントは、一覧画面でポチポチっと完了にしていく操作イメージ。

# 実装画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922382/e30504e1-a6ea-f8de-29a3-72cb

これからReact触るなら確実に抑えておきたいuseOO

# はじめに
開発インターンをしています川端([@haru1125632](https://twitter.com/haru1125632
))です。
PharmaXのアドベントカレンダーの9日目を担当します。
PharmaXではフロントはNext.js(Reactのフレームワーク)を用いて作業しています
そこで今回はReactにまつわる記事を書きました。

# 概要
Reactにはさまざまなuse〇〇が用意されています。
ただし中には利用頻度の低いものからすごく利用するものまであります。
なので今回は以下の一覧から個人的によく使うもの3つに絞って詳しく見ていきたいと思います。
下記の一覧で斜線をひいているものは今回の対象からは除きます。

※ React上級者のかたはクイズだけやってみてください。もし、できなければ記事を読んでください。

ReactHook(use〇〇)一覧 (以下ではReactHookと呼びます)
*中にはRFCのものも含みます
– **useCallback**
– ~~useContext~~
– ~~useDebugValue~~
– ~~useDefe

AWS SQS sendMessageBatchとdeleteMessageBatchの処理の仕様について

### はじめに
先日AWSのSQSを使ってSQS内にあるメッセージを別のキューに送信した後に元のキューの処理済みメッセージを削除するシステムを構築した際に、そこで使用されていた２つのメソッドを検証したところ、要注意な仕様があったのでここにまとめておく。

# 目次
**1. そもそもsendMessageBatch・deleteMessageBatchとは？**
* sendMessageBatchとは？
* deleteMessageBatchとは？

**2. 気をつけなければいけない仕様とは？**
* 一部処理に失敗しても、ステータスコード200が返ってくる場合がある
* 特にこのケースには要注意

**3. 一部処理に失敗したときに処理を分けるには？**
* Failedを活用する

## そもそもsendMessageBatch・deleteMessageBatchとは？

### sendMessageBatchとは？
* 数多く存在するAWSのSQSに存在するメソッドの中の一つ。（参照：[JavaScript API リファレンス](https://docs

x-dataの中身を切り出していく試み

# x-dataのコード量が多くなりすぎた場合に使えます。
おぬぬめ。
# 前回の続きです

https://qiita.com/yowatsuyoengineer/items/4b91ff506559e139d049

今回はx-dataの中身をscriptタグで囲んで定義する方法で書いてみます。

### 前回書いたコード
ぽちぽちして表示非表示するヤツ。

See t

【JavaScript】簡単なナンプレを作ってみました！

## はじめに
私はN予備校といいう教材でプログラミングの勉強を始めたN高生です。
教材には種類があり、私は【プログラミング入門　webアプリ】という物を学んでいます。
そして、プログラミング入門の中でコンテストが開催され、アウトプットのために参加しました。
作り始めた時期から期限まで一ヶ月でした。
そこでナンプレを作成したので、Javascriptを主に作成時の難しかった事を記事にします。
## 今回作成したもの

## ナンプレとは
**縦・横全ての列と、３×３のマスごとのブロックに1〜９が一つずつ入る数字が入ることがルールです。**
Apache EChartsを使って簡単グラフ描画

# はじめに
* 本記事は[ARISE analytics Advent Calendar 2022](https://qiita.com/advent-calendar/2022/arise-analytics)の6日目です。
* 昨日は@e_onさんの「[元法学部生と読むLegal NLP](https://qiita.com/e_on/items/a06687e9f0cee9783e50)」でした。
* 明日は@tsukasaIさんの「Git stash ハンズオン」です。

Apache EChartsを使用する機会がありましたので、今回はApache EChartsの簡単な使い方について紹介しようと思います。

# Apache EChartsとは？
お手軽にリッチなグラフ描画が出来る、オープンソースライブラリです。
少し触ってみただけでもカスタマイズの幅の広さを感じ、思い通りのグラフデザインにしやすい印象を受けました。

公式サイトはこちらです。
https://echarts.apache.org/

# インストール
ライブラリの導入方法はいくつかあります。今回はお手軽

【F】functionより=>(アロー関数)のほうがかっこいい気がする

共感してくれる人がいると嬉しいJavaScriptの関数宣言のかっこよさの感覚

## 関数宣言

「あー、これは関数なんだな」ってなりやすい。functionって書いてあるからね

“`js
function square(n) {
return n * n;
}
“`

## 関数式

変数宣言でよく見るやつ(var, let, const)とfunctionがかぶるのでなんだこいつってなることが多い気がする。
変数にfunctionを入れてるという認識でたぶんOK

“`js
var square = function(n) {
return n * n;
}
“`

## アロー関数式

functionって書いてないから「なにこの=>」ってなってた。
**なんかかっこいい気がする。**

“`js
var square = (n) => {
return n * n;
}
“`

## アロー関数式 その2

関数内が1行でreturnするだけのものの場合はこう書ける。
知らないと「まじでなんだこいつ」となりそうだが短くかけて**なんかかっこいい気がす

[AWS CDK]API GatewayにIAM認証をかけてみた

[以前投稿した記事](https://qiita.com/lism/items/ebb20b402644a91d6eb9)で作成したAPI GatewayにIAM認証の設定を追加してみました。

## IAM認証とは
>HTTP API ルートに対して IAM 認証を有効にできます。IAM 認証が有効な場合、クライアントは署名バージョン 4 を使用して、AWS 認証情報でリクエストに署名する必要があります。API Gateway は、クライアントがルートに対する execute-api アクセス許可を持っている場合にのみ、API ルートを呼び出します。
https://docs.aws.amazon.com/ja_jp/ja_jp/apigateway/latest/developerguide/http-api-access-control-iam.html

とのことです。
IAM認証を有効にすると、署名バージョン4(SigV4)を使用してリクエストに署名をする必要がある、ということですね。

>署名バージョン 4 (SigV4) は、HTTP で送信される AWS API リクエ

ありがとうjQuery絶対に忘れない。Good by jQuery、Hello VanillaJS

かつては誰もが利用していた（所感）jQueryですが、今ではあまり聞かなくなりました。
学生との会話でも**JavaScriptは書いたことがありますが、jQueryは経験がありません**と答えが返ってきます。

少し時代遅れ感があるjQueryではありますが、JavaScriptがシンプルに書けることが非常に便利なのは今でも変わりません。
ただ、`querySelector()`メソッドの登場やReactやVue.jsなどのフレームワークの利用が高まる中で**jQueryを利用するメリットが少しずつ薄れていってしまった**と感じます。

加えてライブラリなので利用するためにファイルを読み込みます。
どれだけ圧縮したとしてもJavaScriptで記述するよりもファイルサイズは大きくなるのでサイトパフォーマンスにも影響を及ぼします。

:::note warn
jQueryは素晴らしいライブラリでこれまで随分お世話になりました！
ただ、世の中のトレンドやこれからのサービスの未来のために別れを決意しました…
:::

この記事ではjQueryと円満に別れするための方法を伝えたいと考えていま

JavaScriptのthisについて

この記事は ウェブクルー Advent Calendar 2022 6日目の記事です。
昨日は @wc-takaharaさんの「TanStack Query(旧React Query)について整理してみた」でした。

# はじめに
WebCrewバックエンドエンジニア一年目の@kouki_kubotaです。
最近業務で調べる機会があったので、今さら感はありますがJSのthisについて書いてみようと思います。

## 関数呼び出し
これは使う機会が多いのでわかりやすい例だと思います。
簡単に書くと以下のようになります。

“`script.js
function example() {
console.log(this)
}

example(); //Window
“`

この場合、exampleはグローバルオブジェクトなのでブラウザで表示した場合windowオブジェクトを表示します。
対して、strictモードだと以下のようになります。

“`script.js
“use strict”
function example() {
console.log(thi

ドキュメントオブジェクトモデル

# 木構造の各要素ノード
DOMのルートノードは“`document“`で“`“`要素がその“`唯一の子ノード“`。
“`“`には2つの子ノード(要素と要素)がある。

### ノードの種類
* 親ノード
* 子ノード
* 子孫ノード
* 祖先ノード

### document
“`document“`も含めDOMツリーの各ノードはクラスNodeのインスタンス。
Nodeのオブジェクトはプロパティとして親や子の要素を表す“`parentNode“`や“`childeNodes“`を持っているほか“`nodeName“`や“`nodeType“`といった識別のためのプロパティも持っている。

“`js