[React Native/Web]日本語IMEでTextInput入力制限の件

# はじめに

こんにちは。久しぶりに投稿させていただきます。今回もReact Nativeの開発ノウハウです。
「この入力欄には数字のみ受け付けてほしい」
こういう要望、よくあるではないか。
React Nativeの`TextInput`では入力タイプが設定できないが、下記のように実装してたら、入力制限もできる。
“`typescript
setText(t.replace(/[^0-9]/g, “”))}
value={text}
/>
“`
……けれども、Windows環境で、日本語IMEで入力すると、問題が起きる。

# 問題点

問題というのは、`TextInput`にすでに何か入力していた場合、日本語IMEで何かを入力しようとすると（もちろん、日本語を受け付けないようにしている）、既存の文字が消去される。
Expo Snackで動作を見ましょう。
![Screenshot 2022-10-18 101557.png](https://qiita-image-store.s3.ap-northeast-

React.js 学習備忘録①~基本~

Reactの学習を始めたので、自分の中で情報を整理するためにも記録を残しておく。

# JSX記法
・HTMLのような構造だが、JSと併用が可能
・閉じタグが必要
・JS部分は{}で囲う
・拡張子は.jsx
・レンダリングする際、returnする内容は1つのタグで囲う必要がある
・その際は何も記述しないタグで囲うのが一般的 <>jsxの内容
・class名はclassNameとする
“`App.jsx
export　const App = () => {
const hoge = ‘huga’;
return(
<> //HTMLでは出力されない
//1つのタグからなる要素も閉じタグ代わりの/が必須

　//HTMLでは

と出力
{hoge} //HTMLではfugaと出力される

);
};
“`

# コンポーネント
・Reactを構成する部品
・コンポーネントを組み合わ

Python,Ruby,PHP,Java,JavaScript,PerlのC言語拡張の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,PerlのC言語拡張の比較

# Python

https://qiita.com/pocokhc/items/836a3596df5facd00824https://qiita.com/nabion/items/594fb3316583130a636e

# Ruby

https://qiita.com/suketa/items/ab6b88093de4a54b3b06

# PHP

https://qiita.com/takeyoshi-k/items/2a993eefbe06be047eff

# Java

https://qiita.com/tobita_yoshiki/items/0400f7e393fc0ba2d0cb

# JavaScript

https://qiita.com/mokomium/items/57

Qiitaのコントリビューションを数えるAPIを作ろうとした（未完成）

はじめに
——————————–
入社15日目、Qiitaを使い始めて3日目、もっとしっかりQiitaを使いこなしたいと思い、どのような人が上げるどのような記事が一番需要があるのか、ということをまず調べてみたいと思った。その中でユーザーランキングの右に表示されている**Contributions**という数字に注目することにした。

ヘルプの説明にある通り、Contribution (コントリビューション) とは貢献度を意味しQiitaコミュニティでの貢献活動を表した指標だ。その計算方法として書いた記事に対していいねやストックされた回数、また記事投稿、コメント、編集リクエスト、質問、回答などが数値化されて**総合的な評価**がされている。

このコントリビューションを用いて、数値が高いユーザーの共通点などについて調べていきたいと思った。しかしそこで、コントリビューションを表示するQiitaのAPIがないことに気づいた！そこで面白そうなので**コントリビューションを表示するAPIを自分で作ってみることにした！**

とは言ってもそもそも何から始め

DMM apiの使い方（自分のデータベースを作る方法）

※本記事は成人向けのサイトに使った技術についてです。

実現したかったこと

DMM apiではソートできないものがあったので独自のデータベース（以下DB）を作りたかった。

例：女優apiでできない誕生日での抽出など

実装環境

・mixhostレンタルサーバー
・Wordpress（テーマcocoon）使用
・FileZilla Clientでphpファイル設置

使用言語

・SQL
・php
・javascript

javascriptでやること

概要：phpとDMM apiの橋渡し

function main(){

宣言省略

for(let k=1 ; k<”総女優人数” ; k=k+100|0){
・

let url = "”DMM apiにアクセスするためのurl”";
・
fetch(url).then( function(response) {
  return response.json();
}).then(async function(json) {
・
for (let i = 0 

Obniz×LINE Botで酔い具合を教えてくれる優しいBotを作りたかったんだけど…

## おさけのみたい
お酒が好きです。この世に「太る」という概念が無いなら毎日揚げ物とビールで乾杯したいタイプです。
とは言ってもまじめな現代社会。心置きなくお酒が飲めるタイミングは休日前の夜などに限られています。
明日に響かないくらいのお酒がどれくらいかわからないので、obnizにアルコールの度数を測ってもらい、どれくらいお酒に酔ってるか教えてくれるLINE Botを作りたいと思います。

## 完成したけど…あれ？
とゆーことで完成しました！
LINEに話しかけたらObnizが起動してアルコールセンサーが作動します。
アルコールセンサーは過熱に時間がかかるので準備ができたらお知らせしてくれる機能付きです。

元記事を表示

node js基礎終わり。

htmlだと面倒な複数作業が一気に効率化した

プログラミングチュートリアルさんというyoutubeに動画を載せている方がいて簡単なお天気アプリの作成からnodejsのデプロイ方法を載せていたので復習もかねて見てみる。楽しそう。早く実際に何か物を作りたい。

話はずれるが、よくapp storeやgoogle playで見かけるいわゆる“くそげー”の制作に関する面白い話を聞いた。映画が理論的に「何時間何分の時にこういう行動を起こす」と人は最も感動するといった具合に、ある程度くそげーも論理化されて作成されてきている話を聞いたので、一度作成してみたい。日本人向けに作るならappstoreで、上位にあるゲームのプログラムを覗いてマネするのがよさそう。

JavaScriptの関数の高度な機能について

# 初めに
今回はJavaScriptの関数への振り返りです。基礎概念の勉強、やっと一段落だと思います。とてもいいチュートリアルに出会えて心から感謝しています。いつも読んでくださる皆さんもありがとうございます。
これからほかの勉強（ブラウザやWEBの基礎、React.js等々）まだ、もっと、たくさん勉強してまとめていきたいと思います！

今回振り返りの参考文章はこちらです。

https://javascript.info/advanced-functions

# Recursion
## Recursion vs. for Loop
```jsx
// recursion and stack
console.time('for Loop');
function pow(x, n) {
let result = 1;
for (let i = 0; i < n; i++) { result *= x; } return result; } console.log(pow(2, 1000)) console.timeEnd('for Loop'); // for

姿勢が悪いので、自分の姿勢を強制させる装置を作ったら逆に肩が凝りまくった。

## これは将来が心配だ

皆さんは、姿勢が良いほうですか？
私は、最近どんどん悪くなっていることを感じています。
危機感を持っているけど、気が付けば猫背になっています。もう猫になりたいです:smiley_cat:

そんな中、会社の朝礼のラジオ体操にて腰に電撃が走ってしまい、さらに姿勢をよくすることを余儀なくされてしましました:sob:

ですので、手元にあるもので姿勢を正せるものを作れないか？と考えました。
いや、正すというよりも矯正させるものを作れないか？

**つまり、姿勢矯正装置です:exclamation:**

## 目指すもの

姿勢の状態を検知して、姿勢が悪くなったと判断したら何かで知らせるものを作ることにしました。
できれば、**持ち運び可能**でどこで使用できるものにしたいのと、どこでも使えることを前提に周りに迷惑が掛からないよう音とか光ではない知らせ方を模索したいなと思いました！

## 姿勢矯正装置の完成デモ

試行錯誤した末にできた装置です。
どこにでも持ち運べるということで、**帽子に装置をつけることにしました。**

### 仕組み

帽子に付いてい

僕たちは植物を愛でるがいつも枯らしてしまう。遠隔水やり機を作りたい

# 僕たちは植物を愛でる
植物っていいですよね。
僕は緑が大好きで、よく芝生にゴロゴロしにいくのですが、
やはり植物に触れると心が癒されます。
しかしながら、仕事で忙しいとなかなか外出することができず、
最近はもっぱら自宅で観葉植物を育成し愛でております。

# 僕たちは植物を管理したくなる
obnizで植物を管理するプロダクトを調べるといくつかヒットします。
下の記事は室内の温度・照度を計測し、植物にとって快適な状態かを管理しているようです。
[植物の生育状態をLINEで監視してみた](https://qiita.com/kosuke0517lab/items/60d00d7891f877c4a743)

筆者は「植物がすくすく育つ喜びを感じて欲しい」という想いのもと制作されているそうです。
僕もその気持ちはとてもよくわかります。
IoTの力で植物の育成をもっと楽に・楽しくできたらいいなあというのが、今回の動機となります。

# とはいえ、僕たちは植物を枯らしてしまう
はっきり言います。
**僕たちが抱える最も大きな課題は、植物を枯らしてしまうことです。**

どれだけ植物を愛でよう

Javascript Sortの順番

JavaScriptで平仮名、カタカナ、漢字、数字、アルファベットが混ざっている配列にSortをかけた際はどのような順序になるのか、検証しました。（正直単純な配列なのでただsortをかけるだけでいいのですが、連想配列の際にも使えるようなコードで一旦記述しています。）

```javascript
const dummyArray = ['ひらがな', 'カタカナ', '漢字', '123', 'abc']

dummyArray.sort((a, b) => {
if (a > b) {
return 1
} else {
return -1
}
})

console.dir('結果' + JSON.stringify(dummyArray))
```

結果：
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365717/8ebde4b7-eaf

ほぼ毎日Qiitaを２時間見る私が、特に好きな記事をまとめてみた

# 前書き
5か月ほど前にQiitaに登録し、それから登下校中や休憩時間など、空いた時間は基本Qiitaを見るようになりました。
ストックした記事が106、LGTMした記事が12ページ分にもなり、記事の整理もかねて、特に好きな記事や深く理解が深まった記事などを振り返りつつまとめようと思います。

無言で記事を掲載しております。迷惑だったら申し訳ありません。
が、随時更新予定です。

追記(2022/10/18)
Twitterにておすすめの記事を紹介していただきました！
今後もそういった機会があることを信じて、ほかの方にオススメされた記事を紹介する枠を設けます。

# 誰に向けて
+ Qiita触りたての人
+ プログラミング始めたての人
+ 自分自身

# 最初に見ておくべき記事
https://qiita.com/YutaManaka/items/62dda256bb7ba6c08399

最初の頃は数学と同じように変数を決めていたため、aやbとしていたが、この記事を見て驚愕した（笑）

https://qiita.com/KNR109/items/3b14e2e8f89a33c

Phoenix LiveView と キーボードイベント

**Phoenix LiveView** で キーボードイベントをひろうプログラムです。**LiveView** と **JavaScript Hook** を組み合わせたものとなります。クライアント要素の状態管理やロジックは **Elixir** 側で行い、**JavaScript** では単にキーボードイベントを拾い **Elixir** に渡すだけのシンプルなものとなります。**Elixir** 側で状態を更新することで、**LiveView** 画面が自動更新されます。

プログラムの全体像やポイントは、箇条書き的に書くと以下のようになります。
* ブラウザ上のオブジェクトをキーボード操作で上下左右に動かす
* オブジェクトはdiv要素とし、その絶対座標を動的に変更することで動作させる
* キーボードのイベントはJavaScriptの **window.addEventListener()** を利用する
* JavaScriptからElixirへはJavaScript **Hook** の **life-cycle callbacks** メソッドの **pushEvent(

AWS CDK(JavaScript) + AWS Lambda(C#) をやる(AWS Lambda Function URLsで)

# 準備(詳しくないので雑に書く)
- https://engr-tie.net/posts/lambda-net6/prepare/
- .NET6.0 SDK -> https://dotnet.microsoft.com/download
- `dotnet new -i Amazon.Lambda.Templates`
- `dotnet tool install -g Amazon.Lambda.Tools`
- AWS CLI -> https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
- AWS CDK -> https://aws.amazon.com/cdk/

# 途中は略
なんかいい感じにcdkとlambdaを実装してください

# 要点(この記事の肝)

## Lambda(C#)部分のビルドについて

パスは適当に読み替えてください。
概要としては `dotnet lambda package` でzipファイルの生成で

【うわっ...私の表情、硬すぎ...？】face-api.jsで顔検出して感情と年齢を判定する

# はじめに
コロナ禍が収まってきたとはいえ、オンラインでミーティングする機会は多いですね。
ZOOMやGoogleMeetでミーティングを行う際、自分の顔を写している人も多いのではないでしょうか？

ミーティング中、画面に映される自分の無表情の顔。
**なんか疲れてない？**

ミーティング中、相槌を打ちながら微笑む自分の顔。
**なんかうまく笑えてなくない？**

そもそも自分の顔。
**なんか老けてない？**
![

【海外イベント紹介】The Jamstack and Your Data

# 【海外イベント紹介】The Jamstack and Your Data
今回は、「Prisma Day」で行われたプレゼンテーションから、「The Jamstack and Your Data」の内容をご紹介します！

:::note info

オープンソースのORMサービスを提供するPrisma。
2022年6月、Prisma主催により、モダンアプリケーション開発とそのデータベースをテーマとする2日間のカンファレンスが行われました。
今回は、そこで行われたプレゼンテーションから「**The Jamstack and Your Data**」についてご紹介します。

:::

NetlifyのCEOであるMathias Biilmann氏が「Jamstackが変えた、データとWebサービスの関係」について語ってくれました。

:::note info

**目次**
Jamstackとは
Jamstackのエコシステム
データモデルの変革
データモデルの将来
まとめ

:::

## Jamstackとは
Jamstackという呼び名は

**J**avaScript

sortを使って、連想配列の特定のオブジェクトを最後にする

### やりたいこと
オブジェクトの配列で、特定のキーを参照して、`'-1'`だったら最後に並び替えたい。
それ以外の順序は保持。

いろいろ調べたけど、全体的に並べ替えて、昇順降順にするというのばかりで、
`特定の値を場合だけ抽出して先頭や最後に回す`という処理をsortでやっているものが見当たりませんでした。

一回抽出して、push とか unshiftとかすればいいかもしれませんが、sortでもできるだろうと思っていろいろ試して一応できました。

いろんなパターンで試したりしていないので、動作保証はできません。
とりあえず以下のような例ではうまく行きました。

逆にいい方法をご存知の方がいましたら教えてください！！

### 実際のコード
```javascript:並び替えのコード
// 真ん中にある、-1だけ最後にしたい
const fix = [
{id: 'A00', name: '名前1'},
{id: '-1', name: '最後にしたい'},
{id: 'A01', name: '名前2'},
];
fix.sort((a,b)

iframe Player API と CSS を使って YouTube 動画を拡大表示する

## 概要
YouTube の提供する iframe Player API と CSS を使って YouTube の動画をWEBサイト上で拡大表示する方法をご紹介します。

## 環境
jQuery: 2.2.4

## iframe Player API とは
iframe Player API（以下 iframe API） はWEBページ上に動的に ```iframe``` タグを生成し、YouTube の動画を読み込むことができる JavaScript の API です。
また、一度読み込んだ動画は専用の関数を使って再生や停止などの制御をすることも可能です。

今回のように、同じ場所に複数の動画を切り替えて表示したり、自前で再生/停止などの制御を行いたいときなどにはこの API を使うとそれらの処理を簡単に書くことができます。

## 実装
今回はページに動画のサムネイルを３つ並べて表示し、サムネイルをクリックしたら画面いっぱいに背景が黒のウィンドウを表示して、その真ん中にクリックしたサムネイルに対応する YouTube の動画を表示するコードを書いてみたいと思います。

##

tscコンパイルをワンぽちで済ませるVSCode拡張を自作した話

初VSCode拡張。急いで書いたので雑です

# 目的

Typescriptを始めてみたはいいけど、コンパイルのたびにターミナルを叩くのが少しだけめんどくさい...
→　いい機会だしVScodeの拡張機能を自作してみよう！

# 環境

* wsl2 : Ubuntu v20.04.4 LTS
* Node.js : v16.17.1

# 結果

ヨシ!
![server.ts - HTML2JPEG [WSL_ Ubuntu] - Visual Studio Code 2022-10-16 21-06-11_Trim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2637844/7c846e90-1b70-bbfb-b63f-5998fba4c095.gif)

0. 下にあるtscボタンを押す（以下自動）
0. ターミナルが表示される
0. ```tsconfig.json```が作られる
0. ```$tsc```コマンドが実行されてコンパイル
0. ```./out```ディレクトリの中にコ

【Javascript 入門】VScodeでJavascript実装

# はじめに
VScodeでJavascriptを実装していきます。
VScodeは各自でダウンロードしておいてください。

Javascriptを実装する場合、HTMLファイルが必要になってきます。
手順としては、
1. プロジェクト作成
1. HTMLファイルを作成
1. Javascriptファイルを作成

となります。
自分は初心者の頃、入門編といいつつ文字ばかりの記事見てて目が痛かったので、できるだけ画像メインの書式にします。
もし、Javascript勉強したての方がいらっしゃいましたら、とりあえず以下の手順通りやってみてください。
できた上で、何か不明な点があれば適宜調べていきましょう。

# PC環境
- MacBook Pro (M1 Max, 2021)
- mac OS Monterey (ver 12.5)
- SSD 2TB
- RAM 32GB

# プロジェクト作成
1. VScodeを開き、「フォルダを開く」をクリック。
![VSjavascript_1.png](https://qiita-image-store.s3.ap-northeast-1.