JavaScriptを勉強していたら、途中からバッティング練習になった

おはようございます！
今日も昨日やったことの振り返りをしていきます！

## 昨日やったこと

昨日は、下記のサイトのチュートリアルで数字当てゲームを作りました。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash

初心者から上級者までレベルが設定されていて、JavaScriptを体系的に学ぶことができるサイトです。

実際に作ったものがこちらです。

今日はこれを進めている！https://t.co/fdUxEq8HeH pic.twitter.com/7umbl1eZGz

— Yooji Yang (@YangYooji3942) July 31, 2023

### 気付き

数字当てゲームを作る上で、最初のステップとして用意されていたのが、ゴールを思い描くということでした。

>プログラマーのように考えるプログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。
>プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコ

jQuery CSS系メソッド

# css
指定した要素のCSSスタイルを取得または変更・追加する．
**取得**
指定する要素のCSSスタイルを取得したい場合は，引数に取得したいプロパティの値を入れることで，すでに設定されているプロパティの値を取得できる．
“`javascript
//基本形
var style = $(‘selector’).css(‘propertyName’);

//例
var style = $(‘p’).css(‘color’) // pタグの要素の色を取得
“`
**変更**
cssの変更や追加を行う場合，CSSのプロパティと値を引数で指定する．すでに設定されている場合は，その設定を上書きする．
“`javascript
//基本形
$(‘selector’).css(‘propertyName’,’value’);

//例
//javascript
$(‘p’).css(‘color’,’#f00′); // pタグの要素を赤色に変える
“`
* `selector`: CSSプロパティを取得または設定する要素を指定する．
* `propertyName`: 取得または

Swiperで自動で動くスライドリストを作る（jQuery不要）

# Swiper（スワイパー/スウィパー）で動くリストを作る

お世話になっております。コウヤです。

今回は動くメニューリストをSwiperを使って説明していきたいと思います。正しい読みがスワイパーなのかスウィパーなのかはいろいろなサイトを検索しても両方の言い方しているので、ここではSwiperと英語で書きたいと思います。
作成するものは以下のものを想定しています。（iPhoneで見た場合）

今回はPCでもスマートフォンでも両用できるようにSwiperのメニューリストを作成していきたいと思います。

以下のメニューが自動で左側に無限ループで動かすことを考えます。
【PCで見たとき】

【スマートフォン（iPhone）で見たとき】
![image.png](https://qiita-image-store.s3.ap-northeast-1.

7/31 プログラミング7日目:関数

目標：Javascriptでシューティングゲームを制作
・javascript

始まりに
—
前回の復習
・構文
“`js
for (初期化; 条件式; インクリメント) {
// 処理
}
“`
・ループ処理
“`js
// forループ
for(let i = 0; i < 15; i++) { console.log("日数:", i); } console.log("処理終了"); console.log("---------------------------"); // while文 let i = 0; while(i < 15) { console.log("メンバー:", i); i++; } console.log("ループ終了"); ``` ・関数について --- 関数とは一連の処理をまとめて実行するためのブロックです。 ```js function 関数名(引数1, 引数2, ...) { // 処理や計算など return 結果; } ``` 上記の内容 ・function キーワード:関数を定

Next.js App Router API JavaScript Hello, World!

Next.jsのApp Router APIを使ったHello, World!です。

“`app/api/route.js
import { NextResponse } from ‘next/server’

export async function GET() {
return NextResponse.json({ message: ‘Hello, World!’ })
}
“`

`http://localhost:3000/api` にアクセスして
次の結果がブラウザに表示されることを期待する。

“`json
{“message”:”Hello, World!”}
“`

コールバック関数ってなに

# コールバック関数

:::note
プログラムにおいて非同期処理やイベント駆動処理を実現するための概念

**ある関数の引数として渡され、その関数内で特定のタイミングや条件が発生した際に呼び出される関数のこと**
:::

## コールバック関数　利用場面の例

### 非同期処理

**非同期処理が完了した後に実行されるコードを指定**
→その処理が完了するまで待たずに他の処理を継続できる

・タイマー処理
・HTTPリクエストなど

非同期処理とは

### 非同期処理

:::note
プログラムの実行において、タスクが同期的に逐次的に処理されるのではなく、**順序なく並行して実行される処理**のこと
→プログラムの性能向上やユーザーエクスペリエンスの向上に役立つ

☆ウェブブラウザでは非同期処理が重要
→ウェブページが応答しなくなるブロッキングを防ぐために非同期なリクエストが多用される
:::

#### 非同期処理の例

– **タイマー処理**
一定時間後に特定の処理を実行する場合
→非同期なタイマー処理を使う

【2023年最新】JavaScript ES13の新機能6選！コード例付きで詳しく解説します！

## 目次
1. [はじめに](#introduction)
2. [配列の新メソッド: .at()](#at-method)
3. [新しいオブジェクトメソッド: Object.hasOwn()](#Object.hasOwn-method)
4. [モジュールのトップレベルでのawait](#top-level-await)
5. [プライベートプロパティ宣言に # の使用](#private-properties)
6. [クラスのメンバ変数の簡単な設定](#class-member-variables)
7. [配列の末尾から要素を探す: findLast](#findLast-method)
8. [まとめ](#conclusion)

## 1. はじめに
みなさん、こんにちは！JavaScriptが2023年に導入されたES13の新機能をご存知ですか？今回の記事では、これらの新機能を詳しく解説し、具体的なコード例とともに紹介します。JavaScriptのスキルをさらに磨きたい方はぜひ最後までお読みください。

【JavaScript】西暦を和暦に変換する10のパターン

先日、西暦を和暦に変換することがあり、調べると様々なオプションがあったので、10パターンまとめてみました。

# 変換10パターン

“`javascript
const date = new Date(‘2023/08/01 15:00:03’)

// R5/8/1
const japaneseDate = date.toLocaleDateString(‘ja-JP-u-ca-japanese’)

// 令和5/8/1
const japaneseDate2 = date.toLocaleDateString(‘ja-JP-u-ca-japanese’, {
era: ‘long’
})

// 令和5年8月1日
const japaneseDate3 = date.toLocaleDateString(‘ja-JP-u-ca-japanese’, {
dateStyle: ‘long’
})

// 令和5年8月1日火曜日
const japaneseDate4 = date.toLocaleDateString(‘ja-JP-u-ca-japanese’, {

ElectronでHTMLコンテンツをPDF出力する方法

## 概要

**McGwire Markdown**は**HTMLコンテンツをPDFとして出力する機能を備えた**Electron製マークダウンエディタです。

https://github.com/itsuki-maru/McGwire-Markdown

このPDF出力は**Electron（Chromium）が持つ標準機能のみで実現可能**です。

今回はこの「**ElectronでHTMLコンテンツをPDFする機能**」の実装方法をアウトプットします。

## 実装手順

### 実行環境

今回の環境は次のとおりです。

| 環境 | 内容 |
| —- | —- |
| OS | Ubuntu Desktop 22.04 |
| Node.js | v18.16.0 |
| Electron | 25.3.2 |

### 1. プロジェクトの作成

まずは`npm`を使用して新規プロジェクトを作成しましょう。

“`shell
mkdir electron-app && cd electron-app
npm init -y
npm install elect

React + TypeScript: エフェクトの依存を除く

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

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

エフェクトを書くと、リンターはコードに(プロパティや状態などの)リアクティブな値が含まれているかどうか確かめます。

『React & React Nativeで画像のアスペクト比をマスターする』

—

## 目次
1. [はじめに](#はじめに)
2. [React Nativeでのアスペクト比の調整](#React-Nativeでのアスペクト比の調整)
3. [React (Web)でのアスペクト比の調整](#React-Webでのアスペクト比の調整)
4. [まとめ](#まとめ)

—

## 1. はじめに

画像のアスペクト比は、デザインやレイアウトに大きな影響を与えます。ReactとReact Nativeを使用して画像のアスペクト比を1:1にする方法について見ていきましょう。

## 2. React Nativeでのアスペクト比の調整

React Nativeでは`Image`コンポーネントの`style`プロパティを使用して、アスペクト比を調整することができます。

以下に具体的なコード例を示します：

“`jsx
import React from ‘react’;
import { Image } from ‘react-na

jQuery HTML系メソッド

# html
セレクタで指定した要素の中で，最初の要素のHTMLコンテンツを取得または設定する．
**取得**
“`javascript
//基本形
const content = $(‘selector’).html();

//例
const content = $(‘p’).html(); //取得
“`
**設定**
“`javascript
//基本形
$(‘selector’).html(‘newContent’);

//例
$(‘div’).html(‘

追加内容

‘);
“`
* `selector`：取得または設定したい要素を指定する．
* `newContents`：追加したいコンテンツを指定する．HTMLタグは識別できる．

# text
セレクタで指定した要素のテキストデータを取得または設定を行う．
**取得**
“`javascript
//基本形
const content = $(‘selector’).text();

//例
const content = $(‘p’).text();
“`
**設定**
“`javascri

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文を組み合わせてコード書いた。
論理積演算子もその時使用した下記のコードです。
“`js
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