- 0.0.1. React + TypeScript: Apollo Clientのリアクティブな変数(reactive variables)で複数コンポーネント間の状態を管理する
- 0.0.2. 【個人開発】全部おれの声！？2歳娘のために簡易ゲームをつくった【React】
- 0.0.3. 【Vue.js】画像を圧縮、リサイズ、リネームしてダウンロードする
- 0.0.4. 【JavaScript】Date オブジェクトのタイムゾーンを差し替えてテストする
- 0.0.5. Temporalで和暦にローカライズさせて表示する
- 0.0.6. JavaScript学習 – 値の型・計算関連
- 0.0.7. Vue.js 超入門
- 0.0.8. ツイートの画像だけを引用するブックマークレット等
- 0.0.9. ACDLを提唱します。その2
- 0.0.10. Reactについて簡単なまとめ
- 0.0.11. 複数選択のチェックボックスは順位付きにしないか？
- 0.0.12. NCMBとFramework7を使ったプロフィール画面コンポーネントの紹介と使い方
- 0.0.13. TemporalでのPlainYearMonthやPlainMonthDateのフォーマット方法について
- 0.0.14. React.lazy()を使った条件分岐でコンポーネントを表示する方法
- 1. A
- 2. B
React + TypeScript: Apollo Clientのリアクティブな変数(reactive variables)で複数コンポーネント間の状態を管理する
[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿が解説するのは、GraphQLのクエリは用いず、ローカルの状態を複数コンポーネントの間でどう共有するかです[^1]。具体的には、リアクティブな変数(「[Reactive variables](https://www.apollographql.com/docs/react/local-state/reactive-variables/)」)の使い方になります(「[Local State Management with Reactive Variables](https://www.apollographql.com/blog/apollo-client/caching/local-state-management-with-reactive-variables/)」参照)。
# `useState`で状態をもつ簡単なカウンター作例
まずは、Apollo Clientは用
【個人開発】全部おれの声！？2歳娘のために簡易ゲームをつくった【React】
## はじめに
全国のパパ・ママエンジニアのみなさん。こんにちは。
2歳〜3歳くらいの子どもって動物大好きですよね？わたしには2歳8ヶ月の娘がいるのですが、特にカピバラが大好きです。
そんな動物大好きっ娘のために簡易ゲームをつくりました。## つくったもの
[Animal Sounds 〜おとあてげーむ！いきものどーれだ？〜](https://animal-sounds.cocoroworks.net/)
内容はとってもシンプル。
動物の音が流れるので、その音に合う動物（いきもの）を選択肢の中から選ぶゲームです。## 作った目的（解決したい課題）
2歳といえば、いろいろなものに興味が湧いてくる年頃。
わたしの娘も例外でなく、まいにちさまざまなものに興味を示しています。中でも、最近いちばん好きなのが動物。
毎晩のように動物図
【Vue.js】画像を圧縮、リサイズ、リネームしてダウンロードする
# 使用したライブラリ
[browser-image-compression](https://github.com/Donaldcwl/browser-image-compression)
[file-saver](https://www.npmjs.com/package/file-saver)
ここでは上記の2つのライブラリを使用する。# ライブラリのインストール
npmもしくはyarnでインストール。
“`
npm install browser-image-compression
or
yarn add browser-image-compression
“`
# 画像圧縮・リサイズ・リネーム・ダウンロードの流れ1. フォームでの画像の選択時、画像をscriptで受け取る
2. 受け取った画像を圧縮・リサイズ・リネームする
3. 自動で画像をダウンロードする“`vuejs:ImageResize.vue (template部分)
画像名を入れてください
【JavaScript】Date オブジェクトのタイムゾーンを差し替えてテストする
## Date が絡んだコードのテスト
JavaScript の [Date](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) オブジェクトは [getFullYear()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear) や [getHours()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours) など、地方時に基づいた値を返すメソッドを持っています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date
このようなメソッドを利用した処理のテストは少々厄介です。
次のよう
Temporalで和暦にローカライズさせて表示する
## はじめに
:::note warn
Temporalは現状 TC39 proposal stage 3 のものを使用しています
今後APIが変わる可能性もあるのでご注意ください
:::TC39 proposalのTemporalをいじってみて、以下2つのような記事を書いたのですが、和暦の扱い方についてピックアップしてまとめます。
https://qiita.com/kyntk/items/6a5a30357c285dfd3387
https://qiita.com/kyntk/items/8daee17a82c6535332d9
## 暦について
Temporalでは和暦のようなグレゴリオ暦以外の暦も扱うことができます。こちらについては別記事で説明しています。
https://qiita.com/kyntk/items/8daee17a82c6535332d9
## 和暦への変換
例えば、2022年3月6日の和暦の年号を表示したいということもあるかと思います。
このときに、グレゴリオ暦と和暦の対応表を作って、何月何日から何月何日は和暦だといくつみたいなかなり
JavaScript学習 – 値の型・計算関連
## JavaScript データの種類・計算関連
JavaScript学習のアウトプット、兼自分用メモとして作成。
今回は値の型・計算関連についてです。
前の記事はコチラから↓↓https://qiita.com/Kiku-cha/items/1bd1f80febd9d0a610fb
:::note warn
**目次**
[01_データの種類について](#01_データの種類について)
[02_計算関連](#02_計算関連)
└ 四則演算
└ 余りの計算
└ べき乗
└ 計算の優先順位について
[次回の予定](#次回の予定):::
## 01_データの種類について
JavaScriptのデータの種類は、以下の６種類。
| 種類 | 表記 | 説明 |
|:———–: |:———–:|:————:|
| 文字列 | String | 「あいうえお」や「Hello」など |
| 数値 | Number | 数字(1,2,3,4,5…) |
|Vue.js 超入門
## はじめに
こんにちは、kakutekiと申します。初投稿です。
今回は、森 巧尚さんの書かれた[「動かして学ぶ！ Vue.js 開発入門」](https://www.amazon.co.jp/%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6%EF%BC%81Vue-js%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E6%A3%AE%E5%B7%A7%E5%B0%9A-ebook/dp/B07KPTGZ4C)でVue.jsを勉強したのでまとめておきたいと思います。
サンプルプログラムは配布できませんので自分で作成したものを書いていきたいと思います。## vue.jsとは
JavaScriptのライブラリの1つでシンプルで、とても分かりやすく簡単です。
## 最低構成
vue.jsを動かす為には以下のコードが最小構成になります。
“`HTML:最小構成サンプル
ツイートの画像だけを引用するブックマークレット等
## ツイートの画像だけを引用する
### ブックマークレット
“`text
javascript:(function()%7Bvar%20a%3Dwindow.location.href.match(RegExp(%22%5Ehttp%5Bs%5D%3F%3A%2F%2F(%3F%3A%5B%5E%2F%5D%2B%5C%5C.)%3Ftwitter%5C%5C.com%2F(%5B%5E%2F%5D%2B)%2F%5B%5E%2F%5D%2B%2F(%5C%5Cd%2B)%22))%3Bif(null!%3D%3Da)%7Bvar%20b%3DencodeURIComponent(a%5B0%5D%2B%22%2Fphoto%2F1%22)%3Bwindow.location.href%3D%22https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Ftext%3D%22%2Bb%7Delse%20alert(%22failed.%22)%3B%7D)()
“`### 使用方法
1. Web 版の Twitter にログインする
1.ACDLを提唱します。その2
# 概要
ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
plunkerで、jsonをダウンロード、アップロードしてみた。# サンプルコード
“`
var line = {
“maker”: {
“name”: “on”
},
“genkin”: {
}
};
var json = JSON.stringify(line);
var blob = new Blob([json], {
type: “text/json”
});
var url = URL.createObjectURL(blob);
document.getElementById(“export”).href = url;
var uploadFile;
document.getElementById(‘jsonFile’).addEventListener(“change”, function() {
var reader = new FileReader();
reader.onload = function(e) {Reactについて簡単なまとめ
## ■Reactとは
・Facebook社(現Meta社)が開発したJavaScriptライブラリ(フレームワークではない)
・Reactが利用されているサービスには「Facebook」「Instagram」「Yahoo!」「Netflix」などがある## ■Reactの特徴
・JSX記法(JavaScriptの中にHTMLのような記法で記述可能)である・仮想DOM(Virtual Document Object Model)というレンダリング機構が備わっているため高速動作可能
→従来のDOM構築 …ページ内の変更が一部でもDOM全体を再構築し画面描画する
→仮想DOMを利用したDOM構築 …ページ変更前後を仮想DOMで比較し変更差分だけDOMに反映する・コンポーネント指向である
→ReactではHTMLの一部を切り取って部品として定義することで、その内容を簡単な記述だけで呼び出すことが可能
→部品として定義することで再利用が可能となり、コードの記述が簡素化されメンテナンスコストを下げることに繋がる## ■Reactのデメリット
・先進的な機能を導入したり発展複数選択のチェックボックスは順位付きにしないか？
# 順位・順序って大事でしょ
何かと優先順位を付けたがる割に、チェックボックスには順位がない。なもんで、第一希望・第二希望って質問項目を並べて、長ったらしいアンケートになったりする。
と思って、順位付きチェックボックスを作ってみました。
“`php
NCMBとFramework7を使ったプロフィール画面コンポーネントの紹介と使い方
NCMBはモバイルアプリ開発におけるバックエンド機能（認証、データストア、ファイルストア、プッシュ通知など）を提供しています。バックエンドなのでAPIベースで利用するのが基本で、UI（アプリ側）は各自で開発する仕組みになっています。
現在、数多くのアプリが存在し、その中には定番とも言える機能があります。そうした定番機能を各フレームワークごとに実装しておくことで、再利用性高くNCMBが利用できるかと思います。
今回はFramework7で作ったプロフィール画面コンポーネントを紹介します。Monacaアプリでも利用可能です。
## UIについて
コンポーネントは1つのHTMLだけで実装されているのが特徴です。そのため、基本的には以下
TemporalでのPlainYearMonthやPlainMonthDateのフォーマット方法について
## はじめに
:::note warn
Temporalは現状 TC39 proposal stage 3 のものを使用しています
今後APIが変わる可能性もあるのでご注意ください
:::Temporalのpolyfill[^polyfill]に実装されている`Intl`を拡張したモジュールを使って`PlainMonthDay`のフォーマットをしようとした時に、以下のようなエラーが出てハマった部分があったので説明します。
[^polyfill]: https://github.com/js-temporal/temporal-polyfill
“`log
intl.js:400 Uncaught RangeError: cannot format PlainMonthDay with calendar iso8601 in locale with calendar Gregory
at extractOverrides (intl.js:400:1)
at DateTimeFormatImpl.format (intl.js:143:1)
at AReact.lazy()を使った条件分岐でコンポーネントを表示する方法
# やりたいこと
条件分岐でコンポーネントを表示させたい！
React.lazy()を使ってみる。React.lazyは動的にコンポーネントをimportすることができる。下記の記事をためしてみた。
https://numb86-tech.hatenablog.com/entry/2020/01/05/175743
# React.lazyの基本
## Acomponent.jsxとBcomponent.jsxを用意
Acomponent.jsx“`react
import React from “react”;export default Acomponent = () => {
console.log(“Acomponent”);
returnA
;
};
“`
Bcomponent.jsx“`react
import React from “react”;export default Bcomponent = () => {
console.log(“Bcomponent”);
returnB
;
【加筆・修正版】PHPでお問い合わせフォームを作成する
過去に執筆した記事ですが、学習を進めるにあたって投稿した内容では不十分な点があることに気づいたため、大幅加筆修正いたしました。
過去に一度読んでいただいた方も、再度目を通していただけると幸いです。**PHPでお問い合わせフォームを作成する①**
https://qiita.com/Michi1090/items/a575375e3db3fc6a2a90
**PHPでお問い合わせフォームを作成する②**
https://qiita.com/Michi1090/items/150f4cd178155072f44c
配列のmapメソッドについて
配列データをmapメソッドを使って描画する際にReact、VueだとkeyにindexをセットしないとWarningが出ると思うのですが、このkeyに入れる値で、先日プルリクのレビューで新たな学びがあったので備忘録として記事にします。
レビューで指摘されたのは、
>map()で、indexを使うのは、iteration対象（ループするもの）の値にkeyとして利用できるものがない場合のみにしましょう。
個人的に今まで配列データ内にidとかあればid（ユニーク値だから）、なければindexを普通に使ってたのですが、別にそんなことはなく、ユニークな値であれば何でもよいらしいです。例えば、
・Eメールアドレス
・データの中にdateオブジェクトがあれば、getTime()をすれば必ず違う時間になってユニーク値になる
などなどとまぁ極力indexを使わずシンプルに書こうというレビューを受けて、個人的にティップス、備忘録として残しておこうと思いました。
NCMBとFramework7を使った設定画面コンポーネントの紹介と使い方
NCMBはモバイルアプリ開発におけるバックエンド機能（認証、データストア、ファイルストア、プッシュ通知など）を提供しています。バックエンドなのでAPIベースで利用するのが基本で、UI（アプリ側）は各自で開発する仕組みになっています。
現在、数多くのアプリが存在し、その中には定番とも言える機能があります。そうした定番機能を各フレームワークごとに実装しておくことで、再利用性高くNCMBが利用できるかと思います。
今回はFramework7で作った設定画面コンポーネントを紹介します。Monacaアプリでも利用可能です。
## UIについて
コンポーネントは1つのHTMLだけで実装されているのが特徴です。そのため、基本的には以下の方法で導入・利
JavaScriptの自分用ドキュメント
# **配列の要素の並べ替え**
“`
Array.sort(function(a,b){return a-b;})
“`
forで1つずつ比べなくて良いし、1行で済む！# **staticメソッド**
インスタンスなしでも使える関数になる！
https://recursionist.io/dashboard/course/2/lesson/273# **ステートレスオブジェクト**
状態を持たないオブジェクト。単なる名前空間で、変数や関数を囲むだけ。オブジェクトのインスタンスを作る必要がなく、すべてのクラスの変数とメソッドに直接アクセスできる。
https://recursionist.io/dashboard/course/2/lesson/278# **test()メソッド**
“`
/正規表現/.test(文字列)
“`
正規表現のパターンを文字列から探してtrueかfalseを返す。# **正規表現**
\dは数値を意味する。[0-9]と同じ。
[AB]はAまたはB、[^A]はA以外を意味する。
https://recursionist.io/dash【WebBluetooth】WebブラウザからBLEプリンタを操作してみた
# WebBluetooth使ってみた
WebBluetoothについて勉強する機会があったので、BLE（Bluetooth Low Energy）プリンタを使って試してみました。
今回はWebブラウザに入力したテキストをBLEプリンタに印刷させるプログラムを作成しました。
ソースコードはGithubにあります。
[https://github.com/Kenty250/WebBluetoothTest](https://github.com/Kenty250/WebBluetoothTest)# WebBluetooth概要
– Webブラウザ（JavaScript）からBLE通信ができる
– HTTPS上でのみ動作する
– すべてのWebブラウザが対応しGoogle Nest Hubを使って、家庭内チャットをしよう
Google Nest Hubは、音声操作ができ、画面もついているので、誰でも何となく使うことができます。
そこで、Google Nest Hubの画面を使って、LINEのような機能を実現しようと思います。全体構成は以下になります。
Nest Hubで使えるよう、Actions on GoogleのInteractive Canvasを利用します。
自宅にあるNest Hubでは、「OK Google、チャットキャンバスにつないで」というと、起動し、あとは発話でチャットを投稿します。
Interactive Canvasでは、受動的に他人がチャットを投稿されたことを知る方法が見当たらなかったので、Nest HubのInteractive Canvasの中で、定期的にWebAPI呼び出しで新しいチャットがないかを問い合わせるようにしました。の天気
![]()
--℃ / --℃
![]()
--℃ / --℃
![]()
--℃ / --℃
OTHERカテゴリの最新記事
-
- 2023.09.22
今さら聞けないHTML 2023年09月22日
-
- 2023.09.22
オープンソース調べOSS 2023年09月22日
-
- 2023.09.22
WEBエンジニアが読んでおきたい技術書 2023年09月22日
-
- 2023.09.22
iOS関連のことを調べてみた2023年09月22日
-
- 2023.09.22
Python関連のことを調べてみた2023年09月22日
-
- 2023.09.22
Ruby関連のことを調べてみた2023年09月22日