JavaScript関連のことを調べてみた2023年02月18日

Twitterで遊べるワードゲームをつくった！【んこダイス, 初心者?, twitter API】

⇩⇩つくったもの⇩⇩
Tweets by NKOdiceBot

初めてのJavaScript(GAS)でこんなんつくりましたーー！！
TwitterのAPIが終了したはずなのになぜか動いております?

「「@NKOdiceBot ダイスをふる」」

のメンションで遊べるのでぜひぜひー?#プログラミング フロントとサーバの通信方法(RPC)　Javaオブジェクトを送受

前回は、テキストだけを送受信する方法を学びました。
今回は、Javaオブジェクトを送受信します。

今回のファイルの場所です。

■まず、通信のクラスを定義します。いくつかのルールがあります。

①引数のあるコンストラクタがある場合は、デフォルトコンストラクタが必要です。
②シリアライズ(通信するときの直列化という意味)する為、次のインターフェースをつけてねSerializable,IsSerializable
③継承するのはできるだけ避けましょう。できるだけPoJoが望ましい
④プリミティブ型(intなど）やJavaの基本的配列クラス(純粋な配列もクラス.ListやMapなど）は利用できます。
（＊）サーバ側のファイルやioを操作するもの、ライブラリは使えないと考えましょう。
⑤自分のクラスを変数で利用する場合は、①～④のルールに

元記事を表示

innerHTMLで要素を追加させる

通常DOMを挿入する方法は`appendChild()`や`insertAdjacentHTML()`などがあります。
`innerHTML`は現在のDOM破壊して新しいDOMを挿入します。今回は破壊せずに追加したように見せる方法のメモです。

~~~ html

• item1
• item2
• item3
• item4
• item5

~~~
上記のようなリストに`innerHTML`で`item6`を入れてみます
~~~ js
const list1 = document.getElementById(‘list1’);
list1.innerHTML = ‘

item6

‘;
~~~
#### 結果
~~~ html

• item7

~~~
結果は`list1`の種類、状態に関係なく、新しく挿入された要素のみになります。
では、既存の要素に追加し

paizaラーニング レベルアップ問題集 新・Bランクレベルアップメニュー JavaScript 【条件判定 2】視力検査

【条件判定 2】視力検査 (paizaランク C 相当)

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__vision_test

# 解答例
コードが少し長くなったので、細かなところのミスに気をつけました。

>2 回失敗する前に 2 回成功した場合、その段階について「合格」、それ以外の場合を「不合格」

なので、先に2回失敗したら、その後2回以上成功しても不合格判定なので、eye配列で、未判定、失敗、成功を保持するようにしました。eye配列のインデックスが小さい順にA,B,C,Dと対応しています。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N] = lines[0].split(” “).map(Number);

ガントチャート（JSライブラリ： jquery.ganttView）をカスタマイズしてみた（１行に複数タスク）

# はじめに

今となっては古のJSライブラリ

https://github.com/thegrubbsian/jquery.ganttView

上記ライブラリのスケジュール管理オブジェクトを１行内に複数配置するカスタマイズをしてみたので、勘所をメモ書きしておきます。

ニッチな内容だけど、誰かの参考になれば幸いです。

# スタイルシートの追加

標準の管理オブジェクト（チャート部に置くスケジュール線）

“`css
div.ganttview-block {
position: relative;
height: 25px;
background-color: #E5ECF9;
border: 1px solid #c0c0c0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
“`

を基にして、1行内に複数配置できるスタイルシートを追加します。

“`css
div.ganttview-block-cells {
position: relative;

paizaラーニング レベルアップ問題集 新・Bランクレベルアップメニュー JavaScript 【マップの扱い 4】マップのナンバリング

【マップの扱い 4】マップのナンバリング (paizaランク B 相当)

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__grid_numbering

# 解説
問題文の図は、入力例1のH=4 W=4 D=1ではなく、
入力 H = 3, W = 4, D = 1 ~ 4なので、これでテストした方がよい。

問題文の図を見ながら、法則性を見つけて実装していく。

***

D=1のときは、ナンバリングのスタートが、0列目固定で、0行目、1行目、２行目と移り変わる。
H-1行までいったら行固定で、今度は1列目,2列目,3列目と移り変わる。

スタートから斜め右上にナンバリングしていく。行は-1、列は+1している。
斜めの最大移動数は、HかWのうち小さい方-1。
マップからはみ出ないようにして、ナンバリングする。

***
D=2の時は、

0行目固定、列全部ナンバリング、
1行目固定、列全部ナンバリング、
としていく。以下同様
***
D=3の時は、
0列

hyper.jsを晒す

“`javascript:.hypre.js
“use strict”;
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// choose either `’stable’` for receiving highly polished,
// or `’canary’` for less polished but more frequent updates
updateChannel: ‘stable’,
// default font size in pixels for all tabs
fontSize: 14,

より正確に対角線、三角要素を作る

## 経緯

前コーディング作業よくした時に、固定値あまり入れたくなくて、よく計算処理を入れてました。
cssだけだったらcalcとかをよく使ったり、cssだけじゃ難しいと感じた場合はjsで計算し値を設置したりしました。
理由は自分の中で固定値にしちゃうと「今のコンテンツ量や横幅の時だけデザインデータとぴったしに合わせられたが、
これからサイトを運営していく上でコンテンツ増えたり、画面幅が変えたりする時には崩れたりする」ことが可能性としてあるからです。
## 対角線の使い道
– 以下のような斜めるラインがはいてるデザイン：
– 表を組み込みする時の空欄
![img6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/b6189df7-15b

paizaラーニング レベルアップ問題集 新・Bランクレベルアップメニュー JavaScript 【マップの扱い 2】マップの書き換え・縦横

【マップの扱い 2】マップの書き換え・縦横 (paizaランク B 相当)

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__get_upsidedown

# 解答例
隣接を`for (let i = -1; i <= 1; i += 2)`を用いて表現した。 ```javascript const fs = require("fs"); const input = fs.readFileSync("/dev/stdin", "utf-8").trim(); const lines = input.split("\n"); //盤面の行数を表す整数 H , 盤面の列数を表す整数 W const [H, W] = lines[0].split(" ").map(Number); //盤面の i 行目の文字をまとめた文字列 S const S = lines.slice(1, H + 1).map(line => line.split(“”));

//与え

paizaラーニング レベルアップ問題集 新・Bランクレベルアップメニュー JavaScript 【マップの扱い 1】マップの書き換え・1 マス

【マップの扱い 1】マップの書き換え・1 マス (paizaランク C 相当)

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__get_one

# 解答例
slice,map,joinを使いました。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H, W] = lines[0].split(” “).map(Number);
//盤面の i 行目の文字をまとめた文字列 S
const S = lines.slice(1, H + 1).map(line => line.split(“”));

//文字を書き換えるマスの y , x 座標
const [y, x

ChatGPT で kintone のコードについて聞いてみた

chatGPT がプログラムコードも生成してくれるようなので、kintone のコードを聞いてみます。

# 概要

ChatGPT がまだ成長段階ですが、現時点でどの程度できるか試してみます。
重要な注意事項として、下記があります。

– ChatGPT に問合せた内容は、OpenAI側で無制限かつ無償で利用されることを許容

詳しくは、[ChatGPTによるプログラム生成の可能性と限界（前編）](https://qiita.com/autotaker1984/items/5b5ac8c01d11fbbbc4a7)

# kintone について

まず、kintone について聞いてみます。よくできた説明が返ってきました。
Q. クラウドサービスの kintone について教えてください

>kintoneは、クラウド上で提供されるビジネスアプリケーションの開発・運用プラットフォームです。kintoneは、ビジネスユーザーが直感的なUIでデータを入力、編集、検索することができます。また、kintoneにはワークフロー機能があり、申請、承認などのプロセスを自動化することができます。

[next js 2023版] next/imageコンポーネントでwidthとheightを指定せず画像をフレキシブルに表示する方法 (100%)

## 記事を書こうと思った背景

他の方のqiitaの記事※ではnext/imageで調べると、{objectFit}や{layout}等の非推奨プロパティを使用している例が多いのでnext.jsの最新版として書きたいと思います。

(※ 2023年2月を起点に1年以内で検索した記事)
(非推奨プロパティでも同じ動作をします)

## 実際のコード
“`tsx:image.tsx
import Image from “next/image”;

{/* …省略 */}

“`

### コード解説
fillを指定するとデフォルトでスタイルがposition: abso

React Qiita APIでビュー数を取得して表示する

## やりたいこと
* Qiita APIで記事ビュー数を取得する。
* 取得したビュー数を表示する。

## 参考にしたサイト
[こちらのサイト【Reactでのaxiosの使い方【外部APIの取得方法】】](https://yoheiko.com/blog/react%E3%81%A7%E3%81%AEaxios%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%90%E5%A4%96%E9%83%A8api%E3%81%AE%E5%8F%96%E5%BE%97%E6%96%B9%E6%B3%95%E3%80%91/)が参考になりました。

## 実践
### QiitaのAPIアクセストークンを作成
QiitaのAPIを利用するにはまずアクセストークンを作成する必要があります。
こちらの[ユーザー管理画面](https://qiita.com/settings/applications)から作成しておきましょう。
![スクリーンショット 2023-02-17 10.52.13.png](https://qiita-image-store.s3.ap

textlint

## textlint
[textlint](https://textlint.github.io/)
[textlint-ja](https://github.com/textlint-ja/)

自然言語対象のlinter

### できること
– 校正ルールの自作
– 校正ルールを組み合わせて独自のルールセット作成

### 対応するファイル形式
– テキストファイル(.txt)
– Markdownファイル(.md)

## 準備

### npmの初期化

“`:terminal
npm init -y
“`

### textlintをインストール
“`:terminal
npm install textlint
“`

## ルールの導入

### ルール「ら抜き言葉を検出」をインストール
“`:terminal
npm install textlint-rule-no-dropping-the-ra
“`

### 動作確認用ファイル作成
“`:test.txt
来れる
後悔する度に
“`

### textlintを実行
“`:terminal

ループと末尾再帰

順を追ってループを末尾再帰に書き換えます。

【注意】考え方を説明するのが目的です。JavaScript で敢えてループを末尾再帰で書く必要性は特にありません。

# 階乗

階乗は 1 から指定した数までの積です。

“`math
5!=1×2×3×4×5
“`

## ループ

ループで階乗を求めます。

“`js
function fact1a(n) {
let a = 1;
for (let i = 2; i <= n; i++) { a *= i; } return a; } ``` ```text:実行結果 > fact1a(5)
120
“`

### while

`for` を `while` で書き換えます。

“`js
function fact1b(n) {
let a = 1;
let i = 2;
while (i <= n) { a *= i; i++; } return a; } ``` ※ 実行結果は同じなので省略します。 変数への代入をまとめて行うように書き換えます。処理内容は

Reactでコンポーネントした時に使うCSS-in-JS

# CSS-in-JSとは
Reactでコンポーネント分割した時に、CSSをコンポーネント化したJavaScriptに書いて
管理することです。

# 実際に書いてみる
まずはCSSのファイルです。
“`Styles.css
.input-area {
background-color: aqua;
width: 400px;
height: 30px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
“`
これをInPut.jsxに書いていきます。

“`InPut.jsx
import React from “react”;

//書き方はJavaScript
const style = {
backgroundColor: “#00ffff”,
width: “400px”,
height: “30px”,
padding: “8px”,
margin: “8px”,
borderRadius: “8px”
};

export const InputTodo = (props

引数、戻り値について

javascriptの勉強を進めている中で私が初めてぶつかった壁である引数と、戻り値についてメモとして残します。

## まず意識したいこと３つ

* 引数は、値を渡す側と値を受け取り処理をする側があるということ。
* 戻り値は、受け取った引数を使って完了した処理を、呼び出し元へ返す値ということ。
* 処理を呼び出す際に、引数の受け取る側に値をセットすること。

“` javascript:例文
function greeting(name) {
return ‘ようこそ、’ + name + ‘さん’;
}
console.log( greeting(‘佐藤’) ); // 結果＝＞　ようこそ佐藤さん
“`

こちらのコードでは、greetingという関数があり、４行目のconsole.logで呼び出しています。

**引数の渡す側となるのは4行目の(‘佐藤’)です。**

4行目のgreeting関数呼び出しの際にセットしていますね。
この佐藤がgreetin関数の(name)に置き換わるイメージです。

**なのでgreeting(name)は値を受け取る側

JavaScript　ES2023で導入された非破壊的メソッド

# ES2023で導入される非破壊的メソッドを紹介します

* toReversedメソッド
* toSortedメソッド
* toSplicedメソッド
* withメソッド

# toReversedメソッド

* reverseメソッドは**破壊的**に配列の要素を逆順にする
* toReversedメソッドは**非破壊的**に配列の要素を逆順にする

“`sample1.js
// reverse
const a = [1, 2, 3];
const b = a.reverse();

console.log(a); // [3, 2, 1]
console.log(b); // [3, 2, 1]

// toReversed ?
const c = [1, 2, 3];
const d = c.toReversed();

console.log(c); // [1, 2, 3]
console.log(d); // [3, 2, 1]
“`

# toSortedメソッド
* sortメソッドは**破壊的**に配列の要素をソートする。
* toSortedメソッドは*

nodejsでaws-sdkを使った時にハマったこと

# はじめに

`AWS Lambda` `runtime: nodejs`を使って
`S3`にファイルをアップロードしようとした際につまづいたことをメモ。

# 環境

* aws-lambda
* runtime: nodejs 14.*

# 結論

#### `aws-sdk`にはV2とV3がある

#### そして、私の環境ではV2だと動きませんでした。

クラメソにも記事がありました。

https://dev.classmethod.jp/articles/aws-sdk-for-javascript-v2-v3-diff/

# 導入方法の違い

“`bash
// V2
$ npm install aws-sdk

// V3
$ npm install @aws-sdk/client-s3
“`

# S3へオブジェクトをuploadするときの違い

## V2の場合

“`typescript
import * as AWS from ‘aws-sdk

ESLintのdisableコメントに注釈（コメント）を付ける方法

コメントの付け方を知らないとdisableコメントの上にコメントを書き2行になってしまいます。
ですが、disableの後に続けてコメントを記載する方法があります。
方法は`disable`コメントの後に` — `（スペース、ハイフン2つ、スペース）をつけるとコメントを記述することができます。

“`javascript:
// hogeは使わない
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const hoge = ‘hoge’
“`

“`javascript:
// eslint-disable-next-line @typescript-eslint/no-unused-vars — disableする理由も書けてスマートです
const hoge = ‘hoge’

/* eslint-disable @typescript-eslint/no-unused-vars — 囲む場合も同様です */
const hoge = ‘hoge’
/* eslint-enable @typesc