アルファベット3文字を使って色彩を表現する

## やったこと
アルファベット3文字を使って色を表現した.
アルファベットをASCIIコードに変換して, RGBの値0から255で正規化.
最終的に16進数のカラーコードに直して使用した.

## 実際のコード
“`TS:colormap.ts
const getColor = (uid: string) => {
//アルファベットから色を決める関数
let changeAscii: string[] = [];
let ascii10: number[] = [];
let ascii16: string[] = [];
//asciiの最小値(Aのコード)が65
let minascii: number = 65;
//colorcodeの変数に16進数に変換された文字列を継ぎ足していく
let colorcode: string = ‘#’;
for (let i = 0; i < 3; i++) { //changeAsciiには1文字目と2文字目と3文字目が入る(別に配列じゃなくてもいい

discord.js v13 bot を作り始めるメモ

初心者がdiscord.js v13でbotを作るよ。
ほぼ参考先のまとめ。

## 導入
こちらの記事をガッツリ参考に、というかマルパクしました。
ありがとうございます。

https://qiita.com/hitori_yuu/items/02eae8b14dc6a9c91c0d

## トークン置き場を作る
Githubなんかでコード管理したいならトークンを隠すよ。
こちらは Discord.js Japan User Group のページを参照↓

[jsonファイルを使用してトークンを管理する（安全に）](https://scrapbox.io/discordjs-japan/json%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B%EF%BC%88%E5%AE%89%E5%85%A8%E3%81%AB

JSの復習：オブジェクトの基礎

オブジェクトの取り出し方基礎

基本的にUdemyから学んだことのコピペです。
今回はオブジェクトの取り出し方について。

“`javascript:main.js
let obj = {
props1:’value1′,
props2:’value2′,
props3: function(){
console.log(‘value3′);
},
props4: {
props5:’value5’
},

}

console.log(obj.props1);
obj.props3();
console.log(obj.props4.props5);

obj.prop6 = ‘value6’;
console.log(obj.prop6);
console.log(obj[‘prop6’]);
“`
コピペしてjsファイルに貼り付け、コンソールの確認をしてみてください
大体の取り出し方がわかるはずです。

参考は、CodeMafiaさんのガチで学びたい人のためのJS講座です。↓

[

JavaScriptで注意すべき書き方メモ

# exportとimport
1.個々の機能をエクスポート
“`javascript:export1.js
export const add = (num1, num2) => {
return num1 + num2;
};
export const minus = (num1, num2) => {
return num1 – num2;
};
“`

“`javascript:import1.js
import { add, minus } from “./export1.js”
add(1, 2); // 3
minus(2, 1); // 1
“`
importするとき { } でくくる

2.デフォルトエクスポート
“`javascript:export2.js
const add = (num1, num2) => {
return num1 + num2;
};
const minus = (num1, num2) => {
return num1 – num2;
};
default export {add, minus};
“

Node.jsを過去の物にする最速の肉まん

# その名はBun

ﾃﾞﾃﾞﾝ

[Bun](https://bun.sh/)はNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版)

ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ…)

この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。

# 割となんでもできる
Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。

– TypescriptからJavascriptへのトランスパイル
– jsxからJavascriptへのトランスパイル
– npmのようなパッケージのインストール&管理
– web

javascriptで外部モジュールのimportが出来ない

# エラー1

javacriptで外部モジュールをインポートする記述のあるsample.jsをコンパイルすると`SyntaxError: Cannot use import statement outside a module`というエラーが出ました。

“`sample.js
import { read, write } from ‘./helper’;
“`

“`sh
$ node sample.js
(node:40624) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
(Use `node –trace-warnings …` to show where the warning was created)
/home/node/sample.js:1
import { read, write } from ‘./helper’;
^^^^^^

SyntaxError: Cannot use import stat

TypeScript 4.8beta変更点➀ unknown型とobject型と型引数の絞り込みが改善された件

どうもこんにちは。
今回は、だいぶTypeScriptの知識が深まってきたので、2週間ほど前にアナウンスされた[TypeScript 4.8beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-8-beta/)を一通り試してみようかなと思います。

一通り試すことで知識を深め、忘れないために個人的なメモとしてアウトプットしていますので、英語の解釈が間違っていたり、おかしいことを言ってるかもしれないです。

もし間違ってることを言っていたらコメントで教えていただけると非常に助かります。

## TypeScript 4.8betaのインストール
“`bash
npm install –save-dev typescript@beta
“`
npmでインストールできます。

## TypeScript 4.8beta変更点
### unknown型とobject型と型引数の絞り込みが改善
[#49119 Improve intersection reduction and CFA for tru

【2022】Google Apps Script（GAS）をTypeScriptで書けるClaspの環境構築

こんにちは。[リケイのオコジョ](https://twitter.com/rikei_ocojo)です。
身の回りのことを少し便利にしたいとき、JavaScript/TypeScriptが書けると捗ります。


# はじめに
今回はGoogle Apps ScriptをTypeScriptで書くための[clasp](https://github.com/google/clasp)の環境設定をまとめます。

https://github.com/google/clasp

# Google Apps Scriptの設定とclaspのインストール
まずはApps Scriptの設定として[ポータル画面](https://script.google.com/home/usersettings)からGoogle Apps Scrip

NCMBとMonaca、DeepL APIを使って翻訳アプリを作る（その3：保存データの取得と表示）

NCMBとMonacaを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。

[前回は翻訳処理とデータの保存までを紹介](https://qiita.com/goofmint/items/1ff6caae08add6a4301c)しました。今回は保存データの取得と表示を実装します。

## コードについて

今回のコードは[NCMBMania/monaca_translation_app: MonacaとNCMB、DeepL APIを使った翻訳アプリです](https://github.com/NCMBMania/monaca_translation_app)にアップロードしてあります。実装時の参考にしてください。

## 履歴画面について

再掲になりますが、履歴画面は次のようなコードになります。

“`html

プログラミング初心者の私がQiitaでいただいた金言

## この記事について
この記事は、プログラミング初心者の私が他のユーザーさんからいただいたコメントで、
是非紹介したいコメントがあったので、同じくプログラミング初心者で悩んでいる人達に
共有するために書いております。

# 当時の状況
商社に勤めていましたが、転職に向けて日々の仕事とは別に興味があったプログラミング
を独学で学習している真っ最中でした。
自分の書いたコードがどうしても正常に動作せず、原因と対処方法を検索しては試すので
すが、解決の糸口が掴めず、なかなか進まない苛立ちと焦りが募っていました。

結局、自己解決を諦めて、何が原因かの見通しも立っていない漠然とした状況で、失礼か
とも思いましたがQiitaに助けを求めて質問をいたしました。

# 質問した結果…
質問したその日にデバッグ方法について回答が来ました。
①var_dumpメソッド（プログラムがどのように処理されているか確認するため
に処理結果や経路を確認）
②executeメソッド（SQLが正しく処理されているかも確認するために、戻り値を入手）
③errorInfoメソッド（直近のエラー情報を取得）

①

Electronメインプロセス中にレンダラーのasarファイルをダウンロードして開く方法

# コード

– 成功すれば`true`、失敗すれば`false`が返ってくる
– `fs`ではなく`original-fs`を使用
– バージョンアップで既存のモジュールが使えなくなるなど、保守性を考えて、デフォルトの`http`または`https`でダウンロード
– 今回は`GoogleDrive`に保存したasarファイルを`DriveToWeb`でホスティングしていたため、asarファイルのように容量が大きいと`303`が返ってくるので再帰でもう一度リクエストを送っている

https://teratail.com/questions/cy6vyydt1hnbn7

“`asarDownLoad.js
const https = require(‘https’)
const originalfs = require(‘original-fs’)

/**
* http.get
* asarのダウンロード・置き換え
* @param {*} url ダウンロードするファイルのURL
* @param {*} outURL 出力するファイルのURL
*/
const

javascriptで表せる数の限界

正確に扱える最大の整数
Number.MAX_SAFE_INTEGER
9007199254740991

正確に扱える最小の整数
Number.MIN_SAFE_INTEGER
-9007199254740991

Number.MIN_SAFE_INTEGERからNumber.MAX_SAFE_INTEGER以外の範囲では計算結果に誤差が生じる。

Javascriptのbooleanの判定法超基礎

0以外の数値型
“以外の文字列型
配列型
オブジェクト型

これらをifの条件式として扱う場合はtrue扱いになる。

“`javascript
//アラートが表示されるパターン
const userName = ‘Hitsuji’;
if(userName){
alert(`こんにちは${userName}さん`)
}
“`

“`javascript
//アラートが表示されるパターン
const address = ”;
if(address){
alert(`あなたは${userName}ですね？`):
}
“`
!を付与すると真偽値が逆になる
“`javascript
//falseが変える
const flg =
‘JavaScript’.includes(‘a’);
console.log(!flg);
“`
!!を２回加えるとデータ型がbooleanになる
“`javascript
//結果: true
console.log(!!’Hitsuji’):
“`

Javascriptで引数の数が未定だがとりあえず関数を作りたい【残余引数】

function 関数名(…引数) ||
(…引数) => {}

## 不特定数の引数を受け取る関数を作りたい
不特定多数の引数を受け取るには「…引数」のように「…」を用いる。
受け取った引数は引数[0],引数[1]のようにインデックスを使用して使用可能。残余引数という。

渡した引数を全て加算してreturnする関数はこちら。

“`javascript
function calcSum(…prices){
let result = 0;
for(const value of prices){
result += value;
}
return result;
}

const result1 = calcSum(10,20)
“`

【JavaScript】条件分岐（if文・三項演算子）

# if文
■もし条件式1ならば処理1を実行する
“`JavaScript
if (条件式1) {
処理1
}
“`
■もし条件式1ならば処理1を実行、違う場合は処理2をする
“`JavaScript
if (条件式1) {
処理1
} else {
処理2
}
“`
■もし条件式1ならば処理1を実行、
条件式1には当てはまらないが、条件式2に当てはまれば処理2を実行、
違う場合は処理3をする
“`JavaScript
if (条件式1) {
処理1
} else if (条件式2) {
処理2
} else {
処理3
}
“`

# 三項演算子
■if文のショートカットとしてよく用いられます。
“`javascript
(条件式) ? “true(trueに変換できる値)” : “false(falseに変換できる値)”
“`
※条件式を囲んでいる()は必須ではないです。

例えば、以下の様なif文があったとします。
“`javascript
const price = 1000;

if (price < 500) { conso

JavaScript のアロー関数の書き方

自分はあまりコードは書きません。
色々記法があって忘れがちなのでメモします。

### アロー関数
#### アロー関数のメリット
##### 1.関数を簡略化できる
##### 2.thisを束縛できる

アロー関数の例

“`javascript
const CalcSum = (a,b,c) => {
const result = a + b + c;
return result;
}
“`

“`javascript
const myFuntion1 = (a) => {
return a + 2;
})
“`
“`javascript
const myFunction2 = a => {
return a + 2;
});
“`
“`javascript
const myFunction3 = (a) => a + 2;
“`

奇妙なJavaScript

## 概要

奇妙なコードを書けたので紹介します。

“`javascript
[‘constructor’][‘constructor’][‘constructor’](‘return this’)()[‘console’][‘log’](‘Hello JavaScript!’)
// > Hello JavaScript!
“`

`unsafe-eval` がOFF、 `static` でない環境でしか動作しません。

## 説明

“`javascript
[‘constructor’]
// Array: [‘constructor’]
“`

要素が `’constructor’` の配列のリテラルです。

“`javascript
[‘constructor’][‘constructor’]
// Array()
“`

配列の `constructor` プロパティを参照します。配列オブジェクトのコンストラクタは `Array` オブジェクトです。

“`javascript
[‘constructor’][‘constructor’][‘construc

TypeScriptに手出す前に頭に入れておきたかったこと

TypeScriptとは
=
　TypeScriptとはJavaScriptが既存で持っている機能を全て含んだ上で、より機能が拡張して作られたプログラミング言語です。
　TypeScriptは「AltJS」のひとつであり、次世代のJavaScriptの最有力候補です。AltJSとは、「Alternative JavaScript」の略称で「JavaScriptの代わりになるもの」という意味が込められた造語です。JavaScriptより優れた機能を持ち、コンパイル（トランスパイル）後はJavaScriptのコードが生成される言語のことです。

TypeScriptについて知っておきたい事
=
　先程の記述した通り、TypeScriptはプログラミング言語であると同時にJavaScriptに変換するコンパイラでもあります。つまり、最終的にブラウザで実行されるものは、通常のJavaScriptです。つまり、TypeScriptを使うのは、コードを書いているときだけです。
　TypeScriptはJavaScriptの機能を拡張して作られ

NCMBとMonaca、DeepL APIを使って翻訳アプリを作る（その2：翻訳処理とデータの保存）

NCMBとMonacaを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。

[前回は画面の説明とSDKの導入まで紹介しました](https://qiita.com/goofmint/items/2af6873af4b6bb4350d1)。今回はDeepL APIを使った翻訳処理と、データをNCMBに保存するまでを解説します。

## コードについて

今回のコードは[NCMBMania/monaca_translation_app: MonacaとNCMB、DeepL APIを使った翻訳アプリです](https://github.com/NCMBMania/monaca_translation_app)にアップロードしてあります。実装時の参考にしてください。

## 翻訳処理について

翻訳画面を再掲します。翻訳するボタンを押すと `addTranslate` 関数が実行される仕組み

Vue3 script setup + TypeScriptで書いてみた

Vue.js 3.2 からscript setup構文が使えるようになり、
単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える構文となります。
https://vuejs.org/api/sfc-script-setup.html

従来の Composition API における setup() 関数の内部の記述を、
純粋なJavaScript, TypeScriptのように、script直下に単純に変数や関数等を記述できます。

今回の記事ではscript setup構文における以下を簡潔に記載します。
– script setupの基本構文
– componentの読み込み
– component内のプロパティの公開方法
– Propsの書き方
– Emitの書き方

## 書き始める前に
VSCodeにおける.vue ファイルの拡張機能としてよく使われているVeturはscript setup構文には対応していません。
代わりに、Volarを使うことが推奨されています。
拡張機能を入れておきましょう。
https://market