f@ctor

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

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

kintoneで違うアプリのサブテーブル値を関連レコードとしてコピりたい

## はじめに

kintoneで朝に予定アプリで予定を立て、仕事が終わったらそのように対してどうなったか書くなど、
何かしらアプリをまたいだデータ連携がしたくなるときが多々あると思います。
通常のレコードなら簡単なのですが、それがサブテーブル内の値を持ってきたいという場合、
かなり話がややこしくなります。

## どんなあぷり？

このように、サブテーブル(テーブル名は、plantableです)に一日の予定を立てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631482/f9501b34-7f03-2173-6caf-12cbe67b07da.png)

そうすると報告アプリでは、その立てた予定のサブテーブルの値をサブテーブル(テーブル名は、tasktableです)にコピーしたくなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631482/c25e647b-fda3-

元記事を表示

[Day15] エラーハンドリング

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 10.1 エラーハンドリング, “try..catch”
### 知らない単語
– コントロールフローとは
– 受信側の処理が追いつかずにデータを取りこぼしたりするのを防ぐため、通信状況に応じて送信停止や速度制限などの調整を行う機能

### 学んだこと
– “try…catch” 構文

普通はエラーが発生するとスクリプトは即時に停止し、それをコンソールに出力するが、
「try..catch」を使用する事でエラーがあった時にcatchに入り、処理が

元記事を表示

ラーメン画像をプッシュ通知で送りつけあって飯テロするクソWebアプリを作った

## 作ったもの

https://ramen-sender.vercel.app?1

## どんなアプリ？

* プッシュ通知を購読し、プッシュ通知送信ボタンを押すとプッシュ通知を購読している**自分も含めたユーザ全員に**ラーメン画像のプッシュ通知を送りつけることが出来ます。
* また、飯テロといえば深夜なので毎日24時にラーメン画像がプッシュ通知で送られてきます。
* 送られてくるラーメン画像はすべて私が撮ったものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154239/da805f08-2848-f073-ac81-b9413ca381ca.png)

## なんで作ったの？

iOSのsafariのPWAでもPush通知ができるようになる！
iOS16で実装される！
みたいな情報があったから、iOS16出たしなんか作ってみよう！って思ってたんだけど
実際に使えるようになるのは2023年中(

元記事を表示

Deno入門[CLIコマンド、モジュール、環境変数、Webフレームワーク]

この記事は筆者の[ソロ Advent Calender 2022](https://qiita.com/advent-calendar/2022/panda) 15日目の記事です。

Denoの公式ドキュメントの内容を実際に動かしてみてDenoに入門してみたのでその備忘録の続きです。

前回の記事は[こちら](https://qiita.com/JY8752/private/9cd6c05394bf955bdd75)

# CLI
Denoはコマンドラインツールのためdenoコマンドでいろいろ操作できます。

“`
//help
deno help

//依存関係などを含め一つのファイルにバンドルする
deno bundle

//フォーマット
deno fmt

//リント
deno lint

//テスト
deno test
“`

watchオプションでファイルの変更を検知しそのたびにコマンドを実行することもできるのでフォーマットやテストをwatchオプションで実行したりみたいに使えば便利そう。

goもそうだけど標準でフォーマッターついて

元記事を表示

ReactHooksについてまとめる（State Hooks）

# 概要
Stateはコンポーネントがユーザ入力のような情報を「記録」することを可能にします。　例えば、フォームコンポーネントがは入力値を保存するためにStateを使用したりします。

“`jsx
function FormComponent() {
const [text, setText] = useState(“”);
// …
“`

コンポーネントにStateを追加するには以下のどちらかのHooksを使用します。

## useState
useStateはコンポーネントのトップレベルで宣言され、`[, ]`のような配列で命名されます。`useState`の引数にはそのstateの初期値が与えられます。

“`js
const [age, setAge] = useState(42);
“`

set関数で新たにstateが更新されても、その実行関数内では更新される前の値になることに注意です。
更新される値を使用するには再レンダリング後でないといけません。

“`js
function

元記事を表示

Chrome拡張でショートカットキーをつくってみた

# はじまり

この記事はディップ株式会社 [Advent Calendar 2022](https://qiita.com/advent-calendar/2022/dip-dev)の投稿です！

GitHub Enterpirseでプルリクエストを出す際にApproveをするためのショートカットキーがほしいなと思ったので、Chrome拡張でショートカットキーを作ってみました。

# ディレクトリ構成

下記のディレクトリ構成でChromeに読み込ませます。

“`
$ tree
├── background.js
├── manifest.json
└── scripts //ショートカットキー押下後の処理が書かれたスクリプト
├── approve.js
├── conversation.js
├── files_changed.js
└── openReview.js
“`

# manifest.jsonの設定

manifest.jsonのcommandsに追加したいショートカットキーを追加します。
ショートカットキーは4つまでしか設定で

元記事を表示

【個人開発】絵本を検索して図書館で「貸出可能」か確認できるサービスを作ってみた

この記事はadvent calendar 2022 15日目のものです。

こんにちは。ザキと申します。プログラミングスクールの「RUNTEQ」でRuby on Railsを中心に学習しています！

この記事では、私が作成した [図書館情報を表示する絵本検索サービス「Kariteyomu」](https://www.kariteyomu.net) と、その使用技術について紹介させてください。

https://www.kariteyomu.net/

# 開発の背景
私には小さな子供がおり、頻繁に図書館で絵本を借りて読み聞かせをしています。
読み聞かせをすることで、子供と一緒に笑ったり、興味があることを追求したり、親子のコミューケーションもとっています。

一方で子供の興味が年齢やタイミングで移り変わることもあり、最適な絵本を探すことには苦労しています。

**特に図書館で絵本を借りるのは難しい。なんでこんなにハードモードなんだ！！と心の中で叫んだのは私だけではないはずです！**

**サクッと絵本を検索できて、図書館の貸出情報を表示できるサービスがあれば楽になりそうだ！

元記事を表示

JavaScript の非同期処理をざっくり理解する【async, await 編】

▼ 前回の Promise 編はこちらです。

https://qiita.com/kotaro-caffeinism/items/403d963ca7855ef4358b

「非同期処理とは？」という部分については Promise 編で解説したのでよければご覧ください。
今回は非同期処理を同期処理のように実行できる `async` , `await` 構文についてみていきます！

## `async` , `await` 構文の使い方

**async は関数を非同期関数にするキーワードです。
await は async をつけた非同期関数の中で非同期処理を行う部分の頭につけることで、処理結果を待つことができます。**

※ ES2022 で async 関数の外でも使えるトップレベル await が登場しましたが、訳がわからなくなるので一旦放っておきましょう

言葉だけではさっぱり分からないので、実際にコードを見ていきましょう。

“`js
async function example() {
// 非同期処理を実行するコード
const result = await f

元記事を表示

JavaScriptをつかってストップウォッチを作成する　後半

## どんどん増えるログを出す
### スタートボタンが押されたら「開始」と表示する
一通りストップウォッチ本体のコードは書けた。最後の仕様であった、ボタンを押した際のログを作成する。
setIntervalを呼び出した後に新しくHTMLタグを追加するコードを書く。

“`html:index.html




StopWatch

ストップウォッチ

0

元記事を表示

JavaScript の非同期処理をざっくり理解する【Promise編】

JavaScript の非同期処理はこれが分かればレベルアップできるというか、難しいポイントだなと思います。
今回は「JavaScript中級者から上級者になる」というアドベントカレンダーの目標に則り、逃げずにしっかり非同期処理について調べていこうと思います

https://qiita.com/advent-calendar/2022/caffeinism

## 非同期処理とは

非同期処理について知るためにはまず同期処理のイメージを掴む必要があります。

ざっくり説明すると、同期処理ではコードを上から順番に実行します。
（ここでは一旦巻き上げのことは考えないようにしましょう）

“`js
const myName = “kotaro”;
function greet(name) {
return `Hello ${name}!`;
}
greet(myName);
“`
このような処理は同期処理です。
上から順番に実行されないと、 `greet(myName)` のときに `myName` がないというエラーが発生するかもしれません。

**しかし非同期処理は同期処理

元記事を表示

asciidoctor.jsでJavaScriptからasciidocファイルを変換する方法

AsciiDocは、Markdownに似ている軽量マークアップ言語です。比較的マイナーですがGitHubでのプレビューに対応しています。

Markdownはドキュメント記述言語としては仕様が貧弱なため、簡潔に書くのが難しいものや、環境毎に異なる方言を使わなければならない事が多いです。
ただ、asciidocはそれなりに多機能な仕様が公式でしっかり定義されているので取り扱いやすい言語だと言えます。
https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/

下記はasciidocファイルのサンプルです。`#`が`=`になったMarkDownのような感じですね。

“`asciidoc:example.asciidoc
:hardbreaks:
= AsciiDocの例

== AsciiDocの例の一章

内容です
“`

AsciiDocにはAsciiDoctorというドキュメント変換プロジェクトがあり、これを使用してコマンドラインからasciidocファイルをHTMLに変換する方法はよく知られてい

元記事を表示

〇✕ゲーム

# はじめに

今回は**HTML**、**JS**、**CSS**だけで〇✕ゲームが作れるので簡単に紹介したいと思います。

# 〇✕ゲームって？
ほとんどの人が一度はやったことがあるとは思いますが一応説明すると、

「３×３のマス目」があって〇と✕を交互に置いていって縦、横、斜めのどれかで先に３つ揃った方の勝ちというルールです。

簡単ですね。　

# 完成形
「**〇の番！**」と表示されていて、クリックしたマス目の場所が〇になります。
![〇✕ゲームHTML.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003776/a8ea05d1-eed5-3468-e134-4de35d54857a.png)

# HTMLコード
![html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003776/b7e72777-8f31-2f98-d567-b610935f70f4.png)

# cssコード
![css

元記事を表示

LTE-M Leaf を使ってモノを制御するプロトタイピングをやってみる

Webエンジニアです。

突然ですが、KDDIさんから、LTE-M Leafというモノをお借りしました。
なんと、[SORACOM のSIM](https://soracom.jp/store/5263/) とセットで。ありがとうございます！

前回、[STM32を使ったLチカ]() をやったのは、この LTE-M Leafが使いたかったからなんですね。
今回はようやく本番。LTE-M Leaf を使ったプロトタイピングに挑戦してみようと思います。

## LTE-M Leaf とは？

KDDI製のLTE-M通信用のモジュールです。

![IMG_2412.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31758/1d12fc98-0006-2a60-13c6-ad1deb5e1d83.jpeg)

LeafonyにLTE-Mを使ったセルラー通信機能を追加できます。

2枚セットですが、どうやら下記が正式名称のようです。

– [AC04 LTE-M King M (LTE-M通信用

元記事を表示

JavaScriptにおける繰り返し構文、反復処理まとめ

## はじめに

自分自身が繰り返し構文、反復処理メソッドをなんとなくで使っている気がして、一度一通り勉強しなおそうということで記事にしました。

## 繰り返し構文、反復処理メソッド一覧

– 繰り返し構文
– for
– for…in
– for…of
– do while
– while
– 反復処理メソッド
– forEach
– map
– filter
– reduce

よく使われる、よく聞く繰り返し処理を列挙しました。

## for

“`javascript
const array = [1, 2, 3];
for (let i = 0; i < array.length; i++) { console.log(array[i]); } // => 1
// => 2
// => 3
“`

スタンダードな繰り返し文。

上記のコードでは、変数`i`が実行回数を保持し、`for`文の中の処理が終わったら変数`i`に 1 ずつ足して実行回数をカウントする。変数`i`が配列の長さ分より数値が大きくなったら処理終了。

元記事を表示

ボタンの連続入力防止方法

トグルメニューを実装した時に、連続クリックすると、遅れてクリックした回数分アニメーションが再生してしまう不具合がありましたので、その対策を紹介します。

~~~ html

開閉ボタン
  • 開閉コンテンツリスト
    開閉コンテンツリスト2

    • ~~~

    ~~~ js
    $(function(){
    $(‘.toggle dt’).click(function(){
    $(this).next().slideToggle(600);
    });
    });
    ~~~
    上のコードで連続クリックするとその回数だけアニメーションが保存され、遅れて何回もアニメーションしてしまいます。
    ~~~ js
    $(function(){
    $(‘.toggle dt’).click(function(){
    $(this).next().stop(true, false).slideToggle(600);
    });
    })

    元記事を表示

    【Alpine.js】x-forでプロパティをブン回せ！！

    # x-forとは

    https://alpinejs.dev/directives/for

    配列またはオブジェクトのプロパティを1つずつ取り出すことができるやつです。

    # 使い方
    基本形
    “`html