- 0.0.1. 特定のパスからのアクセスか判定したい&RegExpとリテラルの差について(JS:正規表現)
- 0.0.2. 【2023年1月】TypeScriptとdiscord.jsで簡単なBotを作るまで
- 0.0.3. vueUseの概要と使い方
- 0.0.4. JavaScriptのスプレッド構文まとめ
- 0.0.5. オブジェクトのプロパティを動的に設定する
- 0.0.6. クリスマスにHTML5プロフェッショナル認定 レベル2を取得しました
- 0.0.7. YouTubeの動画サムネイルをダウンロードするコンテキストメニューを作る
- 0.0.8. 【フロントエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2023年版】
- 0.0.9. SwitchBotとESP32と汎用リモコンで作るスマート家電
- 0.0.10. プリザンターで編集中の差分内容を行単位で表示させる
- 0.0.11. 文系だけど React に MUI 導入してみた。 Ver.2
- 0.0.12. 脳死でaxiosを使うのを卒業して、fetch APIを使ってみた
- 0.0.13. 外部の関数からthisを参照しようとしたら、エラー。
- 1. 始めに
- 1.1. コード
- 1.1.1. fetch APIとPromiseの備忘録
- 1.1.2. 【Nuxt.js3】Google Places APIをぽんぽこ叩いてお店舗検索
- 1.1.3. 【JavaScript】アコーディオンUIの作成！
- 1.1.4. Firefox で selenium を実行しながら JavaScript を on/off する方法
- 1.1.5. webど素人が鍵付きページを作ってみた
- 1.1.6. Jestを使おうとしたら「SyntaxError: Unexpected token '.'」エラーが発生した件について
- 1.1.7. Array.prototype.sort()メソッドの使い方（備忘録）
- 1.1. コード
特定のパスからのアクセスか判定したい&RegExpとリテラルの差について(JS:正規表現)
Javascript(以下JS)で特定のパスからのアクセスか判定したい場合がありました。正規表現で対応しようと考えたのですが、意外に悩まされたので、簡単にまとめておこうと思います。完成したコードがこちら。
“`url_check.js
let pathname = ‘/index/5/edit/’
if (new RegExp(/\/index\/.*\/edit/).test(pathname)) {
console.debug(‘該当のURLからのアクセスです。’);
}
“`ここでは「/index/5/edit/」というパスからきた場合、debugで「該当のURLからのアクセスです。」という文言を表示させるようにしています。パスに含まれる5ですが、ここではユーザーIDとして、この部分は動的に変わることを想定しています。それでは正規表現の解説をしていきます。
“`url_check.js
// ① オブジェクトを生成して、行う方法
new RegExp(/\/index\/.*\/edit/)// ② 正規表現リテラルで行う方法
let literal = /\/
【2023年1月】TypeScriptとdiscord.jsで簡単なBotを作るまで
# はじめに
今回はTypeScriptを用いて、現在時刻をチャットに表示するDiscordのボットを作成しました。
古い書き方ではうまくいかない部分がありましたので、それについても説明します。# 行う手順
1. 必要なパッケージをインスト―ル (Visual Studio Codeを用いました)
2. 下準備 (TypeScriptを使ってボットを作る準備をします)
3. コーティング
4. Botを作成してサーバーに招待
5. 実際に動かす## 手順1 : 必要なパッケージをインストールする
さて、まずは開発に必要なパッケージをNode.jsからインストールしていきましょう。
今回用いるパッケージは以下の通りです
– TypeScript
– ts-node
– eslint
– discord.js
– dotenv**ts-node**とは、TypeScriptをJavaScriptに変換せずそのまま実行するためのモジュールです。**eslint**はJavaScriptをきれいに書いたり、バグを発見してくれる便利なツールです。のちの設定でTypeScriptでも動
vueUseの概要と使い方
# vueUseとは
よく使う機能をロジック単位で切り取り、それを関数として簡単に利用できるようにしたライブラリ。# vueUseの長点
– vue2もvue3でもサポート
– compositionAPIの使用が可能
– 安定したコミュニティが存在
– よく使う機能の関数を提供# vueUseの特徴
– 関数の戻り値はrefのオブジェクトである。
– イベントを制御するためのフィルターが提供される関数もある。
– 制御する際には、関数の引数として前もって定義されたプロパティを操作することでOK# vueUseの使用
### 方法１：以下のコマンドでvueUseをインストールする。
“`shell
npm i @vueuse/core
“`
### 方法２：CDNを利用する。
“`html
“`
# vueUseの主な関数
### １)
JavaScriptのスプレッド構文まとめ
JavaScriptで使うスプレッド構文について、初心者なりに勉強したので使用方法をまとめました。
ES2015(ES6)を利用しています
これ、使いこなせたらとても便利なんだろうなあ。。。（初心者）## スプレッド構文とは
「…」を使用し、配列を展開できる便利な構文
用途としては主に以下の2点があります
1. 配列の展開
1. 配列の結合### 配列の展開
以下例に示すように、「…」の後に配列変数を記述することで、配列を展開してくれます
“`javascript:例
const array1 = [1,2]
console.log(array1) //=>[1,2]
console.log(…array1) //=>1 2
“`また**配列をコピー**して利用したい際にも、スプレッド構文は利用できます
例えば以下のように「=」で代入してしまうと、代入先の変数の内容を変更した場合、代入元の内容も変更されてしまいます
“`javascript:例
const array2 = [3,4]
const array3 = array2
array3[
オブジェクトのプロパティを動的に設定する
JavaScriptでは、計算プロパティ名を利用することでオブジェクトのプロパティを動的に設定することができます。
計算プロパティ名は下記のように使用することができます。
“`javascript
let i = 0
const a = {
[‘foo’ + ++i]: i,
[‘foo’ + ++i]: i,
[‘foo’ + ++i]: i,
}
console.log(a); // { foo1: 1, foo2: 2, foo3: 3 }
“`
オブジェクト`a`にプロパティ`foo1` `foo2` `foo3`を動的に設定することができました。
このように、計算プロパティ名を利用することでオブジェクトのプロパティを動的に設定することができます。動的に設定された値にアクセスする場合は、基本的にブラケット記法でアクセスします。
“`javascript
const space = ‘ ‘;
const a = {
[space]: ‘space’,
}
console.log(a) // { ‘ ‘: ‘space’ }
consol
クリスマスにHTML5プロフェッショナル認定 レベル2を取得しました
2022年10月にHTML5プロフェッショナル認定試験 レベル1(ver2.5)、クリスマスにレベル2(ver2.5)に合格したため、それぞれの試験を受けた感想や勉強法を記載します。
# HTML5プロフェッショナル認定試験 レベル1(ver2.5)
## 使用教材
以下の教材を利用しました。
– Ping-t 最強Web問題集（※有料コンテンツです）
– HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版勉強は8月ごろに開始したため、ver2.0対応版のテキストを購入しました。
現在はver2.5対応版のテキストが出版されているため、そちらの利用がおすすめです。
ただ、ver2.0とver2.5で出題範囲は大きく変わらないため、すでにver2.0を持っている場合、改めてver2.5対応版を購入する必要はないと思います。## 勉強方法
最初に対策テキストを1周したのち、問題演習としてPing-tを利用しました。
Ping-tはヒット率が100%になるまで模擬問題を繰り返しやりました。## 試験の感想
Ping-tの問題は実際の
YouTubeの動画サムネイルをダウンロードするコンテキストメニューを作る
YouTubeのサムネイルを別タブで表示したい場面がありまして、URLを手打ちするのは面倒くさいなぁ…と思い、
動画上で右クリックしたコンテキストメニューの一番下に「サムネイル表示」リンクを追加することにしました。## YouTubeサムネイルURLのパターン
いくつかありますが、以下のどちらかで大きめの画像が取れます。
上がダメなら下で取れます。
http://img.youtube.com/vi/ビデオID/maxresdefault.jpg
http://img.youtube.com/vi/ビデオID/sddefault.jpgビデオIDはYouTube動画の v パラメータです。※URLは私の投稿した動画です。
の`Z_LmFZdGhMo`の部分です。
## ダウンロードリンクを作る
URLは上記の通りなので、URLをパースしてvの値を取ってみます。
ブラウザからは location.search でクエリストリングが取れるので、ここから取得を試みます。
上記のURLの場合、
【フロントエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2023年版】
## はじめに
こんばんは。
駆け出しエンジニア真っ只中のmamiと申します。
最近ようやく業務にも慣れてきたタイミングで、自分のエンジニアとしてのレベル感や、この先目指すべき道筋を明確にしたいな〜という思いでこの記事を書いております。これは自分のための記事であると同時に、同じように駆け出し中のエンジニアさんや、ミドル層を目指す手前のエンジニアさんにも刺さる内容になっているかと思います。
今、**自分がどのようにキャリアアップしていく**べきなのか、どのような道筋で**スキルを磨いていけばいい**のか。そんなふうに悩んでいる方は是非読んでみてください。※内容はフロントエンジニアが対象になりますが、バックエンドの方もなにか通じるものがある…かもしれません。
## 逆算したキャリア戦略の必要性
そもそも何故、キャリア戦略が必要なのかについてお話しします。
結論からお話しすると、**時間は有限だから**です。おそらく、何も意識せずとも普通に開発経験を積んでいれば、未経験からでも2~3年でジュニアレベルを脱することは可能でしょう。
しかし、何も考えずにただただコードを打ち
SwitchBotとESP32と汎用リモコンで作るスマート家電
SwitchBotとESP32と汎用リモコンで、スマート家電システムを作成します。
全体構成は以下の通りです。
いくつか補足します。
SwitchBotハブミニには、任意の赤外線信号を記憶し、送信することができます。また、AlexaやActions on Googleのようなスマートスピーカにも対応しているため、それだけで発話やスマホから連携して家電を制御できます。
汎用赤外線リモコンからも、任意の家電を操作できるようにしました。そのために、ESP32を仲介させています。SwitchBotは、WebAPIも公開しているため、ESP32→Node.jsサーバ→SwitchBotという流れが実現できます。
ちなみに、ESP32にGrove端子で接続できる赤外線送受信ユニットを使う場合は、赤外線信号の送信・受信の範囲が狭いため、赤外線受信リピータを
プリザンターで編集中の差分内容を行単位で表示させる
## 概要
プリザンターの内容項目や説明項目を複数行で編集するとき、更新ボタンを押す前に自分が行単位でどこを編集したかをセルフチェック的な感じで確認したくなることがあったので、Githubのようなイメージで画面下部に差分内容を行単位で表示させるスクリプトを書いてみました。### 試した環境
プリザンター 1.3.27.1
OS: Windows10
DB: SQL Server### スクリプトの設定
HTMLでdiffを表示させる方法を調べてみたところ、外部ライブラリ [jsdiff](https://github.com/kpdecker/jsdiff) と [diff2html](https://github.com/rtfpessoa/diff2html) を利用することで簡単にできることがわかりました。短い記事ですが、以下が参考になりました。https://qiita.com/horikeso/items/72f5953425f13bbde5c3
テーブルの管理画面からスクリプトに以下の内容を設定することで、画面下部に編集中の差分内容が表示されます。スクリプトの
文系だけど React に MUI 導入してみた。 Ver.2
# MUI とは
MUIとは何か、 オープンソースのUIライブラリです。
平たく言えば、ボタンとかフォームとかを簡単にカッコよくしてくれるやつです。
`Google のガイドライン` に沿っているので、白ブリーフしか履かない僕のような、センスなし男でもおしゃれなWebデザインができちゃう代物です。https://mui.com/
百聞は一件にしかずと言うことでとりあえず見てみましょう。
html で適当に書くと
こんな感じで、白ブリ野郎ができちゃいます。
これじゃモテないですね。じゃあ、MUIでかっこいいパンツにはきかえちゃいましょう。
:::note warn
時間をかければ MUI でも html でも素晴らしいフォームができます。
今回は、同じ時間で比較したいので
僕の実力
脳死でaxiosを使うのを卒業して、fetch APIを使ってみた
Twitterでいつも参考にさせていただいている、[よわよわエンジニアさん](https://twitter.com/webengrchild)が「クライアントライブラリを脳死でAxiosを使う駆け出し勢があまりにも多過ぎる」件について発信をしていました。
見事に自分もその中の一人でしたので、これを機にFetchAPIに触れてみました。
参考↓
[https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch)[https://blog.capilano-fw.com/?p=6646](https://blog.capilano-fw.com/?p=6646)
### 開発環境
Laravel8(APIモード) × Vue2（SPA）
現在axiosで記述しているコードをfetch APIで書き直す形式で進めていきます。
**何はともあれコードを書いていきます。**
外部の関数からthisを参照しようとしたら、エラー。
始めに
ReactのClassComponentの中で、stateをalertする関数を作成し、文字をクリックするとその関数が
呼ばれるようにしたら、以下のエラーが発生。Uncaught TypeError: Cannot read properties of undefined (reading ‘state’)
コード
“`react
import React, { Component } from ‘react’export default class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = { date : new Date() };
}handleClick() {
alert(this.state.date);
}render() {
return (
fetch APIとPromiseの備忘録
# 初めに
この記事は、仕事でfetch APIやPromiseについて調べた時の備忘録になります。非同期処理やコールバック変数の説明、それらを説明するための実用的なサンプルコードは本記事では紹介しないので、ご了承ください。## 本記事でやりたいこと
fetch APIを使って、ローカルにあるテキストファイルの文字を読み込む。# fetch APIとは
ドキュメントによると、「リクエストやレスポンスといった「プロトコル」を操作する要素にアクセスするためのJavaScriptインターフェイス」とのこと。https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
他に文献を調べてまとめたところ、ザックリ下記のような感じ
– HTTPリクエストを発行するAPIである。
– HTTPとあるが、ローカルのディレクトリパスも指定できる。
– 様々なファイル形式(txt,json,画像ファイル等々)を読み込むことが出来る。## fetchの構文、戻り値
“`
fetch(url, [option
【Nuxt.js3】Google Places APIをぽんぽこ叩いてお店舗検索
# なんの記事なん？
年末年始に体調崩して序盤ひまだったので冬休みの自由研究的ノリです。
古着屋とか雑貨屋とかカフェが割と好きで巡る時に毎回Google Mapで検索バーに「古着 地名」とか「雑貨屋 地名」とかワード入れて調べてみたいなのすごいだるいなって感じで、場所選んだらそれらのジャンルごとに店舗を取得するもの欲しいなと。
ついでにcompositionAPIが使えるようになってからの書き方知らんしNuxt3でやってみようかなという感じ。
まぁ実際はインスタで調べる方が多いよな、おれもそう。# とりあえず画面
都道府県と市区町村を選択したらタブでジャンルが分かれていて、そのジャンルの店舗一覧と詳細データを取得して写真押せばGoogle map飛べるから経路はお前が調べろって感じのもの。（まぁAPI叩け
【JavaScript】アコーディオンUIの作成！
# 1日1UI投稿！
2日空いてしまいましたが、UI投稿します！
## アコーディオンUI
本日はアコーディオンUIを作成しました。
Firefox で selenium を実行しながら JavaScript を on/off する方法
# selenium 実行中に about:config の状態を変更する
## 環境
Windows 10 Pro
Firefox 108.0.2 64bit
Python 3.9.13 (Anaconda)
selenium 4.7.2あるいは
Python 3.7.15
selenium 3.141.0## 概要
selenium の実行中に about:config を開いて javascript.enabled の値を変更する。具体的には、次のようなコードを実行する。
“`Python
from selenium import webdriver
from selenium.webdriver.common.by import Byoptions = Options()
options.binary_location = r’C:/Program Files/Mozilla Firefox/firefox.exe’
browser = webdriver.Firefox(options=options)
browser.get(‘about:config’)
webど素人が鍵付きページを作ってみた
## はじめに
個人間で書類共有するためのページを作る必要があった。
webど素人の自分が簡単な鍵付きページを実装したメモ。## やりたいこと
– パスワードを入力して、正しければページを開く
– ファイル名を入力して遷移する方法を使用
– 直接リンクを叩かれた場合にパスワード入力ページへリダイレクト
– 検索に引っかからないようにする## やったこと
#### 0.事前準備
以下のファイルを作成。
“`
├── index.html
├── goal.html
└── js_dir
├── password.js
└── redirect.js
“`#### 1.パスワード入力の実装
password.jsを実装。
“`javascript:password.js
let pass = prompt(‘パスワードを入力してください’);
location.href = “./” + pass + “.html”;
“`index.htmlのbodyに以下を追加。
“`html:index.html