【JavaScript】【Jquery】配列の指定した要素を削る

コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var aaa = [1,2,3].filter(function(v){
return ! [2].includes(v);
});
console.log(aaa);

var aaa = [1,2,3].filter((v) => ![2].includes(v));
console.log(aaa);

“`

# 結果
“`javascript
[ 1, 3 ]
“`

COTOHA API：漢字かな混じり文の日本語を発音記号(IPA)に変換するページ

# COTOHA API：漢字かな混じり文の日本語を発音記号(IPA)に変換するページ

– COTOHA APIの無料プランは、制限があって各APIごとに《1000コール/日》まで
– COTOHA APIのアクセストークンは《24時間以内が有効》
– 個人でちょっと試すなら、ブラウザとJavaScriptのみでもイケる
– **COTOHA × JavaScript で、データの取得から加工まで、すべてJavaScriptで**

## 前文
1. 各API(10種類以上の複数)ごとに COTOHA アクセストークン取得するのじゃなく、アクセストークン取得を共通化したパターンのCODE。
**→アクセストークン取得を共通化したJSコード作ってみた`_cotoha.js`**

2. 作りたいwebページ(html,css)での実際の使い方に即した取得したデータの加工方法まで含まれているのが少ない。そこまで共通化したCODEのテンプレセットがあればいいのに。
**→ そういう風に作って

寿司作りで学ぶ！非同期処理入門(TypeScript)

# はじめに

今回は自分がちょっと昔、非同期処理を学び始めた際につまずきやすいと感じた、Promiseやasync/awaitといった概念を、寿司作りのプロセスを通して解説していきます。

JavaScriptやTypeScriptを始めるにあたり、APIからのデータ取得などにより非同期処理は避けて通れない重要な概念です。非同期処理とは、プログラムが一部のタスクをバックグラウンドで実行し、そのタスクが完了するのを待たずに次のタスクに移ることを指します。しかし、実際にコードを書いていても **「この処理は同期的に動作しているのか、非同期的に動作しているのか？」** と混乱してしまうことがありました。

**ある日、寿司を食べながら寿司職人の仕事を考えていたら、その混乱がすっきり解消される瞬間がありました。** その体験を基に、TypeScriptにおける非同期処理を例を交えながら紹介します。
![sushi_kaitenzushi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/d5fbf6

【JavaScript】「キレイなコード」を考える #2 ロジックを「幹」と「枝」で捉える

「キレイなコード」について考える記事、2つめです。

https://qiita.com/honey32/items/2abe8ca1443b57824396

上記の記事では、Null 安全に関わる `?.`, `??` 演算子を取り扱いましたが、その最後で

– 通常の条件分岐（および三項演算子）では処理の流れ・フローが「二股の分岐」 になる
– `?.`, `??` を使うと正常系という「幹」と異常系という「枝」として捉え直すことで扱いやすくなる

と述べました。

この「幹と枝」の発想に注目してみようと思います。

## Null 合体・オプショナルチェーン

ふたたび Null 合体・オプショナルチェーンを使ったコードと、修正前の三項演算子を使った例を見てみましょう。

“`ts
// 三項演算子
const name = personObj
? personObj.address
? personObj.address.prefecture
? personObj.address.prefecture
: “”
: “”
:

javascriptのproxyを使って変数の値の変更を検知する。

## なにがやりたかったか

変数の値の変更を検知して処理を実行したかった。

> 例 : 変数Aに値が代入されたときに関数Bを実行する。

## 実現方法

javascriptのproxyを使えば、**変数の値がset/getされたときに行う処理を中継できる**

実際の動作を見た方が早いのでplaygroudのコードを添付します。

[playground](https://www.typescriptlang.org/play?#code/MYGwhgzhAEAqCmEAu0DeAoaXoAcCuARiAJbDQTFLwDCA9gCbwBca0AbmCHs+UgE7EAdgHNoAH2h5BjAGZD49aAF8A3JmzBag5HzzAktPgAoAlGnXZsSABbEIAOgpU6jaAF5og+AHdoABT5aAA8ATyMLS0jUdk5uFgByeOUAGgjI7Ax0rOwIeCQWGSl9Yi1oIyQwPmE8ljBBEOToAGt4EJYdIWFGji4eDpFxSWl4OS96M0zsqaxiGTKe7gm06anNbVoQeHsQWmEjeNykKj5

Google Earth Engine でチャートを扱ってみる

## はじめに
Google Earth Engine (GEE) は、人工衛星などで取得した情報を地図上に描画することが可能です。それだけではなく、その情報を使ってチャートを作成することができます。

今回は、富士山の登山ルートの一つである吉田ルートの各チェックポイントの標高を使ったチャートを作成しました！

## Google Earth Engine でチャートを扱ってみる
### 吉田ルートについて
日本一標高が高く、世界文化遺産にも登録されている富士山は、7月になると登山シーズンをむかえます。登山ルートは、吉田ルート、須走ルート、御殿場ルート、富士宮ルートとあり、その中で最もメジャーなルートが吉田ルートです。

https://fujisan-climb.jp/trails/index.html

今回は、この吉田ルートの合目の標高をプロットしたチャートを作成します。

### チャートの作成工程

今回使った合目の位置については、コース案内をもとに Google Map から位置座標を取得しました。一部 Google Map でわからず取得できていないものもあります。また、

[React]hooksまとめ

## はじめに
Reactでは必須のhooksについてまとめていきます。

## 目次
今回まとめていくhooksは以下になります。
**・useState**
**・useEffect**
**・useCallback**
**・useMemo**

## 説明
ここから説明していきます。

### useState
こちらは値の状態を保持するhooksになります。コードで説明していきます。
以下は、カウントアップボタンが押されたと同時に、countの値を1ずつ更新していくコードになります。
“`
// setCountは値(count)を更新する関数。
// useState(0)の0はcountの初期値になる。
const [count, setCount] = useState(0);

// ボタンを押されたときに更新関数を呼び出して、countの値を更新する。
const onClickCountUp = () => {
setCount(count + 1);
};

// HTML↓
// 更新される値を画面に表示

{

Reactプロジェクト始めよう

## とりあえず自己紹介:man_tone1:
　男　３４歳
　妻　娘３人
　元航空自衛官
　プログラミンスクールでJava、PHP、HTML、CSS、
　SQLを習得し、エンジニア転職
　現在は、主のJava使いのSE
（やっと基本設計以降経験したて）
　趣味：技術記事を読む、技術ブログを見る、
　　　　技術書を読む
　夢：フルスタックなテックリードなプロジェクトマネージャーになる
　初めてQiitaに投稿します。Reactを独学中なので、既にたくさん出ているReactの記事をなぞりながら自分なりのペースと粒度で投稿をしていきたいと思うのでお手柔らかに

## Reactとは！？
　ある日TwitterでReactの求人が出ているのを発見し、聞いたことあるけどなんだっけ？？と思い、Wik!で調べてみた。Reactは、Meta社（旧FaceBook社）とコミュニティ？によって開発されているユーザーインターフェース構築のためのJavaScriptライブラリらしい…　　　　　　　　　　　　　　　　　　　　　　　　　　他に難しいことがいっぱい書いていたが、いい感じに学習コストが安く、大規模シ

Reactメモ

## React17のインストールから起動まで
1. `npx create-react-app react-test`でreactファイル作成
2. dependenciesを下記に書き替える
`
“@testing-library/jest-dom”: “^5.16.2”,
“@testing-library/react”: “^11.2.7”,
“@testing-library/user-event”: “^12.8.3”,
“react”: “^17.0.2”,
“react-beautiful-dnd”: “^13.1.0”,
“react-dom”: “^17.0.2”,
“react-scripts”: “5.0.0”,
“web-vitals”: “^0.2.4”
`
3. package-lock.jsonとnode_modulesを削除
4. `npm install` で再インストール
5. index.jsを下記に書き替える

`import React from ‘react’;`
`import ReactDOM from

【JavaScript】【Jquery】チェック関連

# html inputでtypeがcheckboxのセレクタが対象
“`html

“`

# js
“`javascript
$(‘input[name=”aaa”]’).on(‘click’,function(){
処理
});

let sum = $(‘input[name=”created[]”]:checked’).get();

//チェックが入ってたら
if((‘input[name=”aaa”]’).prop(“checked”)){
処理
};

//チェックを入れる
$(this).prop(‘checked’, true);

//チェックを外す
$(this).prop(‘checked’, false);
“`

# 結果
“`javascript

“`

# html
“`html
野球

Next.js13環境でuseContext/useReducerを使ってみた

# 目次
[1. はじめに](#1-はじめに)
[2. 参考サイト](#2-参考サイト)
[3. Next.jsの準備](#3-nextjsの準備)
[4. コンポーネントの作成](#4-コンポーネントの作成)
[5. useReducerの準備](#5-usereducerの準備)
[6. useContextの準備](#6-usecontextの準備)
[7. Hooksの実装](#7-hooksの実装)
[8. おわりに](#8-おわりに)
[付録](#付録)

# 1. はじめに
この記事は主に、初めてNext.js 13でuseContextとuseReducerを使おうとしている方向けになります。
筆者自身、フロントエンドを学習し始めて間もなく、初めてuseContextとuseReducer、Next.js 13を使用したレベルになります(執筆時)。
ところどころ拙い部分があるかと思いますが、ご容赦下さい。

ディレクトリ構成、パッケージのバージョンは[付録](#付録)に記載します。

# 2. 参考サイト
### アールエフェクト
– Next.js 13の解説
htt

マクドナルドの都心店/準都心店を可視化してわかったこと

# 公式声明

https://www.mcdonalds.co.jp/company/news/2023/0619a/

都心店ではビッグマックが500円になるそうです

# 可視化

https://www.google.com/maps/d/edit?mid=1wGGuqLgcsM3wkMqqJCWImVtARn_hHJw&usp=sharing

関東


関西

![image.png](https://qiita-image-store.s3.ap-northeast

ジャニーズのジャケ写を公式から一括 DL するユーザースクリプト

# はじめに
ジャニーズの CD は iTunes に CD を取り込んでも，ジャケ写が読み込まれないらしい（友人談）．
ジャニオタの皆さんは，ネットから頑張って形態ごと（初版A,B とか）にジャケ写を探してきて登録しているようです．
今回は，ここをできるだけ自動化したいと考えてやってみました．

# めんどくさいことはユーザースクリプトにやらせよう
ジャニーズグループの Web ページは，
https://www.johnnys-net.jp/page?id=discoDetail&artist=41&data=2762
のように「アーティスト > Discography > 各 CD の詳細」 という画面構成になっていて，そこで実行すると全形態のジャケ写をローカルに DL できるユーザースクリプトを書いてみました．

“`javascript
// 画像をダウンロードする関数
const downloadImage = (url, name) => {
const d = document.createElement(“a”);
d.download = name

ブラウザゲーム制作：赤と青のブロックを選べ！

## 目次

– [記事の内容](#記事の内容)
– [なぜ記事を書こうと思ったのか](#なぜ記事を書こうと思ったのか)
– [開発環境について](#開発環境について)
– [本編](#本編)
– [スタート画面の見た目](#スタート画面の見た目)
– [ゲーム画面の見た目](#ゲーム画面の見た目)
– [動くブロックの作り方](#動くブロックの作り方)
– [複数の動くブロックの作り方](#複数の動くブロックの作り方)
– [選択機能と時間表示を追加](#選択機能と時間表示を追加)
– [開始画面やクリア表示などを追加](#開始画面やクリア表示などを追加)
– [レベルを追加](#レベルを追加)
– [おまけ機能](#おまけ機能)
– [効果音を追加](#効果音を追加)
– [途中から始められる機能を追加](#途中から始められる機能を追加)
– [終わりに](#終わりに)

## 記事の内容
HTML、CSS、JavaScript（以降JS）を用いたゲームを作成しながら、JavaScriptを学んでいくための記事です。以下のgifがゲーム画面のイメ

新しいSkyWayを使って文化祭やイベントで使えそうなWebトランシーバーを作ってみた

# はじめに
2023年1月31日から提供されている新しいバージョンのSkyWayを使って、Webアプリ上で動作するトランシーバー(以下Webトランシーバーと記載)を作ってみました。

この記事は「[新しくなったSkyWayを使ってみよう！](https://qiita.com/official-events/93564ad363199fa7999c)」のキャンペーンに誘われて作成したものです。

## 注意
::: note warn
この記事は私が個人として作成したものであり、私が所属する学校や委員会などの団体は一切関係ありません。
また、この記事のソースコードを利用される際は自己責任でお願いします。被った損害などについて筆者は一切責任を負いません。
:::

## とりあえず成果物

React + TypeScript: エフェクトを使って同期する

React公式サイトのドキュメントが2023年3月16日に改訂されました(「[Introducing react.dev](https://react.dev/blog/2023/03/16/introducing-react-dev)」参照)。本稿は、応用解説の「[Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。

なお、本シリーズ解説の他の記事については「[React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ](https://qiita.com/FumioNonaka/items/d70585bd3c0a6d4edc24)」をご参照ください。

コンポーネントには、外部システムと同期しなければならないものもあります。たとえば、つぎのような場合です。

* React

Zoom AppsをFlutter Webで実装する手引き – 事前準備編

## Zoom Appsについて

https://qiita.com/yosuke-sawamura/items/99b6ed443677c05d9a8d

Zoom JapanのQiita記事にて、丁寧に紹介されていました。

## 本記事のモチベーション

Zoom Apps実装経緯としては、
**1. 開発チームとしてFlutterベースでの開発が主流のため**
**2. Zoomを利活用するアプリの案件の中で、デフォルトのZoomクライアントアプリを利用したい、機能として画面を表示しながら開発アプリ上で操作を行いたいという要望がZoom Appsの利用ケースとマッチした**
以上の点で、FlutterでZoom Appsを実装するという運びとなりました。

Zoom AppsはJavascriptベースでのSDKであり、Zoom Appsのアプリ画面はWebViewから特定のページを表示させる形で構成されるので、**Flutter Web**の限定対応という形で開発が始まりました。

開発していた中で、Flutter Web上でZoom Apps SDKを利用するのにつまづい

JavaScriptで簡単な開閉メニュー

・はじめに

　JavaScriptとCSSを利用して簡単なアコーディオンメニューを作ったのでそれを記録する記事です。もっとこうすればいいよなどのアドバイスがあればよろしくお願いいたします。

・コードと解説

　今回作ったアコーディングメニューはcheckboxを利用したもので、１つ開くと他が閉じる仕様ではなく、開こうと思えばすべて開くことができるようになっています。

・処理の流れ

　CSSでクラス名を指定してメニューの内容を非表示にする⇒JavaScriptでチェックボックスをクリックしたとき、チェックボックスがtrue状態に変われば、CSSの非表示のクラス名を削除して表示状態に、反対にfalse状態に変わればCSSの非表示クラス名を追加させて非表示状態にする

という流れで行います。

“`HTML:HTML

メニュー１

高校生エンジニアが解説！コンピューターサイエンスを学べる技術書5選

# はじめに
みなさん、こんにちは。公立高校に通いながら、放課後や休日はIT企業のエンジニアとして働いてる[Raio](https://twitter.com/Raio14f)です?

今回の記事では、コンピューターサイエンスが学べる技術書を5冊紹介します?
ご興味のある方は、是非最後まで読んでみてください！

↓筆者について↓

https://qiita.com/Raio14f/items/ef0fb67685b36298bcb0

# 技術書を無料で読む方法
KindleUnlimitedを使うことで、**沢山の技術書を無料で何冊でも読むことが可能です**?

– 200万冊以上の書籍が何冊でも読み放題
– 月額980円が今なら1ヶ月無料
– 場所に囚われず、様々な端末で使用可能

勿論、技術書以外にもビジネス書や漫画など種類豊富です！

**↓入会したい方は画像をクリック↓**
[![画像タイトル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1341254/39184240-343f-a756-e7e

React-Slickでレスポンシブデザイン実装する方法を簡単に解説

## 投稿の趣旨
ポートフォリオサイトを作成する際にスライダーでReact-Slickを使用したのですが、React-Slickのレスポンシブに関する情報が少なくて僕自身困ったので、今回得た知見を投稿しようと思います

そのため、これはReact-Slickの網羅的な内容を解説する内容にはなっていません
## React-Slickでの設定
“`js
import React from “react”;
import Slider from “react-slick”;
import “slick-carousel/slick/slick.css”;
import “slick-carousel/slick/slick-theme.css”;

export default function SimpleSlider() {
const settings = {
dots: true, //スライダー下の点の表示/非表示
infinite: true, //無限スクロールの有効/無効
speed: 500, //スライド切り替えの速度
slide