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

Splideをスライダーの新たな定番としたく

# はじめに

Webページ制作において、スライダーの登場頻度は異常に高いですよね。
cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。

その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。

そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。

そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、[**slick**](https://kenwheeler.github.io/slick/)と[**Swiper**](https://swiperjs.com/)でしょう。

https://kenwheeler.github.io/slick/

https://swiperjs.com/

—

そこに第三の選択肢として、[**Splide**](https://ja.splidejs.com/)**を推したい**のです。

https://ja.splidejs.com/

Qiitaで「S

テスト

テスト記事です

Androidアプリで端末の位置情報を取得する

#はじめに
Androidアプリで、Cordovaプラグインを使用して端末の位置情報を取得する。

#コード
最終的なコード

“`typescript
document.addEventListener(“deviceready”, function(){

let permissions = window.cordova.plugins.permissions;
permissions.requestPermissions(
[
permissions.ACCESS_FINE_LOCATION
,permissions.ACCESS_COARSE_LOCATION
]
,function( status ){
if( status.hasPermission ){
navigator.geolocation.getCurrentPosition(
function(position) {
let latitude = position.coords.la

moment.jsで「〜時間前」を表示させる

#はじめに
moment.jsを使用して、指定時刻から計算して「〜日前」「〜時間前」を表示させる。

#moment().fromNow()
###import
“`
import Moment from ‘moment’;
“`
指定した時刻から現在の時刻までの差を計算する。

“`javascript
Moment(‘2020-01-01T10:10:30.900Z’).fromNow();
“`

#言語を設定する
このままでは「〜hour ago」など英語で表示されるので、言語を設定する。

“`javascript
Moment.locale( ‘ja’ );
“`

#時差をなくす
このままでは、UTC(世界標準時間)が適応され、日本からは＋9時間の時刻が表示される。
moment-timezoneを使用する。

###install
“`
npm install moment-timezone
“`

###import
“`javascript
import MomentTimezone from ‘moment-timezone’;
“`

###

Vue.js + moment.jsで、時刻をリアルタイム更新する方法

#はじめに
Vue.jsとmoment.jsを使用して、時刻をリアルタイムで更新する時計を作る。
本文ではTypeScriptを使用。

#moment.jsをインストール
“`
npm install moment
“`
#開発コード
インポートする。

“`javascript
import Moment from ‘moment’;
“`

###Moment().format()を使用
表示形式は自由に選択できる。

https://qiita.com/taizo/items/3a5505308ca2e303c099

“`javascript
time = Moment().format(“YYYY-MM-DD HH:mm:ssZ”);
“`

###setIntervalを使用
createdの中にsetIntervalを入れる。1秒毎に新しい時刻を取得。

“`javascript
created() {
setInterval(() => {
this.time = Moment().format(“YYYY-MM-DD HH:mm:ssZ”

Javascript 配列の破壊的メソッドと非破壊的メソッドに注意して配列操作を行う

### 配列の破壊的メソッドと非破壊的メソッドとは

### 非破壊的
元の配列を変更する
###### メリット
一つの配列を操作するためメモリの消費を抑えれる
###### デメリット
元の配列を変化させるため使いすぎたり、複雑な場合はバグの温床になりやすい
***

### 破壊的
元の配列を変更しない
###### メリット
元の配列を操作しないため安全なコードを書ける
###### デメリット
配列を新たに作り出してしまうため、大規模な配列操作に対してはメモリを大量に使う
***

実際のCodeを使った例
##### 1.破壊的メソッド push

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push
“`js
const arrayA = [‘あ’, ‘い’, ‘う’, ‘え’, ‘お’]
//破壊的メソッド arr.push([element1[, …[, elementN]]])
arrayA.push(‘か’)
console.log(

WordPressの特定のフォームに数字以外を入力させないようにする方法

フォームに数字以外を入力したくない時ってありますよね？
クライアントからの依頼で、これに対応しようとして、散々苦労したことがありましたので、こちらにメモしておこうと思います。

普通に考えると…
0123456789だけを入力できるようにすればいい！

ってなるんですが、実はこれだけでは、「全角入力」のキーはすべて素通りで入力できてしまいます。

# 概要
## ●input type属性はtelにする
これにより、スマートフォンでは数字以外が入力できなくなります。
（ただしコピペされたら素通り）

## ●jQueryで全角入力を制御する。
これにより、PCで半角数字以外が入力された時に弾きます。

input type属性をnumberにしない理由　その１
number属性だと、スマートフォンではなんでも入力できてしまいます。

input type属性をnumberにしない理由　その２
パソコンで、↑、↓を押してしまうと値が変わってしまいます。

## jQueryで全角入力を制御
下記のようなコードを入力します。
#formfieldidは環境に合わせて書き換えてください。
記

Javascript GitHubトレンドデイリーランキング!!【自動更新】

GitHub Trending をキャッチアップする習慣をつけて、強強エンジニアになろう。
この記事では、Javascript のGithubのトレンドデイリーランキングを25位まで紹介します。

# トレンドデイリーランキング

## 【1 位】 Anduin2017/HowToCook
https://github.com/Anduin2017/HowToCook

? ***30,632*** star
程序员在家做饭方法指南。Programmer’s guide about how to cook at home (Chinese only).

## 【2 位】 appwrite/appwrite
https://github.com/appwrite/appwrite

? ***18,233*** star
Secure Backend Server for Web, Mobile & Flutter Developers ? AKA the 100% open-source Firebase alternative.

## 【3 位】 ToolJe

NoodlのScript(Javascript)ノード変更点(2.1.0以降)

## はじめに
Noodlのバージョンが上がりScriptノード(以前はJavascriptノードと呼ばれていました)で使うJavascriptの書き方が変更されています。
ここではバージョン2.5.xを対象として、Scriptノードの使い方について[公式ドキュメント](http://docs.noodl.net/#/guides/javascript)を元に解説していきます。


## 概要：Scriptノードとは
NoodlではScriptノードを使うことでJavascriptコードを直接記述することが可能です。Scriptノードから他のJavaScript APIにアクセスすることもできます。
Scriptノードは他のノードに接続することができる入力・出力があるので、通常のNoodlノードと同じように動作します。

vue3とlaravel8でリアルタイムチャット機能を実装

## はじめに
今回は、Pusherを使ったリアルタイムチャット機能を実装していきます!!

この記事の目標は、ブラウザを２つ開いて片方からチャットを送るとリロードしなくても自動更新される簡単なリアルタイムチャット機能を目指します!

#### 実行環境
Vue : 3.0.5
Laravel : 8.63.0
## まず簡単なチャット機能を作る(リアルタイムではない)
今回の本題は、リアルタイムということなのでここはサクッと進みたいと思います。
#### テーブルとモデルの作成
まずチャットのメッセージを保存するためのテーブルを作ります。
“`c#:コマンド
php artisan make:model Message
php artisan make:migration create_messages_table –create=messages
“`
“`c#:src/database/migrations/2022_03_00_000000_create_messages_table.php
public function up()
{
Schema::crea

【LINE BotをAPI連携させたいだけなのに #1】エラー祭りへようこそ

# LINE Botを思い通りに動かしたーい！！
LINE Botでプッシュメッセージとリプライメッセージ（おうむ返しと固定テキスト）返すところまではできた。（やっとのことで。息も絶え絶えで。）
そして息切れしながら向かった先は、
## 脳みそに新たなひらめきをくれるAPI連携Botが作りたい
仕事ではプランナーとして企画制作の1000本ノックを日々行い、大学院ではアート作品を作る私。__煮詰まった時に脳みそをリフレッシュさせたい！自分の思考の外から新たな風がほしい！！__
そんな時のお助けアイテムとして、**「デザインに関してのインスピレーションを与える名言」** というステキAPIからお言葉を頂戴しようと思った。

### まずは単純なオウム返しBot
“`php5
‘use strict’;

const express = require(‘express’);
const line = require(‘@line/bot-sdk’);

const PORT = process.env.PORT || 3000;

const config = {
channelSe

外部apiの非同期処理を、await/asyncを使って同期的に使えるようにする

#### この記事で書くこと
外部apiの非同期処理を、どうやったら同期的に扱えるようにできるか模索した結果の記録

#### この記事で書かないこと
await/asyncの説明

#### 外部apiを使用するイメージ

“`.js
const externalApi = new ExternalApi();
const response = externalApi.execute(); // 非同期処理になる
if (response.status == ‘Success’) {
// 何かresponseを使った処理をする
} else {
// エラー処理ここで
}
// さらに呼び出すこともあるかもしれない
if (isSpecialCondition) {
const response2 = externalApi.execute(); // 非同期処理になる
}
console.log(response, response2); // どうなる？

“`
このような処理を書くときにどうやって書いたらいいか

“`.js
async function c

気になった飲食店を探すシンプルなLINE Botを作ってみた

## 飲食店をさくっと調べて、後から見返したい:fork_and_knife:

### 気になるお店が見つかった時、どうしますか？

いつもと違う道を散歩中にお好みの飲食店を発見したり、グルメな友達が行きつけのお店を紹介してくれたのを聞いて、**気になるお店が見つかった時、皆さんどうされていますか？**

### メモアプリは二度手間だし、ググると後から見返すのに不便:cold_sweat:

私はiPhoneの**メモアプリに店名を書き留めておくか、店名をググって、グルメ情報サイトを見るかどっちかだと思います。** 特に休日の朝は、カフェで大好きなカプチーノを飲みながらのんびりするのが好きなので、朝早くから営業している居心地の良さそうなカフェを見つけた時は宝物を探し当てたかのような、ほっこりした気持ちになります。更に、カプチーノがメニューにあれば、そりゃーもう言うことないですよ！そのまま入店できない時は、店名を絶対忘れないようにメモっておきます。
メモアプリに入力した場合は、**あとから店を探すのは意外にめんどくさくて二度手間です**。メモアプリからえぇーと、店名をコピーして、Go

LINE APIでオーキードーキー博士とポケモンGETリクエストしようぜ！

# 企画意図
初心者のプログラミングスキルで、最低限の面白さを表現するために、人気IPである〇〇モン（デジモンじゃない方）のデータを呼び出せるAPIの力を全力で借りて、オリジナルLINEBotの実装を目指します。

今回使用する、APIに関しては、こちらのシンプルにAPIが体験できるリストをまとめたページから選びました。初心者の方は参考にしてみてください。（僕には全然シンプルじゃなかったけどね！）

https://zenn.dev/protoout/books/public-apis-api-get

### 環境
Node.js
axios
Express
ngrok

＜使用API＞
LINE Messaging API SDK for nodejs
PokeAPI

## 作成するオーキードーキー博士BOTの説明

![IMG_20220323_175131_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2562329/fa9939fa-993d-3187-f122-4ba72d0a4dd2

今何週目？LINEBotとGoogleカレンダーを繋げて１年間の中でいま何週目かを知れるようにした話。

こんにちは。

今回はLINEBotとGoogleカレンダーAPIを使用して、
52週MDのうち今何週目なのかを知れるものを作りました。

ちなみに私は某小売業で働いております。
52週MDとは、【52週マーチャンダイジング】の略で
1年間を週単位にして、「今週（第〇週）は何を売り込むのか」を計画・実施するものです。　

## パートさんから無茶ぶり。今何週目かすぐわかるもん作って！
小売業あるあるかと思いますが、1年間52週のうち、いま何週目かわからなくなるんです。
商品調達バイヤーから〇週はこれ売って！と言われるのですが、
いま何週目やねん！！とそのパートさんはいつも思うらしく、私を頼ってきました。

パートさん：「**なぁ、すぐに今何週目かわかる方法ない？**」
　　　　私：「**店長とかマネージャーに今何週？って聞いたらどうですか？**」
パートさん：「**そんなん知りたいときにすぐ近くにおらへんやん！**
　　　　　　　**自分ですぐに知りたいねん**」

ごもっとも・・・
てことで、パートさんの依頼に応えるべく、頑張ってみることにしました(笑)

## 一旦、作れた

Types of property ‘delimiters’ are incompatible. Type ‘string[]’ is not assignable to type ‘[string, string]’. の対処法

### 概要
Django + vue.js などの場合、どちらも変数展開に mustache記法({{ }}) を用いるため、
vue.js 側の delimiters オプションを使用して、以下のように回避することがあると思います。
“` vue.js
delimiters: [‘[[‘, ‘]]’]
“`
Javascript と Typescript が混在しているプロジェクトの場合、
これが原因でビルド時にタイトルのエラーを吐くことがあります。

具体的には、ts 形式のファイルから上記のオプションが設定されている js 形式のモジュールを import して使用する場合などです。

### 原因
vue.js のランタイムにて、delimiters は以下のように型付けされています。
“`ts
delimiters?: [string, string];
“`
これは、文字列型が二つ含まれる**タプル型**です。
ところが、Javascript にはタプル型は存在しないため、文字列が含まれる**配列型**と誤認してしまうためにエラーとなります。

### 解決策

【PHP】タグ機能②

下記投稿の続きで、タグ機能に文字かタグの数で改行するように制御を追加します。

https://qiita.com/ryouya3948/items/da1a53e32edbd16637a5

# タグか文字の数で改行
“`php:form.php
function inputChange() {
：
spans = skill.getElementsByTagName(“span”),
skills = new Array();

for (i = 0; i < spans.length; i++) { skills[i] = spans[i].textContent; } skills = skills.join(''); if (3 <= spans.len

ブラウザ上でフリック入力ができる仮想キーボードを作ってみた

# はじめに
先日、[対戦型ポケモンWordle](https://qiita.com/YottyPG/items/c4488fef8ad09024a181)をリリースしました。
リリース当初、ただテキストボックスにポケモンの名前を入力する形にしており、入力履歴の管理ができておりませんでした。
入力履歴の機能を追加しようと、大元のWordleを参考に入力用のボタンを用意しようと思いました。
ただ、日本語は50音＋濁点・半濁点で80ボタン以上必要で、このボタンからポチポチするのは入力が大変だろうなと思いました。
そこで、ブラウザ上でフリック入力できる仮想キーボードを作ってみました。

# 完成品

【Javascript】配列や連想配列をディープコピーして安全な配列を取得する。【JSON.parse, JSON.stringify】

自分用のメモとして残します。

Reactでstateで多次元の連想配列を参照する際は普通の代入ではなくディープコピーしないと、
大元のstateに格納した値（≒要素）がsetStateしてないのに変わってしまいます。
そのため、ディープコピーをしてあげることで安全に作業用の別配列として扱えるようにします。

# やり方
JSON.stringify でjson文字列にしてから JSON.parse でJson文字列をjsで使用できる形式に変換する。
“`javascript
//this.state = {hoges : [{hoge1:’hoge2′},{hoge10:’hoge20′}]} //左記の値がhogesに入っているとする。
let orig_hoge = this.state.hoges
// orig_hoge をこのまま使うと、this.state.hogesの値も変えてしまうため、下記でディープコピーしてあげる。
let clone_hoge = JSON.parse(JSON.stringify(orig_hoge))
“`

以上です。

【javascript】type=”module”の時にグローバル変数を作る方法

# 結論
`window.globals = {変数名: 値}`
は、`javascript`実行環境全体で使いまわすことができる。

# そもそもの問題

`type=”module”`でjavascriptを使っていると、「`var`を省略することでグローバル変数を作る」ことが出来ない。

だから、次のプログラムは動かない。

“`html:type=”module”の苦悩