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

配列の最後の要素を取得する方法【JavaScript】

JavaScriptで配列の最後の要素を取得する方法をまとめます。

# lengthプロパティを使う方法

“`javascript
const array = [“りんご”, “みかん”, “ぶどう”];

const last1 = array[array.length – 1];

console.log(array, last1);

// 結果
// [“りんご”, “みかん”, “ぶどう”]”ぶどう”
“`

１つ目はlengthプロパティを使う方法です。

`array.length – 1`を指定することで、最後の要素を取得します。

シンプルですが、記述が長くなりがちです。

# pop()を使う方法

“`javascript
const array = [“りんご”, “みかん”, “ぶどう”];

const last2 = array.pop();

console.log(array, last2);

// 結果
// [“りんご”, “みかん”]”ぶどう”
“`

2つ目はpop()メソッドを使う方法です。

pop()メソッドは配列の最後

パッケージ管理システムとは【npm】

# 概要
パッケージ管理システムとは、パッケージの導入や削除、パッケージ間の依存関係などを管理するシステムのことです。

パッケージ管理システムを利用することで、パッケージの導入や削除をコマンド1つで実現できます。

また、パッケージ間の依存関係も解決してくれます。

:::note info
パッケージとは、あるプログラムとそれを利用するのに必要なものをひとまとめにしたものです。
これらのパッケージには依存関係があります。
パッケージAを使うにはパッケージBが必要、さらにパッケージBを使うにはパッケージCが必要、といったイメージです。
:::

フロントエンド開発においては、「npm」や「yarn」というパッケージ管理システムを利用することが一般的です。

# npm
npmは「Node Package Manager」の略称で、JavaScript開発者向けのパッケージ管理システムです。

「Node」とありますが、Node.js専用のパッケージ管理システム、というわけではありません

フロントエンド開発で使用するパッケージの導入や削除、依存関係の管理もできます。

[こちら](h

魚を繰り返し泳がしてみた[Javascript・anime.js]

まず完成形をイメージしてもらいたいので、
作ったアプリを紹介します。


https://find-hiramasa-app.herokuapp.com/

ブリとヒラマサを見分けてタップするだけの簡単ゲームです。
よかったら遊んでみてくださいm(_ _)m


## 要件

* 魚がそれぞれ別のスピードで泳ぐこと
* 魚が画面端から端まで泳ぐと、縦方向にランダムに配置転換されてまた泳ぎ出すこと
※タップしてから結果表示はこの記事では紹介しません。

## view
“`

【JavaScript】Gutenbergの不要ブロックを非表示にする

## PHPとJavaScriptの違い
PHPとJavaScriptのどちらを使ってもブロックを非表示にできますが、PHPでは**埋め込み系のブロックは個別に非表示にできません。**
YouTubeやTwitterは使う場面があっても、その他のブロックはなかなか出番がありません。

PHPでは埋め込み系のブロックが個別に非表示にできないので、JavaScriptを使うのをおすすめします。

## 管理画面用のみにJavaScriptを適用させる

PHPは`functions.php`に直接書き込めますが、JavaScriptの場合は外部ファイルを読み込ませます。

管理画面用にJSやCSSファイルを読み込ませる場合以下を`functions.php`に記述する。

“`PHP
function my_admin_script()
{

[最速で]GatsbyJSを用いたブログを構築しGatsby cloudでデプロイしよう[入門]

## 今回のアジェンダ
WEBエンジニア未経験者として日々勉強中で、とにかくいろいろな知識をキャッチアップしたい…
そう思って今回手をつけてみたのが、静的サイトジェネレータとして直近で注目をあびるReactベースのJavascriptフレームワークであるGatsbyJSです。
なにより動作が軽く、画像ファイルの自動調整がかなり優れてる、様々なプラグインで拡張可能、スターターがあるおかげでコーディングの時間を大幅に削減できる、とっても今どきのフレームワークということです。

##### 公式ドキュメントはこちら。おしゃれ。
https://www.gatsbyjs.com/

静的サイトを学ぶ中、CMS需要が多いフロントエンド業界ということで、手始めにブログを簡単に作りたいと思って色々検索しながらコーディングしましたが、一発でドーン！とデプロイまでたどり着くのになかなか骨が折れました。というわけで、備忘録としてこちらに残させていただきます。
対象者は下記です。

## 目標と前提
– 簡単に最速で構築できるブログを立ち上げたい
– WordPressは使わない方法で立ち上げたい
– 無料

JavaScript基礎概念勉強ノート4

# 初めに
勉強ノート4まで知らないといけない基礎概念を自分なりにまとめてきました。やっとですね。これからは問題練習の振り返りや、視覚化したソートをJSで書いてみたアルゴリズムのまとめです。
では、今回も勉強でとったメモを振り返りとしてまとめていきたいと思います。

# typeof
“`js
console.log(‘typeof true’, typeof true) // boolean
console.log(‘typeof 30’, typeof 30) // number
console.log(‘typeof 0.5’, typeof 0.5) // number
console.log(‘typeof “hello”‘, typeof ‘hello’) // string
console.log(‘typeof “30”‘, typeof ’30’) // string

console.log(‘typeof BigInt’, typeof BigInt) // function
// console.log(‘typeof BigInt’, typeof ‘Big

javascriptで動的に生成した子要素でイベントを発火してほしい

たまにどうしても使いたくなるけど簡単に調べられないので備忘録的に。
pure javascript でのイベントの割り当てについて書きます。

## 動的に子要素を生成

配列データを回しながら動的に子要素を生成します。

HTML側がこうなっていて。

動的な生成が以下のようになります。
DOM生成のコストを下げるために文字列で組み立てたものをinnerHTMLで流し込んでいます。

let parentEelement = document.getElementById(“list-target”);
let childHtmlSource = “”;
info.list.forEach((item, index, arrays) => {
childHtmlSource += “

”
+ “

” + item.uid + “

”

VanillaJSでJSXライクな配列展開を実現する

## 経緯
先日ちょっとしたUIを持ったChrome拡張を作る機会があったのですが、非IT部署で使用するためReactで書いてしまうと保守が難しいという難点がありました。
最初はビルド無しでVueを使っていたんですが、chrome拡張のmanifest V3からはunsafe-evalとやらが許可されず使えなくなってしまったので困っていました。
とはいえHTMLを直書きするのもブサイクで嫌だなぁと思ってたところ、Javascript単体でも似たようなことできるじゃんと思いついて採用したのが今回の方法です。

## テンプレートリテラルを使う

${}で囲うことで変数を直接書けることはよく知られていますが、改行がそのまま改行として出力されるという性質もあります。
※IEでは使えないので注意

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

* コード
“`JS
const str = ‘文字列’;
const res = `${str}
です。`;
“`

* 実行結果

ブラックジャックのなんちゃって設計(js) part4 プロパティとかメソッドをもう少し詳しく

# この記事について
各クラスのプロパティ､メソッドの役割を説明したり
メソッドとかの動きをフローチャートとかにしてみた
ただほぼ1行でかけてしまうものは省略
以下`c()`はコンストラクタから値を受け取ることを指す
コードはこちらにあります

https://github.com/s19013/webBlackJack-jsOnly-

# Main
**役割**
ゲームを進める管理者?
### プロパティ
| 変数/定数 | 名前 |型| 説明 | 初期値 |
|:-:|:-:|:-:|:-:|:-:|
|定数|$moreCardButton|HTMLelement|htmlの要素を保管|document.getElementById(“moreCard”)|
|定数|$fightButton|HTMLelement|htmlの要素を保管|document.getElementById(“fight”)|
|定数|$resetButton|HTMLelement|htmlの要素を保管|document.getElementById(“reset”)|

### オブジェクト
| 名

WordPressでLPを用意したいときのTips

CSS何もわからないマンです。

WordPressで会社のHP運営している方々はいっぱいいらっしゃると思いますが、だいたい困ることが、あとからページを追加しようとしたときに、header.php、footer.phpやcss、jsがぐちゃぐちゃになることが多いかなと思います。

いつかリファクタ、または作り直すとかすると思いますが、大体が急ぎーとか来週にはあげたいーとか自分の仕事が忙し〜だと思うので、なかなか手がつけられずスパゲティな感じになるんじゃないでしょうか。

僕もまだまだですが、最初からこういうの設計にしておけばよかったなってのがWordPressにはあるので、今回はLPを題にして自分のためにもメモしていこうと思います。

# 固定ページのtemplateを用意する

同じpage.phpを使いますと条件分岐地獄がまっていますので、できれば分離したいです。

WordPressには固定ページのテンプレートを用意することができるので、分けてあげましょう。

“`bash
$ cp page.php page-lp.php
“`

管理画面から、page-lp.phpを認識

Docusaurusの紹介

WEB系システム開発においてフロントエンドとバックエンドがあるが、現在主流となりえるやり方として
フロントエンドは静的サイトジェネレーター(SSG)、バックエンドはいわゆるRestAPIかGraphQLの採用が多くなってきた。 （バックエンドは言語、エンジン等は特に問わないが、環境によって影響される要素が強い）
じゃあ、いまのフロントエンドってなにがあるのって思ってググってみると以下のサイトが見つかった。

GatsbyJS 現代のWordpress
https://tech.bitbank.cc/20210201/

このなかで利用したことがあるのはNUXT,Gatsbyであるが、どちらかとVueよりはReactを使いたいのでNEXT、Gatsbyが候補。
NEXTは先ほどのサイトを見ると使ったことはないが、SSR(Server Side Rendering) らしく却下、Gatsbyを試してみたけど
GraphQLなどちょっと先取りしすぎな点が難点であり、なにかないかな～と思っていたところ
# Docusaurus
https://docusaurus.io

【LINE Messaging API, GAS】「漢字を構成に含む漢字」を扱う（LINE Bot に新機能追加）

## はじめに
こちらの LINE Bot に新たな機能を追加した。

https://qiita.com/probabilityhill/items/d3ae1c862bad592cd28c

## 検索方法
「Xを構成に含む漢字」は `` と表す。（全角記号対応）

（比較として）**月**＋2文字：`漢字ー月？？` → **月**曜日, **月**見草 など
**月を構成に含む漢字**＋2文字：`漢字ー＜月＞？？` → **消**防士, **静**脈血 など

## 実装
[kanjivg-radical](https://github.com/yagays/kanjivg-radical) を使用する。
[](https://console.paperspace.com/github/yagays/kanjivg-radical/blob/master/example/basic_usage.ipynb)
以下のページで詳しく説明されている。

ブラックジャックのなんちゃって設計(js) part3 プロパティとかメソッドをもう少し詳しく

# この記事について
各クラスのプロパティ､メソッドの役割を説明したり
メソッドとかの動きをフローチャートとかにしてみた
ただほぼ1行でかけてしまうものは省略
以下`c()`はコンストラクタから値を受け取ることを指す
コードはこちらにあります

https://github.com/s19013/webBlackJack-jsOnly-

# Player
**説明**
プレイヤーに必要な動きをまとめたクラス
### プロパティ
| 変数/定数 | 名前 |型| 説明 | 初期値 |
|:-:|:-:|:-:|:-:|:-:|
|変数|myDeck|[Card]|受け取ったCardクラスを保管|[`空`]|
|変数|sum|int|通常時の手札の合計値を保管|0|
|変数|sumAIn|int|手札に[A]がある時の
手札の合計値を保管|0|
|変数|AInMyDeckFlag|boolean|手札に[A]があるかどうかを管理|false|
|変数|tenInMyDeckFlag|boolean|手札に[10点札]が
あるかどうかを管理|false|
|変数|burstFl

jQueryで横スクロールボタンの実装

# [横スクロールボタン作ります](#-横スクロールボタン作ります)
なんで作るかと言うと、最近のスマホはスクロールバーがデフォルトで表示されなかったりするんですよね。
頑張ってCSSで実装してchromeの検証ツールではしっかり表示されているのに・・・・実機では:frowning2:
なのであった方がユーザー的には親切かなと。

こんな感じで投稿記事をforeachで展開しているとします。
矢印はFont Awesomeから
“`hoge.php

　　//左スクロールボタン

//投稿記事を展開しているとする

ブラックジャックのなんちゃって設計(js) part2 プロパティとかメソッドをもう少し詳しく

# この記事について
各クラスのプロパティ､メソッドの役割を説明
以下`c()`はコンストラクタから値を受け取ることを指す
コードはこちらにあります

https://github.com/s19013/webBlackJack-jsOnly-

# Card
**説明**
カードの情報を保存するクラス
### プロパティ
| 変数/定数 | 名前 |型| 説明 | 初期値 |
|:-:|:-:|:-:|:-:|:-:|
|定数|value|int|カードの点数|c()|
|定数|img|string|カードの画像のurl|c()|

# Deck
**説明**
カードクラスをまとめたクラス
### オブジェクト
| 名前 |型| 説明 | コンストラクタ |
|:-:|:-:|:-:|:-:|
|S01|Card|`♠の1`を表す|1,”./img/s01.png”|
|S02|Card|`♠の1`を表す|2,”./img/s02.png”|
|:|:|:|:|
|S13|Card|`♠の13`を表す|10,”./img/s13.png”|
|C01|Card|`♣の1`を表す|1

LaravelとVue.jsで「いいね」機能を作る

# [開発環境](#-開発環境)
* Laravel5.8
* Vue.js 2系
# [完成イメージ](#-完成イメージ)
メルカリとかみたいにユーザーが投稿したアイテムがあり、その詳細画面で不特定多数のユーザーが
いいね出来る感じ。
# [Modelとマイグレーションを作る](#-Modelを作る)
“`
$ php artisan make:model Like　-m
“`

マイグレーションは以下の通り。
“`migration.php
bigIncrements(‘id’);
//紐づくユーザーが削除（退会等）されたらいいねも削除
$ta

駆け出しエンジニアのReactチュートリアル

## 駆け出しのエンジニアです。
昨年5月に未経験からエンジニアへ転職しました。
エンジニア歴はもうすぐ1年になります。
業務ではRailsでの開発を行っています。
Javascriptは独学で少し学んだ程度の知識です。

## Reactチュートリアルに挑戦
Reactを触ってみたいと思い、チュートリアルに取り組みました。
内容は3×3の9マスで行う3目並べゲームでした。

0|1|2
-|-|-
**3**|**4**|**5**
**6**|**7**|**8**

Vue.jsの学習を行っていたこともあり、StateやPropsは馴染みやすかったです。
Javascriptの知識が少ないので、都度調べながら進めましたが「これで良いのかな」という状態でした。
引き続き知識を深めたいと思います。

https://ja.reactjs.org/tutorial/tutorial.html

## 学習記録: Github
項目毎にコミットを積んで記録を残しました。
自身で何か作るときは、今回の学習を参考にしようと思います。

https://github.com/KON-ch/re

ShopifyデータをHTMLベースでJSへ渡す方法

今回は、どうしても面倒だった、Liquid　data ＞ jsへjsonで渡す ＞ jsでHTMLテンプレートにデータを入れて出力 の工程で楽出来ないかと思い…試行錯誤した結果、上手くいったので共有したいと思います。

なぜ、この方法を考えたかと言うと、たまにある一覧データでのもっと見るボタン。
Liquidでの実装も可能だが、独自カスタムをした場合、jsを組み込む必要があるため、どうしても一旦は全データをjsへ渡す必要がある。
今までは、Liquidでjsonを作成し、それをjsで加工し、HTMLへ流し込むとやってはいたが…。jsがスパゲッティ化してしまう。
というか、条件に応じてどれだけでも存在するロジックを組み、コードを書くのが面倒くさかった。

理想としては、Liquidで判定 ＞ Liqiud　dataをHTMLに入れる ＞ HTMLごとjsへ ＞ jsは必要な分だけ出力。
こいつができたので、以下で説明していきます。
## まずはコードの共有
今回は注文履歴一覧での、もっと見る実装だったのでcustomer.ordersで実装しています。
“`
{% paginate c

TypeScriptのfindでundefinedが返らないようにする方法

## findの使用例

findとは、提供されたテスト関数を満たす配列内の**最初の値**を返すものです。

“`example.ts
const array1 = [1, 2, 3, 4, 5];

const result = array1.find(element => element > 3);

console.log(result); // 4
“`
例のコードだと、配列の要素で3より大きい最初の要素は４なので、resultには４が返ります。

別に何の問題もないコードに見えるのですが、resultにカーソルを当ててみます。


**え、undefined…？**

そうなんです。findは、テスト関数を満たす配列内の要素がなかった場合に、undefinedを返すようになっているの

「決められない」人のためのラーメン激推しBot

## 「どのお店にしよう」を解決します
突然ですが、私はラーメンが大好きで、よく食べに行っています。
ただ、生来の優柔不断な性格のせいで、いつもどのお店にいくか迷ってしまうのです。

**「誰かが自分に”ここだ！”というお店を強くプッシュしてくれたら迷わずに済むのに…」**

そこで、エリアを指定するとその付近のお店を一店だけ選んで、そのお店を”激推し”してくれるLINE Botを作ってみました！

## ラーメン激推しBot
まずはこちらをご覧ください。

場所を指定すると、その付近のラーメン店を"激推し"してくれるLINE Botを作りました
これでもうお店選びに迷わなくてすむぜ?#ラーメン#protoout pic.twitter.com/mAFnJEPzgd

— KendoLab (@kelab_8) April 16, 2022

おすすめのラーメン屋を紹介するLINE Botは世の中に数あれど、選ばれた一店だけをここまで激推ししてくるBotはないんじゃないでしょうか。(多分)

それでは、以下実装について解説していきます。

## 環境
Node-RED（Heroku環境上で実装）
JavaScript
[LINE Massaging API](https://developers.line.biz/ja/services/messaging-a