f@ctor

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

JavaScript関連のことを調べてみた2022年10月26日
目次

99%自力で独自ルールのオセロを作った～Gitに初Pushを添えて

# 謝辞

タイトルに「独自ルール」とありますが、既出だったらごめんなさい。
また、妥協した点がいくつもありますが、初心者ということでお許しください。

# 記事の内容

+ 前書き＆ゲームについて
+ 作った理由
+ 普通のオセロ開発の流れ
+ 独自ルールへシフト
+ 初GitPush
+ この制作を通して分かったこと

# 前書き＆ゲームについて

ようやく自分のゲームを公開することが出来ました！！！

https://github.com/Scythercas/point-othello

ルールは

+ 基本的な操作は普通のルールと同じ
+ 勝利判定だけ異なり、`背景が自分の色のマスの数字の和`が得点となり、得点が大きかった方が勝ち

です。

実際のプレイ画面はこんな感じです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666100/df9d4241-ea8b-c3b4-e15d-da5bc2228e5b.png)

中心の点数が1点なのに対し角の点数が25点と、角最強

元記事を表示

モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10

## はじめに

この記事を読んでいるということは、何らかの目的でWebアプリケーション開発を学びたい、あるいはその最中であると思います。しかしWeb開発という分野の内容の幅は広く、さらに常にアップデートが行われるため、多くの場合、学習方法は独学によるものになります。

特に独学において問題になるのは、学習すべきことがわからないということが起きることです。世の中には、Webアプリケーション開発用の学習教材や記事は数多存在しますが、それらの情報の殆どはその内容ごとに散在しており、またWebアプリケーション開発において決定的なシラバスというのも存在しません。この記事は、学習すべきことを明確化するため、モダンなWebアプリケーション開発における基礎的な知識、フレームワーク及び参考となる学習教材等を体系的にまとめたものです。

:::note warn

– この記事においてWebアプリケーションは、ブラウザ上で動作するWebアプリケーションのみを対象としています。モバイル用のネイティブアプリケーションに関する情報は含みません。
– この記事は特に初学者を対象としているため、Webに関する初歩

元記事を表示

間違い探しの答え

# はじめに
本記事は筆者が思いつきで作った[こちらの間違い探し動画](https://youtu.be/0cl_6kjlxko)の答え合わせ用の記事です。

動画の内容について
※技術的な内容以外は**全てがウソ**です。
※技術的な内容も嘘ばかりです。

スライド作成の参考にした動画
[【誰も教えない】ダサいスライドを作る方法7選 – YouTube](https://www.youtube.com/watch?v=Vyl35SuZRsY)

# 間違い一覧
あの動画には以下9つの間違いがあります。
[1. JavascriptはJava](#1-JavascriptはJava)
[2. Javascriptはマルチスレッド](#2-Javascriptはマルチスレッド)
[3. fetch()メソッド, setTimeOut()メソッドはJavascriptのビルトイン関数である](#3-fetch()メソッドはJavascriptのビルトイン関数である)
[4. fetchやsetTimeoutはJavascriptのスレッドで処理される](#4-fetchやsetTimeou

元記事を表示

【備忘録】Laravelによる非同期処理(Ajax)の使い方

# Ajaxとは何？

まずはAjaxとは「Asynchronous JavaScript XML」の略です。
「Asynchronous」は「非同時性の、非同期の」という意味です（コトバンク）
Ajaxは「JavaScript+XMLによるサーバーとの通信」となります。

## Ajaxの書き方について

Ajaxを利用するには`Java Scriptファイル`もしくは
scriptタグ内に処理、つまり次のテンプレートを記述します
### jsファイルにコードを記述する場合
“`javascript:index.js
$.ajax({
　url: ‘URL’　//LaravelのルーティングにつなぐURL
　type: ‘postかget’,
　cache: false, //cacheを使うかどうか
　dataType:’json’, //data type scriptなどデータタイプの指定
　data:引数名, //Laravelのコントローラへ渡す引数を記述する
// $request->引数名　などで呼び出せます
　})
　.done(functi

元記事を表示

プリザンターの分類型をラジオボタンで入力したい

## デモ

![radio.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700567/70934673-045b-7ac3-e674-f3a13d552289.gif)

デモサイトで使えるサイトパッケージは [gist](https://gist.github.com/einmotorrad/e8047830e3795f40da48b2e2df4227c4) から。

## やりたいこと

プリザンターで、選択肢を排他的に選ぶ、データ項目は分類型の複数選択でない項目で利用できます。
このとき入力用のユーザインターフェイスはプルダウン(select/option)になります。

ラジオボタンにすることでメニューを展開させる 1 クリックが省略でき、項目が十分少なければ実用的な場合があります。

そこで、スクリプトでカスタマイズしてみましょう。

なお、読取専用となるときはラジオボタンであることに意味がないので、あくまで編集画面での改善だけを考えています。
また、以下の例では CSS の手当をしてい

元記事を表示

NovelAIのプロンプトを管理・調整するChrome拡張を作りました

https://chrome.google.com/webstore/detail/naimagicwand/mpopocllkpjpdibiekfldhdodchadike

# 何ができるの？

ざっくり2つの機能があります。

### 1. プロンプトエディター

プロンプトを対象に以下のことができます。

・プロンプトの追加、編集、削除
・プロンプトの強調の数変更
・プロンプトの順番変更
・プロンプトの一時非表示

![prompts editor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/3a419146-8c7e-884d-c322-e9dfa06a0811.gif)

### 2. プロンプトブックマーク

お気に入りのプロンプトを名前をつけて保存することができます。

![prompt bookmark.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/2625a953-138

元記事を表示

AtCoderをjavascriptで解くとき、vscodeとquokka.jsを活用する。

vscode でAtCoderの解答を作成して→プラウザに張り付けてコードテスト→以下正解するまで繰り返し
の作業を少し改善できた話です。
類似の方法や、そもそもnodeを入れればいいのかもしれません。

## 環境
* vscode
* windows10
* quokka.js [リンク](https://quokkajs.com/ “quokka”)

## できること
* コードテストのように、標準入力を与えて、出力を確認できる。
* コードを修正すると、即時に結果が確認できる。
* コードの修正なしに提出できる。

## フォルダー構成など
quokka.jsをvscodeにインストールした状態で、以下のようなファイル構造にしたとします。
“`
atcoder
├── A.js
├── dev
│ └── stdin
“`
vscodeでは、atcoderフォルダーを開いた状態にします。
stdin に標準入力を記載します。
A.jsには、提出するスクリプトを記載します。

私は、いつもこちらの記事の方法で標準入力の値を取得しています。
（毎回助かっており大変感謝して

元記事を表示

React Hooksを使う上で意識したいことまとめ

# はじめに

Reactに関して最低限意識したいけどできてなかったなと思うところがあったので、
わかりやすいと感じた記事を参考にこの１記事にまとめました。

# useStateの使い方に注意する

https://zenn.dev/mocomichi/articles/47c95425bc28d5

上記の記事がとてもわかりやすく、すごい学びになりました！
参考記事から学びになった部分を項目ごとにピックアップして書いていきます。

### 関連する状態はまとめることを検討する
よくあるパターンでは、ログイン情報などだと思っています。
例えば、ログインには`email`と`password`がセットでログインするのはあるあるですよね。
なので、以下のようになりますね！
↓書き換え前

“`tsx
const [email, setEmail] = useState(“”)
const [password, setPassword] = useState(“”)

const handleChangeEmail = (value: stirng) => {
setEmail(va

元記事を表示

【React】React 初心者でも「ステート管理」を完全に理解できる（ライブラリは使わないよ）

# 1.はじめに

私は
「React ってファイルを行ったり来たりして、わけわからん！」
「 React めちゃむずい」
って思っていました。

この React の行ったり来たりの流れを整理するために本記事を書きました。

同じように思われている方のお役に立てれば幸いです。

本記事は、「ステート管理」について見ていきます。

ステート の **超** 基礎的な内容となっています。

※ ステート管理には、`useState` 以外の フック や ライブラリ 等は使用しておりません。

**超** 簡単な内容でどのように state の値が渡っていくのかをみていきたいと思います。

もし間違って認識しているところ等ありましたらご指摘いただけますと幸いです。

# 2.目次

[1.はじめに](#1はじめに)
[2.目次](#2目次)
[3.この記事でわかること](#3この記事でわかること)
[4.環境](#4環境)
[5.ステート管理](#5ステート管理)
　[5.1.上から下にステート値を渡す](#51上から下にステート値を渡す)
　[5.

元記事を表示

配列の中のオブジェクト中の配列とある配列を比較して、同じ要素があるものを取得する

## やりたいこと

“`
[
{
email: ‘b@gmail.com’,
tags: [‘VIP’, ‘male’],
},
{
email: ‘a@gmail.com’,
tags: [‘VIP’, ‘male’, ‘cool’],
},
{
email: ‘c@gmail.com’,
tags: [‘VIP’, ‘female’],
},
{
email: ‘d@gmail.com’,
tags: [‘female’],
},
];
“`
これを

“`
[‘female’]
“`
と比較して、femaleが入っている要素だけ取得したい
↓
“`
[
{
email: ‘c@gmail.com’,
tags: [‘VIP’, ‘female’],
},
{
email: ‘d@gmail.com’,
tags: [‘female’],
},
];

“`

## 解決方法
“`
const customers = [

元記事を表示

【JavaScript】アイコンでパスワードの表示を切り替える(複数)

![スクリーンショット 2022-10-25 151336.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2041536/26c83c15-96d8-e5c5-34b4-8cbd4b102542.png)

アイコンを押下したらパスワードの表示/非表示を切り替え、なおかつアイコンも変化させたいと思いまして久しぶりJs,,
HTML側
~~~html:html
// font Awesome使用するにあたってのCDNコード

元記事を表示

face-api.jsのリサイズを理解する【技術メモ】【小ネタ】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/b6d31427-3ef7-8a1a-d68e-896254c9be43.png)

# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。

今回も、face-api.jsネタです。

# リサイズを使いこなしたい
[face-api.js](https://github.com/justadudewhohacks/face-api.js)を気に入ってよく使っています。

特によく使っているのが、
・顔検出
・68点顔ランドマーク検出
の2つの機能。

face-api.jsには標準で検出のリサイズ方法があるのですが、
実はあんまり使ったことが無く…
今回はここへの理解を深めたいと思います。

# リサイズが必要な理由
検出に使ったソースの解像度と、画面に表示するキャンバスのサイズが一致するとは限りませ

元記事を表示

正規表現メモ

よく使う正規表現のメモ

PHP

“`php
$h = ‘Google‘;

if(preg_match(‘!([\\s\\S]*?)!’, $h, $m)) {
print_r($m); // ==> Array ( [0] => Google [1] => https://google.com [2] => Google )
}

“`

Nodejs

“`Javascript
let h = ‘Google‘;
let result = /([\s\S]*?)<\/a>/.exec(h);
if(result){
console.log(result);
/*
[
‘JavaScriptでページトップ

“`javascript
//ページトップ
const scroll_to_top_btn = document.querySelector(“#page-top”);

scroll_to_top_btn.addEventListener(“click”, scroll_to_top);

function scroll_to_top() {
window.scroll({ top: 0, behavior: “smooth” });
}
“`

元記事を表示

Progate Web開発コース終了

Webアプリ開発完了

Nodejsを用いてデータベース型のWebアプリを作成した。

・スマホから見やすい画面を作る
・ユーザごとに別の買い物メモを作れるようにする

のような機能を追加していきたいなと思った。

とりあえず基礎的なWebアプリを制作した。自分の現状は、レシピを見て料理ができる人に過ぎないのでもっと積極的に知的好奇心をこのまま探求し続けて頑張っていく。どんどん作りたいものが増えていく一方で学ばなければならないことが追い付いていない状況なので物事を順序だてて考えていきたい。(下書きに入れっぱなしで投稿が遅れてしまった)

Next>>My Portfolio webサイトの作成

トライデントコンピューター専門学校ウェブデザイン学科の生徒さんたちのPortfolioをざっと見て、このようなWebサイトを1か月未満で作成したい。以下にリンク。

[Webトライデントコンピュータ専門学校](https://tridentwebdesign.blog.fc2.com/e/protfolio2022?sp)

元記事を表示

WebRTCを利用した1対1のオンライン通話サンプル

# はじめに
WebブラウザのWebRTC機能を利用して、1対1でオンライン通話をするサンプルです。

:::note info
[WebRTC](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)についての説明は巷に沢山あるため省きます。
:::

# 環境
– サーバー
CentOS Linux release 7.6.1810 (Core)
node.js v16.18.0

– クライアント(動作確認環境)
Chrome バージョン: 106.0.5249.119
iOS 16.0.2
:::note warn
カメラとマイクが必要です。
:::

# インストール
サーバーはnode.jsを利用します。
node.jsで静的ファイルとWebSocketを処理します。WebSocketではクライアント同士でメッセージをやり取り(WebRTCのシグナリング)をします。
Chromeでカメラとマイクを使うためにはHTTPSで通信をする必要があります。SSL証明書は[Let’s Encrypt](https://lets

元記事を表示

npm: heroicons, postcss-import, framer-motion のアップデート メモ (Breaking Changes)

## 1. heroicons v1 → v2

[Release v2.0.0 · tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0)

* アイコンの変更。v1 と v2 は異なるアイコンと見なし、好みの方を使えば良いとある
* スタイルが２つ(Outline, Solid) から３つ(+ Mini)に増えた
– Before: `import { … } from ‘@heroicons/react/solid’`
– After: `import { … } from ‘@heroicons/react/24/solid’` or `import { … } from ‘@heroicons/react/20/solid’`
– Before: `import { … } from ‘@heroicons/react/outline’`
– After: `import { … } from ‘@heroicons/rea

元記事を表示

押すと死んじゃうボタン

# こんなボタンが欲しいと思ったことはありませんか？

みなさん、クリックすると「ティウンティウンティウン・・・」と死滅してしまう、そんなボタンが欲しいと思ったことはありませんか？

今回はそれを作ってみました。

# こんな感じ

# 作り方〜HTML編〜

HTMLはこれだけです。

“`html:HTML

元記事を表示

【JavaScript】正規表現まとめ

## 正規表現とは

正規表現とは、ある文字列の中に存在する、パターンを表現するものです。
例えば郵便番号を表現するパターンは「0から9の数字のいずれかを、7回繰り返す」となります。
このようなパターン（正規表現）は後述する、「特殊文字」を組み合わせて記述できます。
正規表現は主に、文字列の検索や置き換えなどに使えます。

## 定義方法
JavaScriptで正規表現を定義する方法は2つあります。

### 正規表現リテラル

“`javascript
// /パターン/オプションフラグ（後述）
const re = /abc/i;
“`

正規表現リテラルはスクリプトが読み込まれたタイミングで、コンパイルされます。
そのため正規表現のパターンが変わらない場合は、こちらの定義方法のほうがパフォーマンスが良いです。

### RegExpコンストラクター

“`javascript
// new RegExp(‘パターン’, ‘オプションフラグ（後述）’)
const re = new RegExp(‘abc’, ‘i’);
“`

こちらは関数実行時にコンパイルされます。
そ

元記事を表示

$(function(){});の意味

# はじめに
`$(function(){});`という書き出しで始まるこちらのコード。
特に説明をされることが無いためメモとして残しておきます。

# $(function(){});について
実はこのコード、省略形になっています。
省略せずに書くと`$(document).ready(function(){});`となります。

つまりHTML(document)の読み込み(ready)が完了してから処理を開始するということになり、基本は省略形を使う。

# サンプルコード
“`javascript:省略形
$(function(){

//ここにjQueryコード

});

“`

“`javascript:省略なし
$(document).ready(function(){

//ここにjQueryコード

});

“`

元記事を表示

OTHERカテゴリの最新記事