f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

Jest 入門1

## はじめに

こちらは新米エンジニアがJestのキャッチアップをするためのまとめノートです。
本編では、基本設定から簡単なテスト例(同期コード)の作成、非同期コードのテスト、mockとspyまで扱います。

## 基本設定

まずは、Jestをインストールします。

“`bash
npm install –save-dev jest
“`

次に、package.jsonファイルにテストスクリプトを追加します。これにより、npm testコマンドでJestを実行できるようになります。

“`json
“scripts”: {
“test”: “jest”
}
“`

以上の設定で、*.test.jsや*.spec.jsといった命名規則に従ったテストファイルを自動的に認識して実行します。

## 基本的なテスト例

### テストスイート

テストスイートは、関連する複数のテストケースをグループ化するために使用されます。
Jestでは、describeブロックを使用してテストスイートを作成します。

“`javascript
describe(‘Calculator

元記事を表示

ChatGPTにアプリを作ってもらう１

# この記事について

自分用のwebアプリをChatGPT(3.5) に全部作ってもらおうとしている途中。重くなってきたのでセッション切替記念に、次のプロンプト。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12729/edfc4b6f-8ad3-8f7e-532b-b2b0320fbde6.png)

以下、このプロンプトの結果。Qiita用に出力を再整形したこと以外は無編集。

—

# プログラミング冒険：中学生のための学びの旅

## 第1章: プロンプトの魔法
主人公はプログラミングの冒険に挑戦することになり、最初に待ち受けていたのはプロンプトの魔法だった。

### 1.1 不適切な質問とは？
主人公は最初、良い回答を得るためには質問の仕方が重要であることに気づきます。しかし、不適切なプロンプトを入力してしまい、思った通りの回答が得られないことに悩まされました。

“`
ユーザー: 「Firebase使って書籍アプリを作りたい！」
“`

このプロンプトではFi

元記事を表示

Google Form連携

## はじめに
Webサイトで必要となる機会が多いFormですが、バックエンドを実装するのは面倒です。
Google Formを使うと便利ですが、デザインはサイトにマッチしないでしょう。
デザインはHTML, CSSで作成し、裏側をGoogle Formで作成することができます。

同じような内容の記事は複数存在しますが、 jQueryが使われていたり、サクセスページがGoogleデフォルトのものもあります。
当記事では、バニラJSでGoogle Formにデータを送信する方法に注目し、JavaScriptの処理を公開します

## 構築方法
詳しい構築方法は他の記事やブログが写真付きで紹介してくれています。
そちらも参照してみてください
他記事で紹介されていないアドバイスを1つ加えると、3のnameを探す際に、google formに仮のデータを入れることで、検証ツールから探しやすくなります。また、formのactionを探す際にactionで探すのではなく

元記事を表示

【Rails】Google mapのマーカー(ピン)をカスタマイズして遊んでみた

## はじめに
こんにちは。[kosukein38](https://twitter.com/kosukein38)です。
最近仕事でGoogle map API(`Maps JavaScript API`)を使っていました。
後学も兼ねて、マーカー(ピン📍)を色々カスタマイズして遊んでみました🥳
自分は”ピン”を立てるとかってよくいうのですが、公式に習って、本記事では”マーカー”と呼ぶことにします。
徐々にステップアップする感じで書いてみたので、良かったら参考にしていただけたら幸いです。

## この記事の対象者

– Google map API(`Maps JavaScript API`)を初めて触る方
– RailsアプリにGoogle mapを組み込んで、あれこれ情報を表示したい方

## 内容（この記事でやること、やらないこと）

### やること
– Google map API(`Maps JavaScript API`)をRailsに導入する
– 地図を描画する
– 地図にマーカーを立てる
– マーカーの見た目を変える
– マーカーに吹き出しをつける + マーカーク

元記事を表示

forをforEachに変更するときに新しく知ったこと

# はじめに
forで書いたコードをレビューで「非同期の処理がないなら可読性向上のためにforEachの処理に変えたらどう？」とご指摘をいただいた時に新しく知ったことです。

# 修正したコード
“`js
// 修正前
for (let index = 0; index < docArr.length; index += 1) { console.log(docArr[index]); } ``` ```js // 修正後 docArr.forEach((doc, index) => {
console.log(docArr[index]);
});
“`
# 気付いたこと
#### ループ処理をスキップしたい時、forEachの中では`continue`の代わりに`return`を書くこと
ちなみに以下のような処理の違いがあります。
`return`は関数の中で使用され、関数の実行を終了します。
`continue`はループ内で使用され、そのイテレーションを終了し、次のイテレーションに進みます。

#### forEachは同期的な処理をしているため、非同期処理を

元記事を表示

ブラウザで簡単画像リサイズ！Jimpライブラリの活用ガイド

JimpをWebアプリケーションで使用するための手順をまとめます。Jimpは純粋なJavaScriptで書かれた画像処理ライブラリで、Node.js環境だけでなくブラウザ環境でも使用できます。以下の手順では、ウェブページで画像をアップロードし、Jimpを使って画像を処理し、最終的な結果を表示する一連の流れを説明します。

# 1. Jimpのブラウザ版を読み込む
ウェブページにJimpのブラウザ版を読み込みます。CDNを介して簡単に追加できます。

“`html

“`

# 2. 画像アップロードのためのHTMLを準備する
ユーザーが画像をアップロードできるように、``タグを含むHTMLを用意します。

“`html

元記事を表示

react✖️laravelでカレンダーを作成してみる

### はじめに

個人開発メモ📝
カレンダーページに予定を反映させる実装にチャレンジしてみたので、備忘録として残します。

### 参考サイト

今回参考にさせてもらったサイト

Laravel×ReactでつくるSPAスケジュールアプリ【③カレンダー表示】


カレンダービューの作成の考え方などとても参考になりました！

### 全体図

今回のざっくりとした設計全体図は⇩

![IMG_0207.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/7b9da729-20fb-cd95-16c6-efec01166942.jpeg)

### 実装内容

#### バックエンド側

“`app/Http/Controllers/ScheduleController.php

元記事を表示

Reactを、ロジックとstyleを分離した構成にしてみる。（styled-components）

# タイトル
## Reactを、ロジックとstyleを分離した構成にしてみる。（styled-components）

## 目次
1. [開発環境](#開発環境)
2. [何故この記事を書こうと思ったのか](#何故この記事を書こうと思ったのか)
3. [ディレクトリの構成とサンプルコード](#ディレクトリの構成とサンプルコード)
4. [作成したコンポーネントを呼び出してみる&結果](#作成したコンポーネントを呼び出してみる&結果)
5. [作成したコンポーネントのstyleを呼び出したコンポーネントで変更してみる](#作成したコンポーネントのstyleを呼び出したコンポーネントで変更してみる)
6. [感想](#感想)

## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,
“styled-components”: “^6.1.0”

## 何故この記事を書こうと思ったのか。
これが正解！というディレクトリ構成がないreactにおいて、
ロジック部分とstyleをstyled-componentsを使っ

元記事を表示

配列の基本

# 初学者の備忘録
初学者の備忘録です。今回は配列の基本編です。

## 配列
値がたくさん入る箱。変数がたくさん入る箱みたいなイメージでOK。
配列を作成するには決まり事があります。

・配列は[]で定義する
・,（カンマ）で区切ること

上記の二つの定義は大切なのでしっかり覚えておきましょう。

## 配列の基本
“`
let 変数名 = [値, 値１, 値２, 値3, ・・・]
console.log(変数名);
“`

上記のコードが基本形になります。変数名を定義してあげてから、今度は配列を定義してあげて[]と,（カンマ）を使用してあげることで配列ができます。値と書いてあるところに変数を入れることも可能です。

“`
let 変数１　= 値１
let 変数１　= 値2
let 変数１　= 値3

let 変数名 = [値, 変数１, 変数２, 変数3, ・・・]
console.log(変数名);
“`

上記のコードのような配列も可能。つまり基本さえ守れば変数でも値でも入ることができるということです。
ここに四則演算もつけることが可能です。

### 配列の要素を

元記事を表示

標準入力

# 初学者の備忘録
初学者の備忘録です。今回は標準入力からデータを受け取れるコードを書いていきます。
ただ、機能はしますが理解はまだまだ及んでいないので未完成の記事となっています。ご了承ください。

## 標準入力
プログラムでデータが特に指定されていない場合に、標準的に利用するデータの入力元。つまりユーザがキーボードで入力した値を受け取ってなんらかの処理をプログラミングが実行するということ。

## 標準入力を受け取るコード
“`ruby:標準入力

process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
// push=最後に出力
lines.push(line);
});
reader.on(‘

元記事を表示

ループ処理：for文基本

# 初学者の備忘録
初学者の備忘録です。今回はループ処理：for文基本編です。

## for文
決まった回数繰り返し処理するための構文。ループ処理。

## for文の基本
for文の基本コード
“`ruby:for文
for (条件式に使う変数の初期化処理; 条件式; 条件式に使う変数の値の更新) {
　　//繰り返し処理
}
“`

文章で表すとこれで終了です。()の中に１行で処理を記述できるので、while文よりもすっきりとしたコードになります。
具体例もこのまま記述していきます

“`ruby:具体例
let count = 0;

for (var count = 0; count < 6; count++) { console.log(count); } ``` 上記のコードは変数に０のデータを入れる。０〜５までの間繰り返し出力するという処理になります。count++は＋１つづ足していくという意味で、省略できるので省略した状態です。 繰り返し処理して出力するという基礎ならこれだけで終了です。 ## 最後に while文もfor文も繰り返し処理という

元記事を表示

ループ処理：while文基本

# 初学者の備忘録
初学者の備忘録です。今回はJavaScriptのループ処理：while文基本編です。

## while文
指定した条件が満たされている間だけ指定された範囲のコードを繰り返し実行する、ループ処理の制御構文の一つ。

## whileの基本形
まずはwhile文の基本コード
“`ruby:while

// 条件式に使う変数の初期化処理
let 変数名 = 0；

while (条件式) {
// 繰り返し処理
console.log(変数名);
// 条件式に使う変数の値の更新
変数名 = 変数名 + 1;
}
“`

基本コードはこうなります。少し文章で補足を入れると
変数名はなんでもいいです。変数名はデータを入れる入れ物のようなイメージなので好きに決めてください。
最初の１行目は条件式に使用する変数の初期化で、プログラミングは０から考えるので初期化に０を使いました。０でなくても構いません。
１行目で大切なのは条件式がこれから始まる上での`初期値を変数`に入れるということです。

次はwhile文を使用して条件式を設定してあ

元記事を表示

なんちゃってブラウザゲームを作った話

## ■はじめに
### 読んだらいい人、読んでほしい人
+ ゲーム作ってみたい方。どうやって作ったの？が気になる方
+ JavaScript触れるから、アドバイスしてやろうというお優しい方

### こんなゲームを作りました↓
直線上に現れる敵をジャンプと攻撃で回避し、ハイスコアを狙うゲームです。

![symple_jumping_game (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676445/374106da-87c5-75de-fba3-f90060cf417c.gif)

### ゲーム作成のきっかけ
+ プログラマに転職したい　→　何か自分で作ってみよう！　
⇒何が楽しいかな　→　ゲーム？！
と短絡思考で着手しました。

## ■やったこと大雑把に
1. youtubeで動画を見ながら、ゲーム制作の大体の構造を学ぶ
1. テーマ、企画を考える
1. コーディング、プログラミング
1. ゲームバランス整える
1. ビルド
1. 事後作業(github,qitta)

以

元記事を表示

画像をリサイズ&クロップしてFirebase CloudStorageにアップロードする

## やりたいこと
Vue.jsで下記の動作を実現する:
1. formから画像をアップロード
2. アップロードした画像のアスペクト比を保ったまま正方形にリサイズ & 円形にクロップ
3. 加工した画像をFirebase ColudStrageにアップロード

画像のリサイズはなんとなくサーバーサイドでやるもの？と思っていたのですが、これくらいの操作であれば、canvasを使えばいけました。

## formから画像をアップロード
Templete内のform部分はこんな感じ。
“`vue:upload.vue

元記事を表示

enchant.jsをタッチパネルに対応させるため修正してみた

## 今さらenchant.js？
　GIGAタブレットが全国の小中学生全員に配布されています。市町村によって機種が異なり、Windows、Chromebook、iPadの3種類のどれかになっています。Webアプリであれば、3種類のGIGAタブレット共通に動きます。enchant.jsもWebアプリを作動させるライブラリとして利用できます。しかし、enchant.jsはiPadでは問題なく作動しますが、タッチパネル上の移動イベント（touchmove）を取得できないため、Windows、Chromebookでは作動が不完全になります。
　そこで、touchmoveが作動するように書き換えてみました。これで、過去に作成したenchant.jsを利用したプログラムがGIGAタブレットでも作動可能になります。

×[タッチパネルで操作できない例「とけいの学習」（マウス可、iPadでは作動）](https://kaihatuiinkai.jp/enchantjs/tokei083/ “とけいの学習”)

〇[タッチパネルで操作可能の例「とけいの学習」（マウス可、iPadでも作動）](

元記事を表示

海馬社長にカードだけじゃなくてビジネスも教わりたい

# 海馬瀬人のおさらい
海馬瀬人は、アニメ「遊戯王デュエルモンスターズ」に登場するキャラクターです。
主人公の武藤遊戯のライバル的存在で、玩具やゲームの開発・販売を行う海馬コーポレーションの社長でもあります。デュエルで使用するソリッド・ヴィジョン・システムも海馬コーポレーションで開発されました。

海馬は自信家で人に対しては見下した態度も取りますが、常に真剣で弟思い、そして情熱的で勝利に貪欲という魅力的な人物です。

“`plantuml
@startuml

footer コナミ公式サイトより
title
@enduml
“`

## こんな人たちへ向けたLINE botです

元記事を表示

リアルタイム読み上げサイトの作り方

元記事を表示

[ES6] オブジェクトリテラルの省略記法

## Reactで頻出するこれ

“`jsx
// id, name, email がpropsで渡ってきているとして
const　userData = {
id,
name,
email,
……..
}
“`
こういう書きかた。
よくわからないがkeyとvalueが同じであれば省略できるという理解でいる。
詳しく理解せずに1年以上もReactを書いている。
よくない。調べようと思う。

## 「オブジェクトリテラルの省略記法」と言うらしい

前述のuserDataオブジェクトは、昔ながらの書きかたではこうなる。

“`jsx
// id, name, email がpropsで渡ってきているとして
const　userData = {
id = id,
name = name,
email = email,
……..
}
“`

しかしReactでは**propsで持ってきた変数にデータを代入すること**が頻発するため、さすがに冗長に感じてしまう。

そのときにES6で加わったオブジェクトリテラルの省略記法という新しい書きかたを

元記事を表示

JavaScript Lintツール

## Lintとは

静的解析ツールのこと

プログラムコードを読み込んで、問題がないか調べてくれる

linterとも呼ぶ

## コンパイラとの違い

コンパイラ：言語仕様や構文規則などに違反する誤りがある場合にエラーを返す
Lintツール：文法上の誤りだけでなくバグの原因となり得る疑わしい記述を返す

## JSのLintツールの一覧

ESLint
JSHint
JSLint

## ESLintの使い方

### 1. ESLintのインストール
“`
npm install eslint –save-dev
“`

### 2. 設定ファイルの初期化

“`
npx eslint –init
“`

### 3. ルールのカスタマイズ

.eslintrcファイルに、ルールを記述する

### 4. Lintを実行する

“`
npx eslint yourfile.js
“`

元記事を表示

OTHERカテゴリの最新記事