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

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 陣取りのターン数

陣取りのターン数 (paizaランク B 相当)

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

JavaScriptで解いてみました。幅優先探索をします。

現在地の距離がnやdistだとすると、探索先の距離はn+1やdist+1になります。現在地の距離または探索先の距離どちらかが、マスを ‘?’ にするときの距離 l_i と一致するか決めて調べ、’?’にします。

解答例のうち、C++の場合参考とPython3の場合参考は、探索先が一致するかで、Rubyの場合参考は、現在地が一致するかで調べています。

また、キューに入れる情報も、各回答で異なります。
C++の場合参考とRubyの場合参考は、現在地の座標と、現在地の距離になるように、
Python3の場合参考は、現在地の座標と探索先の距離になるようにしています。

別の解き方では、盤面に距離を記録していき、最後に?や*に変換しました。

いろんな解答のしかたがあるので、しっくりくるものを参考にしてみてください。

# 解答例(C+

【TypeScript】発展的な型まとめ

TypeScriptには基本的なプリミティブ型や単純なオブジェクト型に加えて安全性を高めたり、
複雑な型を表現したりするための型・機能が用意されています。

この記事ではTypeScript標準の発展的な型をまとめます。

## 一覧

### タグ付き合併型(判別可能な合併型)

合併型は型の絞り込みが思ったように動作しない場合があります。
2種類のイベントとそれを処理するためのサンプルコードを見てみます。

“`TypeScript

type UserTextEvent = {value: string, target: HTMLInputElement};
type UserMouseEvent = {value: [number,number], target: HTMLElement};

type UserEvent = UserTextEvent | UserMouseEvent;

function handle

[Rails7]JavaScriptでTurboを無効化する方法

# リロードしないとJavaScriptが動かない

Rails7のTurboが原因。
JSファイルで`turbo:load`イベントを使用する。

“`javascript:test.js
document.addEventListener(‘turbo:load’, function() {
console.log(‘turbo無効化’);
});
“`

`turbolinks`ではなく`turbo`なので気をつけてください。

参考

https://blog.willnet.in/entry/2021/02/14/154101

Vue.js computed(算出プロパティ)の検証

豚野郎です。
今度は算出プロパティについて書いていきます。
(LaravelはできるからそろそろVueもできるようにしないと・・・・・)

## 1. computed(算出プロパティ)
computedって何？ということで内容を調べてみましたが、
自分の言葉で、一言で説明できませんでした。
(理解不足ですみません。)

**そのため、今回は動きの検証として書いていきます。**

ググってみると「複雑な計算などに使える」という情報が結構出てきます。

## 2. 動き
実際の動きを`console.log()`で見ていきます。

実際に見ていきましょう。
以下の例は、画面に4と表示されます。

“`js/main.js
(function() {
‘use strict’;

let vm = new Vue({
el: ‘#app’,

data: {
item: 1,
},

computed: {
remaining() {

【Rails】【JavaScript】Ajaxを用いてメモ帳の様なアプリをフォームで作る方法

大阪でRailsを中心に学習している薬剤師エンジニア（初学者）こと、ヨマ(@yoma_2003)です！
**Ajaxを用いてメモ帳の様なアプリをフォームで作る方法**をまとめます。

※おことわり※
断定口調でまとめますが、初学者であるため間違い等あればご指摘頂けると嬉しいです。

# はじめに
### やりたいこと
以下の様な**自動更新機能のあるメモ帳（追加・削除できる）アプリ**を作りたい。


### アプリの要件
具体的には以下の様な要件を満たすアプリを作成します。
– ページ遷移がない（index.htmlのみ）
– フォームに入力すると、自動で更新される
– 新規ボタンを押すと、フォームが追加される
– 削除ボタンを押すと、フォームが削除される
– 操作後に更新日時が更新される

# 本記事のポイント

**・データ更

AxiosからMultiPartFileをSpringBootで受け取る

シンプルなミニマムコードが見つからなかったので備忘録に。。
初めての記事なのでなにか問題があれば補足よろしくお願いします。

## 1ファイルを受け取る場合
### フロントエンド
“`sample.html

post
“`

“`sannple.js
function onclick() {
// input file から指定したファイルを取り出し。
const in_file = document.getElementById(‘in_file’);
const file = in_file.files[0];

// FormDataにappendする
const formData = new FormData();
formData.append(‘file’, file);

// header情報を指定
const headers = { “content-type

Vue3で使うlocalStorage

## 概要
vue3(JavaScript)でlocalStorageを利用する際に引っかかったところがいくつかあったので、簡単にまとめました。

## 実行環境
– MacBook Pro (OS:Monterey)
– エディタはVisual Studio Code

## localStorageとは
簡単に言うと、WEBサイトを閲覧するブラウザに容量を少し確保して、そこでデータを管理できるようにする機能。
基本的に、手動で削除しない限りデータは永久的に残るとされているが、たまに勝手に消えてることもある。

また、管理するデータは基本的には文字列なので、配列などを保管する場合には別途で変換処理が必要。

## 基本機能
VueでlocalStorageを利用する場合、4つのコードを使い分けてデータの処理を行います。

### ① getItem
localStorageからデータを取得するためのコードです。

“`
localStorage.getItem(‘KEY’)
“`

KEYにはsetItemを行った際に設定した文字列が入ります。

#### 実例>
loca

ドロワーメニューをJSのClass構文で書いてみた

こんにちは。
最近はJavaScriptを強化したくて、少しずつJavaScriptを学習しています。
そんな中、クラス構文を学び、使用頻度の高いドロワーメニューに活かしてみようと思ったので、自分の学びとして記事に残したく、初めてですが記事を書いていきます。

# 1.今までの書き方

これまでは下記のようにjQueryにて書いていました。
「js-drawer」クラスをクリックすると、bodyに「is-drawerActive」クラスが付与されて、その時にドロワーメニューが出てくる仕組みになっています。

“`js:
$(function() {
// ドロワーメニュー
$(‘.js-drawer’).click(function() {
$(‘body’).toggleClass(‘is-drawerActive’);

if($(this).attr(‘aria-expanded’) == ‘false’) {
$(this).attr(‘aria-expanded’, true);
} else {
$(this).at

API Gateway + LambdaのAPIにIAM認証で署名付きリクエストを送る（javascript, typescript）

# 概要

APIGatewayのREST APIを使って構築したweb APIをIAM認証（accesskeyとsecretkeyを使った認証）で署名付きのリクエストを送信するサンプル。

参考にさせていただいた記事
* [API GatewayでAPIにIAM認証をかけて、Node.jsでSigV4署名ヘッダを作成してリクエストしてみる](https://dev.classmethod.jp/articles/api-gateway-iam-authentication-sigv4/)
* [AWS – Lambda function URLs を IAM 署名付きでリクエストしてみる](https://zenn.dev/umatoma/articles/d04d8417fa2e70)

IAMは対象のLamda関数のARNを指定した、 `lambda:InvokeFunctionUrl` のアクションのみを許可したユーザを作成しています。

javascriptとtypescriptのケース両方使うことがあるので、自分用のメモとして参考にさせていただいた記事のコードを少し書き直し

Vue.js watchプロパティ

豚野郎です。

今回はVue.jsのwatchプロパティについて書いていきます。
functionを書く方法と、functionを省略する方法があります。
参考：https://prograshi.com/language/vue-js/what-are-handler-deep-and-immediate-in-watch/

今回はfunctionを省略した方法を書いていきます。

初回に書いた双方向データバインディングはこちら↓
https://qiita.com/pig_buhi555/items/a3ad0e8f7a13c6d49234

## 1. 普通に使う場合
watchプロパティはデータの中を監視します。
そのため、データに変化があった時に処理が走ります。

以下の例の場合、sampleとテキストボックスに入力すると
「sampleと入力しています」と表示されます。

“`js/main.js
(function() {
‘use strict’;

let vm = new Vue({
el: ‘#app’,

/

【React Router初心者に向けて】Reactアプリが想像以上に方向音痴だった件について

こんにちは。
プログラミング歴1カ月のSarasaです。

ようやくサイトのデザインもいい感じになって、
[変な隙間ともおさらばして](https://qiita.com/SarasaMorita/items/9ef636154d73374fcd04)ウハウハだった
私にも、ついに**名前を呼んではいけないあの子**と戦わなければ
いけない日がやってきました。

そう、、、**ページ遷移**という大ボスと・・・・！

※なおこの記事では筆者が盛大にミスをする箇所がございますので、
正しいコードだけ見たい人は「Routerさん、お引越しをする」からどうぞ

【開発環境】
＜フレームワーク＞
React ver. 0.1.0

＜使用言語＞
JavaScript

# ページ遷移とは
ページ遷移とは、Web制作の世界では一般的に「あるページからあるページに移動すること」をさします。
Topページからメニューバーを開き、リンクを介して別のページに移動する、あの過程のことです。

もちろん私がサイトを制作する際もこのページ遷移のしくみの構築は外せないのですが、Reactというフレームワークは

HTML内のリンク一覧をJavaScriptを使ってVimキーバインドで移動・参照できるようにする

– ブラウジングをしていてページ内にキーバインド参照が実装されていたら非常に捗る。
– 一部実装済みのサイトもあるが、割合として未実装の方が多いように感じる。
– 今回はHTML内のリンク一覧をJavaScriptを使ってVimキーバインドで移動・参照できるようにする方法を記録する。

## 結果
– 以下の簡易的なリンク一覧で移動や参照できるようにする。


– 以下のキー操作が可能。
– j : 下に移動
– k : 上に移動
– Enter : リンク先へ遷移


## 環境
– mac OS Monterey 12.5

##

ありそうでないWeb部品: リング状プログレスUIとその応用例としてのポインター長押し判定えぐざんぷる

# リング状プログレスUI

⇩これ

今回は⇧これを Web Component で作って、その応用例としてのポインター長押し判定も雑に書いてみたところ、とりあえず期待通りに動作するものはできたのでそのメモ。

# CodePen

JavaScriptではプロパティのキー文字列は短いほどアクセスが速い

## 永井産業
– JavaScriptにおけるオブジェクトのプロパティキーは（シンボルを除けば）すべて文字列である
– プロパティの値にアクセスするとき、内部で文字列の検索をかけている
– だから、**プロパティの個数は少ないほど、プロパティキーの文字列は短いほど、オブジェクトがプロパティの値を取得するのにかかる時間は短い**
– （けどかかる時間の差は微々たるものなのでそんなに気にしなくても問題ない）

## JavaScriptにおけるオブジェクトのプロパティキーは基本的にすべて文字列である

> JavaScript のオブジェクトのプロパティ名 (キー) は文字列かシンボルしか扱えない

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

### 「オブ