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

Github Actions で Twitter の Bot を稼働できる件

こんにちは！ぬこすけです。

「[Github Actions で SEO 対策！サイトマップ作成を自動化！](https://qiita.com/nuko-suke/items/f397334c30817b22948c)」に続き Github Actions について 2 回目の投稿です!

https://qiita.com/nuko-suke/items/f397334c30817b22948c

あまり利用イメージはないかもしれませんが、実は **Github Actions で Twitter Bot を運用できちゃったりします**。

この記事では私が運営しているサイト「[ぬこぷろ](https://nuko-programming.com/ranking/Python/page/1)」で実際にやっている Github Actions を使った Twitter Bot の運用について紹介します。

なお、もし Github Actions がわからない方は「[Github Actions で SEO 対策！サイトマップ作成を自動化！](https://qiita.com/n

もう一度JavaScriptを理解する part1

# 初めに
たくさんの資料調べるうちに数か月前自分の書いた文章を振り返ると、自分の理解があやふやになっていることに気づき、基礎概念ともう一度向き合って文章にしたいと思います。

シリーズ参考資料はこちらです↓
[You Don’t Know JS (book series)](https://github.com/KBPsystem777/You-Dont-Know-JS#you-dont-know-js-book-series)

今回扱うのは
[You Don’t Know JS: Up & Going – Chapter 2: Into JavaScript](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/up%20%26%20going/ch2.md)
[You Don’t Know JS: Scope & Closures – Chapter 4: Hoisting](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/scope%20%26%20clos

今週の学び　第10回

# 今週の学び

jQueryなど

– コードの短縮
– 自分で関数を定義して、使うたびに呼び出すようにする

– data()
– 「data()」を使うと HTML 要素内に付与された data 属性に対して、取得・設定・変更などが簡単に行えるようになる
【 対象要素.data() 】のように取得しようと考えている要素に data()メソッドを実行する
個別の id を取得するなら【 対象要素.data( 属性名 ) 】のように引数へ data 属性名を指定
「data-name」「data-age」という 2 つの data 属性が付与されているなら、取得する方を「data(‘name’)」などと記述する

– 三項演算子
– JavaScript では唯一の、3 つのオペランドをとる演算子

– Number()
– なんでも付ければ良いものではない
電話番号などで「0」が表示されなかったりする

– .slice()

– 文字列の先頭、末尾、それぞれから指定した数だけ文字を削除する
先頭から 2 文字を削除

未経験からエンジニアを目指したい！

自己紹介

●高専卒業、社会に揉まれて１０年目

●プログラミング経験はほぼほぼありません！
　遥か昔の学校の講義でC++を扱った程度。

●プログラミングを勉強しようと、22年6月3日にMacbookを購入
　ProgateでHTML、CSS、Javascriptを一通り進めて、
　今はUdemyでじゃけえさんの「React入門」動画で学び中。
　（電車とバスに揺られながら見ております、丁寧な説明で分かりやすい:clap:）

なぜプログラミングを学ぶのか

●プログラミングのスキルアップを図り、今後のロードマップを描きやすいと思った
　自分の努力次第で副業や、ゆくゆくはフリーランスにも転身できたり？

●リモート勤務に憧れた
　痛勤が無くなればその分時間を有意義に使えますよね。

●仕事をしながら世界（大袈裟？）で通用するスキルを身につけられる
　プログラミングはありとあらゆるモノやサービスに使われていますよね。
　もし勤めている会社がなくなってしまっても、身につけたスキルを武器に
　他の会社や、はたまたフリーランスでやっていけるのではないか。　
　

WebhookとAPIのちがい　～Kintone編～

# WebhookとAPIのちがい　

今回はWebhookとAPIの違いをやってくよ。

:::note info
～おしながき～
1. 前置き
2. WebhookとAPIのちがい
2. 使ってみる（Kintone）

:::

## 前置き

とある日の出来事。

同僚「ISEYAくん、WebhookとAPIのちがいってなんなん？」
ISEYA「うーん、、コードを書かないか、書くかのちがいとちゃいますかね:baby:」

そう、実際**私は雑魚**のためあまり腑に落ちていないので曖昧な表現で回答してしまいました。
しっかりと理解を深めるため、調べてみたが、
コードを書くか書かないかの違いは正解のようで不正解なようだ。

今日はそれを紹介していく。

## WebhookとAPIのちがい

##### 結論　自動か手動かのちがい

です。
じゃあ具体的に自動と手動ってどういう意味？について深堀していきます。

まず、APIの一例をシーケンス図にしてみました。
するとこんな感じ。

“`plantuml
クライアント->サーバー : リクエスト
クライアント<-サーバー : レス

【rails】モーダルウィンドウ実装【初心者向け】

# 初めてモールドウィンドウを実装したい人向け
rails初心者向けにできるだけ簡単な記述でモールドウィンドウを実装します。
基本的な部分も解説します。
私も初心者なので半分備忘録です。

今回実装するのは削除時の確認用モールドウィンドウです。
必要な機能に合わせて適時変更してください。

# 環境
私の開発環境です。
– ruby 2.6.5p114
– Rails 6.0.5
– jquery導入（rails6でのjquery導入はリンク参照：https://qiita.com/tatsuhiko-nakayama/items/b2f0c77e794ca8c9bd74）

# HTML
“`erb:body.html.erb
削除
<%# モールドウィンドウを展開するリンクを設置します。href属性は設定不要です %>
<%# classはボタン用のCSSを当てるために設定しています。 %>

<%# 以下削除選択時モーダルウィンドウ(デフォルトは非表示) %>

「読みやすいコード」とは結局何なのか

「良いコード」とは何か?コード品質の指標はいろいろありますが、「読みやすいコードは良いコードである」というのは、多くの人が一つの指標として認めるところでしょう。しかし、どのようなコードが読みやすいコードなのかは、なかなか答えの出ない問題でもあります。

今回は、筆者が考える「読みやすいコード」を紹介します。もちろん、これが唯一の解答であると主張するつもりはありませんが、もし参考になったり、共感していただけたなら、ぜひこの記事を他の方と共有してください。
## letとconst
JavaScriptやTypeScriptでは、変数を宣言する際にvar、let、constの3つの選択肢があります。varはJavaScriptの初期から存在し、letとconstはES2015で追加されました。varと他の2つには、スコープが関数スコープかブロックスコープか、同じ変数を再宣言できるかといった違いがあります。 letとconstは後から追加されたため優れており、varを使わずにこの2つのどちらかを使っても問題ありません。
letとconstの違いは、後者で宣言した変数は再代入できないことです。

【JavaScript】サイズ・座標 取得チートシート(chrom)

# サイズ

## clientTop / clientLeft / clientHeight / clientWidth

### clientTop
【概要】要素の上ボーダーのピクセル幅。上マージン、上パディングは含まれません。
【値】ピクセル(整数)
【書き込みの可否】読み込み専用

### clientLeft
【概要】要素の左ボーダーのピクセル幅です。 左マージン、左パディングを含みません。
【値】ピクセル(整数)
【書き込みの可否】読み込み専用

### clientHeight
【概要】要素内部の高さ。パディングを含みますが、水平スクロールバーの高さ・ボーダー・マージンを含まない。
【値】ピクセル(整数)
【書き込みの可否】読み込み専用

### clientWidth
【概要】要素内部の幅。パディングを含みますが、垂直スクロールバーの幅、ボーダー、マージンを含みません。
【値】ピクセル(整数)
【書き込みの可否】読み込み専用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

FlaskとAjaxで複数データをリアルタイムに更新する　～湯婆婆もあるよ～

# はじめに
今回の記事は私がこれまで知らなかった技術に出会って感動しつつ実装したものです。
ググればそれなりにヒットするので新規性を主張するつもりはありませんが、ニーズは確実にある一方で今回のやり方が定番であるとはとても思えません。
「そんな面倒くさいことしなくても○○を使えば一発じゃん」といった知見をお持ちの方はご教示願います。

# Ajaxで非同期通信
## Flaskの限界（下から目線で）
Flaskで動的にウェブページを作るには`render_template()`を使うのが普通だ（というか、それしか知らない）。だが、画面遷移するときはいいとしても、同一画面内である部分のみ変更させたいときにページをゼロから作り直すのはイマイチだと感じていた。
JavaScriptのようにhtml要素の一部のみ変更することはできないだろうか。そう考えて見つけた技術が**Ajax**だった。
これだよ、私がやりたかったことは。

https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9

## 湯婆婆ふたたび

かつて私は書いた。解読でき

io-tsの検証結果を検証元オブジェクトと同じ構造にして利用しやすくする

# io-tsの検証結果を検証元オブジェクトと同じ構造にして利用しやすくする
## 記事の対象
– io-tsでバリデーションや型ガードを行っている方
– fp-tsの基本的な使い方（関数合成など）を理解されている方

`pipe`関数や`Option`型などio-ts、fp-tsの基本的な部分は、以下で解説を行いません。
@kalzit様の[fp-tsでTypeScriptでも関数型プログラミング](https://qiita.com/kalzit/items/483e4d210c0c187787a8#4-either)などの記事を参照してください。

## 背景
– io-tsでオブジェクトを検証する際、エラーが発生したプロパティを特定したい。
– 例）フォームのバリデーション、型の検証など
– io-tsには、発生したエラーを出力する`PathReport.report`関数が実装されている。
– しかし、この関数は結果を文字列の配列で返すため、エラーの発生したプロパティを特定しにくい。
– 文字列をパースして特定する方法もある

webpackを使って既存のwebフレームワークにReactを動かしてみた

# Background
CDNのみでReactを動かそうとしたのですが、CDNが非対応のライブラリが多そうと思いました。それで、webpackを使ってひとつのjsファイルを出力してみようと思います。

# Motivation
WordCloudを表示させたい!!
[react-tagcloud](https://github.com/madox2/react-tagcloud)のパッケージを使います。

Demoページは[ここ](https://madox2.github.io/react-tagcloud/)。
慣れてくれば他のvisualize用のライブラリを使ってみようと思ってます。

# Method
1. プロジェクトを作成
1. 必要なパッケージをインストール
1. webpack

Amazon Echo dotで在室状況を把握する。

# 前書き
我が家には4台のAmazon Echo dotがあり、各部屋＋リビングに１台ずつ置いています。
少し前に、Amazon Echo dotが超音波で入室・退室時にアクションを起こせるようになったとニュースで見て、仕事中でもどの部屋に誰がいるのか確認出来たらと思い、実装しました。

ご指摘・ご質問あれば、コメントいただければと思います。

# 構成＆動作
以下に構成図と簡単な動作を示します。


Amazon Echo dotに人の入室・退室を検知すると、どこどこの部屋に入室 or 退室しました。と発話されたとするアクションを取る。
クラウド上にあるAlexaサービスで音声処理されて、登録しているエンドポイント（今回はheroku)に通知が行く。
通知された内容に従って、Firestore Database上のステータス（入室/

JSONServerを立ち上げてみた

Vueで簡単なアプリを作成するために必要となるJSONServerを立ち上げました。

ターミナルでnpm i json-serverを実行しインストール、サーバー用のディレクトリを作成してそこにjsonファイルを配置しました。

“`php:db.json
{
“todos”:[
{
“id”:1,
“text”:”Vueのプログラミング”,
“categoryId”:1
},
{
“id”:2,
“text”:”寝る”,
“categoryId”:1
},
{
“id”:3,
“text”:”買い物”,
“categoryId”:2
}
],
“categories”:[
{
“id”:1,

HTMLのcanvasでリバーシ（オセロ）ゲームを作る#1


　Qiita初投稿です。趣味で簡単なゲーム制作をしています。
　なんか記事を書いてみたいなと思ったので、需要があるかわかりませんが、HTMLのcanvasという要素でリバーシ（オセロ）を制作する方法を記事に残したいと思います。至らぬ点も多いかと思いますが、温かい目でご覧ください。あと、飽き性なので細々とやっていきます。

# 目次
– はじめに
– canvasについて
– 準備
– ボードの表示
– まとめ

# はじめに
　HTML5のcanvas要素を使うと、ブラウザ上に図形を自由に描画することができます。今回は、このcanvasを使ってリバーシを作る方法を紹介したいと思います。
　第一回にあたる今回はcanvasの紹介からボードの表示までを書きたいと思います。

# canvasについて
– canvasは以下のようにHTML内に記

CDNオンリーでReactを動かしてみた

これだけで良かった。

“`react