Raspberry Pi Pico Wでmoddable-avatarを動かしてみた。

# はじめに

スタックチャン2才のお誕生日会へ参加して刺激を受けたのでRaspberry Pi Pico Wでも動かそうと思い、まずはお顔を表示するところから始めました。

https://stack-chan.connpass.com/event/288907/

# moddable-avatar

ほぼこちらの手順通りでした。

https://stc1988.hatenablog.jp/entry/2021/11/20/212608

## moddable SDKの開発環境を構築する

macOSの方はxs-devツールを使用するのが楽です。

https://qiita.com/kitazaki/items/f90ab52161af751f8d50

## TypeScriptでコンパイルできる環境を構築する

“`bash
sudo npm install -g typescript
“`

## moddable-avatarをgit cloneする

“`bash
git clone https://github.com/meganetaaan/moddabl

7/30 プログラミング6日目

目標：Javascriptでシューティングゲーム制作する
⚫︎事前知識
・Javascript基礎知識

—
▫️復習
—
昨日のif文とelse if文を組み合わせてコード書いた。
論理積演算子もその時使用した下記のコードです。
“`
let a = 30;
if(a > 10 || a < 30){ console.log("10以上または30未満であれば可能です。"); } else if(a >= 10 && a <= 30) { console.log("10以上かつ30未満であれば可能です。"); } else { console.log("どれも条件合わない"); } // 10以上または30未満であれば可能です。 ``` 論理積演算子とif文とelse if文組み合わせは書いてみましたが難しいかなと思ってしまう部分があります 論理積演算子の使い方がまだわかってないですが、メモにでも貼っておいて 使う時に調べる程度で使っていこうと思います。 ▫️本日6日目の学習内容 --- ⚫︎ループ文について学習 ループ文は条件式が真(true)の間

Javascriptの標準組み込みオブジェクトのFunctionのインスタンスメソッドcall(),apply(),bind()について

なんとなくで使っていたので、整理を兼ねて文字に起こします。

# はじめに
Javascriptには、標準組み込みオブジェクト(Standard built-in objects)というグローバル領域にあるオブジェクトがあります。
この標準組み込みオブジェクトにオブジェクトの基本となるオブジェクト、`Object`,
`Function`,`Boolean`,`Symbol`があります。

今回はこの中の`Function`オブジェクトについて、深掘りしていきます。
Javascriptの全ての関数はこの`Function`オブジェクトであり、 `Function`オブジェクトは `functions`のメソッドを持ちます。

# thisについて
`Function`のメソッドで使うためには`this`を理解しておく必要があります。
個人的に、下記が一番わかりやすかったです。

https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

thisはオブジェクト自身を指し、`.`の前のオブジェクトが指定されます。

関数の呼び出しをした時

限界ド文系大学生ワイ「条件分岐してぇな！」その結果……

こんにちは！限界ド文系大学生、堕罪ｵｻﾑです。
大学では**国語学・日本語学**を主に学んでいます。

# 条件が複数あるif文を書いてメンターに見せたときのこと

突然ですが、JavaScript初学者の皆様。

**1. 条件Aが成り立つときはYESを出したい**
**2. 条件Bが成り立つときもYESを出したい**
**3. 条件Cが成り立つときはNOを出したい**
**4. 条件Dが成り立つときもNOを出したい**

こんな感じで、**条件が複数あるif文を書きたい**とき、ありませんか？
私自身、勉強を進めていく過程でこんな感じのコードを書く時がありましたので実際に書いてみました。

～n時間後～

ワイ「よっしゃ！書けたぞ～。早速メンターに見てもらおう！」

メンター「**DRY原則**に反してる書き方だからやめたほうがいいよ～」

## 私が実装したアンチパターン

このときの私はこういったコードを書きました。_(code.1)_

“`javascript
//YESになるものをまとめたif文
if(条件A){
console.log(“YES”)
}e

モバイル端末でJavaScript初心者がブラウザゲームを作る

こんにちは

　タブレット端末（Huawei MediaPad M3）と無線キーボード（TK-FBP102WH）でゲームを作ります。

　以下は、完成品です。
　https://ahaliquorice.itch.io/rabbits-tests

環境構築

　この端末では、開発にUnityやRPGツクールを使えません。なので、HTML5+JavaScriptを選び

CSR・SSR・SSGを初学者がふんわり理解するための記事

# CSR・SSR・SSGを初学者がふんわり理解するための記事

## はじめに
Web系を学んでいるとよく聞く単語
**【CSR】【SSR】【SSG】**

Next.jsをいじくり回しているとよく検索欄に出てくるので、勉強がてらまとめてみることにします。

初学者の皆さん、私と一緒にふんわり理解しましょう！！
つよつよエンジニアのみなさん、間違っていることがあればビシバシご指摘ください>< ## そもそもレンダリングってなんだろう Next.jsちゃぱちゃぱ勢の私としてはここから調べていく必要がありました。 調べたところ > **指定したリソースをブラウザ画面に表示すること**

だそうです。

ふむふむ、、、、、ん?
え、皆さんわかりました？

つよつよエンジニアのみなさんはきっとこれで分かるんでしょう。
参考にさせていただいた記事の執筆者様もきっとつよつよなんだ、、、

まあでも、ふんわり分かればいいんです。ふんわり。

噛み砕いて書くならば、

:::note info
**レンダリングとは**
ブラウザさんがサーバーさんからもらったデータを解釈して、わたしたちが目に

Railsのルーティング: resources と resource の違いとメリット

# はじめに
Ruby on Railsのルーティングには、`resources`と`resource`の二つの非常に便利なメソッドがあります。これらはRESTfulなルーティングを自動的に生成し、それぞれのコントローラアクションへのパスを簡単に作成することができます。

### resources
`resources`メソッドは、指定したリソースに対する標準的なRESTfulルーティングを自動的に生成します。

例えば、config/routes.rbに以下のように記述すると、
“`ruby routes.rb
resources :users
“`

`UsersController`のアクションに対応した7つのルーティング（index, show, new, edit, create, update, destroy）が自動的に生成されます。また、これらのルーティングに対応したパスヘルパーメソッドも自動的に提供されます。

### resource
`resource`メソッドは、`resources`と同様にルーティングを自動生成しますが、こちらは単数形リソースを表現しま

Vue.jsで、リスト表示順の入れ替え処理を実装

# 結論
コンポーネントに表示させる項目を格納した配列を用意しておきます。入れ替えは用意しておいた配列の要素同士を入れ替える関数を作成すればOKです。その関数を実行すると、要素入れ替えのあと再レンダリングがかかり、リストの表示順が入れ替わったように見えます。

# 前提
– この記事ではCDN の Vue を使用しています。
– vue@3.3.4を使用しています

# サンプルコード

See the Pen JavaScriptデザインパターン入門【ファクトリパターン】

こんにちは！今日はTypeScriptを使用してGoF（Gang of Four）のファクトリパターンを解説します。この記事では、基本的なファクトリパターンから抽象ファクトリパターンまで、具体的なコードサンプルを交えて説明します。デザインパターン初心者の方でも理解しやすいように詳しく解説しますので、ぜひ最後までお読みください。

## 目次
1. [ファクトリパターンとは](#what-is-factory-pattern)
2. [基本的なファクトリパターン](#basic-factory-pattern)
3. [抽象ファクトリパターン](#abstract-factory-pattern)
4. [まとめ](#summary)

## ファクトリパターンとは
ファクトリパターンは、クラスのインスタンス生成を専門の「ファクトリ」クラスに委ねることで、オブジェクトの作成とその使用を分離するデザインパターンです。

## 基本的なファクトリパタ

【レビュー】TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発

この記事では、「[TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発](https://gihyo.jp/book/2022/978-4-297-12916-3)」 について、レビューをします。

私は、ReactやNext.jsに関する開発を半年ほど携わっています。
その目線で記事を執筆していますので、ご了承ください。

## この本の概要
>新しいフロントエンドの入門書決定版！
>本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。
>WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。高速さに裏付けされた高いUXと，開発しやすさを両立しているのが特徴です。
>本書では，Next.jsの開発をより快適・堅牢にするTypeScriptで開発を進めます。
>Next.jsによるアプリケーション開発の基礎，最新のフロントエンドやWebアプリケーションの開発方法が学べます。

この本は2022年7月25日に発売されたもので、Next.js13以降のApp Rou

【React】デフォルトで生成されるファイルの単体テスト内容をまとめてみた。

# 背景
Reactでの開発において、単体テストのやり方をアウトプットとしてまとめました。
規模間の大きなReactでの開発になるにつれ、単体テストのコードを作成する必要性が大きくなってくると思います。
また、テストコードを作成しないといけないのでめんどくさく思ってしまいますが、単体テストを実施する事で後々の作業も楽になると考えています。

# 環境構築

### ■ React version：react@18.2.0

次のコマンドで開発するReactのひな形フォルダを作成します。
フォルダの作成が完了したら`cd`コマンドでそのフォルダに移動します。
“`
npx create-react-app sampletest
“`

# デフォルトで作成されているファイルについて

## ■ setupTests.js

作成されたひな形のうち、`setupTests.js`ファイルには以下の記述があり、デフォルトでテストに使用するライブラリがインポートされています。

“`javascript:setupTests.js
import ‘@testing-library/je

変数更新によるレイアウト反映のやり方

## やりたいこと
ボタンを押下したら、変数を更新させて、更新された変数に合わせて画面を反映させる（useStateは使わない(!?)）

## useState使いたくなかった理由
useStateを使うと、再レンダリングされてしまう為、上位コンポーネントの再レンダリングをした場合、再レンダリングする必要がない下位コンポーネントまでレンダリングされてしまうから、使いたくなかった

### 処理イメージ

## 結果：無理
正確には、propsに渡して再レンダリングさせれば可能ではあるが、今回やりたいことではなかった為、ノーカン

やっぱりsetStateで再レンダリングさせる必要がある

失敗したソースコード
“`javascript:App.tsx
function App(){
const v = [];
for(let i=

Twitter（X）で自動でいいねするコンソールスクリプト

仕様上あんまり使う機会は無いと思うけど、こんなこともできるよっていうコンソールスクリプトの例です。
## Twitterで自動いいねするjavascript
“`javascript
// data-testid=”like” を持つ要素を取得
const likeButton = document.querySelector(‘[data-testid=”like”]’);

// もし要素が見つかった場合は、クリックする
if (likeButton) {
likeButton.click();
} else {
console.log(“要素が見つかりませんでした。”);
}
“`
一番初めの投稿に対して1回「いいね」します。
## ワンライナー
“`javascript
document.querySelector(‘[data-testid=”like”]’).click();
“`
## 10回自動いいねする
“`Javascript
for (let i = 0; i < 10; i++) { document.querySelector('[data-

スプレッド構文とレスト構文の違いをマリオで考えてみた

4月からエンジニアとして働き始めたので、学びを備忘録としてまとめます（第一弾）

記念すべき第一弾は
【スプレッド構文】と【レスト構文】の違い
です！！

`…`　のやつですね。
見た目が同じで一見ややこしい子です。(~_~;)

そこで、両者の違いを”マリオ”で考えたら理解しやすかったので、書き記します?

## 結論：スプレッド構文とレスト構文の違い

結論として、違いはざっくり以下の感じです。

| 種類| イメージ |
|:-:|:-:|
| スプレッド構文 | 広げる |
| レスト構文 | 集める |

スプレッド構文とレスト構文の表記 (`…`)は似ていますが、異なる目的と場面で使用されています。

## マリオのキャラクターを使って理解してみる

まず、マリオのキャラクターチームがあるとします。

“`javascript:javascript
const marioTeam = [“マリオ”, “ルイージ”, “ピーチ”];
“`

### スプレッド構文 (`…`)

スプレッド構文は、配列またはオブジェクトを個々の要素やプロパティに「広げ

7/29 プログラミング5日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
—
昨日のif文とswitch文について学びました
▫️復習
▫️昨日知らなかった論理積演算子について使う

・if文
—
“`
let a = 20;
if(a >= 30) {
console.log(“30以上である場合true”);
} else {
console.log(“30以下である場合false”);
}
// 30以下である場合false
“`
変数 a が30より大きいかチェックする
変数 a の値が 30以上である場合に真(true)になる
変数 a の値が 30以下である場合に偽(false)になる
今回で言うと変数のところが20であるため「30以下である場合false」と表示される。

・else if文
—

“`
let b = 100;
if(b >= 100) {
console.log(“100が表示されました”);
} else if(b >= 90) {
console.log(“90が表示

【Rails7】リロードしないとJavaScriptが動かないんだけど、どした？エラー？

# 開発環境
Ruby 3.2.2
Ruby on Rails 7.0.5


# はじめに

最近、Rails７でチャットアプリを開発しているのですが、チャットルームにページ遷移してメッセージを投稿しようとすると、投稿できない:fearful:
しかし、ページをリロードしてからメッセージを投稿すると、投稿できる。
サーバーサイド側を確認しにいっても間違ってそうなところはないし、、、、
調べていると、メッセージ送信時にイベントが発火するようにJavaScriptを組んでいるのにそれが発火していない模様。

エラー原因がわかり、同じような現象のエラー解決の記事の通り実行するも動作せず、、、
ググっていると以下のようなJavaScriptのコードを`Turbolinks`のイベントで囲む対策法が多かったです。
“`javascript:Java

【JavaScript】async/awaitとaxios、非同期通信について

# axiosとは
HTTP通信(データの更新・取得)など、HTTPリクエストのやり取りを簡単に行うことができる、JavaScriptのライブラリです。Node.jsで記述されています。APIを提供するクラウドサービスに対して、データを送受信することができます。

非同期にHTTPメソッド(GET・POST・PUT・DELETE通信など)を取り扱えます。

# 非同期処理とは

時間の掛かる処理の結果を待たずにすぐ次の処理を実行できる仕組みです。Promiseを使うと簡単に実現できます。

Promiseとは、非同期処理の状態を監視するためのオブジェクトで、非同期処理を同期処理のように扱える書き方です。

# 使う場面

JSONデータを提供しているAPIと接続して、データを取得することが多いです。

Webの場合、サーバーの中で外部にデータを提供している機能(またはそｎページ)のことをAPIとよびます。

# async/awaitとは

async/awaitを使うことによって、Promiseによる非同期処理をより簡潔に記述することができます。

Promiseのコードはthenを

React関数命名:「on」と「handle」の理解と適切な使い方

Reactを使っていると、「on」と「handle」の接頭辞を持つ関数をよく見かけると思います。でも、これらの接頭辞がなぜよく使われ、どのように使い分けられるのか、混乱している方も多いのではないでしょうか。今回は、これらの接頭辞がどのような意味を持ち、どのように使うべきかを詳しく解説します。

## 目次

– [onとhandleの基本的な使い方](#onとhandleの基本的な使い方)
– [イベントハンドラの作成](#イベントハンドラの作成)
– [onとhandleの適切な使い方](#onとhandleの適切な使い方)

## onとhandleの基本的な使い方

まず基本から説明します。一般的に、「on」で始まる関数名は、何らかのイベントが発生したときに発火することを示しています。また、「handle」で始まる関数名は、具体的なアクションを行う関数を指します。

例えば、ReactのonClickイベントハンドラは、クリックイベントが発生したときに発火する関数です。以下の例を見てみましょう。

“`jsx
Cli

【読み物】StandFM #032（後編） より「MINT体験は、特別なもの。2071年に思いを込めたNFT」

この記事は、ドーナツ部長のホールナイトニッポン[「#032 NFT ART TOKYOの振り返りと、私にとっての「NFTとは？」」](https://stand.fm/episodes/647cb6018e80262569439a53)の内容を、自動化ツールを組み合わせてテキスト化したものです。テキスト化に際して、一部言い回しのカットや、文末の変更と要約を行っています。

### イントロダクション
私は常々、特別なMINT体験を提供したい、そう考えていました。なぜなら「NFTのMINTというのは本来、特別な体験であり、MINTする前と後では自分の中の何かが変化するはず」、そう考えているからです。NFT ART TOKYO 3rdの会場では、そうした特別な体験を実験的に行う予定でした。今回は、「#032」の放送回の後編を抜粋して、お届けします。

### 本編①「ドーナツの穴からMINTできる、変わったMINT体験を」
実はですね、NFT ART TOKYO 3rdでは、結構大きなドーナツのモニュメントを設置する予定でした。その「ドーナツの穴」の部分に、NFCタグが仕込まれているんで

未来を切り開く！JavaScript API 5選：初心者向けガイド

こんにちは！今回はあまり知られていないけれど、とてもパワフルで未来のウェブ開発に役立つJavaScript APIを5つ紹介したいと思います。それぞれのAPIの詳細な説明と、実際の使い方を見せるサンプルコードを提供します。早速見ていきましょう！

### 目次
1. [画面内に入ったら通知：Intersection Observer API](#1-画面内に入ったら通知intersection-observer-api)
2. [サイズ変更を感知：Resize Observer API](#2-サイズ変更を感知resize-observer-api)
3. [ユーザーの位置を取得：Geolocation API](#3-ユーザーの位置を取得geolocation-api)
4. [音声とテキストの変換：Web Speech API](#4-音声とテキストの変換web-speech-api)
5. [ウェブ上の決済を簡素化：Payment Request API](#5-ウェブ上の決済を簡素化payment-request-api)

## 1. 画面内に入ったら通知：Interse