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

for、forEach、mapの使い方

### 動作環境
Node.js v16.14
Ubuntu20.4 （Vagrant + Windows10）

### はじめに
JavaScriptで配列を処理する方法はいくつかあります。色々なパターンを試してみました。テストで利用する配列がこちらです。
“`node.js
var ary = [“aa”,”bb”,”cc”,”dd”];
“`

### 内容
一番原始的なやり方がことらです。初学者であれば、まずは、このやり方が思いつくかと思います。この書き方でも、全然問題はありません。ただし、エレガントさに欠けるという言い方はできるかと思います。
“`node.js
for (let i = 0; i < ary.length; i++) { console.log("val=" + ary[i] + " idx=" + i ); } ``` 動作結果です。 ```node.js val=aa idx=0 val=bb idx=1 val=cc idx=2 val=dd idx=3 ``` 上記のfor文をエレガントに書くと、次のようになります。何がエレガン

【kintone】目指せ！JavaScriptカスタマイズ中級者（３） 〜自動で一括ファイルアップロード編〜の通りにやっても自動アップロードできない

https://developer.cybozu.io/hc/ja/articles/900001933483

以上の記事でハマっている人が多そうなので、個人的に使用しているものをリポジトリに公開していますので、こちらのリポジトリを使用すれば、以上の記事でやりたいことができると思います。

# リポジトリ
https://github.com/hiromu-ikeda/kintone-sample
# 少しだけ解説
https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate

記事の一覧には、以上のリポジトリを使用するよう指示が出ていて、実際.envを設定するとコマンドでビルドとアップロードを行なってくれます。

ところが、タイトルにもある通り、（3）にて自動で一括ファイルアップロードができるという記事があり、ハンズオン形式でやってみると、最後の

“`
npx webpack –watch –mode development –upload
“`
このコマンドを叩くと、自動ビルドまでは行な

dialogタグを使ってモーダルウィンドウ2

前回の記事

https://qiita.com/noenture/items/ecffc95acd7690127336

色々覚えたので刷新

# 設定
書き癖そのままなので、読みにくいかもしれません

“`javascript:
class MyModal extends HTMLDialogElement {
#selectable;#header;#main;#cancel;
#clicked(e){ /////dialogをクリックした時の処理
if(e.target.tagName === ‘BUTTON’){ /////ボタンをクリック
if(this.#selectable){
//////////ここの処理もうちょっと簡潔にならないものか
for(const x of this.#main.querySelectorAll(‘input’)){
if(x.checked) return this.close(x.value)
} /////選択したラジオボタンのvalueを返す
this.close(”)

郵便番号検索jquery.jpostal.jsの実装

# 概要
郵便番号から住所を検索し、結果をセットするjsの実装をしてみました。
今回使用したのは、”jquery.jpostal.js”

https://github.com/ninton/jquery.jpostal.js/#%E8%A8%AD%E7%BD%AE%E6%96%B9%E6%B3%95b

# 環境
* Rails7
* ActiveAdmin

# 導入方法
本家を参照のこと。

環境内で動作させたかったので、郵便番号データ(json)はプロジェクト内に配置しました。
* public配下にjson配置
`public/jpostal_json`

* assets配下でもOKでした(追記)
`assets/jpostal_json`

# コード

“`app/assets/javascripts/admin/active_admin.js
//= require jquery.jpostal.js
//= require admin/postalcode
“`

“`app/assets/javascripts/admin/postalcode.js
$(f

jQuery AJAXでJSON取得

jQueryを使ったAJAX通信でのJSON取得

## コード例
“`javascript
// JSONで通信する場合、WebAPI側は クロスサイトスクリプティングへの事前対応が必要
$.ajax({
type: “GET”,
url: ‘https://WebAPIサーバ名もしくはIPアドレス:ポート/ディレクトリ’,
dataType: “json”
})
.done(function(json){
console.log(json);
})
.fail(function(){
console.log(“ajax fail”);
});
“`

## 元データ
|id|name|
|–|—-|
|1|taro|
|2|john|
|3|patrick|
|4|pierre|
|5|abele|
|6|wei|

## 実行結果
“`json
[{id: 1, name: “taro”}, {id: 2, name: “john”}, {id: 3, name: “patrick”}, {id: 4, name: “pierr

jQuery JSON取り回し

フロントエンド側でのJSON取り回しサンプル

“`javascript
// JSONデータを定義
const jsonSample = [
{ “name”: “john”, “age”: “28”, “country”: “united states” },
{ “name”: “pierre”, “age”: “25”, “country”: “france” },
{ “name”: “wang”, “age”: “37”, “country”: “china” }
];
console.log(“original object: “, jsonSample);

// JSON要素を追加
jsonSample.push({“name”: “patrick”, “age”: “33”, “country”: “united kingdom”})
console.log(“pushed: “, jsonSample);

// JSON要素を削除
// 先頭から削除
jsonSample.shift();
// 末尾から削除
jsonSample.po

JavaScript コンソールのレヴェルの扱いの違い

JavaScript コンソール (`console.log()` など) は事実上の標準化が為されていますが，エラーレヴェルの扱いについては違いがあります。以下に表を示します。
## Firefox

| Level | 説明 | デフォルトで表示 | 特記事項 |
|——-|—–|—————-|——–|
| debug | `console.debug()` | **no** | アイコン無し |
| **log** | `console.log()` | yes | アイコン無し |
| info | `console.info()` | yes |
| warn | `console.warn()` | yes |
| error | `console.error()` | yes |

## Chrome

| Level | 説明 | デフォルトで表示 | 特記事項 |
|:——|:—-|:————–|——–|
| debug | `console.debug()` | **no** | ア

apple-touch-startup-imageをクライアント側で自動生成する

# apple-touch-startup-image ?
PWAは簡単にいうとWebページをネイティブアプリかのようにインストール可能にする技術。
インストールの際にどんな感じでネイティブアプリっぽく振る舞えばよいかを端末に伝えるのがmanifest.json。

アプリのアイコンや表示するアプリ名もそこで指定するのだがAndroidだとそれらの情報からスプラッシュ画面をいい感じに自動生成してくれる。

iOSはというとそんな気の利いたことはしてくれず真っ白な画面が代わりに表示される。
が、一応スプラッシュ画面を表示する手段はSafari大好き独自規格で用意されている。
ページのheadに``を入れるとこれを表示

three.js + TypeScript: 3次元空間で立方体を回してみる

[three.js](https://threejs.org/)は、WebGLを使って3次元表現ができるライブラリです。素のWebGLでは難しくなってしまうコードが、すっきりと短くわかりやすく書けます。本稿は公式サイト「[Creating a scene](https://threejs.org/docs/index.html#manual/ja/introduction/Creating-a-scene)」(シーンの作成)の作例をもとにしたチュートリアル解説です。アプリケーションはモジュールに分け、TypeScriptも採り入れました。もっとも、TypeScriptについては型推論が働くおかげで、明示的な型づけはほとんどしていません。本稿で書くコード例のでき上がりはCodeSandboxに公開しました。

#### 本稿作例のでき上がり

# 環境をつくる
作業はすぐに始められて、簡単に試せるように[Cod

Chatworkのデータをcsvでバックアップ その２

## Chatworkのデータをcsvでバックアップしておきたい！
ということで書いたこちらの記事
[ChatWorkのデータをcsvバックアップ．ついでにSlackへ・・・](https://qiita.com/saikickers/items/2e348feafe86b46fc0af)

ですが，久しぶりに見たら動きそうにないので少し修正しました．
上の記事はモバイルUA想定で作成しましたが，今回普通にWeb版を開いてそのままで動作するように修正しました．またSlack用にと思っていた処理を除いて，汎用的にcsvでとりあえずバックアップしておきたい用に作成しました．

出力したcsvをうインポート先でうまくできるかは不明なので，整形したりそれぞれ加工する必要はあるかと思います．

**やっていることは，ブラウザで読み込んだhtmlの構造をみて，整形し，コンソールに表示しているだけです**

## 手順説明

1. web版のchatworkを表示してログイン
2. chrome開発者ツールのコンソールを表示
3. **スクロールしまくってバックアップしたいとこまで読み込む**

最短距離：ブラウザにプッシュ通知を送信　（仕組みと実装）

本記事では、ブラウザへのプッシュ通知を最短距離で実装する。


# 本記事で使う言語・サービス・ライブラリ
– Google Chrome
（Firefoxでは、うまくいったりうまくいかなかったりしたのでChromeをおすすめします。）
– HTML / Javascript（フロントエンド）
– npm
– webserver ([http-server](https://www.npmjs.com/package/http-server))
(Push通知設定は、`file://`からできない)
– [Web-Push](https://www.npmjs.com/package/web-push) (プッシュ通知送信用)

# プッシュ通知の仕組み

## 基本的

一時的な障害に強いシステム（アプリケーション）を構築する

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n236a7e03c033

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/intro-vuecli/commit/a4f87435f7c34bae23cfa4f9ecfa450a94af371f

SlackのBot通知を任意の条件の日で実装させてみる Part.3 Slackとの連携

# はじめに
今回の記事は一気に書き切ります、中の人です。

これまでの記事では、通知日時判定ロジックを実装、Google DriveにGoogle Apps ScriptとしてアップロードすることでWeb環境上での動作を実現させてきました。
この記事でいよいよ本題となるSlack連携を実現させます。
これまでが長かった…忘れないように書き残したかった部分をようやっと書き始めますよって。
よかったら参考にしてくださいませ。

ちなみに今回までの全3回のシリーズものです。
それぞれ、こんな内容でやっていきます。

Part.1：[JavaScriptでの通知日時設定の実装](https://qiita.com/icchy_sh33p/items/068d450735029d95adc4)
Part.2：[実装通知判定関数のGoogle Apps Scriptへのアップロード](https://qiita.com/icchy_sh33p/items/43c28fe25b7842ed260f)
Part.3：[Slackとの連携](https://qiita.com/icchy_sh33p/

SlackのBot通知を任意の条件の日で実装させてみる Part.2 Google Apps Scriptへの関数アップロード

# はじめに
今日は連日投稿します、中の人です。
前回からシリーズものとして書いているいろいろいじってみたときのお話の第2弾になります。
前回、記事に落とし込む〜なんてたいそうな口を叩いていましたが、今回からはどちらかというと自分用への備忘としてのメモ要素が一気に爆上がりします。
でも、ここからは使用ツールの癖もあったりするからこんなくらいの書きっぷりが参考になると嬉しいな。

全3回のシリーズものです。
それぞれ、こんな内容でやっていきます。
– Part.1：[JavaScriptでの通知日時設定の実装](https://qiita.com/icchy_sh33p/items/068d450735029d95adc4/)
– Part.2：[実装通知判定関数のGoogle Apps Scriptへのアップロード](https://qiita.com/icchy_sh33p/items/43c28fe25b7842ed260f/)　←このページです
– Part.3：[Slackとの連携](https://qiita.com/icchy_sh33p/items/2d267a1fa68

SlackのBot通知を任意の条件の日で実装させてみる Part.1 JavaScriptでの通知日時設定の実装

# はじめに
お久しぶりです。中の人です（なんて名前でやっていたのかも覚えていない…）

ありがたいことに、SEとしてたくさんの業務をこなしてきましたが、今回久しぶりに業務そのものではなく、日頃気になっていた人力での作業（作業といえるものでもないかもしれない）をなんとか自動化させたいと思い、久しぶりにちょっとひとりでいじってみました。
結構、似たような境遇の人はいるんじゃないかと勝手に思ったので、記事に落とし込むところも久しぶりにやってみました。せっかくなので、やってみたくなったら試してみてね。

では、早速書き進めていきます。
ちなみに今回は全3回のシリーズものです。
それぞれ、こんな内容でやっていきます。
– Part.1：[JavaScriptでの通知日時設定の実装](https://qiita.com/icchy_sh33p/items/068d450735029d95adc4/)　←このページです
– Part.2：[実装通知判定関数のGoogle Apps Scriptへのアップロード](https://qiita.com/icchy_sh33p/items/43c28fe

JavaScript_よく使われるイベント（onclick,onchange,onmouseover,onmouseout,onkeydown,onload）

onclick:マウスがクリックされたとき
onchange:入力に合わせて動的に表示内容を変えたい場合
onmouseover:マウスのポインタ（カーソル）を要素の上に合わせた時のイベント。
onmouseout:当該要素内に入っていたカーソルが外れたとき
onkeydown:キーを押したとき
onload:ページを読み込みとき

例：
“`