- 1. 私が作った、タイピングゲーム
- 1.1. インターセクション型
- 1.2. Union 型の絞り込み
- 1.3. ライブラリを利用する
- 1.3.1. CSVを読み込む
- 1.3.2. 【JavaScript】Promiseがよくわからないから改造して遊んでみた 〜「任意の状態が完了するまで待つ」という処理をつくる方法〜
- 1.3.3. User-Agent クライアント ヒントを使用した Windows 11の判別
- 1.3.4. Firestoreをmapフィールドに存在する値で検索する
- 1.3.5. Chrome拡張機能でTweet下書き機能を作ってみた
- 1.3.6. react hooks useState 実用的なオブジェクト配列管理
- 1.3.7. OSSのTypeScriptのソースでよくみかけるDictについて
- 1.3.8. Quaggajsでバーコードリーダー作ったらカメラ周りでハマった話
- 1.3.9. Next.jsで画像を配置する方法
- 1.3.10. 【Vue.js】Twitterシェア ツイートの中身の指定(2週間後の日付、本のタイトル)
- 1.3.11. 【JavaScript】条件分岐と繰り返し処理
- 1.3.12. HTMLの要素をIE11でも使えるように見せかける簡易版JSを作った
- 1.3.13. AntDesignのAvatarを自作してみた
- 1.3.14. TypeScriptチートシート5(ジェネリクス)
- 2. ジェネリクス
すごくシンプルなタイピングゲームを作ろう
今回は、タイピングゲーム*くそ を、作ってみましょう
“`ruby
私が作った、タイピングゲーム 私が作った、タイピングゲーム
document.onkeydown = typeGame; //キー押下時に関数typeGame()を呼び出す
//文字を格納する配列
var moji = new Array("a","b","c","d","e","f","g","h","i",
【React】イベントハンドラプロパティ一覧【JavaScript】
## はじめに
本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。###イベント属性一覧
Reactで、イベント処理はタグ内に`onClick`などのイベントハンドラ用の属性を指定することで定義できます。
Reactでのイベント処理の記述には以下の特徴があります。- イベントは小文字ではなく camelCase で名付けられる
- イベントハンドラとして文字列ではなく関数を渡すイベント処理を記述する際のイベント属性について以下にまとめます。
```.js
// クリック関連
onClick // 要素やリンクをクリックした時に発生
onDblClick // 要素をダブルクリックした時に発生
onMouseDown // マウスでクリックした時に発生
onMouseUp // クリックしたマウスを上げた時に発生
ISO 8601(日付時刻表記法)の基本形式から拡張形式へ変換
こんにちは。
[ISO 8601](https://ja.wikipedia.org/wiki/ISO_8601)(日付時刻表記法)の基本形式から拡張形式へ変換しました。ただし処理ロジックが甘いです。* 基本形式: ```20211225T000000.000+0900```
* 拡張形式: ```2021-12-25T00:00:00.000+09:00``````javascript
const getDateTimeExtended = str => {
const len = str.length;
const Y = str.slice(0, 4) + '-';
const M = str.slice(4, 6) + '-';
const Dh = str.slice(6, 11) + ':';
const m = str.slice(11, 13) + ':';
const st = str.slice(13, len-2) + ':';
const u = str.slice(len-2, len);
const str_ex
TypeScriptチートシート4(応用)
インターセクション型
・合併型(uniontypes):AかBどちらかの型を持つ
・交差型(intersection):AとB両方の型を持つ(共通する型ではない)```typescript
type Engineer = {
name: string;
role: string;
};type Blogger = {
name: string;
follower: number;
};type EandB = Engineer & Blogger;
const suda: EandB = {
name: "masaki",
role: "front-end",
follower: 10000,
};
```Union 型の絞り込み
```typescript
interface Hoge {
foo: string;
bar: number;
}
interface Piyo {
foo: number;
baz: boolean;
}type HogePiyo = Hoge | P
【ZOOM】毎日のZOOM生活をちょっとだけ快適にしたい
# 毎日のオンライン会議・授業でちょっとだけ楽できるアプリをつくりました
こんにちは.kakekakemiyaと申します.
現在は東京大学工学部電子情報工学科というところに所属しております.今回は,私の作ったアプリの紹介をさせていただきたく投稿させていただきました.
> なお,本記事では「オンライン会議ツール」と書けばいいところを「ZOOM」で統一させていただきますが,国内シェアの高さと,自分が普段使っているというだけの理由なので,ZOOMアプリへの宣戦布告でもなければ他競合製品では使えないアプリであるというわけでもありません.
# ZOOMへの不満
ZOOMは今やコロナ禍において欠かせないアプリの一つとなりました.
特に,オンライン授業を行なっている大学では,学生は毎日各授業のURLに接続してリモート受講をしているので大学生活に欠かせない存在となっています.
私自身もコロナ直撃大学生なので,2年生のころから毎日オンライン授業を受けているわけですが,兼ねてから生じているZOOMへの不満が,
__URL管理が面倒くさいーーー__
ということです.
メモ帳やsla
GIF画像のデータ形式とHTML+JavaScript (ローカル生成)のサンプルプログラム
# GIF のデータ形式
大雑把に以下の並びになっています。
| バイト位置 | バイト数 | 内容 |
|:-:|:-:|:--|
| 0 | 6 | ヘッダ (Header) |
| 6 | 7 | 論理画面記述子 (Logical Screen Descriptor) |
| (13) | - | (共通色表:存在する場合) |
| - | - | 記述子 (Descriptor) |
| ... | ... | ... |
| - | 1 | 終端子 (Trailer) |## ヘッダ (Header)
| バイト位置 | バイト数 | 内容 |
|:-:|:-:|:--|
| 0 | 3 | 花押 (Signature) |
| 3 | 3 | 版 (Version) : 「87a」または「89a」 |### 花押 (Signature)
| バイト位置 | 文字 | 10進 | 16進 |
|:-:|:-:|:-:|:-:|
| 0 | 'G' | 71 | 0x47 |
| 1 | 'I' | 73 | 0x49 |
| 2 | 'F' | 70 | 0x
Webの勉強はじめてみた その20 ~Node.js編 ライブラリの使い方~
N予備校「プログラミング入門Webアプリ」コースを受講しています。
今回は第3章4,5節です。ライブラリを利用する
:::note
require: 必要なモジュールだけをメモリに記録する
:::CSVを読み込む
```javascript
'use strict';
//FileSystem Module
const fs = require('fs');
//ReadLine Module
const readline = require('readline');
//ReadStream from CSV
const rs = fs.createReadStream('./popu-pref.csv');
//ReadLine from rs
const rl = readline.createInterface({input:rs, output:{}});
//DataMap key: 都道府県 value: 集計データのオブジェクト
const prefectureDataMap = new Map();
//line Even
【JavaScript】Promiseがよくわからないから改造して遊んでみた 〜「任意の状態が完了するまで待つ」という処理をつくる方法〜
# 最終的に完成したコード
結果から言え、と怒られそうな日記のような記事になってしまったので、
とりあえず「任意の状態が完了するまで待つ」という処理の書き方だけ頭に持ってきます。※ このコードはあくまでPromiseの理解をする過程で副産物的に生まれたコードであり、記事の本質はこのコードが生まれる過程で理解した内容です。
※ このような変則的な書き方を利用すると、Promiseの本来の使い方(then/catch)を普通に理解できている人たちを混乱させてしまうので、ご利用は慎重にお願いします。```JavaScript
function generateControllablePromise( methodNameToResolve, methodNameToReject ){
let toResolve, toReject;
const promise = new Promise((res,rej)=>{ toResolve = res; toReject = rej; });
promise[methodNameToResolve] = toReso
User-Agent クライアント ヒントを使用した Windows 11の判別
2021年12月時点では、ユーザーエージェント(UA)から、Windows10とWindows11を判別することが出来ませんでしたが、javascriptによってUser-Agent クライアント ヒントを使用してWindows11を判別できる記事を見つけたので、メモ。
```script.js
navigator.userAgentData.getHighEntropyValues(["platformVersion"])
.then(ua => {
if (navigator.userAgentData.platform === "Windows") {
const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
if (majorPlatformVersion >= 13) {
console.log("Windows 11 or later");
}
else if (majorPlatformVersion > 0) {
Firestoreをmapフィールドに存在する値で検索する
こんにちわ、CROSSER開発者です:relaxed:
今回はFirestoreにあるmapフィールドにある値で検索する方法を共有したいと思います:fist:
どなたかの参考になれば嬉しいです:sparkles:# Firestore Documentの例
例えばこんなドキュメントがあり、userAが2021/11/13よりも前のデータがあるmapのドキュメントのみを取得したい時にこの記事は参考になると思います。user / user1 / like{'userA':2021/11/12, 'userB':2021/11/13,'userC':2022/1/1}
user / user2 / like{'userA':2022/1/2}# やり方
```
admin.firestore().collection('user').where('like.userA', <=, 2021/11/12(Timestamp型)).get(); ``` これでuser1のドキュメントが取得できます:grin: # 補足 userAを可変にしたい時はこれでいけます:muscle
Chrome拡張機能でTweet下書き機能を作ってみた
# はじめに
***皆さんは最近仕事以外で勉強していますか?***以前の自分は休日は勉強するとしても数時間程度。平日はほとんど勉強していませんでした。
しかし職場の面談で以下のようなお言葉をいただきました。***「今後どんな人生設計かにもよるが、結婚して子供ができたら今まで以上に学習時間を確保することは難しい。時間のあるうちに学習をしておくことが大切」***
ごもっともだなと思いました。また、自分の場合は、色々ありエンジニアになるのに遠回りをしているためなおさらです。
そこで、この面談の日から毎日少しでも学習をすることを決め今日まで続けています。
今回は、学習に取り組む中で自分用のChrome拡張機能を作ってみたのでここに記録します。
# 開発したもの
今回開発したものは、Tweetの下書きができる拡張機能です。![スクリーンショット 2022-01-08 13.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/243f7482-a6eb-493a-ad6d-7
react hooks useState 実用的なオブジェクト配列管理
カスタムHooks useState でオブジェクト配列を扱う場合のテンプレート的なものです。
typescriptも便利な機能を十分に活用し簡潔で機能的な記述を行います。オブジェクト配列を扱う場合には、1つのアイテムを追加したり、削除の必要が多いかと思います。
そのような機能を簡潔に実装し、汎用的に使える想定のカスタムステートです。```react:useItems.ts
import { useState, useCallback } from 'react'type ItemBase = {
id: string
}type FilterOptions = {
not: boolean
}export const useCustomState =
(defaultItems: T[] = []) => {
const [items, setItems] = useState(defaultItems) // Filter read
const filter = useCallback
OSSのTypeScriptのソースでよくみかけるDictについて
# Dict型
```typescript
export type Dict= Record ;
```
OSSのソースなどを読んでるとこんな感じでDict型を指定してる事があります# Dict型の目的
```typescript
let obj={}
obj.name="Alex" //Property 'name' does not exist on type '{}'
```
これはjavascriptだとエラー起きないのですが、typescriptだとエラーが起きるので、```typescript
let obj:{[key:string]:string}={}
obj.name="Alex"
```にする必要があります。ここでRecordを使うとより簡潔に
```typescript
let obj:Record={}
obj.name="Alex"
```
とする事ができます。それを更に簡潔にしたのがDict型という感じですね。https://www.carlrippon.co
Quaggajsでバーコードリーダー作ったらカメラ周りでハマった話
在庫管理に利用されているバーコード(JANコード)ってご存知ですよね?[Quaggajs](https://serratus.github.io/quaggaJS/)というライブラリでそのリーダーを簡単に実装できるらしいです。実際にスマホのWebブラウザで動くアプリを作ってみてハマったポイントをメモとして残しておきます。ライブラリの詳細は上記リンク先を参照ください。
#とりあえず作ってみる
とりあえずインストール。````
$ npm install quagga
````LiveStreamで起動する場合、次のコードで起動できます。
````js
import Quagga from "quagga";
// LiveStreamを表示するvideoDOMを挿入したい親DOM
const camera = document.getElementById("camera");
// QuaggaJSをLiveStreamで起動する
start(camera);
function start(camera) {
// QuaggaJs初期化のConfig
const
Next.jsで画像を配置する方法
#Next.jsで画像を配置する方法
最近学んだことをoutputするために書きました。
##やり方
①まずpublicフォルダにstatic fileを作り、その中に画像をぶち込みます。
②その次に画像を配置したいフォルダー内に行き、Imageタグで画像を表示していきます。この時、publicは"/"で表示できるので気をつけましょう。```html
```以上で表示できます!以上グッピーでした!
##参考にした記事
https://qiita.com/KMD/items/f201b846b2485841c0ff
【Vue.js】Twitterシェア ツイートの中身の指定(2週間後の日付、本のタイトル)
#はじめに
こんにちは!
今回は【Vue.js】Twitterシェアボタンの実装についてアウトプットしていきます![前回の記事](https://qiita.com/Yudai_35_/items/1254f04a913e66d330ed)でTwitterシェアの実装を行いました!今回はツイートのコメント部分に、
①2週間後の日付
②診断結果ででた本のタイトル
を自動的に記入される機能を実装していきます!#対象
・vue.jsでTwitterシェアを実装したい方
・vue.jsで日付を取得し表示させたい方
・[前回の記事](https://qiita.com/Yudai_35_/items/1254f04a913e66d330ed)までの内容を実装済みの方。##使用環境
|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js |2.15.7 |
|@nuxtjs/tailwindcss |4.2.0 |
|moment |2.29.1 |
|nuxt-microcms-module |2.0.0 |##使用ファイル,概要
|ファイル名 |概要
【JavaScript】条件分岐と繰り返し処理
## はじめに
本記事は、プログラミング初学者が、学習を進めていて疑問に思った点等について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。## JavaScriptの条件分岐と繰り返し処理
### `if()`
```.js
// 条件式が1つ
if(条件1){
処理1
}
// 条件1を満たすときは、処理1を実行// 条件式が1つで処理を2つに分ける
if(条件1){
処理1
} else{
処理2
}
// 条件1を満たすときは処理1、満たさないときは処理2を実行// 条件式が2つで処理を分ける
if(条件1){
処理1
} else if(条件2){
処理2
} else{
処理3
}
// 条件1を満たすときは処理1、条件2を満たすときは処理2、どちらも満たさないときは処理3を実行```
### `while()`,`do...while()`,`for(
HTMLの
IE11も対象の案件。ブラウザの画面幅に応じてページのレイアウトが変わる際、一部の<img>要素の画像については縦横比が異なるものを表示させる必要がありました。そこで、サイズや縦横比が異なる複数の画像をあらかじめ用意しておき、画面幅に応じて自動で切り替わるようにしたい。最近のブラウザならHTMLの<picture>要素をサポートしているので、mediaクエリを付けた<source>要素を並べて書くだけで実現できますが、IE11は<picture>要素が未対応。もちろん、polyfill [picturefill.js](http://scottjehl.github.io/picturefill/)の存在は知っています。が、今回はとりあえずmax-widthだけを基準にして画像を切り替えできれば十分だったので、自分でIE11用に簡易版のコードをJavaScriptで書いてみることにしました[^1]。
[^1]: picturefill.jsは2017年3月リリースのver.3.0.3を最後に更新が止まっているようで、projectのstatusがよくわからなかっ
AntDesignのAvatarを自作してみた
# 1. 自作した理由
- 通っていたスクールで依存度が高いAntDesignからの脱却を目指していたため、その流れで自分もチャレンジしてみようと感じた。# 2. 開発環境
- react v16.12.0
- styled-components v5.3.3
- typescript v4.1.4# 3. 実装した機能
まずは、AntDesignのAvatarに搭載されている機能を紹介します。https://ant.design/components/avatar/#Avatar
正直使わない機能が多かったため、自作した際には最低限使いそうな`src size border shape`のみを実装しました。
# 4. 実際のコード
```JavaScript
import React from 'react';
import styled, { css } from 'styled-components';type Props = {
src?: string | null;
size?: number | 'large' | 'small' | 'de
TypeScriptチートシート5(ジェネリクス)
ジェネリクス
型を引数として受け取る
基本
関数実行時に引数で型を渡すことができる
それを関数内で使える```typescript
function copy(value: T): T {
let hone: T;
return value;
}copy
("hello"); ```
具体例
```typescript
// number型
function test(arg: number): number {
return arg;
}// string型
function test2(arg: string): string {
return arg;
}test(1); //=> 1
test2("文字列"); //=> 文字列//上の2つは共通化できそう
function test
(arg: T): T {
return arg;
}test
(1); //=> 1
test("文字列"); //=> 文字列 /