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

気象庁の台風位置表から GeoJSON を作成する

## はじめに

気象庁から過去の気象データとして[台風位置表](https://www.data.jma.go.jp/yoho/typhoon/position_table/index.html)が提供されています。データ形式は PDF と CSV が提供されていますが、内容が異なるほか、速報値は PDF でしか提供されていないようです。

この PDF から データを取り出して、GeoJSON のラインデータやポイントデータを作成した作業を記録として残します。なお、一部手動作業を含みます。

:::note warn
台風位置表の解釈については、誤っている部分があるかもしれません。ご利用に当たっては自己責任でお願いします。
:::
:::note warn
気象庁のデータを利用するときに、CSV 等で提供されているのに見落としていることがあります。今回もその可能性は否定できませんので、ご了承ください。
:::

## 台風位置表の中身

台風位置表の PDF ですが、以下の情報が含まれた表になっています。

* 日本時（月、日、時）
* 中心位置（経度、緯度）
* 中心気圧
* 最

D3.jsとJSDOMを活用してかんたんな震度分布図を作ってみよう

# tl;dr
震度分布図作ります。

:::note warn
かなりのスパゲッティーコードです
あとかなり読みにくい日本語となっています、すいません。
:::

# しくみ
“`
P2PQuake JSONAPI
↓
パーズ
↓
描画部分で最大震度の色に変換
↓
完成！
“`

# コード
:::note warn
出来るだけ短く済むように一部を変更したりしてます。
フルで汚いコードはgithubにあげておりますのでよければどうぞ
→ https://github.com/akikaki-bot/Earthquake_mapmaker
:::

“`js
(async() => {

const d3 = require(‘d3’);
const fs = require(‘fs’);
const jsdom = require(‘jsdom’);
const { JSDOM } = jsdom;
const Path = require(‘path’);
const Util = require(‘./util/changesindo.js’)
const request

JavaScriptの配列のメソッドの使い方～indexOf・lastIndexOf・includes・concat～

# 記事の目的

どもー、N予備校でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、つ紹介・説明しまーす。
です！
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。

# 目次

– [1つ目、indexOfメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#indexof)
– [2つ目、lastIndexOfメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#lastindexof)
– [3つ目、includesメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#includes)
– [4つ目、concatメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#concat)

# indexOf

##### 《 おもなメソッドの役割 》

◎ どの要素

async/awaitのaの違い～async wait説への反論

## はじめに

[ncaq氏の記事](https://www.ncaq.net/2017/02/10/)を読んで様々なことを学習できました。

asyncが「syncしない」なのにawaitが「waitする」なのは何故か。awaitがasync waitであるという説は正しいのか。async/awaitの語源について学習したことを記事にしました。

## asyncとawaitのa-の違い

asyncはsynchronize（同期）にa-（否定）が付いてasync（同期しない）となります。

awaitはwait（待つ）にa-（否定）が付いて「待たない」となりません。a-（方向）が付いてawait（待つ）となります。

a-（否定）とa-（方向）の違いです。

## a-（否定）は「エイ」と発音する傾向

:::note info
asynchronous エイスィンクロナス 非同期

Ajax エイジャックス(Asynchronous JavaScript And XML)

asymmetry エイスィメトゥリィ 非対称

asexual エイセクシュアル 他者に性的魅力を感じ

[Node.js][Express]傾斜機能付き割り勘webアプリを作る！

# はじめに
### 制作物
[warican](https://warican.onrender.com/home)

### github（一部抜粋）
[github](https://github.com/Mitachi-H/waricanOpen)
個人情報を含むファイルは削除しています。
### こだわりポイント
* 傾斜を設定できる
* 結果のテキストを保存できる
* グループ作成時にはメンバーを指定する必要がない
* 支払い者が複数のイベントも追加できる

*webアプリケーション*美術館の評価サイト

## Intro
この前、初めて直島に行きました。
有名な安藤忠雄の地中美術館をも行きました。

この４人の作品しか展示しなかった美術館でした：
クロード・モネ、草間彌生、ジェームズ・タレル、ウォルター・デ・マリア

アートと美術館の建築物を完璧的に融合でき、
最高な美術館でした。

これがきっかけで、美術館の評価サイトを作ってみたいと思いました。
（今はもうたくさんより完成な美術館の評価サイトが存在していますが、
自分の手で作りたいです。）

## codeの紹介
今回の成果物はcodepenを使い、html, css, javascriptを使用しました。
そして、このwebアプリケーションは、2つJavaScriptライブラリを使いました：
jquery & vue.js

## 作ったwebアプリについての紹介
` https://he

30分で動かせる！世界一簡単に始めるWebプログラミング

## はじめに

この記事は、初めてプログラミングをしてみたいけど、プログラミングって何？となっている人向けの記事です！
エディタとか、言語とか、そういうのが分からない方でも30分後にはプログラミングができるようになることを目標としています。
ぜひ、記事を読む前に時間を測ってみてください！

## プログラミングってなに？

まず、プログラミングってどんなものでしょうか？どんな場所で使われているでしょうか？

プログラミングとは、機械が理解できる文章を書くことで、思い通りに機械を動かすものです。
実際に使われている場面としては、パソコンやスマホ、ロボットを動かしているのもプログラミングです。
小さいところでは、デジタル時計やテレビのリモコンなどにもプログラミングがされています。

> 機械が理解できる文章を書くことで、思い通りに機械を動かすものです。

これのイメージをもっと簡単に説明したいと思います。
テレビとリモコンをイメージしてみてください。
例えばテレビで8chを見たいとします。

その場合あなたは、

“`text
1. リモコンの電源ONを押す
2. リモコンの8のボタン

【研修】未経験WEBエンジニア1ヶ月目の振り返り

# 0. はじめに
大阪の受託開発エンジニア1年目の、kazumakishimoto([@kazuma_dev](https://twitter.com/kazuma_dev))です！
未経験エンジニアとして1ヶ月目の振り返り記事となります！(まだ実務ではなく研修ですが…)
内容としては、今後研修を受ける方向けポエムなので、あまり参考にはならないかもです^^;

## 0-1. 目次
> [1.研修内容](#1-研修内容)
> [2.学んだこと](#2-学んだこと)
> [3.学びたいこと](#3-学びたいこと)
> [4.やってよかったこと](#4-やってよかったこと)
> [5.所感](#5-所感)
> [補足](#補足)
> [Reference](#reference)

## 0-2. 結論
– 研修内容は書けないので、僕の所感ベースの内容となります。
– 未経験エンジニアにとって、外部研修のある会社はとてもありがたいです。
– 経験者やスクール卒の未経験の方にとっては物足りないかも？

## 0-3. 想定読者
– 外部研修付きの会社ってどんな感じ？
– 自分より後に入社さ

jest でスタブする方法まとめ

基本的には `jest.spyOn()` だけでほとんどのユースケースをカバーできる。

## グローバル関数のスタブ

“`javascript
const spy = jest.spyOn(global, ‘parseInt’)
.mockReturnValue(10)
“`

## クラスメソッドのスタブ

“`javascript
const spy = jest.spyOn(Date, ‘now’)
.mockReturnValue(1577804400000);
“`

## インスタンスメソッドのスタブ

“`javascript
const spy = jest.spyOn(MyClass.prototype, ‘myMethod’)
.mockReturnValue(‘mocked’);
“`

メソッドが getter/setter の場合、第 3 引数に `get`　or `set` を指定する。

“`javascript
jest.spyOn(MyClass.prototyp

jsTree を使ってオリジナルのデータをツリー表示する

# 利用するライブラリ

jsTree というライブラリを利用します。
他のライブラリも検討したのですが、意外に？デファクトスタンダードというものが無く、これを採用しました。

https://www.jstree.com/

ライセンスはMITとのことです。

ここでは他に bootstrap5, jquery 3.5.1 を利用しています。

# 難しかった点

サンプルを見ればツリー表示自体は難しくないのですが、むしろ「自分が表示したいデータを jsTreeのデータ形式に変換する」のが面倒でしたのでここにメモしておきます。

# Code

“`html