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

JavaScriptのImport Mapsを味方に付けよう

はいさい！ちゅらデータぬオースティンやいびーん。

# 概要

今日、ご紹介するのは、JavaScriptの`Import Maps`です。

`Import Maps`は、ブラウザで実行する`import`構文によって読み込まれるパッケージのURLを指定することができるようにします。

つまり、`import`構文にエイリアスをアサインすることが可能になります。

すなわち、ブラウザで`import React from “react”;`というふうに書けるようにできるのです。

これを実現するためには、パッケージをダウンロードするためのURLと、`import`構文で指定するエイリアス名を関連づける必要があります。

そのやり方を説明していきましょう！

# Import MapのJSONを書く

どこか任意なところに、新しいダイレクトリを作って、`index.html`というファイルを作成してください。

そこに、以下のようなHTMLテンプレートを使います。

“`html:import-maps-demo/index.html

初めてSpringを使ったので神経衰弱のゲームを作りました

初めましてりちゃ丸です
転職活動をしたくてキータ始めました

転職活動で面接をする際に作品を見せると転職しやすくなると考えて
Springで神経衰弱が出来るゲームを作りました
これまでには学校内で見せる用にジャカルタEEやAndroidStudioなどでWEBアプリを作ったりスマホアプリを作ったり
してましたがフレームワークは初めてなので先ずはゲームにしました

ルールは52枚の普通のトランプを並べて数字が合っていれば消していき
26回全部消えたら終わりというルールにしました

目標はSpringBootの使い方を覚える事とどこまで覚えているのかのテストでした


Spring公式テンプレートのSpring WebとThymeleafを使用しました

先ずはコントローラ部分のclass
testController.java
ここで画面推移の際

【JavaScript】URLパラメータを今風に取得する

# 概要

かなり昔に書かれたコードを修正していく途中で、ふと共通関数に実装されていた「URLパラメータを取ってくれるところってどんなふうに実装してるんだろう？」と気になって見てみたら、うーん。。。って思うような実装だったので、もっとスッキリした今風な書き方は無いのか調べてみたらちゃんとあったので共有します。

# 元々の実装

※一部改変を入れていますがほぼ元のコード

“`js
getParam = function()
{
var paramsArray = {};
var url = location.href;
var parameters = url.split(“?”);
if (parameters.length == 2){
var params = parameters[1].split(“&”);
for ( i = 0; i < params.length; i++ ) { var neet = params[i].split("="); if (neet.length == 1) paramsArray[neet[0]]

Mode X ⇔ Mode Y みたいなボタンを並べたUIの間に何かこうピカピカする矢印のアニメーションを入れたいな、と思って書いた HTML+SCSS+JS の例

# つまりこういうUIの矢印のところ


# CodePen

See the Pen

JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】

[chrome://flags](chrome://flags/#enable-experimental-web-platform-features) を開き`Experimental Web Platform features`を`Enabled`にして再起動(Chrome110から普通に使えるようになります)


https://chromestatus.com/feature/5463833265045504

# ダイアログを表示する


“`html

【Web Crypto API】共通鍵暗号方式で暗号化と復号化をしてみた！

# はじめに
javascriptの暗号化で検索をかけるとcrypto-jsを使用した暗号化、復号化の記事がまずヒットします。
ただ、Webの標準機能できないか探していたところ「Web Crypto API」を見つけました。
今回はこれを使用した暗号化、復号化を試してみます。

# 注意
Web Crypto APIを使用して暗号化する場合には注意が必要です。
詳細は下記を参照してください。
[mdn web docs：Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)

# プログラム上の注意
`iv`ですが特定のkeyで再利用をしてはいけないです。
詳しくはAesGcmParamsのPropertiesをご確認下さい。
[mdn web docs：AesGcmParams#properties](https://developer.mozilla.org/en-US/docs/Web/API/AesGcmParams#properties)

# 結論
※今回は試すだけでし

【個人開発】プロ野球のおたくが勉強のためだけに作った応援タオル風画像ジェネレーター

HTML/CSSおよびJavaScriptの基礎の基礎を学習後、初めて制作したものについて書きます。

プロ野球チーム、オリックス・バファローズの公式販売グッズに「応援メッセージフェイスタオル」という商品があります。

↓本家。

https://shop.buffaloes.co.jp/_special/ouen_towel/

プリントメッセージにネット流行語やオタク用語を惜しみなくぶっ込んでくるユーモラスと、そのワードチョイスゆえの使い勝手の良さから登場以来絶大な人気を誇る看板グッズの一つとなっています。

このシリーズが好き過ぎるので、それ風の画像を作って遊べるサイトを制作しました。

# どんなサービスか
サイトはこちら

https://emuroku.github.io/buffaloes_towel_maker/

* よくあるロゴジェネレーター的なサイトです
* フォームに入力したテキストが画像に反映され、応援メッセージタオル風の画像を作成できます
* 作成したものは画像ファイルとしてダウンロードできます
![image.png](https://qiita-imag

Javascriptのmapとreduce

# Javascriptのmapとreduceの動きが
ややこしいので、動きだけをまとめる

# map()
mapは配列から中身を１つずつ取り出して、処理を行う。

>map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。(MDN Web docsより)

“` map.js
const array = [1, 3, 5, 7, 9];

const fn = array.map(function (value) {
return value + 1;
});
“`

結果

“`
>>[2,4,6,8,10]
“`
### なにが起きているか？
1. 配列から”1″が取り出される
2. functionの引数”value”に値が渡される
3. value + 1が実施される（初回では1 + 1)
4. 結果が返される (return)
5. 結果の配列に格納される (この時点で[2])
6. 配列の次の値がfunctionの引数”value”に渡される
7. value + 1が実施される（この時点で

GraphQLに精通している風を装うためのセリフ3選

## はじめに

GraphQLに関するOSSにコミットする中で、それ以前のGraphQL APIの開発では気づかなかった、GraphQLの通なポイントを3つのセリフにまとめてみました。知ったかする際に役に立つと思うので、ぜひご活用ください！

## 1. GraphQLって9割がたフィールドだよね

GraphQLにはQuery, Mutation, Subscriptionの3つがある、というのはご存知だと思います。だいたい以下のような役割分担です。

– Query: データ取得用
– Mutation: データ変更用
– Subscription: サーバからのプッシュ用

例えば「ユーザ一覧を取得するための`users`というQuery」を作ったり「ユーザを新規登録するための`createUser`というMutation」を作ったりするイメージです。

ここで、`users`や`createUser`をQueryやMutationと呼んでも間違いではないのですが、正確には「Queryというルートオブジェクトのフィールドである`users`」や「Mutationというルートオブ

paizaラーニング レベルアップ問題集 巡回セールスマン問題メニュー JavaScript ユークリッド距離

ユークリッド距離 (paizaランク D 相当)

https://paiza.jp/works/mondai/tsp_problems/tsp_problems__euclidean_distance

JavaScriptで解いてみました。
問題文にしたがって実装します。
>ユークリッド距離は、√((x_1-x_2)^2 + (y_1-y_2)^2)です。
# 解答例
平方根はMath.sqrt()で、二乗を**で計算します。
“`javascript:javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [x_1, y_1] = lines[0].split(” “).map(Number);
const [x_2, y_2] = lines[1].split(” “).map(Number);
console.log(Math.sqrt((x_1 – x_2

if if　と　if else　は違う

タイトルの通り、if文についての個人的に勘違いしていたことです。

# やりたかったこと
1~30までの数字を出し、3の倍数の時は「あほ」になり、5の倍数の時は「犬」になる。

## 最初に書いたコード
var number;

for (var i = 1; i <= 30; i++) { number = i; if (i % 3 == 0) { number = number + "あほ"; } else if (i % 5 == 0) { number = number + "犬"; } document.write(number + "
“);
}

これで、実際に出たのはこちら。
1
2
3あほ
4
5犬
6あほ
7
8
9あほ
10犬
11
12あほ
13
14
15あほ
16
17
18あほ
19
20犬
21あほ
22
23
24あほ
25犬
26
27あほ
28
29
30あほ

一見できてるっぽいけど、3の倍

元記事を表示

Mapbox Vector Tile の source-layer 数が描画速度に及ぼす影響

## はじめに

ベクトルタイルの一つである Mapbox Vector Tile には、source-layer という概念があります。これは、一つのタイルが、複数の source-layer に分割されており、それぞれの source-layer 内に地物が含まれています。

https://github.com/mapbox/vector-tile-spec

Mapbox GL JS 等でデータを表示する際は、この source-layer 単位でスタイルの設定をします。また、データの取り扱いにおいても、source-layer 単位でデータを作成したり、取り出したりすることはよくあります。

ベクトルタイルを作成する際に、source-layer を分けようか、それとも一緒にしてしまおうか、悩むことがあります。そこで、source-layer の数によって、描画速度のパフォーマンスにどのような影響を与えるのか、簡単に実験してみることにしました。

## テスト用のデータを生成

まず、テスト用のデータを生成します。最終的にタイルを作成するので、一つのタイル座標に収まったほう

元記事を表示

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 区間への足し算

区間への足し算 (paizaランク A 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_twopointers_step5

クエリについてforループし、クエリの処理でforループをする、for二重ループで解くと、タイムオーバーになります。
“`javascript:タイムオーバー
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//要素数 N とクエリの数 M
const [N, M] = lines[0].split(” “).map(Number);
//数列A
const A = lines[1].split(” “).map(num => Number(num));

//クエリについて
for (let i = 1; i <= M; i++) { //各クエリの処理に用いる整数 l_i,

元記事を表示

constで定義したオブジェクトと配列のプロパティは変更が可能

# はじめに
JavaScriptを書いてて、初歩的な箇所を勘違いしていたので、忘れないようにメモ。

# constで定義したオブジェクトと配列のプロパティは変更が可能
“`javascript
// constで定義したオブジェクトのプロパティの変更が可能
const val = {
name: “sasayoshi”,
age: 31
};
val.age = 30;
console.log(val);

// constて定義した配列の中身は変更が可能
const val2 = [“aaa”, “bbb”];
val2[0] = “hoge”;
val2.push(“huga”);
console.log(val2);
“`
constで定義したオブジェクトと配列のプロパティは変更ができる。
![スクリーンショット 2022-09-27 20.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/b9de99f6-a279-6092-6987-f6a542ea75bd

元記事を表示

Spring boot ＋ Ajax　簡易掲示板作成 (編集機能)

# 最初に
今回の記事は前回投稿した[Spring boot ＋ Ajax　簡易掲示板作成 (投稿機能)](https://qiita.com/Sesoniso/items/a3c2b2c32bff09bfbbd5)に編集機能を追加するための記事となります。
環境構築などは前回の記事に記載していますので先にそちらをご覧ください。

・本記事の完成ページ


# 1. サンプルコード
## 1.1 HTMLファイル
“`html:/src/main/resources/templates/top.html

素の JavaScript で Google Map 風の拡大縮小機能を作る

# やりたいこと
– google mapのように「スクロールしたとき、マウスの位置を中心に拡大する」機能を作りたい。
– 画像の拡大縮小ライブラリは存在するが、それ以外のDOMでも同様に動くようにしたい

# コード
### html

“`html

“`
### css
“`css
#board {
width:500px;
height:500px;
border:3px solid green;
overflow: hidden;
}
#box{
width:500px;
height: 500px;
transition-duration: 200ms;
}
#image{
width: 500px;

元記事を表示

JavaScriptのセレクトフォームでの取得する際に気を付けること

セレクトボタンに躓く。
HTMLでセレクトフォームをつくり、その値を取得しようと思ったが、できなかったので共有したいと思う。
キーポイントは関数の内側か外側か、だ。

〇
~~~javaScript
//成功例
var select_button =document.getElementById(“format-select”);
select_button.addEventListener(‘change’, function(){
var selectedValue = document.getElementById(“format-select”).value;
//value取得を関数内に
var target = document.getElementById(“target”);
text= “”
if (selectedValue == 1){
text = “1”;
} else if (selectedValue == 2){
text = “2”;
} else {
text = “3”;
}
target.i

元記事を表示

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 最長の区間

最長の区間 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_twopointers_step4

しゃくとり法で解きます。

区間の左端と
右端の更新条件は次の通りになります。
区間の総和が M を超えたとき : 左端++
区間の総和が M 以下のとき : 右端++

# 解答例(C++の場合を参考に)
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N, M] = lines[0].split(” “).map(Number);
let sum = 0;//区間和
let ans = 0;//最長の区間の長さ
let l = 0;//左端
let u = 0;//右端

const A = lines[1].split(” “).map(Num

元記事を表示

【初心者向け】Qiitaの初心者向け記事を定期的に紹介してくれるLINE Botを作ったら夢が広がった話

## Qiitaと仲良くなりたい。
筆者はプログラミングを勉強し始めて1週間くらいの新参者です。
これからプログラミングを勉強するにあたって、
Qiitaを見ていくとタメになるということはわかったのですが
どれを自分が読めばいいかわからない状態でした。
ならば、毎日なんでもいいから読んでみる習慣を作れば
記事の良し悪しや自分の中での引き出しが増えるんじゃないかなと思い
通勤時間に記事の紹介を行ってくれるLINE Botを作ろうと思いました。

## 【完成イメージ】
Qiita APIを用いて「初心者」タグが付いている記事のタイトルとURLを取得し
LINE Botで出力させます。
定期的な実行についてはGitHub Actionsを用いて行っています。
出力された状態は以下のようになりました。
次の見出しからどんな風に作成をしたか書いていきます！
![IMG_6113.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2775528/8450d5d2-f20c-30b8-a777-ca796d45c1

元記事を表示

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 最短の区間

最短の区間 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_twopointers_step3

毎回区間和をループで求めて解くと、計算量が多すぎて、タイムオーバーになります。

そこで、しゃくとり法というアルゴリズムを使います。
しゃくとり法のアルゴリズムの理解は難しくないのですが、
実装が慣れないと難しく感じるので、コードを書いて慣れると良いようです。

# 解答例(C++の場合を参考に)
“`javascript:javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N, M] = lines[0].split(” “).map(Number);
let sum = 0;//区間和
ans = Infinity;//最短の区間の長さ
let l

元記事を表示