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

郵便番号から住所を補完するコード

# 概要

– Webの申し込みフォームなどで郵便番号を入力すると住所が自動的に補完されるコードを書きます。
– 無料の[郵便番号API ポストくん](https://postcode.teraren.com/)を使いました。

## 調査

郵便番号から住所を呼び出すときには以下のようなURLで呼び出すだけです。

“`shell
% curl -s https://postcode.teraren.com/postcodes/1600023.json | jq
{
“postcode_type”: “area”,
“jis”: “13104”,
“old”: “160”,
“new”: “1600023”,
“prefecture_kana”: “トウキョウト”,
“city_kana”: “シンジュクク”,
“suburb_kana”: “ニシシンジュク”,
“prefecture”: “東京都”,
“city”: “新宿区”,
“suburb”: “西新宿”,
“street_address”: null,
“office”:

【Vue】初期カーソル位置を特定のinput 要素に設定する

## やりたいこと
例えば検索ページにおいて、最初から検索窓にカーソルがフォーカスされていたら、ユーザーに優しいですよね、

ということでvueでカーソル位置を指定する機能を実装します。2分で終わります。

## 実装
１.カスタムディレクティブを作成します。

“`js:main.js
const app = createApp(App)

app.directive(‘focus’, {
mounted(el) {
el.focus()
},
})
“`

２.フォーカスさせたいinputに対して、v-focusを付与します。これで完了です。

“`vue:search.vue

“`

## 結果

ページを開くと自動で検索窓にフォーカスされるようになりました。
![スクリーンショット 2023-02-11 16.23.39.png](https://

検証ツールでconsole.table()を使ってみた

検証ツールにて、`console.log()` は頻繁に使うと思います。

むしろそれ以外使うのって感じですよね。

今回は、`console.table()` を紹介します。

## console.table()とは？

引数に配列やオブジェクトを入れると見やすい形に整形してくれます。

“`js
const fruits = [
{name: “Apple”, price: 100},
{name: “Orange”, price: 150},
{name: “Strawberry”, price: 200},
];
console.table(fruits);
“`


お母さんでもわかるクラスとインスタンス！

## はじめに
今回はお母さんでもわかる「クラスとインスタンス」の説明を頑張って考えました。

なぜこの記事を書こうと思ったのかというと、他の記事を読んでも単語と役割が全く結び付かなかったからです。
「なんかやりたいことはわかったけど、インスタンスって結局何のことだっけ？」「コンストラクタって何してる？と聞かれると答えられない」みたいな感じになってしまいました。

ですので、こんな記事が欲しかったなというものを自分なりに書きました！
すごくわかりやすく考えられたと思うのでぜひ最後までご覧ください！

## 目次
・[プロパティとメソッド](#プロパティとメソッド)
・[インスタンスとオブジェクト](#インスタンスとオブジェクト)
・[クラスとコンストラクタ](#クラスとコンストラクタ)

## クラスとは
“`index.js
class たいやき{
constructor(生地、中身){
this.生地=生地
this.中身=中身
}

showNakami() {
console.log(`${this.生地}, ${this.中身}`);

ES Modulesについて

# はじめに

#### ※以下の内容には誤りが含まれる可能性があります

ES Modulesについて学んだことを書きます。

# 具体的な内容

## ES Modulesとは何か

ECMA Script Modulesの略。

ES2015仕様において策定された、JavaScriptファイルから別

のJavaScriptファイルを読み込む仕組みです。

ES Moldulesは標準としてNode.jsとブラウザ両方に対応し

たモジュールシステムの仕様です。

# ES Modulesのメリットは？

ES　Modulesは言語レベルの文法、ブラウザサポート、デフォルトでstrictモード、

非同期import、トップレベルでのawaitの使用、静的解析の向上、ツリーシェイキングなど様々なメリットがあります。

# まとめ

JSファイルを細かく分けた場合、ウェブサーバーから転送すべきファイルの数が増える傾向があるらしいです。

この辺はまだまだ学習必要です。

【React】オブジェクトの一部プロパティ変更

### 問題
アプリ内でオブジェクトに所属している一部のプロパティを変更したが、
レンダリングされなかった。

以下はボタンをクリックすれば表示されるユーザー名が”alchoding”から
“drinker”に変更するコードになるが、実際画面に表示される名前は変わらない。

“`javascript
import { useState } from “react”;

function App() {
const [user, setUser] = useState({
userName: “alchoding”,
friend: null,
});

const changeUserName = () => {
user.userName = “drinker”;
}
return(
<>

ユーザー名 : {user.userName}

)
}
“`
### 解決法
userNameプロ

バリデーションの条件をオブジェクトにまとめてfor-ofで回す

## 課題
バリデーションの条件毎にif文を書いて分岐すると、同じ処理が重複するのでスマートではない。
## 解決策
条件とアラートメッセージをオブジェクトにまとめてfor-ofで回す
## コード内容
“`Typescript: validate.ts
const validateInputData = (file: File): boolean => {
type ErrorType = {
term: boolean;
message: string;
};
const err: { [key: string]: ErrorType } = {
notJson: {
term: file.name.slice(-4).toLowerCase() !== ‘json’,
message: ‘Not json file.’,
},
notAllow: {
term: Object.keys(JSON.parse(JSON.stringify(file))).length === 0,

ReactをGitHub Pagesにデプロイしよう〜Vite編〜

# 今回の目的

以前にもReactをGitHub Pagesにデプロイしようと試みた記事([ コチラ ](https://qiita.com/tat_mae084/items/745761eee6cd1d42949d “ReactをGitHub Pagesにデプロイしよう”))を書いたが、以前の記事を書いてから時代が移り変わり、新たなビルドツール「Vite」で作成したReactプロジェクトをGitHub Pagesにデプロイしようと取り組んだ記事です。

# 前提条件

– MacOS
– GitHubアカウント取得済
– Node.jsのバージョン：v16.15.0
– yarnのバージョン：1.22.10

## Viteとは
Vite(ヴィート)についての説明については引用元からの説明を貼っておきます。
> Vite(ヴィート)は、2020年に1.0.0-rc.1がリリースされた、比較的新しいフロントエンドのビルドツールです。
Vueの開発者であるEvan　You氏により開発されたものですが、Vue以外にもReact等、様々な環境で利用可能な汎用的なツールです。
ヴィート

Babylon.js を実行するミニマムな HTML について調べてみた ＆ ミニマムな変更を加えてみる

Babylon.js を実行できる HTML を準備する際、「最小限の内容はどのようになるだろう？」と思って調べたら、公式に情報があったので、それを見てみました。

具体的には、以下のページの内容です。

●Starter HTML Template | Babylon.js Documentation
　https://doc.babylonjs.com/setup/starterHTML

そして、実行した際に以下の内容が表示されるものです。


## 公式情報の内容
### HTMLファイルの内容
まずは、公式ページに書かれた内容を掲載してみます。

“`html

オンラインPRG「REDSTONE」（赤石）をウェブ移植してみた

#### REDSTONE（レッドストーン）という懐かしのMMORPGをウェブでプレイできるようにしてみた話

（移植できたのはまだ一部です）


## ブラウザでプレイできるデモ公開

とりあえず、**触ってみてもらうのが一番**なのでデモを置いておきます！
（ブラウザで開くだけでDLとか不要です）

#### Demo：https://rs.sigr.io/

https://rs.sigr.io/

—–

プロジェクトのソースコードも全部公開してます
#### Github

AWS Amplify StudioのDataStoreで条件を絞ってデータを取得する方法

## 概要
最近、`AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発`の書籍を購入してAmpify Studioの勉強してたらDataStoreを使用した問い合わせ方法が書籍の書いてある方法だとうまくいきませんでした。
[Amplify デベロッパー センター](https://docs.amplify.aws/lib/datastore/data-access/q/platform/js/#create-and-update)のドキュメントを読んで解決したのですが、どこかに残しておきたいなぁと、、

せっかくなので、Qiitaを使う側になってみようと思ったので執筆しました。

## やりたいこと
以下のようなModelに対してname情報を指定してデータ取得をしたい。

Model名: Board

Field name | Type
—— | —–
id | ID!
message | String!
name | String
image | String
PersonID | Relationship Source

※ 最終的

汎用進数変換の安全性を高めようと努力した

# 汎用的な進数変換関数を作る

## 基本的なコード

“`script.ts
const baseConversion = (decNumber: number, numralArray: string[]): string => {
decNumber = ~~decNumber;
let numral = numralArray.length;
let result = “”;
while (decNumber >= 1) {
result = (numralArray[decNumber % numral] + result);
decNumber = ~~(decNumber / numral);
}
return result;
}

console.log(baseConversion(10, “0123456789ABCDEF”.split(“”)));
console.log(baseConversion(11, [“0”, “1”]));
“`

## 仕組み

10進法から、N進

『リーダブルコード』を実践的に活用するための問題集[Javascript](第1節 表面上の改善)

『[リーダブルコード―より良いコードを書くためのシンプルで実践的なテクニック](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655)』を読んで、実践的に活用するための問題集を作りました。

使用している言語はJavaScriptもしくはTypeScriptで、範囲は第Ⅰ部「

【JavaScript】CSV出力で発生したwindowsの文字化け対策

# 概要
– macでは問題なかったが、windowsでcsvダウンロードしたら文字化けしてしまった時の対処法
– windowsの機体がなくても簡単に文字化けが直ったか確認する方法
について記載します。

# 文字化けの発生原因
WindowsのExcelでCSVファイルを開くと、Shift_JISで読み込まれてしまうためUTF-8のファイルで書かれたファイルは文字を解釈できずに文字化けする

# 具体的な対応方法
以下のように`BOM`を付けることで、ExcelにUTF-8で書かれていることを伝えることができます。

“`js
downloadCsv() {
const text =
“ここにフォーマットのテキストが入ります”
const bom = new Uint8Array([0xef, 0xbb, 0xbf]) //ここでUTF-8を指定
const blob = new Blob([bom, text], { type: “text/csv” })
const url = URL.createObject

Maplibre GL JS の addProtocol の使い方を調べる

## はじめに

[Maplibre GL JS](https://github.com/maplibre/maplibre-gl-js) は、[Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) から派生したウェブ地図用のライブラリです。

Mapbox GL JS の v2 系のライセンス変更（2020年12月）をきっかけに、Mapbox GL JS の v1 系からフォークされましたが、その Maplibre GL JS も既に v2 となって久しく、もともとの Mapbox GL JS にはない機能も追加されています。

そのひとつが、`addProtocol` という機能であり、タイルをロードする際に、行う処理を追加することができます。以下は、maplibre.org から出されている `addProtocol` の説明です。

https://maplibre.org/maplibre-gl-js-docs/api/properties/#addprotocol

ただし、上記の説明はあっさりしているので、使ってみた挙

tailwindcssを試せるサイトを作りました

# はじめに

playgroundみたいなものを作ってみたかった

普段フロントエンド開発をしていて`tailwindcss`に触れる機会が多いので、
classを書き換えると反映されるようなサイトを作りました。

大したものではないのでハードルは下げてくださいまし

## 全体像


## 概要


こちらのフォームで書き換えたものが

![スクリーンシ

これだけは知っててほしいJavaScript 〜配列処理〜

# 概要

最近、**js** で配列の中身をforで回す人をよく見かける。
**map**　や **reduce**　はよく使うので知っておいてもらいたい。

# map

[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)は元の配列から新しい配列を生成する関数。

“`js
const array = [1, 2, 3, 4];
const output = array.map(x => x * 2);
console.log(output);
“`

“`:実行結果
[ 2, 4, 6, 8 ]
“`

自分は以下のインラインコールバック関数を一番使用する。

“`js
const array = [“a”, “b”, “c”];

array.map(function(value,index,arr) {
console.log(value, index, arr);
})
“`

“`:実行結果
a 0 [ ‘a’,

【GAS入門】スプレッドシートからGoogleカレンダーに予定を一括登録！

「仕事で、スプレッドシートで管理している予定をGoogleカレンダーに一括登録できるようにしたいんだけど…」
と頼まれたので初めてGASを使ってみました…:information_desk_person:

## やりたいことなど…
・その日の配達の予定を下記のような感じでスプレッドシートで管理している。これをGoogleカレンダーにも登録して予定を見やすくしたい。

・スプレッドシートに記載した日付でカレンダーに予定を登録したい

・カレンダーの予定の開始終了時間は「配達時間」、タイトルに「お客様名」、場所に「配達場所」、説明欄に「備考」を入れて予定を登録できるようにしたい

・配達時間が入っていない予定は、終日の予定として登録したい

・スプレッドシートには、カレンダーには登録したく

論理積 (&&)　Null 合体演算子 (??)　論理和 (||)　条件 (三項) 演算子

よく使う癖に挙動を覚えてなくて毎回確認してるのでリストにして置いておこうという考えで列挙
他にも便利なのあれば教えて欲しいです

~~~ts
if(何かの条件)=>{
return;
}
// ↑の条件に当てはまらない場合に実行したい処理をつらつらと下に書いていく
~~~
上記の書き方を他にないかなと思ってるんですが先に関数定義して下記をケースバイケースがいいんでしょうか？
~~~ts
const sample=()=>{実行したい処理}
何かの条件&&sample()
何かの条件||sample()
何かの条件??sample()
~~~

## 条件で関数実行のメモ
~~~ts
//適当な関数を用意
const anyMthod = () => {
console.log(“do anyMthod”);
};
~~~

## [論理積 (&&)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND)
~~~ts
console.log(`undefined

長年break文を使い続けたプログラマーが、break文の無いElixirを学んで、遅延評価にたどり着いた話

# はじめに

私はPythonのプログラムを使う時、breakを使う事がよくあります。
繰り返し処理の中で、繰り返しを中断したい状況になったら、直ぐに中断できて便利ですよね

Elixirには、繰り返し文(Pythonのfor, while等）がありません。なので繰り返しを中断するためのbreak文がありません。

Elixirでは、どうしているか、例題を設定して、Elixirの場合の記述を書いてみます。

# 課題１

heavy_process()があります。
“heavy!”と表示します。
trueかfalseを返す関数です。
これを１０回実行して１０回ともtrueが返ってきたら、true, 一度でもfalseが返ったらfalseを返す関数を作成する。

## シンプルな実装
“`elixir
def get_result_enum() do
1..10
|> Enum.map(fn _i -> heavy_process()end)
|> Enum.all?()
end

def heavy_process() do
IO.put