- 1. 自作 isEmpty が意外と難しかった件
- 2. 【スケジューラ】自分の投稿したQiita記事の情報をAPIから取得してみる
- 3. React + TypeScript: Immerで状態をイミュータブルに保つ
- 4. JavaScript returnについて
- 5. 【FormBridge】ドロップダウンの選択肢を動的に変更する
- 6. Python,JavaScript,PHP,Ruby,Perlの入門の比較
- 7. 【JS / TS】分割代入のレスト構文ってなに？（スプレット構文とは違うよ編）
- 8. 初めてのウェブサービスに縦書きエディタを選んだ理由
- 9. JavascriptでAuth0の認可を実装してみた
- 10. BufferとTextDecoderの微妙な差
- 11. JavaScript：0で始まる数値の扱い
- 12. OpenseaでNFTに「無限いいね」するツールをリリースしました。
- 13. JavaScriptの生みの親「自動セミコロン挿入やめときゃよかった……」
- 14. JavaScriptで長くなりがちな条件式を簡潔にまとめるって話
- 15. 【海外イベント紹介】 The next generation of Jamstack is less JS! by Yang Zhang
- 16. Python,JavaScript,PHP,Ruby,Perlの基本文法の比較
- 17. 【JavaScript】カーソルの移動速度によってツールチップの表示を制御する。
- 18. Vue.jsでinputタグを用いた入力文字の字数カウント
- 19. JavaScript + Immer: データ構造をイミュータブルに保つ ー 使うのはイマでしょ！
- 20. ‘foo@example.com’.match(/\x{email}/)
自作 isEmpty が意外と難しかった件
# とにかく empty
– undefined
– null
– []（Arrayの要素0）
– {}（Objectのメンバーなし）
– ”（空文字）javascriptには様々な型（値）がありますが、四の五の言わず empty として判定したい！
# isEmpty（最終版）
“`javascript: util.js
const isEmpty = (obj) => {
if (‘number’ === typeof obj) {
return false
}return (!obj ? true : (0 === Object.keys(obj).length))
}
“`## 実行結果（isEmpty）
“`
let aaa
console.log(‘isEmpty’,typeof(aaa),String(aaa),’=’, util.isEmpty(aaa))
aaa = null
console.log(‘isEmpty’,typeof(aaa),String(aaa),’=’, util.isEmpty(aaa))
aaa
【スケジューラ】自分の投稿したQiita記事の情報をAPIから取得してみる
今回は、Qiitaに投稿した記事のView数をQiita APIから取得し、SQLデータベースに保管するスケジュールタスクを作成してみます。
### データベースの準備 ###
SQL Management Studioで空のデータベースを作成する。
### テーブルの作成 ###
下記のCREATE文で作成しました。
**Code**をユニークなキーとします。
“`
CREATE TABLE [dbo].[posted_items](
[row_id] [int] IDENTITY(1,1) NOT NULL,
[code] [varchar](1024) NOT NULL,
[title] [varchar](1024) NOT NULL,
[page_view_count] [int] NOT NULL,
[create
React + TypeScript: Immerで状態をイミュータブルに保つ
[Immer](https://immerjs.github.io/immer/)はデータ構造をイミュータブル(不変)に保つためのライプラリです。React公式ドキュメントでもおすすめされています(「[Write concise update logic with Immer](https://beta.reactjs.org/learn/updating-objects-in-state#write-concise-update-logic-with-immer)」参照)。また、2019年にはつぎのような賞を獲得しました。
* [Breakthrough of the year](https://osawards.com/react/2019) ー React open source award
* [The Most Impactful Contribution to the community](https://osawards.com/javascript/2019) ー JavaScript open source awardImmerはイミュータブルなデータ構造を用い
JavaScript returnについて
returnを理解するのは難しくまだまだ勉強中ですが、基礎を私なりにまとめてみました。
「値を返す」と「戻り値」の関係性は下記画像参照。
# returnとは
私なりの言葉で伝えると ”形にする” です！
例えば学校のテストで「１＋１」の問題が出たときに、頭の中で答えを思い浮かべるだけでは0点です。
ではどうやって点数を取るか・・・。それはテストの解答欄に「2」と記述すれば取ることができます。つまり「return」はプログラミング上の、「テストの解答欄に記述する作業」だと思ってくれれば理解しやすいかなと思います！
頭の中で答えを思い浮かべただけの作業例２選！
“`main.js
function sum(a, b) {
a + b;
}
const sum1
【FormBridge】ドロップダウンの選択肢を動的に変更する
## はじめに
FormBridgeのプルダウンの選択肢をkintoneから取得して生成する方法をご紹介します。
また、選択した値によって下の階層の選択肢の値を絞り込むという仕様も入れます。
FormBridgeでも選択した値によって絞り込むという設定は可能ですが、管理が手間となるため選択肢となるデータはkintoneで保持する方法を取り入れました。こちらのようなイメージです:information_desk_person_tone1:
## コード
“`javascript
‘use strict’;// kViewerのURLを記載
const kvOrganizationData = ‘https://~~’;// kViewerから取得したデータを入れる配列
let organizationData = [];(fun
Python,JavaScript,PHP,Ruby,Perlの入門の比較
Python,JavaScript,PHP,Ruby,Perlの入門の比較
# Python
https://qiita.com/ponnhide/items/870f0e6b1ae50f201f07
# JavaScript
https://qiita.com/ab-boy_ringo/items/23f60e051e3022f2a599
# PHP
https://qiita.com/mackeyTA/items/069900b5c2366fb30e3a
# Ruby
https://qiita.com/oekazuma/items/6daa19248353c6a81146
# Perl
https://perlzemi.com/
【JS / TS】分割代入のレスト構文ってなに？（スプレット構文とは違うよ編）
# 1.はじめに
分割代入の第4段の記事になります。今回は、分割代入のレスト構文編の記事となります。
[オブジェクト編](https://qiita.com/daishiman/items/5acf803f252b82f970fe) 、[配列編](https://qiita.com/daishiman/items/324dcc0eae72eb6b13cf)、[複雑な分割代入編](https://qiita.com/daishiman/items/d382279a2a6cae3ea1aa) と分割代入の記事を書いてきましたが、
本記事は、配列編と複雑な分割代入編の間の位置づけになります。間違って解釈している所ありましたら、ご指摘いただけますと幸いです。
レスト構文に似た [スプレッド構文](https://qiita.com/daishiman/items/42ba60a223cadbd98104) の記事も書いていますので、
他の記事も見て頂けると、うれしいです。# 2.目次
[1. はじめに](#1はじめに)
[2. 目次](#2目次)
[3. この
初めてのウェブサービスに縦書きエディタを選んだ理由
# 1.はじめに
初めまして。55歳を過ぎてWebの勉強を始め、このほど初めてウェブサービスをデプロイしました。開発したのは、ブラウザ上の原稿用紙とでもいいましょうか、[縦書きエディタ](https://genko.herokuapp.com/)です。
# 2.なぜ縦書きエディタ？
なぜ縦書きエディタかというと、GIGAスクールが関係しています。学校現場に配布される児童・生徒１人１台端末は、手軽さなどからChromebookが採用されるケースが多いのですが、文書を作成するツールは、GoogleドキュメントなどのGoogle系ツールが主体です。Google系ツールには縦書き機能がなく、日本語を教える国語の先生は大変困っています。
教育現場で使われているにもかかわらず、日本語を縦書きできる環境がないのは教育の根幹にかかわる問
JavascriptでAuth0の認可を実装してみた
# はじめに
認証認可のシステムを社内で実装する手間を避けるために、SaaSを使用することも多いかと思います。この手のツールの中でもyoutubeに日本語関連の動画が少なかったAuth0について実際にコードから使用してみようというのが今回の記事になります。
対象読者は認証認可サービスに興味がある人なら誰でもOKです。
まず前提知識としてこれらの認証認可のサービスがどんなことをやるのかを頭に入れておく必要があります。私は以下の記事を一読し、似た単語などをGoogleで調べるなどして勉強してみました。
https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be
https://qiita.com/TakahikoKawasaki/items/498ca08bbfcc341691fe
ただ、ここまでは実装方式のホワイトペーパーを見ているにすぎないため、実際のサービスであるAuth0を叩いてみましょう。
今回やるのは以下です。
大目標「フロントアプリから適当なユーザでログインを行い、そのユーザの権限を使ってAPIへ
BufferとTextDecoderの微妙な差
Node.jsの標準で存在する`Buffer`と、WHATWG発祥の`TextDecoder`でそれぞれバイト列をUTF-8として解釈できますが、微妙に結果が違うことに気づきました。
## TL; DR
* 正当なUTF-8となるバイト列であれば、`Buffer`と`TextDecoder`の結果に差は出ない
* 途切れたマルチバイト文字の解釈で、生成される`�`（U+FFFD）の数が違う
* この挙動差に依存するコード自体に嫌な雰囲気を感じる一方、`Buffer`の挙動のほうが一貫している印象を受けた## 気づいたきっかけ
`Buffer`で書かれたコードを`TextDecoder`に直したところ、テストがコケてしまいました。テストの状況を確認してみたところ、正常系では特に問題がなかったのですが、正しくUTF-8として解釈できないコードで、`�`（U+FFFD）の個数が違っていました。
## UTF-8の構造
正しくないコードについて語るために、ここでUTF-8の構造について整理しておきます。日本語用のシフトJISやEUCでは、1バイト目と2バイト目で同じバイトを使って
JavaScript：0で始まる数値の扱い
JavaScriptで0で始まる数値を扱う際、ハマったので書き残す。
– 以下は期待通り
“`javascript
let $num1 = 0800
let $num2 = ‘0800’
console.log($num1 === Number($num2)) // true
“`– 以下が想定外
“`javascript
let $num3 = 0700
let $num4 = ‘0700’
console.log($num3 === Number($num4)) // false
console.log(Number($num3)) // 448
console.log(Number($num4)) // 700
“`なぜ？
> 0(ゼロ)で始まる数字は、後に続く数字がすべて 0～7 であれば 8進数として、8～9 を含んでいれば10進数として解釈されます。
https://www.tohoho-web.com/js/number.htmそうなんだ、、、
OpenseaでNFTに「無限いいね」するツールをリリースしました。
なんということでしょう！
### 我々はついにブラックホールの生成に成功し、さらにタイムマシンをリリースするまでに至ったのです。
ここまで非常に長い道のりでした。
—–
ぜひともみんなにツールを見てもらいたいから、まずはリンクを貼らせてください。
**OpenseaNFT用 無限いいねツール その名も「[OpenShit](https://sigr.io/)」**
OpenShitリンク：https://sigr.io/
ちなみに前回の記事ではツールを作成するまでの技術的な事を書いています。
**【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話**
すべてJavaScriptとNod
JavaScriptの生みの親「自動セミコロン挿入やめときゃよかった……」
末尾セミコロンはしばしば宗教戦争になりますね。
Qiitaでもその他のSNS等でも、そのようなバトルはいくらでも見つかります。しかし意外にも、この戦争の原因を大本まで辿ってる人はほとんど見当たりません。
見つけたものでは[この人](https://blog.tai2.net/automatic_semilocon_insertion.html)(と、この記事を参照している記事)くらいでした。以下は、JavaScriptの末尾セミコロンについて、JavaScriptの生みの親である[Brendan Eich](https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AC%E3%83%B3%E3%83%80%E3%83%B3%E3%83%BB%E3%82%A2%E3%82%A4%E3%82%AF)による見解、[The infernal semicolon](https://brendaneich.com/2012/04/the-infernal-semicolon/)の紹介です。
なお2012年の記事なので、存在しないリンクや古くなった知見が含ま
JavaScriptで長くなりがちな条件式を簡潔にまとめるって話
コードを書いていると、if文の条件式が長くなることはありませんか？
よくあるのが、ユーザ権限まわりの分岐ですかね～
この権限とこの権限はこっちの処理するみたいなやつ！そんな時は、`Array.includes()`を使うとスッキリ読みやすいコードを書くことが出来ます！！
## まずは読みづらいコード?
“`js
if (authority === ‘DOG’ || authority === ‘CAT’ || authority === ‘MONKEY’ || authority === ‘RABBIT’) {
// ????の処理
} else {
// その他の処理
}
“`## Array.includes() を使って読みやすくする?
“`js
const authList = [‘DOG’, ‘CAT’, ‘MONKEY’, ‘RABBIT’]
if (authList.includes(authority)) {
// ????の処理
} else {
// その他の処理
}
“`## 変数に判定結果をスッキリ格納できる
【海外イベント紹介】 The next generation of Jamstack is less JS! by Yang Zhang
今回は、「Jamstackカンファレンス 2021」で行われたプレゼンテーションから、「The next generation of Jamstack is less JS!」の内容をご紹介します:loudspeaker:
10年以上の歴史を持つ「Jamstackカンファレンス」は、Jamstackの生みの親であるクラウドコンピューティング企業「Netlify」が主催。世界中の開発者が集い、Jamstackをコンセプトとした最新のWebサイトの設計、開発などについて話し合います。プレゼンテーションの言語は英語ですが、本ブログでは日本語でご紹介します。
>目次
サイトのパフォーマンスとユーザーアクションの関係性
肥大化するJavaScript
解決策
>1. サーバー側でレンダリングするフレームワークを使用する
>2. クライアント側でレンダリングするフレームワークを使用する
>① marko
>② astro
>3. React次期バージョン
>最後に今回の講演者は「Plasmic」の開発に携わったYang Zhang氏。（Plasmicは、コンテンツを迅速に作成するための強力
Python,JavaScript,PHP,Ruby,Perlの基本文法の比較
Python,JavaScript,PHP,Ruby,Perlの基本文法の比較
# Python
https://qiita.com/AI_Academy/items/b97b2178b4d10abe0adb
# JavaScript
https://qiita.com/Fendo181/items/cca476da99e8f09b6b97
# PHP
https://qiita.com/shosho/items/ffbb44eeec9d68b21d99
# Ruby
https://qiita.com/Fendo181/items/eb2cb17f32d99aa01f59
# Perl
https://perlzemi.com/blog/20091226126425.html
【JavaScript】カーソルの移動速度によってツールチップの表示を制御する。
## 実装仕様
以下のように、ボタン上を追加するマウスカーソルのスピードによってツールチップを出すか出さないかを制御する実装を行います。
### 実装の考え方
マウスがボタン上に乗ったら、一定時間ごとのマウスの移動距離を計測します。移動距離が基準値以上の場合（素早く移動している場合）ツールチップは表示させません。
さらにマウスが移動し、移動距離が基準値以下になった場合（ゆっくり移動している場合）はツールチップを表示させます。
一度、ツールチップが表示されたら、以後はボタンからマウスが外れるまで表示しっぱなしとなるため距離計測はしません。# Vue.jsでinputタグを用いた入力文字の字数カウント
## ① v-onディレクティブの利用
v-onディレクティブを用いることで、イベント発火時の JavaScript の実行が可能になります。
例えば
“`
//v-on:イベント=”関数”
“`
と記述すると、ボタンクリック時にhello関数が実行される。## ②イベントにkeyupイベントを記述する
keyupイベントは**keyが離されたタイミングで発火するイベント**です。
→テキストに文字が打たれてキーが離れたタイミングでイベントを発火させるのに利用します。
“`
“`
※@は「v-on:」の代わりに使えるものです
keyupイベントによく似たものにkeydownイベントがあります。そのイベントはkeyが押されたタイミングで
イベントが発火します。## ③文字数をカウントし、表示する関数を作成する
実際に文字数をカウントし、表示する
JavaScript + Immer: データ構造をイミュータブルに保つ ー 使うのはイマでしょ！
[Immer](https://immerjs.github.io/immer/)はデータ構造をイミュータブル(不変)に保つためのライプラリです。React公式ドキュメントでもおすすめされています(「[Write concise update logic with Immer](https://beta.reactjs.org/learn/updating-objects-in-state#write-concise-update-logic-with-immer)」参照)。また、2019年にはつぎのような賞を獲得しました。
* [Breakthrough of the year](https://osawards.com/react/2019) ー React open source award
* [The Most Impactful Contribution to the community](https://osawards.com/javascript/2019) ー JavaScript open source award“[immer](https://kotob
‘foo@example.com’.match(/\x{email}/)
https://twitter.com/kazuho/status/1558592627234447361
文字クラス拡張すると車輪の再発明防げるかなと思い拡張してみました。
https://github.com/GitHub30/cc-regex
[](https://badge.fury.io/js/cc-regex)
## 使い方
### メールアドレス
“`javascript
‘foo@example.com’.match(/\x{email}/g)
// [‘foo@example.com’]
“`### URL
“`javascript
‘https://example.com/foo/bar’.match(/\x{url}/g)
// [‘https://example.com/foo/bar’]
“`### 都道府県
“`javascript
‘島根県にパソコンなんてあるわけないじゃん’.match(/\x{都道府県}/g)
//
