［きんとーんきほんのき !!!］今日から始める kintone カスタマイズ〈コピペで使えるおまけ付き！〉

# ［巻頭特典］ カスタマイズファイル 基本テンプレート

“`JavaScript:基本テンプレート（.js）
(function () {
“use strict”;

kintone.events.on(“イベントタイプ”, function (event) {
// 処理内容
return event;
});
})();
“`

:::note info
イベント名が PC 版，モバイル版で別々でスマホ版忘れそう。。。全部まとめて書いたらコード長い。。。
そんなときは、
　`const viewRecordLists = [‘app.record.index.show’, ‘mobile.app.record.index.show’]`
のように、PC 版 と モバイル版をセットにして、変数に入れておくと、それなりに纏められて、各イベントごとに使い回すこともできるのでおすすめです。
:::

kintone 本体に影響を与えないための **即時関数**，**Strict モード**で記述するための kintone カスタマイズ基本構文です。

Node.js x HerokuでWebアプリを作った

# はじめに
『[存在しないクイズ](https://sonzaisinai.herokuapp.com/ “存在しないクイズ”)』
というアプリを作りました。

▼URL
https://sonzaisinai.herokuapp.com

この世界に存在しないものを四択の中から選ぶクイズアプリです。
同じルームにいる人と対戦ができます。

▼ソースコード
[GitHub](https://github.com/

saveAsJSON.js

“`javascript
function saveAsJSON(data, name=new Date().toLocaleString(‘sv’).replace(‘ ‘,’T’).replaceAll(‘:’,’_’)+’.json’) {
const a = document.createElement(‘a’)
a.download = name
a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], {type: ‘application/json’}))
a.click()
}
“`
### JavaScriptのデータを保存する
Usage
“`javascript
saveAsJSON([‘pen’, ‘pineapple’, ‘apple’, ‘pen’])

// ファイル名を指定
saveAsJSON([‘pen’, ‘pineapple’, ‘apple’, ‘pen’], ‘hoge.json’)
“`

![image.png](https://q

【TypeScript】TSyringeを用いて5分でDIコンテナを実装する

## はじめに

[TSyringe](https://www.npmjs.com/package/tsyringe)はMicrosoft社のDIコンテナライブラリです。TypeScriptだと[InversifyJS](https://github.com/inversify/InversifyJS)の方が有名ですが、TSyringeの方が後発であることと、シンプルで使いやすいことから、今回はTSyringeを紹介したいと思います。

実際に動作するサンプルコードは[こちら(GitHub)](https://github.com/toginn/tsyringe-tutorial)になります。

### まずはDIパターンのサンプルで確認してみる

次の簡単なサンプルに、TSyringeを用いてみましょう。

“`typescript
interface Database {}

class DatabaseImpl implements Database {}

/* DIパターンにより、Databaseに依存している */
class Application {
/* 初期化

ngrokでローカルに立ち上げたHTTPサーバをHTTPSで公開する

最近では、HTTPサーバを立ち上げるにも、HTTPSでないとChromeでエラーとなったり、他のWebAPIと連携することができない場面が多くなってきました。また、SSL証明書もオレオレ証明書ではだめで、正規のSSL証明書である必要があったりします。
さらに、HTTPSであったとしても、ポート番号が443である必要がある場面が増えてきました。単に、静的なWebコンテンツであれば、GitHubにコンテンツをアップして、GitHub Pagesの機能を使って公開することはできるのですが、Node.js等を使ったWebAPIはできなかったりします。

そこで、ngrokを使うことで、ローカルに立ち上げたHTTPサーバを、正規のSSL証明書でかつポート番号443で公開することができ、WebAPIサーバとしても振舞えるようにします。

# ngrokアカウントの作成

まだの場合は、ngrokアカウントを作成します。以下のページからSign upします。

https://ngrok.com/

作成済みの場合は、Loginします。

# ngrokのダウンロード

ngrokを動作させるOSに

JavaScript(Node.js)における標準入力と文字列解析の方法メモ

JavaScript(Node.js) で簡単な競プロ的課題をやることになったが、なかなかJavaScriptでは標準入出力を行うことがないため調べた。
個人的に使いやすいと感じた使い方を記しておく。

# 結論

“`js
process.stdin.setEncoding(“utf8”);

let lines = [];
const reader = require(“readline”).createInterface({
input: process.stdin,
});

// 改行イベント
reader.on(“line”, (line) => {
lines.push(line);
});

// 標準入力終了時イベント
reader.on(“close”, () => {

// 分割代入で利用する
const [firstLine, …restLines] = lines;
const [n, m] = firstLine.split(” “).map( v => parseInt(v, 10));
console.log(n, m

Docker で “device or resource busy” と言われ rm できなかったら

# やろうとしたことと生じた問題
php コンテナを立ちあげ，コンテナ内部をこねくりまわしている途中， node_modules(Javascript のモジュールが入っているディレクトリ) を消したくなった。
“`bash
$ rm -rf node_modules
> rm: cannot remove ‘./node_modules’: Device or resource busy
“`
[Device or resource busyが原因でrm削除できない！！解決法はmountやmvではなく、〇〇だ！！](https://japan-challenge.net/device-or-resource-busy%E3%81%8C%E5%8E%9F%E5%9B%A0%E3%81%A7rm%E5%89%8A%E9%99%A4%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%EF%BC%81%EF%BC%81%E8%A7%A3%E6%B1%BA%E6%B3%95%E3%81%AFmount%E3%82%84mv%E3%81%A7/)

この記事に基づき，以

私の王子さまはどこにいるの？めめに似てる人を教えて～！！（TeachaBleMachineを使った機械学習モデルを作ってみました）

こんにちは。
今回はコロナ自粛期間中にドハマりしたSnow Manの目黒蓮くんこと【通称めめ】を
身近に発見したい！というただ、それだけの気持ちで画像認証できるものを作りました。

せっかくなので、Snow Manの誰に似ているのかも試してみてください！
※Snow Manを知らない方は[こちらをクリック](https://www.johnnys-net.jp/page?id=profile&artist=43)

## まずは実際にSnow Man判定してみてください！
　注)　URL内のボタンを押した後　結果が出るまでしばらくお待ちください！

https://codepen.io/nagaharahitomi/full/ZEvmPXQ

## TeachableMachineの設定
今回は身近なめめを探したかったので、
身近＝会社の人をターゲットに作りました。
（最近仕事が忙しくて友達に会えてない！！！！）

:::note info
会社で会う人はスーツ姿！！
てことで、スーツ姿のSnow Manの写真をTeachableMachineに設定！！
:::

const、let、varの使い分け｜JavaScript

# 結論
基本constを使う、constが使えなければletを使う、letが使えなければvarを使う。
※現在ではvarはほぼ新しく追加されることはないという意見をよく見ます&私もそう考えています。

# const
constは定数です。定数とは値の再代入ができないということです。
次のコードをデベロッパーツールのsourceタブから実行してみてください。

“`
const testConst = “テストの値”
testConst = “test variable”
Uncaught TypeError: Assignment to constant variable.
at :2:11
“`

エラー文が表示されました。
直訳すると少しわかりにくいですが
要は再代入のところでエラーをキャッチしましたという報告だけ表示されている感じです。

### constの特徴
この再代入ができないということがconst宣言の主な特徴になります。
constは３つの宣言の中で一番影響範囲の小さいものですので
初心者としてはエラーがたくさん出ることになります

서로다른코드입니까?

#코드비교
filter안에 화살표함수를 사용했는데 결과값이 다르다.
아래 두코드가 다른코드입니까?
“`javascript:code1
addItem(state, item) {
// 여기부터
const cartItems = state.items.filter(
(cartItem) => cartItem.id === item.id
);
// 여기까지
if (cartItems.length === 0) {
state.items.push({
…item,
qty: 1,
});
} else {
cartItems[0].qty++;
}
},
“`
“`javascript:code2
addItem(state, item) {
// 여기부터
const resultItems = state.items.filter((cartItem)

Agora.ioで予約制のビデオ通話の実装

汎用的なビデオ通話アプリは機能が多く含まれており、利用シーンによっては運用ミスが発生したり、ユーザーを混乱させたりします。
今回は以下のようなサンプルアプリを作ってみました。

**登場人物**
– (何かしらの)サービス利用者
– (何かしらの)サービス提供者

**システム概要**
– サービス利用者はWebアプリで予約＆ビデオ通話
– サービス提供者は予約時間になれば自動でビデオ通話に参加

この記事ではElectronを用いたデスクトップアプリとWebアプリで予約制のビデオ通話の簡易なサンプル作成について解説します。
サンプルコードは[Github](https://github.com/fu-jimoto/AgoraIO-VideoCallByAppointment)に公開しています。

## 実装内容
### サービス利用者
TOPページで予約をします。実際のプロダクトを想定すると、DB等と連携して、予約時間を保持します。また、予約時間になればビデオ入室ボタンがでてきます。
ですがこのデモでは日時を選択する動作と選択後にすぐにビデオ通話に入室できるようにしていま

Leafletで国土地理院マップを表示

#目次
[1.はじめに](#1-はじめに)
[2.タイル地図データ](#2-タイル地図データ)
[3.Leaflet](#3-Leaflet)
[4.チュートリアルうまくいかず！試したこと](#4-チュートリアルうまくいかず！試したこと)
[5.ハザードマップを表示してみる](#5-ハザードマップを表示してみる)
[6.国土地理院地図を重ねて表示する](#6-国土地理院地図を重ねて表示する)
[7.おわりに](#5-おわりに)

# 1. はじめに
たまたまハザードマップに関して調べていたら、ハザードマップのオープンデータが公開されていたのを見つけました。

https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html

活用方法については、活用事例集PDFに記載されています。
見ると、ライブラリとしてLeafletを使っている事例とのこと。
https://disaportal.gsi.go.jp/hazardmap/copyright/katsuyoujireisyuu.pdf

Web系じゃないほうのエンジニアなので

【８日目】メモ帳アプリの作成 [supabaseを活用]

前回まではメモ帳のアプリを作ったが、localStrageを利用してメモの履歴を保存して表示させるプログラムを作りました。

See the Pen
Memo5 by mizmizsan2 (@mizmizsan2)
on

JavaScritptの非同期処理の流れを図に整理してみた。

JavaScriptを使ったPluginを作成しているときに、想定している戻り値が返って来ずに、悩んでいたところ、Promise/aysnc/awaitについて、理解ができていない部分があったために、図にして、流れを整理してみました。

## JavaScriptのコードの基本的な流れ

上記に関数A、関数B、関数Cと順に並んだコードがあるとします。
基本的に、コンピューターは、コードを処理するときに、関数Aから順番に処理していきます。
最近では、複数の処理をできるコンピューターもあります。片方で、関数A→関数Bを処理し、もう一方で、関数A’→関数Cの処理を実行するなど、マルチで処理できるようにアレンジできます。

しかしながら、JavaScriptは、シングルスレッドと言われる単一の流れとなるので、基本的にマルチスレッドではできま

【入門】TypeScriptの概要をまとめてみた

# はじめに
現在、独学でプログラミングを学習している
「駆け出してもいなエンジニア」です！:bicyclist:

Reactを学習する中で、TypeScriptも触れた方がいいということを聞き、アウトプットと備忘録として、
今回この記事を投稿しました。

訂正が必要な個所などあれば、お知らせいただけると大変助かります:bow:

本編はここから！↓

# Typescriptとは
TypeScriptはJavaScriptの上位互換でJavaScriptに型が追加されているもので、TypeScriptはJavaScriptにコンパイルされます。

JavaScriptだとデータなどに明確な型がなく、チーム開発の際はうまく機能しない場合がありますが、TypeScriptは型が追加されているので、開発の規模が増えた際でも管理しやすいのです！

逆に言うと、**TypeScriptで拡張されたのは、主に型に関する部分**で、**それ以外のほとんどはJavaScriptそのまんま**ってことです!:baby:

**超ざっくり言うと、TypeScriptとは型の定義ができるJavaScri

サーバーレスアーキテクチャの長所と短所

今回は、サーバーレスアーキテクチャについて、メリットデメリットを含めてご説明します:loudspeaker:

サーバーレスアーキテクチャとは、インフラを管理することなく、アプリケーションやサービスを構築・実行する方法のことです。
著者：Dave Green 2021年12月17日
原文：https://bejamas.io/blog/serverless-architectures/
補足：Bejamas社に許可を取った上で、掲載しております。


>目次
>1. サーバーレスアーキテクチャとは？
>2. なぜサーバーレスアーキテクチャを採用する必要があるのか？
>3. 最終的な考え

テクノロジーは誰も待ってはくれません。

あるツールやアーキテクチャの使い方に慣れた頃に、新しいものが出てくると、また最初からやり直すのか？と自問すること

クロージャー (JavaScript)

講義で学んだ記録を書きます (20220419.)
##### ※その前にスコープについて軽く触れる
スコープには下記の４種類がある。
**グローバルスコープ**：１つのファイルどこからでもアクセスできる。
　　　　　　　　　　(注意：値の変更もどこでも可能になるので多用しない)
**ローカスコープ**：グローバル変数以外。　以下の2つに分かれる
**関数スコープ**：関数によって定義。関数内部からしか利用できない。
　　　　　　　※クロージャーで使用する知識
**ブロックスコープ**：{ブロック}で定義される。変数はブロック内で利用可能。
クロージャーではスコープの概念が大切になるので、未学習の方はぜひCheck!!!

## クロージャー(closure)とは
関数の中に関数を作成し、内側の関数から外側の関数スコープへアクセスできるようにする。
これにより関数スコープ内の変数情報を記憶・コントロールできるようになる。

## なぜクロージャーが使われるのか
普通の変数であると、ソースの量が多い or チームで開発する際

【Javascript】クロージャーってなんぞ？

クロージャーを学びました！！！

ので、簡単に３つのポイントで記事を書きました。

① クロージャーとは？

関数の中に「関数」とその周囲の「環境」が格納されているもの

(めちゃ簡単に書きました。詳しくはMDNとかにお任せします。。。)

[クロージャとは？](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures “クロージャ – Javascript|MDN”)

② 何に使うの？

オブジェクトの変数やメソッドを外部から簡単に変更されないようにするためらしい。
（簡単に変更できるとバグや意図せぬ挙動が発生する恐れがある）

Javaでいうとカプセル化の概念に近いのかなぁ？

(別件で調べたらカプセル化を担う機能の一つと書いてました。)

③ 使用例

例えば、消費税率の変化に対応出来るようこんな感じで関数が作れます。

~

jQueryを使用して全ての項目にチェックを入れるチェックボックスを作成する

表題通りの内容です。


“`index.html

全て

npmパッケージのコードリーディングを100倍しやすくする方法

100倍という表現はだいぶ大げさだと思うのですが、自分はこの方法を使ってからそれくらいnpmパッケージのコードリーディングがかなりしやすくなったので自分がこの方法を知った時の感覚をタイトルに反映させてみました！
方法というのはシンプルで**npmパッケージの気になる箇所にconsole.logを仕込んでデバックをする**だけです！

今回はその「npmパッケージの気になる箇所にconsole.logを仕込んでデバックをする方法」について解説をします
デバックするライブラリは[react-hook-form](https://github.com/react-hook-form/react-hook-form)にしました！

# npmパッケージの気になる箇所にconsole.logを仕込んでデバックをする方法
少し手順が多いのですが、なるべくコピペするだけで良いようにしました！
また、一度この手順を踏めば次からのデバックはかなり楽になるはずです

#### 1 適当なディレクトリを作り、そこにreact-hook-formをクローンする
““
mkdir react-hook-fo