- 1. kintoneをjavascriptでカスタマイズしてみよう！
- 2. [ERROR] Could not resolve “@rails/request” を解決する！
- 3. 麻雀基本ライブラリを使ってみる
- 4. 【JavaScript】ES2023の新機能
- 5. JavaScriptで年月日をループ処理する
- 6. 【TypeScript】Utility Typesの型定義元を見て理解を深める
- 7. アロー関数の省略と向き合う
- 8. 配列の並び替え(降順) (JavaScript)
- 9. 配列の並び替え（昇順)(JavaScript)
- 10. 【第ニ章】Twitchのチャットボットを作る。～メッセージに反応する～
- 11. 【第一章】Twitchのチャットボットを作る。～Bot起動まで～
- 12. 自作ポートフォリオを作ってみた！
- 13. TypeScript(JavaScript)でString.format()ぽいことをするには
- 14. 初心者による初心者のためのJavaScript基礎３【関数】
- 15. PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から）
- 16. p5.js の WEBGLモードで Google Fonts の Webフォントを利用する（loadFont()を使って CDN から読み込む）
- 17. 住所自動取得(郵便番号全角入力対応)[Vus.js2]
- 18. 【学習サイト紹介】駆け出しエンジニアが学習してよかったもの5選（いろいろ）
- 19. a == 1 && a == 2 && a == 3を成立させる
- 20. 【Swift】WebKitでbackspaceを押すと前のページに戻る仕様の対処法
kintoneをjavascriptでカスタマイズしてみよう！
# はじめに
先日「[Kintoneで筋斗雲を呼ぶアプリを作ってみよう！](https://qiita.com/ryuji_i3/items/d767569655940943990d)」という記事を書かせていただきました。
今回は、javascriptを使ってKintoneを初めてカスタマイズしようと思っている方に向けての記事になります。私もKintoneを触っていたのは4年以上前なので、復習しながら書いていきたいと思います！
# 事前準備
カスタマイズするには、javascriptを書いてKintoneにファイルをアップロードする必要があります。javascriptを書くときは、コードを書く専用のエディタを使うのがおすすめです。コードを書いた事がない方は、専用のエディタを使うとなにが違うの？ と疑問に思うかもしれません。
例えば、以下のようなJavascriptのコードを用意したとします。“`
(() => {
‘use strict’;
// これはコメントです。スラッシュを先頭に二つ付けると
// プログラムとしては無視されます。
// メモを残してお
[ERROR] Could not resolve “@rails/request” を解決する！
# エラー内容
以下のようなエラーが出たときの解決方法を記録しておきます。
“`bash
$ docker-compose run –rm app yarn build
Creating rails7-bramee_app_run … done
yarn run v1.22.17
$ esbuild app/javascript/*.* –bundle –sourcemap –outdir=app/assets/builds –public-path=assets
✘ [ERROR] Could not resolve “@rails/request”app/javascript/controllers/***_controller.js:
2 │ import { FetchRequest } from “@rails/request”
╵ ~~~~~~~~~~~~~~~~You can mark the path “@rails/request” as ex
麻雀基本ライブラリを使ってみる
[電脳麻将](https://kobalab.net/majiang/) という麻雀アプリを開発しているのですが、基本となるライブラリを [@kobalab/majiang-core](https://www.npmjs.com/package/@kobalab/majiang-core) として [Node.js](https://nodejs.org/ja/) の [npm](https://www.npmjs.com/) パッケージとしました。
– シャンテン数計算
– 和了打点計算
– AI同士の自動対戦といったことが行えます。
APIのドキュメントは
– https://github.com/kobalab/majiang-core/wikiにあります。
ここでは使い方を簡単に説明します。
## インストール
作業用ディレクトリにインストールします。
“`shell
$ mkdir work
$ cd work
$ npm init -y
$ npm i @kobalab/majiang-core
“`## シャンテン数計算
手はじめにシャ
【JavaScript】ES2023の新機能
[ES2023](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367) / [ES2022](https://qiita.com/rana_kualu/items/8bafecd760ae69cfac41) / [ES2021](https://qiita.com/rana_kualu/items/ae3297dd2974fcf047c4)
2023年一発目ということで、[ES2023](https://github.com/tc39/proposals)に[Finished Proposals](https://github.com/tc39/proposals/blob/main/finished-proposals.md)として取り入れられた機能を見てみましょう。
ちなみにFinished Proposalは「複数の実装が既に存在する」が前提なので、2023という名前にもかかわらず既に一部のブラウザで使用可能です。
というかES2023の新機能は全てのモダンブラウザで既に使用可能です。# ES2023
# [
JavaScriptで年月日をループ処理する
# はじめに
日付をループ処理する機会があったため自身の備忘録として簡単にまとめておきたいと思います。
今回はfor文で配列を作成しようと思います。# 日間をループさせる
今日は2023年1月1日ですので2022年12月1日から今日までの約1ヶ月間の日付配列を作ってみます。実装したコードは以下の通りです。
“`js
const now = new Date();
const OLDEST_DATE = new Date(2022, 11, 1)const resultDates = [];
for (let date = OLDEST_DATE; date <= now; date.setDate(date.getDate() + 1)) { resultDates.push(new Date(date)); } ```
まず初めに”now”として今日の日付を、”OLDEST_DATE”でループを開始する始めの日付を設定しておきます。
“`js
const now = new Date(); // 今日の日付
const OLDEST_DATE
【TypeScript】Utility Typesの型定義元を見て理解を深める
### はじめに
TypeScriptには組み込み型関数である`Utility Types`があります。その型定義元の中身がどうなっているかを見ていこうと思います。
### Partial
“`TS
/**
* Tの全てのプロパティをオプションにする
*/
type Partial= {
[P in keyof T]?: T[P];
};
“`
引数で渡された型`T`を`Mapped Types`を使って、分解し再定義しています。具体的には、`T`のプロパティを`in`と`keyof`を使って、順番に`P`に代入し、`?`(オプショナル)をつけてオプションにしています。
そして、その値の型を`T[P]`で取り出し再定義しています。### Required
“`TS
/**
* Tの全プロパティを必須にする
*/
type Required= {
[P in keyof T]-?: T[P];
};
“`こちらも先ほどの`Partial`と同様に`Mapped Types`を使って、分解し再定義しています。
違う点と
アロー関数の省略と向き合う
普段から使うことの多いアロー関数の省略について、ざっと省略の仕方をまとめました。
# 1.省略しない場合と省略した場合の比較
例として、渡された数値を2倍にして返す関数を考えます。
**before**
“`js
const doubleNumber = (number) => {
return number * 2;
}
“`
**after**
3行あったコードが1行で記述されています。
“`js
const doubleNumber = nubmer => number * 2;
“`
上記のようなコードは、Javascript開発に携わっていると、親の顔より見た光景になると言っても過言ではありません。
見慣れてしまえば、なんのことはないのですが、なれていないと「??」と戸惑うこともあるかもしれません。では、どのような省略の過程を経て3行が1行になったのか見てみます。
# 引数のカッコの省略
まずは引数周りです。**before**
“`js
(number)
“`
↓
**after**
“`js
number
“`
引数に注目してみると
配列の並び替え(降順) (JavaScript)
JavaScriptで配列を降順に並べる方法です。
“`HTML
配列の並び替え
【第ニ章】Twitchのチャットボットを作る。～メッセージに反応する～
# 前回
前回はTwitchトークンを取得して、Bot起動までやった。https://qiita.com/suzuki3_jp/items/bb59941f79f029a67ca2
# 現在のコード
```js:index.js
const { TwitchClient } = require("@suzuki3jp/twitch.js");// クライアントのオプション定義
const authOptions = {
accessToken: "token",
refreshToken: "refresh token",
clientId: "client id",
clientSecret: "client secret",
};
const clientOptions = { channels: ["hoge"] };// クライアント定義
const client = new TwitchClient(authOptions, clientOptions);// readyイベント
client.on("ready", () =>
【第一章】Twitchのチャットボットを作る。～Bot起動まで～
# はじめに
こんにちは、鈴木と申します。
今回は自分が[twurple](https://twurple.js.org)を拡張して作った、`@suzuki3jp/twitch.js`というパッケージを使って、Twitchのチャットボットを作ってみようと思います。
**npmに公開されているパッケージ名は`@suzuki3jp/twitch.js`ですが、長いので以降`twitch.js`と呼びます**この記事はJavaScript, Node.jsがある程度わかる方向けの記事です。
# twitch.js ってなに？
twitch.jsは下記のような特徴を持つNode.jsのパッケージです。
- [twurple](https://twurple.js.org)を拡張して、使いやすく・わかりやすくしてある。
- [discord.js](https://discord.js.org/#/)を参考に作られた。
- そのため、discord.js使用者には使いやすい構造
# Twtichアカウントのセットアップ
今回の本題はチャットボットを作ることなので詳しくは触れません。各
自作ポートフォリオを作ってみた！
# 経緯
時間があり軽めのストレスが溜まっている時は、
現実逃避として本業以外のプログラミングに手を出しています。ponです。今回は帰省先でコロナの濃厚接触者になってしまったため、やらないとなぁと思って放っておいていたポートフォリオを３日ほどで作成しました。
# 完成図
gifにしたかったのですが、なぜかうまくいかず、写真を載せています。
https://ponponnsan.github.io/portfolio/
# 参考サイト
下記のサイトは、私のような初心者にとってはとても実装しやすく
そしてスキルの部分がわかりやすいところが魅力的なため、
今回のポートフォリオの土台として採択しました。https://nsuzuki7713.github.io/portfolio/
私は天体観測や星が好きなため、背景
TypeScript(JavaScript)でString.format()ぽいことをするには
# はじめに
コードだけさっさと知りたい方は[TypeScriptでの実装](#typescriptでの実装)までジャンプしてください
## 経緯
以下にあるように、C#やJava, Pythonには当たり前のように組み込まれている`String.format()`はTypeScriptには存在しない(らしい)
[テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)と呼ばれるものを使えば似たようなことはできるが、ログ出力なんかを考えると、`format()`みたいなのが使いたい時があるんですよね```js
const name = 'taro', age = 21
console.log(`name: ${name}, age: ${age}`)
// -> name: taro, age: 21
```https://qiita.com/yanchi4425/items/e24769f1ede8a983dca0
上記記事だと`Strin
初心者による初心者のためのJavaScript基礎３【関数】
# 目次
[1. 関数とは](#1-関数とは)
[2. 関数宣言](#2-関数宣言)
[3. 関数リテラル（関数式）](#3-関数リテラル関数式)
[4. 即時関数](#4-即時関数)
[5. アロー関数](#5-アロー関数)
[6. JavaScript基礎シリーズ](#6-javascript基礎シリーズ)
[7. 参考記事](#7-参考記事)# 1. 関数とは
やりたい処理をまとめて実行することができる命令のことです。
引数 ・・・ 処理する際に渡す値
返り値（戻り値）・・・ 返却される処理の結果JavaScriptにはすでに定義されている関数がありますが、関数を自分で定義することができます。
ここでは関数を定義する方法を紹介したいと思います。# 2. 関数宣言
JavaScriptでは、`function`を使って関数を定義します。
```jsx
function 関数名(引数1, 引数2, …) {
// 処理内容
return 戻り値;
}
```このように定義する方法を関数宣言といいます。
引数は無しでも複数記載しても定義することができます。
PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から）
## はじめに
この記事では、p5.js で [PixiJS](https://pixijs.com/) の描画を使うことを目的とし、その下準備として PixiJS の描画を p5.js Web Editor上で行うということをやります。### 過去に行ったこと
以前、以下のような記事を書いたことがありました。●p5.js Web Editor上で PixiJS の「ノイズ・色彩・ブラーのフィルタ」を組み合わせて使ってみる - Qiita
https://qiita.com/youtoy/items/1180c80b91064d4e043dこの時は、p5.js側でキャンバスを用意して、それを PixiJS で利用するやり方にしていました。
しかし、その方法が最適なのかが分かっていません。それとは別のやり方も試してみるという意味で、今回は、PixiJS側で描画領域を用意する形（それを p5.js で読み込むという別のやり方）で試してみることにしました。## PixiJS を使った描画
ここから、PixiJS を使ったプログラムを書いていきます。### ライブラリを読
p5.js の WEBGLモードで Google Fonts の Webフォントを利用する（loadFont()を使って CDN から読み込む）
以下の記事で扱った内容とキーワード的には少し共通点がある、Google Fonts の Webフォントに関する記事です。
●【完走賞ゲット-1】p5.js Web Editor で Google Fonts の絵文字の Webフォントを利用する - Qiita
https://qiita.com/youtoy/items/34920d8a49f45653d77aただし、今回の記事の内容は、上記の記事の内容とは違っているところがあります。
上記では、HTMLファイルで Webフォントを読み込んでいましたが、この記事では、JavaScript の中で Webフォントを読み込むやり方になります。それに関して、この後に書いていきます。## プログラム
それでは、まずは今回のテスト用に作ったプログラムを掲載します。
ここで JavaScript で Webフォントを読み込んでいますが、そこで利用しているのは `fonts.gstatic.com` に置かれた OpenTypeフォントです。```javascript
let myFont;function preload()
住所自動取得(郵便番号全角入力対応)[Vus.js2]
### 環境
| | バージョン |
| ---- | ---- |
| Vue.js | 2.7.14 |
| axios-jsonp| 1.0.4 |### 使用API
郵便番号-住所検索API
https://zipaddress.net/### レスポンス内容
| キー | バリュー |
| ---- | ---- |
| pref | 都道府県名 |
| city | 市区町村名 |
| town | 町域名 |
| address | cityとtownを結合したもの |
| fullAddress | 都道府県+市区町村+町域名 |### 全角→半角を変換用の関数を用意
```js
//全角英数記号を半角に変換する
const replaceToHalfWidth = strVal => {
var halfVal = String(strVal).replace(/[！-～]/g, function (str) {
return String.fromCharCode(str.charCodeAt(0) -
【学習サイト紹介】駆け出しエンジニアが学習してよかったもの5選（いろいろ）
# 【学習サイト紹介】駆け出しエンジニアが学習してよかったもの5選
作成日 2022/12/31
## 目次
> [はじめに](#はじめに)
> [1 Progate && ドットインストール](#1progateドットインストール)
> [2 Gmailの自動振り分けのサイト](#2gmailの自動振り分けのサイト)
> [3 しまぶーのIT大学](#3しまぶーのit大学)
> [4 サバイバルTypeScript](#4サバイバルtypescript)
> [5 Qiita/Zenn](#5qiitazenn)
> -- [実践Docker − ソフトウェアエンジニアの「Dockerよくわからない」を終わりにする本](#qiitazennの投稿記事1つ目)
> -- [リーダブルコード要約とリーダブルコード要約の活用方法](#qiitazennの投稿記事2つ目)
> -- [知らないと恥ずかしいコードレビューで指摘されがちなポイント14選](#qiitazennの投稿記事3つ目)
> [おわりに](#おわりに)***
## はじめに
こんにちは,約3ヶ月間独学でプログ
a == 1 && a == 2 && a == 3を成立させる
# 初めに
この記事は前回の記事の[ゼロ幅を利用した難読化](https://qiita.com/ikesou/items/033c4afbdec3c4ea0323)の小ネタの内容です。javascriptの == を利用した比較は以下のとおりに評価が行われます。
この評価方法を利用して条件を成立させます。
# 成立させる方法
### 1. ToPrimitiveの動作を利用
```js
var a = {
value : 1,
valueOf: function () {
return this.value++;
}
};
if (a == 1 && a == 2 && a == 3) {
console.log('ok');
} else {
console.log('no');
}
// ok```
【Swift】WebKitでbackspaceを押すと前のページに戻る仕様の対処法
# はじめに
タイトルの通りです。
MacApp開発時に見つけた問題ですがiPadでキーボード接続時にも起きると思います。(未検証)タグに`JavaScript`とあるようにjsを使って解決します。
swift側で解決する方法があれば教えてください。# 実行環境
- `MacOS 13.1`
- `Xcode 14.2`
- `swift 5.7.2`# ソースコード
```Swift:NavigationDelegate.swift
// "WebViewController"は各自命名したclassに合わせて変更してください
extension WebViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
webView.evaluateJavaScript("document.addEventListener('keydown',function(a){var b=a.targ
