- 1. 【ツール】>関数を簡単に生成！ 乱数を作る関数メーカー for JavaScript
- 2. Axios 簡単なデモページの作成[JavaScript]
- 3. 前日が豪雨だったので雨雲レーダーと週間天気予報を表示
- 4. JavaScript: Markov連鎖と圧縮
- 5. The above error occurred in the componentエラーが発生した
- 6. Claude 3.5 sonnet の Artifactsで作成したwebアプリケーションを外部でも使ってみたい
- 7. 【Figma Plugins】Figma PluginsでAPIリクエストを行う
- 8. React前に押さえておくべきJavaScript知識
- 9. axios v1.7.0 で追加された「fetch adapter」を試す
- 10. 【初心者向け】JavaScriptテスト完全ガイド：JestとSupertestで始める7つのステップ
- 11. 【Node.js v22 の新機能を試す】node –run で package.json scripts を実行する
- 12. Denoで型レベルプログラミングの単体テストを書く
- 13. Select タグの初期選択値について
- 14. JavaScriptでオセロを作った
- 15. 新卒研修で書いたクソコードをリファクタリングする
- 16. お助けボタンでスムーズにマンダラチャートを作成したい！
- 17. スタックオーバーフローが発生しない非同期再帰関数
- 18. Ajax リクエストを投げる[JavaScript]
- 19. JavaScript入門 #最初の一歩
- 20. とにかくAngular x Jest でユニットテストを書くための覚書
【ツール】>関数を簡単に生成！ 乱数を作る関数メーカー for JavaScript
コーデイングしていて、重複しても何でもいいからとりあえず、簡単に乱数を生成したくなる時ってありますよね。
今回はツールの「関数を簡単に生成！ 乱数を作る関数メーカー for JavaScript」を紹介します！
# 概要__こちらから使えます！__
https://randommathjavascript.calc.haruharutv.jp/
### 使用技術
“`
* HTML
* CSS
* JAVASCRPIT
“`* 画面のイメージ
## 使い方
すごくシンプルで、サイトを開き最小値と最大値を入力し
生成ボタンを押せば簡単に生成できます！
– [APIの取得 「JavaScriptファイル」 ](#apiの取得javascriptファイル)
– [DOMを操作 「JavaScriptファイル」 ](#domを操作javascri
前日が豪雨だったので雨雲レーダーと週間天気予報を表示
## ０．はじめに
この記事を書いている前日に私が住んでいる地域は豪雨でした。
「やばい、お弁当が買いにいけない、いつ止むんだろ…雨雲レーダーほしい！」となったので大慌てでcodepenに作りました。
See the Pen
雨雲レーダ
JavaScript: Markov連鎖と圧縮
Dynamic Markov Compression(DMC)、1987年にGordon. V. CormackとR. Nigel. S. Horspoolによって考案された圧縮手法。bit単位のMarkov Modelを構築し、次のbitを予測します。PPMに似たような手法です。圧縮率は高い方で、ナメクジ並みの加速力で突き抜けていくほど速度にも定評があるかどうか定かではありません。
こんな所に誰かがCodePen様を究極召喚してやがるので、気の済むまで動作検証の限りを尽くしてもらって構いません。The above error occurred in the
componentエラーが発生した ## The above error occurred in the InputForm(コンポーネント名 component エラー解決について
# エラーの意味
上記のエラーはInputForm（コンポーネント名）で発生しました。# 問題の原因
propsを受け取る際の定義の仕方でオブジェクトの分割代入ができていなかった。
⇒プロパティを取り出すところで配列の書き方をしていた。# エラーが発生する原因になっている箇所
“`InputForm.jsx
const [studyContentForm, studyTimeForm]=props;
“`
# 画面を表示しているファイル
“`App.jsx
const [studyContent, setStudyContent] = useState(“”);
const [studyTime, setStudyTime] = useState(“”);
return (
<>
Claude 3.5 sonnet の Artifactsで作成したwebアプリケーションを外部でも使ってみたい
Claude 3.5 sonnetにArtifactsという機能が追加されました
“`text
QiitaAPIからタグの情報を取得して、フォロワー数や記事数を表示するwebアプリケーションを作成したいです
“`こんな感じのプロンプト一文で、
即時webアプリケーションを作成できます。
このようにAIと対話しながらwebアプリケーションを作成することができます。
この写真ではQiitaのタグを検索して情報をとることができるwebアプリケーションを作成しています。## 外部の情報は取得できない
ですが、このwebアプリケーションを使ってみても、うまく動作しません
FigmaのPluginを開発する際、Figma PluginsでAPIリクエストを行いたいと思ったことはありますか？
この記事では、Figma PluginsでAPIリクエストを行う方法を解説します。## FigmaのFetch API
Figma PluginsでAPIリクエストを行うには、Figmaの[Fetch API](https://www.figma.com/plugin-docs/api/properties/global-fetch/)を使用します。FigmaのFetch APIは、ブラウザーで標準となっている[WhatWG Fetch API](https://fetch.spec.whatwg.org/)と同様の方法で使用できます。
FigmaのFetch APIは、以下のように、`url`と`inti`を引数で受け
React前に押さえておくべきJavaScript知識
## アロー関数でオブジェクトを返す時
丸括弧の中にオブジェクトリテラルを書く“`js
const fn = num => ({ result: num });
“`## mapメソッドのコールバック関数の引数について
map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。“`js
const arry = [10, 20, 30, 40];
const newArry = arry.map((val, i, arry) => val * 2);
// val: 配列内で現在処理中の要素
// i: 現在処理中の要素の配列内における添字
// arry: map() が呼び出された配列
“`## 分割代入
オブジェクトの場合はプロパティで管理されるため、順番通りである必要ない“`js
const { z, x } = { x: “obj1”, y: “obj2”, z: “obj3” };
console.log(x); //
axios v1.7.0 で追加された「fetch adapter」を試す
## はじめに
この記事では、以下の公式のリリース情報に登場している「fetch adapter」を扱います。●Release Release v1.7.0 · axios/axios
https://github.com/axios/axios/releases/tag/v1.7.0
### ブラウザの API・Node.js での「fetch()」
現在、ブラウザでも Node.js でも、HTTPリクエストを「fetch()」を使って実行できます。#### ブラウザの API
●フェッチ API – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
上記以外に、以下の記事でも紹介がされていたりします。
●Node.js v22の主な変更点 – 別にしんどくないブログ
https://shisama.hatenablog.com/entry
Denoで型レベルプログラミングの単体テストを書く
# はじめに
Deno公式が公開しているライブラリ `@std/testing`で、Deno環境では型レベルプログラミングのユニットテストを書くことができると知ったので方法を共有します。
手前味噌ながら型レベルプログラミングについては別の拙稿にて紹介していますのでご参照ください。
https://qiita.com/umiushi_1/items/4aa25df3343c5b2be62d
# 環境構築
Denoを利用できるセットアップが必要です。
https://docs.deno.com/runtime/manual/getting_started/installation
上記のページに従い、インストール等を行ってください。
# 作業ディレクトリを切る
“`sh
# 各自の所定の作業ディレクトリから
mkdir deno-type-test
cd deno-type-test
deno init
“`“`console
✅ Project initializedRun these commands to get started
# Run
Select タグの初期選択値について
新人エンジニアの三上です。
今回は Option タグの初期選択値表示の際に気付いたことをまとめてみます。## Select タグについて
select タグを使用することで、セレクトボックスを画面に表示し、選択した値を送信することができる。（実装例）
“`Vue.js“`
## Option タグについて
select タグとともに使用し、セレクトボックス内の選択肢を実装する。
option タグの value がその選択肢の値を表す。## 初期選択について
option タグ内の value と 対象 model の値が一致させることで、初期選択値を表示できる。
以下にサンプルソースコードを示す。“`Vue.js
JavaScriptでオセロを作った
JSでオブジェクト指向をやりつつ型を書くとこんな感じになりました。手続き型より100倍読みやすいと思います。
“`js
“use strict”;/**
* ディスクの状態を表す定数オブジェクト。enumのような使い方をする。
*/
/** @typedef {number} DiskState */const DiskState = Object.freeze({
EMPTY: /** @type {DiskState} */ (0),
BLACK: /** @type {DiskState} */ (1),
WHITE: /** @type {DiskState} */ (-1),/**
* 状態に対応するラベルを取得する。
* @param {DiskState} state
* @returns {string} The label of the disk state.
*/
getLabel(state) {
switch (state) {
case DiskState.BLACK:
新卒研修で書いたクソコードをリファクタリングする
# はじめに
新卒研修で成果物を作る機会があったのですが、最初に書いていたコードがかなり冗長で、リファクタリングを繰り返してコードを短くできたので、その一部を切り取って再現していきます。# 実装したい関数 (JavaScript)
とある関数をJavaScriptで作っていたのですが、その部分が特に冗長で、かつリファクタリングでかなり改善できたので、その関数とリファクタリングの流れを再現しながら紹介していきます。### 関数に渡すもの
`hogeMain`, `hogeSub1`, `hogeSub2`, `fugaMain`, `fugaSub1`, `fugaSub2` のプロパティからなるオブジェクト。
バリューには`’foo’`, `’bar’`, `’baz’`, `’qux’`, `’quux’` のいずれかが与えられている。
“`JavaScript
const structure = {
hogeMain: ‘foo’, // 10点
hogeSub1: ‘baz’, // 3点
hogeSub2: ‘quux’,
お助けボタンでスムーズにマンダラチャートを作成したい！
# マンダラチャートとは
某二刀流メジャーリーガーが高校時代、目標を達成するために作成していたことで有名ですが、添付画像のように9×9マスで、以下のように構成されています。* 中央のマス：メインの目標やテーマを記入する
* 周囲の8つのマス：中央の目標に対するサブゴールや要素を記入する
* 更に外側の8つの区画：各サブゴールなどについて、さらに詳細な要素やアクションを記入する
# 意外と埋まらない、、、
マンダラチャートを作成したことがある人はわかるかもしれませんが、意外と関連する内容が浮かばず、マスが埋まらなかったりします。そこで、お助けボタンを各区画の中央マスに配置し、そのボタンを押すと、関連する単語リストが下に表示されるようにしました。
:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::## はじめに
[ky](https://github.com/sindresorhus/ky)のソースコードを読んでいるときに、以下の非同期再帰関数でスタックオーバーフローが発生しない理由を言語化できなかったので調べてみました。
“`javascript
// https://github.com/sindresorhus/ky/blob/v1.4.0/source/core/Ky.ts#L330
new globalThis.ReadableStream({
async start(controller) {
const reader = response.body!.getReader();
if (onDownloadProgress) {
onDownloadProgr
Ajax リクエストを投げる[JavaScript]
どのようにJavaScriptからリクエストが投げられるのかを考えてみたいと思います。
リクエストは色々なタイミングで発生します。例：
・リンクをクリック
・URLに入力してエンターを押した時
・再読み込みボタンをクリックJavaScriptからリクエストを作成することもできます。その方法として「AJAX」があります。
AJAX（Asynchronous JavaScript and XML）
AJAXを使うことで、Webページを再読み込みせずに裏側で情報を送受信できます。
これにより、ユーザー体験が向上します。以前だと、ページを再読み込みしたり、違うページに移動しなければならなかったことが、同じページにいながらにして裏側の情報を取得できるようになりました.
今回は、AJAXについてと、JavaScriptでリクエストを投げる方法などについてまとめていきます。
## 目次：
– [API入門](#api入門)
– [JSON](#json)
– [HTTPのリクエストについて](#httpのリクエストについて)
– [HTTPステータスコード](#httpステータ
JavaScript入門 #最初の一歩
## 初めに
フロント開発をするようになりHTMLとCSSを一口かじった時点でJavaScriptの存在を知り学ぶ必要があったので初心者ながら学んだことを記事にしていきたいと思います！
書籍を用いて学んでいる余裕はなかったので今回は以下のサイトのチュートリアルを用いて学んでいますので初心者の方がいらっしゃったらご参考までに！
https://ja.javascript.info/
> ただ、筆者の頭の中でいまいち体系的にまとめきれておらず、単語帳のような構成になっている部分がありますのでご了承ください。
## JavaScriptとは
JavaScriptは、ウェブページに複雑な機能を実装することを可能にするプログラミング言語（スクリプト）です。動的に更新されるコンテンツを作成したり、マルチメディアを制御したり、画像をアニ
とにかくAngular x Jest でユニットテストを書くための覚書
Angularのユニットテストの書きはじめとして、コンポーネント表示時に特定のサービスのDIをして、非同期処理（API通信など）を得た結果、意図した表示になっているかを確認できるようなテストコードを書けるようになっておきたかったので方法を調べてみました。
なお、今回はテストランナーとしてJestを採用しています。
Jestの導入方法は以下を参考にセットアップしています。現在Angularチームの方でもテストランナーとしてJestを使えるような取り組みを進行中のようです。
未確認ではありますが、以下に記載している方法でも同様の結果が得られるかと思います。https://blog.angular.dev/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca
# プロジェクトの作成
`ng new` している際に `–standalone` オプションを付けて、今後作成されるコンポ
