- 1. vConsole「スマホでもコンソール使えるようにしてみた」
- 2. 【Vue3】Vue3-carouselで迅速にそれっぽいUIを作る
- 3. VSCodeでイマドキのJavaScriptの開発環境をサクッと作ろうぜ(自動テスト編)
- 4. ブラウザlocalStorageの簡易バックアップ
- 5. PixiJSでSVGのサイズ変更が上手く出来なかった
- 6. 居場所をみんなに知らせる。（成功編）
- 7. JavaScript で table 要素を CSV ファイルに変換する
- 8. 連想配列（Object）と配列（Array）のキー検索速度を比較する【JavaScript】
- 9. やはりお前らのフロントエンドは間違っている
- 10. Vue.jsでnpm run serve をしたときにTypeError: Cannot read property ‘version’ of undefined at moduleと出た時の対処法
- 11. WSH TypeScript with ES Modules
- 12. Alfred WorkflowでSlack投稿いろいろ
- 13. As a web engineer intern at ielove GROUP
- 14. ローコードツール「Appsmith」を使ってみた（Qiita初登場?!?）
- 15. 今週の学び 第5回
- 16. JavaScriptで改行前後の文字列をそれぞれ抽出したい
- 17. “????????” のような装飾文字に変換するJavaScriptのライブラリを書いた
- 18. 【１２日目】React使用しメモアプリを作成１ [monaca]
- 19. 開発合宿をやってみた
- 20. 【JavaScript】処理中の入力待ち
vConsole「スマホでもコンソール使えるようにしてみた」
## はじめに
ある日、Mediumというサイトで、下記の記事が投稿されていました。https://javascript.plainenglish.io/5-javascript-utility-libraries-to-improve-your-efficiency-4380b1d373c5
**わい「ほうほう。どんなライブラリがあるんじゃろか」**
興味を持って、記事を読んでみるとvConsoleなるライブラリが紹介されていました。
**わい「vConsole？ なになに…」**
>Debugging web pages on mobile is very difficult, but with “Vconsole” everything will be much easier.
>
>~日本語訳~
モバイルでのWebページのデバッグは非常に難しいですが、vConsoleがあればすごく簡単にデバッグ作業ができます**わい「なにこれおもしろそう…」**
ということでvConsoleなるものについて少し調べてみたところ、なかなかに便利そうだったので、わたしみたいな初
【Vue3】Vue3-carouselで迅速にそれっぽいUIを作る
Vue3にはVue3-carouselとうコンポーネントがあります。
これを使えば誰でも手軽にそれっぽいカルーセルを作ることができます。## インストール
“`npm
npm install vue3-carousel
“`テンプレート
“`vuejs
{{ slide }}
VSCodeでイマドキのJavaScriptの開発環境をサクッと作ろうぜ(自動テスト編)
# はじめに
イマドキのJavaScript開発環境記事第2弾。[第1弾はこちら](https://qiita.com/neruneruo/items/c940af6c85519fd63648)。
今回は、自動テストの設定を作っていく。
# Jestの自動テスト
JavaScriptの自動テストは有名どころがいくつかあるが、最近はJestが良い感じっぽいので、これを使うための設定を行っていく。## 全体のファイル構成
今回は少し複雑なので、ファイル構成から俯瞰しよう。
テスト用コードは、Jestの推奨である__test___配下に配置する。メインのコードはcontents配下だ。“`
<プロジェクトルート>
├── .jestrc.js
├── __tests__
│ ├── __snapshots__
│ │ └── employeeMain.spec.js.snap
│ ├── employeeMain.spec.js
│ └── mock
│ └── mockAxios.js
├── contents
│ ├── app.js
ブラウザlocalStorageの簡易バックアップ
# バックアップ
開発者ツールのコンソールで実行。
“`js
copy(JSON.stringify(localStorage))
“`
クリップボードにJSONテキストがコピーされる。
これを適当な場所に保管しておく。# 復元
JSONテキストを、貼り付け箇所に上書きして、コードを実行。
必要なら事前に`localStorage.clear()`をする。
“`js
Object.assign(localStorage, JSON.parse(‘ココに貼り付け’))
“`
# localStorage
# 自分用の雑記
* ブラウザのパズルゲームのデータが頻繁に消える
* cookie系を無闇に削除したのが原因。
* 触
PixiJSでSVGのサイズ変更が上手く出来なかった
# はじめに
[PixiJS](https://pixijs.com/)でSVGファイルのscaleを変更しようとすると、見切れてしまった。# コード
“`js
const svgr = new PIXI.SVGResource(svg, { scale: 2 })
const svg_tex = PIXI.Texture.from(svgr)
const tex = new PIXI.Texture(new PIXI.BaseTexture(svg_tex))
const spr = new PIXI.Sprite(tex)
stage.addChild(spr)
“`# 結果
scale: 1
scale:2
の続きで成功編です。
ご指摘・ご質問あれば、コメントいただければと思います。
# 構成＆動作
以下に構成図と簡単な動作を示します。
確認者がLINEで居場所を確認する場合は、LINE botへメッセージを送信します。
LINE botはLINE Messageを受信したら、Firebase Cloud Messagingを使用してAndroidアプリに通知します。
Androidアプリは通知を受け取ったら、現在の場所を取得して、We
JavaScript で table 要素を CSV ファイルに変換する
# やりたいこと
JavaScript で table 要素を CSV ファイルに変換したい。このとき、クライアント側のみで完結させたい。
# 方法
“`js
// table 要素を 2 次元配列に変換する。
const convertTableToRows = (selector) => {
const table = document.querySelector(selector);
const rows = Array.from(table.querySelectorAll(‘tr’)).map(tr => {
const row = [];tr.querySelectorAll(‘th, td’).forEach(td => {
row.push(td.innerText);
// colspan 属性が設定されている場合は空欄で埋める。
// なお rowspan 属性は考慮できていない。
if (td.colSpan && td.colSpan > 1) {
row
連想配列（Object）と配列（Array）のキー検索速度を比較する【JavaScript】
# はじめに
JavaScript の連想配列（Object）と配列（Array）において、キーで検索して値を取得する場合の速度を比較してみました。
併せて、値で検索する場合についても比較しておきました。## 結論（キーで検索した場合の速度比較）
条件によりますが、結論から言うと、キーで検索して値を取得する場合は、連想配列（Object）の方が圧倒的に高速です。
以下は、条件として要素数 5,000,000 個、キーはランダムな文字列、値は 0 〜 4,999,999 まで順に格納した場合で検索を実行した結果です。
検索対象となる要素は、配列のちょうど中央としています。|配列形式|検索方式|処理時間(8byteキー)|処理時間(20byteキー)|
|—|—|—|—|
|配列（Array）|find() メソッド|35.6ms|216.6ms|
|配列（Array）|for…of 文|25.3ms|385.2ms|
|配列（Array）|for 文|19.0ms|195.7ms|
|連想配列（Object）|プロパティ値取得|0.000013ms|0.
やはりお前らのフロントエンドは間違っている
こういうタイトルをつければ良いってマックでJKが言ってました。
独りよがりなポエムです。
気分を害された方は我慢してください。## classという曖昧な存在
二つのHTMLがある。
“`html
“`
さて`button`という**トークン**はどういう意味を持っているのだろうか？
1. 要素の役割を説明するための、ただの文字列。
1. cssから`.button`でスタイルが当たっている。
1. cssから`#some .button`でスタイルが当たっている。
1. cssから`#home .button`でスタイルが当たっている。
1. jsから`.button`で処理が登録されている。
1. jsから`#some .button`で処理が登録されている。
1. jsか
Vue.jsでnpm run serve をしたときにTypeError: Cannot read property ‘version’ of undefined at moduleと出た時の対処法
Vue-CLIで環境構築した時に出会ったエラーの解決策を備忘録として残しておきます。
記事内に誤りなどあれば、優しくご指摘いただけると幸いです。# はじめに
今回使用したバージョンは以下になります。“`
$node -v
v16.14.0
$npm -v
8.3.1
$vue –version
@vue/cli 5.0.3
“`Vue-CLIの公式ホームページはこちらから。
https://cli.vuejs.org/
# エラー内容
“`
$npm run serve
TypeError: Cannot read property ‘version’ of undefined at module…
“`
バージョンが読み取れない、、、
うーん、、よくわからない。# 対処法
調べていくと、eslintがインストールされていないために出ていたエラーだということがわかりました。
ということで、早速eslintをインストールしてみました。“`
$ npm install eslint
“`eslintをインストール後Vueを実行すると、無事エラー
WSH TypeScript with ES Modules
# 概要
https://github.com/mukai1011/how-to-write-jscript-in-a-modern-way
Windows Script Host(WSH)は、Windowsに標準搭載されているスクリプト実行環境です。Visual Basicをベースとした**VBScript**や、ES3相当のJavaScriptをベースとした**JScript**で記述することができる、ちょっちかしこいバッチファイルだと考えてください。Windowsに関わるほとんどなんでも実現することができます。
– ファイル操作
– レジストリ操作
– シェルコマンドの実行
– ExcelをはじめとしたCOMオートメーション
– （がんばれば）Windows APIの呼び出し
– など…バッチファイルと同程度に、Windowsであればどこでも実行できることが強みです。
ただVisual BasicもES3もひどくレガシーであり、現代のプログラマーであるわれわれにとってこれらを扱うのは本当に苦痛です。なんとかこの強力なスクリプトを、快適に書くことはできないものでしょ
Alfred WorkflowでSlack投稿いろいろ
# TL;DR
* Slackのあるチャンネルに任意の文字列を投稿する。
* 投稿するチャンネルを選ぶ
* 投稿する時間を選ぶ
* あるチャンネルの特定のスレッドに返信する
**フロントエンドとバックエンド合計12個のプロジェクト**に取り組みました。開発ページ：https://cloud.ielove.jp/
期間：2021.02-2021.09(7か月)
開発環境：JavaScript, PHP, Zend Framework, MySQL, HTML, CSS, Gitlab, phpstorm
# 大規模なシステムでの開発
情報科学科でも授業で扱うものは基本的な理論であったり、演習問題も数個のファイルで完結するものが多いです。そこで規模というものが、実際のプロダクトとの違いの一つであり、着目してみました。
### 該当部分探しの旅
開発要件が決
ローコードツール「Appsmith」を使ってみた（Qiita初登場?!?）
**Appsmith**を紹介します！！
日本語の説明はほとんど見つかりませんが、たまたまTwitterで見つけたツールで興味を持ったので使ってみました。https://www.appsmith.com/
# Appsmithとは
> A powerful open source framework to build internal tools
Quickly build any custom business software with pre-built UI widgets that connect to any data source. Control everything with JavaScript.DeepL翻訳
> 社内ツールを構築するための強力なオープンソースフレームワーク
あらゆるデータソースに接続可能なビルド済みUIウィジェットで、あらゆるカスタムビジネスソフトウェアを迅速に構築できます。JavaScriptですべてをコントロール。# 環境構築
クラウドサービスとして提供されていますが、ローカルDocker環境で構築してみました。
htt
今週の学び 第5回
# 今週の学び
JavaScriptなど
– 分割代入
– 配列を書く時[]大カッコのみ使う、spritなど– reverse()
– 配列の要素を逆順にする– join()
– 配列の要素をすべて連結して文字列にする– 単純にスペースを開けたい時
– spritではなく「+ ‘ ‘ +」と書いて、2つの要素を並べる時に使ったりする– 代入は右から左へ対して書く
– プログラミングの大原則– メソッドは結合できる
– 小数を切り捨て、切り上げする方法
– 切り捨てはvar a = Math.floor( 1.5 ) ;
切り上げはvar b = Math.ceil( 1.5 ) ;– 再定義はできない
– .trim();
– 文字列の両端の空白を削除– mapメソッドのNumberはNumber型にするという意味
– mapメソッドの(Number)はNumber型にするという意味– length
– lengthは配列の数がその時によって変わるからつける–
JavaScriptで改行前後の文字列をそれぞれ抽出したい
## 結論
`substr`と`indexOf`を組み合わせれば良い## 改行前の文字列を抽出する
“`javascript
// 改行前の文字が欲しい
const text = “test1\ntest2”;
const text_first_line = text.substr(0, text.indexOf(`\n`));
console.log(`text_first_line=${text_first_line}`);// 結果
test1
“`## 改行後の文字列を抽出する
“`javascript
// 改行後の文字が欲しい
const text = “test1\ntest2”;
const text_second_line = text.substr(text.indexOf(`\n`) + 1);
console.log(`text_second_line=${text_second_line}`);// 結果
test2
“`## 参考
https://qiita.com/pyon141/items/b8ebbbcc0786c0d
“????????” のような装飾文字に変換するJavaScriptのライブラリを書いた
Web上では、アルファベット（ASCII文字）を `????????` や `????????` のような Unicode 上の装飾文字（記号）を用いて表記するお遊びがあると思います。俗に「フォント変換」[^1]などと呼ばれているアレです。
ブラウザからであれば[yaytext](https://yaytext.com/)などで簡単に”変換”できるのですが、Discordのbotに組み込むにあたって（自分にとって）望ましい挙動をするライブラリが見当たらなかったので、サクッと作ってnpmに公開しました。ドキュメントは **https://www.npmjs.com/package/unicode-text-decorator** をご覧ください。
[^1]: Unicode上に存在する別の文字にreplaceしているだけであり、フォント（書体、タイプフェイス）に対する操作ではないため、技術的にはこの呼称は不正確です。
## 使い方
**Note: 「背景」の節で言及しているアクセシビリティ上の問題についてもご一読ください。**
非常にシンプルです。
“`sh
npm i
【１２日目】React使用しメモアプリを作成１ [monaca]
## はじめに
今回はReactを使用してメモアプリを作成します。ただReactの知識も乏しいところからスタートするので少しずつの更新になります。今回は少しでも使い方に慣れていくように基本的な操作を練習していきます。## プログラム
今回組んだプログラムは以下の通りです。順を追って説明していきます。
“`javascript
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Card } from ‘react-onsenui’;
import { Toolbar, Page, Button } from ‘react-onsenui’;
import { useState } from ‘react/cjs/react.production.min’;import SecondPage from ‘./SecondPage’
let middle;
const handleChange = (e) => {
console.log(e.target.value);
midd
開発合宿をやってみた
## 概要
せっかくGWなので、チーム開発をやってるメンバーで開発合宿とやらをやってみたので、
備忘録や反省・良かったことをまとめてみます。## 今回の開発チーム
私が勉強でお世話になっているネイティブアプリ＋Webアプリの開発チーム（本業とは関係ありません）
今回の参加メンバーは自分を含めて4人です。
私は神奈川にいますが、他メンバーは関西で普段はリモートでやりとりしながら開発を進めてます。## スケジュール
5/4(水)・5/5(木)
1日目は開発（作業）と内容の発表会、
2日目は懇親の時間として、浜松を観光することにしました。## 開催地
静岡県浜松市
選定理由は浜名湖が綺麗そう＋うなぎが美味しそう、くらいのもんです。## やってみた結論として
まず、やってみて良かったと思います。
何が良かった・何をした等はこれから記載していきます。## 合宿でやったこと
### 1日目
今回は各メンバーが色々やってみたいことがあった＋メンバーの中で実装というより
サービス管理や機能要件を考えるメンバーがいたため、全員での開発は行いませんでした。
なので、各メンバーは以下の内
【JavaScript】処理中の入力待ち
# したいこと
メソッド内で処理を一旦止めて、画面のイベントの発火を待ちたい。
# このようにするのだ
https://mogamoga1024.github.io/JSInputWaitingSample/
“`html:index.html
JS 入力待ち
