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

JQuery メモ　.each()と＄each()の違い

each()メソッドの書き方例
$(‘.item’).each(function () { / jQueryオブジェクトのループ処理に対して適用される/
});

＄each()メソッドの書き方例
$.each(data, function(i, item) { /dataはjQueryオブジェクトではなくただの配列のため＄each()を適用
　　　　　　　　　　　　　　　　　　　　　　　　iは0から始まる要素のインデックス　itemはその要素の値/ @iとitemはindex value elem など任意も文字列でも可
});

/!JQuery最高の教科書　p214 引用!/

fetch upload javascript

“`javascript
fetch(‘https://storage.googleapis.com/llwork.appspot.com/a.txt’,{body:’data’,method:’PUT’})
“`

JavaScriptをeslintrc使用せずESLintしてみた話

まず結論です。
上から順番に、
Lint確認のみ
Lint確認のみ(browserかnodeで使用)
Lint確認と優しめのFormat確認
Lint確認と厳しめのFormat確認

“`console
npx eslint –no-eslintrc –parser-options=ecmaVersion:latest sample.js
npx eslint –no-eslintrc –parser-options=ecmaVersion:latest –parser-options=sourceType:module –env browser,node sample.js
npx eslint –no-eslintrc –parser-options=ecmaVersion:latest –parser-options=sourceType:module –env es6,browser,node -c node_modules\eslint\conf\eslint-recommended.js sample.js
npx eslint –no-eslint

Javascriptのことはじめ色々

私が唯一書けない（？）Javascriptを学習する機会があったので、色々まとめました。
~~（これで側が作れないですって常套句が使えなくなりました）~~

# 型付け

Javascriptは`動的型付け`。また、型に一貫性を持たない（弱い型）
（個人的にはバグの温床になるから嫌いな仕様です）

“`javascript:静的型付け
let qiita = “qiita”;
// ⇒実行時にString型で判断される

qiita = 100;
// ⇒代入可能
“`

Javaなどの静的型付けとは挙動が異なる。

“`java:動的型付け
char qiita;
qiita = “qiita”;
// ⇒記載した地点でChar型

qiita = 100;
// ⇒エラーで代入不可
“`

# 変数と定数の宣言

constとletで宣言

“`javascript
const qiita = “qiita”; // 定数
let qiita = “qiita”; // 変数
“`

# 演算子

**至って普通です。**

“`javascript
const nu

「Easy Yathzee」というゲームを作ったので解説しつつ自身でコードレビューっぽいことしてみる

# はじめに

2, 3か月前にこんな[ゲーム](https://good-teal-chipmunk-cape.cyclic.app/)を作りました。

https://github.com/Scythercas/easy-yathzee2

[ルール](https://github.com/Scythercas/easy-yathzee2/blob/main/README.md)

プレイ画面

「Easy Yathzee」(イージーヤッツィー)という名前にしていますが、元ネタとして「Yathzee」というゲームがあります。
BGAというサイトで遊ぶことができるので興味のある方は以下のリンクで遊んでみてください。

https://ja.boardgamearena.com/gamepanel?game=yatzy

また、switchのア

2022年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)

こんにちは！GxPの杉森です。
この記事は[グロースエクスパートナーズ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/gxp)の25日目(最終日)の記事です。

今年もCandle Night＠ShinjukuイベントのオンラインプロダクトチームがAdvent Calendar 2022のトリを務めさせていただきます。今年のプロダクトは、2022年版への画面デザイン刷新と新規機能開発を２つ行いました。本記事では、リアルイベントとデジタルの融合に焦点をあてて、各担当メンバーよりプロダクトのご紹介と苦労した点などをお伝えしたいと思います。

【メンバーと役割】
– 杉森 圭祐：　プロマネ（+内外関係者との各種調整協議）
– 米山 暢子：　デザイン担当（画面デザイン＋デザイン支援）
– 富岡 航　：　開発メンバー（新機能開発）
– 奥川 亜耶：　開発メンバー（新機能開発）
– 中野 和彦：　開発メンバー（開発メンバー全体のサポート）

【目次】
– **イントロ**
これまでのイベントのご紹介（杉森 圭祐）
– *

Reactで作る将棋ゲーム

## はじめに

こんにちは。ココネでビリングシステムエンジニアをしていますnk60です。

自分の日々の業務は、主に会社の決済のサーバサイドの開発に携わっているのですが、ある日業務内で少しReactに触れることがありました。

ココネはゲーム会社なのですが、自分はあまりゲームの具体的な制作には携わっていません。

Reactを触った経験もほとんどなかったので、少し勉強しておこうと思いReactのチュートリアルを見てみると、内容が三目並べでした！

https://ja.reactjs.org/tutorial/tutorial.html

Reactの考え方やプログラムの書き方、三目並べを作るまでの過程などをみて面白いなと思いました。

ゲームを作ったことはほとんどないのですが、チュートリアルを参考に、自分なりに考えて将棋のゲームを作ってみました。

## プロジェクトの作成

公式チュートリアルと同様にプロジェクトを作成します。

“`
npx create-react-app my-app
cd my-app
cd src

# If you’re using a Mac or

Yarnのバージョンによってnode_modulesが作成されない件について（voltaを使用）

## 起こった現象
* voltaでNext.jsの環境構築をした時、自動で作成されるindex.tsxで、import部分にエラー
* 「対応する型が見つかりません」ってずっと出る?
* node_modulesフォルダではなく、**「.yarn」フォルダが作成される**

## 早速ですが結論から
エラーが起きた原因は、やはり**node_modulesが作成されていないから**みたいです

すごくシンプル

本来は作成されるはずなんですが、なぜ作成されなかったか追っていきましょう!

## yarnのバージョンを確認
まずはyarnのバージョンを確認してみました

yarn -v
// 3.3.0

バージョンは3.3.0と確認できました

yarnは、Home Brewで既にinstall済みの状態です

今回使用したかったバージョンは「1.22.19」だったので、voltaでyarnのバージョンを指定してみました

エラーが起こる段階でyarn installした時は、voltaにyarnのバージョンはしてしてなかったです

“`package.js

SvelteKitのSSRをAWS上にデプロイ

## はじめに

SvelteKitで作成したSSR(サーバーサイドレンダリング)のアプリケーションをVercelではなく、AWS上にデプロイしたく、試行錯誤した時の記録をここにメモとして投稿します。

## 1. SSRの仕組みを調べた。

SSR(サーバーサイドレンダリング)とは、サーバー再度でレンダリング(HTMLを生成)し、レスポンスを返すこと。

AWSでやる場合はlambdaに処理を持たせて、API Gateway経由でHTMLを表示させる。

## 2. SvelteKitのデプロイ方法を探る

nextjsやnuxtjsと同じようにbuildの形をいい感じに変えることができ、
標準では`@sveltejs/adapter-auto`というアダプターによりデプロイ用のアウトプットファイルを生成している。

標準の@sveltejs/adapter-autoでは、

* Cloudflare Pages
* Netlify
* Vercel

にはデプロイ可能。

AWSにデプロイするためにはどうしたらいいんだ～～

## 3. 一回諦めてSPAに妥協した

SPA用の

[Day25] 最後に

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## アドベントカレンダー
### 最後に
私のアドベントカレンダーをここまで読んでくださり、ありがとうございます。

[JAVASCRIPT.INFO]の全てを記事で書くことはできませんでしたが、今後もjavascriptの勉強は続けていきます。
特に正規表現などは、javascriptに限らず使うものなので、必ず習得したいと思います。
これまで学んできたところでも、ドキュメントの概念や役割は何回も復習して理解していかなければいけない程難しいと思いました。

ja

キャンパス内の独自通貨をオンライン化した話

# はじめに
この記事は、[N・S高等学校 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/n-s-highschool)の25日目です。
はじめまして、N中等部通学コース4期生のTakuといいます。
今回は、キャンパス内で使われている独自通貨「吉」をオンライン化してみた話を書きまとめてみました。
ぜひご覧ください。
# 独自通貨とは
まず最初に、キャンパス内で実装されている独自通貨について説明していきます。

上の画像が紙幣の独自通貨で、一ヶ月に一回紙幣のデザインが変わっています。
# 完成品
できたものについて紹介します。
## Web UI
Closureを通して勉強の仕方を勉強しよう笑

## 1️⃣これは何？
ソフトウェアエンジニアの皆様におかれましては、日々技術力アップのために研鑽を続けておられることと思います！Webの発達に伴い、色々な情報に溢れている現代ですが、どうやって質の良い学習をするのが良いか、実際に特定のお題を使って試して行きたいと思います?

## 2️⃣なんでClosure?
なんとなく、、笑。中級者向けっぽいトピックかなぁと思いました。一般的なプログラミング言語における逐次・分岐・繰り返しを一通り学習した方のネクストステップのお題としてはちょうど良いかな、と思った次第です。

## 3️⃣TL; DR

勉強の仕方として、Qiitaや個人のBlogなどを読むのも良いのですが、まずは公式ドキュメントを読む癖をつけましょう。これだけで得られる知識の精度がかなり変わってきますし、何よりも体系的な知識が得られます。Blogなどの情報は古いことも多々あります。進化の早いプログラミング言語やライブラリほど公式ドキュメントを参照した方が結果的に効率的だったりします。なお、JavaScriptの場合、MDNを読む癖をつけるのが一番の早道です。MDNは主要なドキュメ

小中高生向けロボコンWROの運営に携わり得点集計システムを運用した件

# 目次

| 章 | タイトル | 内容 |
|:-:|:-:|:-:|
| 1 | [はじめに](#1-はじめに) | 軽い自己紹介等 |
| 2 | [WROの概要](#2-wroの概要) | WROについての説明 |
| 3 | [背景・経緯](#3-背景経緯) | 4年間のシステム開発の経緯についての説明 |
| 4 | [システムの概要](#4-システムの概要) | システム要件等について列挙 |
| 5 | [成果物の紹介](#5-成果物の紹介) | 作製したアプリケーションを紹介 |
| 6 | [システムの構造・フロー](#6-システムの構造フロー) | システムの構造をフローに沿って解説 |
| 7 | [GitHubの紹介](#7-githubの紹介) | アプリをソース含め公開したのでそのご紹介 |
| 8 | [さいごに](#8-さいごに) | 本システムを公開した理由等について |

:::note warn
今回の記事はかなりの長編となっております。
**いいね・ストック**等して頂き、時間のあるときにゆっくりお読み頂ければと思います。
:::

# 1.

Pythonista3（WKWebView） とJavaScript の愛と友情のツープラトン 〜 コード間でのデータ受け渡し 〜。GLSL で遊ぶで！

この記事は、[Pythonista3 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/pythonista3) の25日目の記事です。

https://qiita.com/advent-calendar/2022/pythonista3

一方的な偏った目線で、Pythonista3 を紹介していきます。

ほぼ毎日iPhone（Pythonista3）で、コーディングをしている者です。よろしくお願いします。

以下、私の2022年12月時点の環境です。

“`sysInfo.log
— SYSTEM INFORMATION —
* Pythonista 3.3 (330025), Default interpreter 3.6.1
* iOS 16.1.1, model iPhone12,1, resolution (portrait) 828.0 x 1792.0 @ 2.0
“`

他の環境(iPad や端末の種類、iOS のバージョン違い)では、意図としない挙動(エラーになる)なる場合もあり

ECMAScript って何かをざっくり知っておく

1人アドベントカレンダー最終日を飾る ~~苦行~~ 課題として、JavaScript の規格である「ECMAScript」について調べることにしました。

やはり読むべきは公式ドキュメントでしょう。


**無 ☆ 理**

今回は ECMAScript の概要と成り立ちを調べつつ、最新の仕様について少し触れていきます。まずは概要を…（ドキュメントは25億年くらいかけてゆっくり読みます）

## ECMAScript とは？

> ECMAScript（エクマスクリプト）は、Ecm

ReactHooksについてまとめる（Other Hooks useSyncExternalStore ）

# 概要
ReactHooksのOther Hooksについてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。

今回はuseSyncExternalStore編です。

## useSyncExternalStore
useSyncExternalStoreは、外部ストアをサブスクライブできるようにするReact Hookです。

### 外部ストアをサブスクライブする

ほとんどのReactコンポーネントは、props、state、contextからしかデータを読みません。しかし、時にはコンポーネントがReactの外部にあるストアから、データを読み込む必要があります。

– Reactの外部に状態を保持するサードパーティの状態管理ライブラリ。
– Reactの外部に状態を保持するサードパーティの状態管理ライブラリ。ミュータブルな値とその変更を購読するためのイベントを公開するブラウザAPI。

外部データストアから値を読み込むには、コンポーネントの最上位で useSyncExternalStore を呼び出します。

ストア内のデータのスナップショ

「カラーチャート」無限生成させてみた

この記事は[Life is Tech ! Tokai Advent Calendar 2022](https://qiita.com/advent-calendar/2022/life-is-tech-tokai)の25日目の記事です。

# はじめに
この前、美術館に行ってきました。

豊田市美術館で開催されている展覧会「ゲルハルト・リヒター」です。
「ドイツの最高峰の画家」とも呼ばれる現役の現代アーティストだそうです。
どれもすごい作品で行って良かったです。

https://www.museum.toyota.aichi.jp/exhibition/gr_2022-23/

その中で「カラーチャート」という作品がありました。
巨大でカラフルなパネルが展示されていました。

この作品は何枚もの正方形のカラーチップ

オブジェクト型の”参照”を完全に理解できるかもしれないクイズ

# 参照、理解してますか？
みなさん、JavaScriptの参照は理解していますか？

– 参照、実体
– 破壊メソッド、非破壊メソッド
– シャローコピー、ディープコピー

これを見て、「あー、そういうことね」となった人は、ブラウザバックしていただいても構いません。

逆に、

– 「よく見るけど何のことかよく分かってない」となった人
– 「配列をコピーすると、なんかよく分かんないけど毎回バグる」人

こんな人は、このクイズに取り組んでみてください。

ただドキュメントを読むよりも、理解度がグンと上がります。
この記事から出るときには、「**参照、[完全に理解した](https://jp.quora.com/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E7%8B%AC%E7%89%B9%E3%81%AA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%

未経験から始めるReact学習ロードマップ

本記事はProgaku Advent Calendar 2022 25日目の記事です。
## はじめに
未経験からエンジニア転職を目指されている方にとって、
**「何を、どの順番で学習すればいいのか」**
という疑問は非常に大きい問題というか、とても不安に感じる点のように思います。
かく言う私も、未経験からエンジニア転職を目指してプログラミング学習をしている身で、学習を始めたときは同じような疑問や不安を抱えていました。
なんとか独学で学習を進め、ようやくフロントエンドエンジニアとして内定をいただきました。
これからエンジニア転職を目指して学習を進める方の参考になればと思い、本記事をまとめることにしました。

本記事はタイトルの通り、Reactを未経験から学習するにあたって、
「こんな手順で学習してきてたら良かったなぁ～」
と思った内容を振り返ってまとめたものになります。

他の記事やブログ等にも同様のロードマップはあるかと思いますが、情報量が多すぎたり、書かれている内容が難しかったりで、結局どれをすればいいかわからなかったり、初学者としては理解できなかったりしたので、私なりにロードマッ

【ProtoPedia 2022】自分の 2022年のヒーローズ・リーグとの関わりなどを振り返る（作品応募とサポーターの活動、作品で使った技術について）

## はじめに
こちらは、[ProtoPedia Advent Calendar 2022](https://qiita.com/advent-calendar/2022/protopedia) の 24日目の記事です。

自分の 2022年のヒーローズ・リーグとの関わりを振り返りつつ、作品の技術の部分について少し触れる内容を書いていきます。

## ２つの立場での参加・応募作品について
2022年のヒーローズ・リーグでは、2つの立場で関わっていました。
1つは、3作品を応募した作品応募者、そしてもう 1つは、コミュニティサポーターに関連したものです。

### コミュニティサポーターとして
コミュニティサポーターの VUI賞に関連した話は、この記事の後のほうに記載します。

### 応募者として
ヒーローズ・リーグへの応募は、昨年初めて行い、今年で 2年目でした。
そんな 2年目となる今年は、この後に書いている 3つの作品をエントリーしました。

#### 応募作品1： ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」
応募作品の　1つは、ブラウザ上で動作