Electronの公式クイックスタートガイドを試す

# Electronの公式クイックスタートガイドを試す

Electronは、JavaScript、HTML、CSSを使用してデスクトップアプリケーションを作成できるようにするフレームワークです。Electronで作成したアプリケーションは、macOS、Windows、Linuxで実行できます。

今回は、[Electronの公式ドキュメントのクイックスタート](https://www.electronjs.org/docs/tutorial/quick-start)に記載されている内容を試していきます。ところどころ不足してるとことかは補って記述しています。

## 前提条件

[Node.js](https://nodejs.org/en/download/)をインストールする必要があります。

## 基本的なアプリケーションを作成する

Electronアプリケーションは本質的にNode.jsアプリケーションです。

### package.json を作成する

プロジェクト用のフォルダーを作成し、以下のコマンドを実行します。

“`
npm init -y
“`

###

HTML, CSS, JavaScriptで掲示板システムを作ってみた【その3-要素が重なる問題】

#あらすじ
可愛い掲示板を作ってアンカーを実装したはいいものの、コメントを指差すアンカーをリンクで修飾してしまい、NotFoundエラーが出されてしまっていました。そこで、前回はアンカーをリンクではなく色付き文字だけで表現し直し、アンカーをクリックするとエラーページが表示される問題を解決しました。
【作っている掲示板】

しかしながら、新たにポップアップしたメッセージが下に隠れてしまう問題を新たに発見したので今回はそれを修正することにしました。
![スクリーンショット 2021-05-18 10.30.10.png](https://qiita-image-store.s3.ap-north

Bootstrap5 : バージョン4からの変更点をまとめてみた

おなじみBootstrapの最新バージョン「**Bootstrap5**」正式版がついにリリースされたようです！前々からBeta版のリリースが行われていたためそろそろかと思っておりましたがついに・・?

One more time, we're gonna celebrate—Bootstrap 5 has officially arrived! New accordion and offcanvas components, no more jQuery, no more IE, RTL support, new utilities and utilities API, new examples, new docs, and so much more! https://t.co/yWnJvosSLR pic.twitter.com/DP4l0EqkY9

— Bootstrap (@getbootstrap) May 5, 2021

こちらの記事では**既存のバージョン「4」からの変更点**をまとめてお伝えできればと思います。

また、今回ご紹介する変更点を**コードを書きながら体験できないか**と思い、自分の運営しているプログラミング学習レッスンプラットフォーム「Donbler」で**Bootstrap５変更点ハンズオンレッスン**を作ってみました！無料ですのでぜひこちらも試してみて下さい?

https://donbler.com/lessons/58

# 変更点1: IE非対応化
バージョン5からIEがサポート外となりました。またEdge Legacyなどバージョンの古いブラウザも合わせてサポート外となります。

# 変更点2: 脱jQuery！
Bootstrap4に含まれていたjQu

【Javascript】Rest pattern/parameters（残余パターン/引数）について

# 初めに
Spread operator(スプレッド構文）と形は似ていますが、真逆のことをするRest pattern/parametersについて学習した内容を書いてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

#Rest pattern/parameters（残余パターン/引数）とは
MDNの公式ドキュメントには以下のように説明しています。
> 残余引数構文により、不定数の引数を配列として表すことができます。

要するに要素や引数を凝縮（condense)し配列として返します。要素を展開するスプレッド構文と正反対のことをします。

前回の記事：
https://qiita.com/redrabbit1104/items/374fc9cc0c0408f51e66

# 見分け方
残余パターン/引数はスプレッド構文と非常に似ていますが、「=」の左側にあるか右側にあるかでどちらなのか判断できます。

①スプレッド構文

“`javascript
//スプレッド構文は「=」の右側

const testNumber = [100, 99, 98, …

【rails×Bootstrap】Bootstrap.jsを活用した動的なタブの実装

#実装すること

* bootsrap.jsを使用して動的なタブを実装します。
公式でいう「Javascript Behavior」が該当します。

Bootstrap：　https://getbootstrap.jp/docs/4.5/components/navs/#javascript-behavior

# 完成形

* タブをクリックするとロードせずに切り替えができます。
* 内容は設定した内容で表示ができます。

# 前提

* bootstrapをインストールしていること。
以下、私のgemのバージョンと記載方法です。

“`:Gemfile
gem ‘bootstrap’, ‘~> 4.5’
gem ‘jquery-rails’
“`

“`css:assets/stylesheets/applicatio

indesign スクリプト ページ番号を取得して属性に書き込む（構造の選択要素のページアイテムから）

構造の選択要素のページアイテムからページ番号を取得して属性に書き込むスクリプトはこれで良いのかな・・・？
テーブルやセルのページ番号はどうやって取得すれば良いのでしょう・・・

~~~JavaScript
/*
構造の選択要素のページアイテムからページ番号を取得して属性に書き込む
更新 2021/05/17
*/

// アプリ指定
#target “InDesign”;

// スクリプト名
var scriptName = “ページ番号を取得して属性に書き込む（構造の選択要素のページアイテムから）”;

//スクリプト動作指定（一つのアンドゥ履歴にする及びアンドゥ名の指定）
app.doScript(function () {

// ページ番号を書き込む属性名
var pageNumberAttribute = “pageNumber”

// 書き込み数
var numberOfWrites = 0;

// 日時の情報
var unshapedDate = new Date();

// 日時の情報の整形
var

【Vue】 v-forの基本的な使い方 + v-forにおけるkeyの目的

## 概要
v-forを **配列**、**オブジェクト**、**数値**に使用する方法と、
v-forには**key属性**をなるべくつけようということを説明する記事です。

## 0. はじめに

下記のhtmlファイルにプログラムする前提で説明する。

“`html

GoogleAppsScriptでGoogleカレンダーの予定をChatWorkで通知させる

# GoogleAppsScriptでGoogleカレンダーの予定をChatWorkで通知させる

## 経緯
会社で予定をGoogleカレンダーで管理するということらしいので、急遽調査。
なんとか必要な動作ができた…。

※何かあっても責任は取れませんのでご注意を、、

## 参考サイト

こちらで比較的欲しい情報がありましたので、参考にしました。

[https://teratail.com/questions/219287](https://teratail.com/questions/219287)

## 仕様

– トリガーは一定時間間隔で発動
– 予定のない日は、「この日の予定はありません。」と表示させる。
– 予定の日付ごとに罫線を入れている（ChatWork用スタイリング）
– 土日と祝日は送信しないをコメントアウトしてます
– 基本的には何日先でも可能にしている（閏年とかは大丈夫かわからないが…）

## コード

以下のコードを貼り付けたら動くはず…。
APIのキーなど必要な情報は事前に取得しておいてください。

事前準備が整い次第、コードを貼り付けてください。

有益なReact UIライブラリを紹介していく記事

# この記事について
Web開発で１からいい感じのUIを作成しようと骨が折れることが多いですが、世の中にはOSSで簡単にかっこいいUIを作れるライブラリがあります。

本記事では、そんな便利なReact UIライブラリを自分のためのメモも兼ねてご紹介していきます。

**この記事は良さげなライブラリを見つけるたびに不定期更新していきます**
「こんなライブラリもあるよ！」という方はコメント欄へ?

## React Typed
まるでタイピングしているように文字が動くテキストエフェクトを実装できるjQueryライブラリであるTyped.jsをReact用にType.jsをCommponentとしてラップしているライブラリ。

### Github
https://github.com/ssbeefeater/react-typed

### 本家Github
https://github.com/mattboldt/typed.js

## React Animations
こんな感じの簡単なアニメーションを実装できるライブラリ
![1*bkPR-nhoZ5aTw_et9Mt7Ow

【Twitter】目障りなプロモーションを非表示にするブックマークレット【広告ブロック】

“`js
javascript:(()=>{let e;window.addEventListener(“scroll”,()=>{clearTimeout(e),e=setTimeout(()=>{(()=>{const e=document.querySelectorAll(“article”);for(let t of e)t.textContent.endsWith(“プロモーション”)&&t.remove()})()},100)})})();
“`

#はじめに
ブラウザ版ツイッターを使っています。ホームのタイムラインに表示されるプロモーションが邪魔だったので、これを見えなくするやつをつくりました。

#解説
上記コードは以下のコードを圧縮したものです。

“`js
(
() => {
// ———

const remove_ads = () => {
const art = document.querySelectorAll(“article”);
for (let ele of art) {
if (ele.te

javascript HTML要素の作成、Class、Id、要素の追加、要素の削除、子要素の削除 勉強用

# HTML要素の作成、Class、Id、要素の追加、要素の削除、子要素の削除

# タグを作る

“`javascript
document.createElement(“タグ名”);

const div = document.createElement(“div”);
const p = document.createElement(“p”);
const a = document.createElement(“a”);
“`
# 作ったタグにクラスやIDを紐づける

“`javascript
div.id = ‘id’; //idを付ける
p.className = ‘p’; //classを付ける
“`
# タグに要素の追加

“`javascript
const text = ‘要素の追加’;
div.appendChild(text);
console.log(div);
“`

# 指定したHTML要素を削除する
removeメソッドを使って、指定したHTML要素自身を削除。

“`javascript
const list_element = d

2021年に知っておきたいJavaScript最適化技術34選

本記事は、[Atit](https://atit53.medium.com/)氏による「[34 JavaScript Optimization Techniques to Know in 2021](https://javascript.plainenglish.io/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3)」（2021年1月3日公開）の和訳を、著者の許可を得て掲載しているものです。

#2021年に知っておきたいJavaScript最適化技術34選
>最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。

開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。

![Image for post](https://miro.medium.

【JavaScript】記述方法まとめ

# JavaScriptの記述方法
– HTML内外への記述方法
– コメントアウトの記述方法
– 変数の記述方法

##HTML内外への記述方法
###1.HTMLのbody内に記述
＜script＞＜/script＞で囲って記述する。

####メモ
短い記述や、動作確認の際に最適。
複数ファイルで同じJavaScriptを使いたい場合は非効率なので、2番の方法の方が良い。

例）

“`html

テキスト

“`

###2.拡張子.jsの外部ファイルに記述
htmlのhead内に＜script src=”リンク先とファイル名.js”＞＜/script＞で追加する。

####メモ
複数のJavaScriptファイルがある場

Lightning Web コンポーネントをJestでテストする

# 概要
LWCの開発ではjavascriptのテストは必須ではありませんが、今後テスト駆動開発等を視野に入れJestを触ってみました。
Javascriptのテスト自体初めての試みとなるのでご指摘等あれば是非お願い致します。
また、今回Jestの導入方法に関しては触れていませんので各自Trail等で補完してください。

# 環境
sfdx-cli v7.99.0
node v12.20.1
npm v6.14.10
sfdx-lwc-jest

# 実装イメージ
下記のような商談名・完了予定日・フェーズを入力し、新規の商談を作成した上で、現在の商談のリストを表示する「jestTest」という名称のLWCを作成しました。
今回はこちらのLWCに対して

– 商談のリストを表示する機能に対するテスト
– 商談を登録する機能に対するテスト

の上記二つのテストを実装してみたいと思います。
尚、APEX側のテストは今回実装致しません。

# LWC実装コード

“

【Javascript】Spread Operator（スプレッド構文）を試してみた

# 初めに
配列やオブジェクトで使うと便利なスプレッド構文について学習した内容をまとめてみました。

# スプレッド構文とは
MDNの公式ドキュメントには以下のように解説されています。

>スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

要するに配列や文字列を必要な場所にspread(展開する）する構文です。

# なぜ使うのか
理由はシンプルで、コードを短く書けるからです。数字の配列numArrがあったとします。
これに1,2,3の数字が入っている配列に、numArrの数字を追加しnewNumArrを作るとします。

“`javascript
const numArr = [4, 5, 6];
const newNumArr = [1, 2, 3, numArr[0], numArr[1], numArr[2]];
/

SwitchBot温湿度計のデータを Web Bluetooth API で取得する【完結編】

この記事は以下の 2つの記事の続きで、完結編となる内容です。

1. [SwitchBot温湿度計を Web Bluetooth API でスキャンする【試行錯誤中】 – Qiita](https://qiita.com/youtoy/items/e28a10866dd0050251c0)
2. [SwitchBot温湿度計のデータを Web Bluetooth API で取得する：【未完】準備や試行錯誤のメモ – Qiita](https://qiita.com/youtoy/items/6abcc9d704aaebcf5b18)

## これまでの流れ
### やろうとしていること
これまでの記事・この記事でやろうとしていることは、以下の「[SwitchBot温湿度計](https://www.switchbot.jp/meter)」の温湿度のデータを Web Bluetooth API を使って取得する、というものです。
![SwitchBot温湿度計](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508

素人がGW中に履歴書作成ウェブアプリを作ってみたよ

（職業訓練校でWebデザインとAIを学習したばかりの）素人が、ゴールデンウィークを利用して、履歴書作成ウェブアプリを作ってみました。?
　ウェブアプリといっても、HTML、CSS（SCSS）、JavaScriptのみで構成されていて、ソースをダウンロードしてローカル実行も可能です。

できれば、ソースとか見て意見等を頂きたいです。
勝手ですいません?

## Webサイト
下記ページにアクセスすれば利用できます。

– [提供ページ](https://www.mikuro.works/portfolio/works/resume_editting/)
– [GitHub](https://github.com/bonji-396/resume_editting)


## ターゲット
履歴書作成ウェブアプリです。

「日本独自のお馴染み「履歴

kintone を TypeScriptでカスタマイズしてみる

TypeScriptの自習として、kintoneのカスタマイズのコードをTypeScriptで写経する記事です。

自習教材として、[cybozu developer network](https://developer.cybozu.io/hc/ja) の [cybozu developer コミュニティ](https://developer.cybozu.io/hc/ja/community/topics) に投稿された記事等を参考にさせていただいています。

# テーブルカスタマイズ

## テーブルを検索して条件にあったフィールドの値を別フィールドにセットする

レコード詳細画面の保存成功イベント発火時。
kintoneの詳細画面の明細テーブルのtblDropドロップダウン値が “sample02” の時に、”stringOneRow”文字列１行フィールドに明細テーブルの同一行の”tableDate”日付フィールドの値をセットします。

![スクリーンショット 2021-05-16 22.50.58.png](https://qiita-image-store.s3.ap-

SwitchBot温湿度計のデータを Web Bluetooth API で取得する：【未完】準備や試行錯誤のメモ

この記事は、以下の記事の続きで、あれこれ試した内容などのメモです。
　●SwitchBot温湿度計を Web Bluetooth API でスキャンする【試行錯誤中】 – Qiita
　　https://qiita.com/youtoy/items/e28a10866dd0050251c0
なお、思ったように進まなかった部分があり、今回の記事でも完結はしていない状況です。

## Web Bluetooth API でのスキャン（前回の記事の内容）
前回の記事では、例えば以下のような処理で SwitchBot温湿度計 をスキャンできるところまでは確認していました。

“`javascript
// パターン1
navigator.bluetooth.requestDevice({filters: [{ services: [“cba20d00-224d-11e6-9fb8-0002a5d5c51b”] }]});
// パターン2
navigator.bluetooth.requestDevice({filters: [{ name: [“WoSensorTH”] }]});
//

【Vue.js】Vueインスタンスのライフサイクル

## はじめに
仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

## Vueインスタンスのライフサイクル
Vueインスタンスにはライフサイクルという概念があり、以下のようなライフサイクル（フェーズ）がある。
これが分かっていると、DOMの描画後に…などの柔軟な実装ができるようになる。
上記の図中の`状態(プロパティ)名`と書かれている部分がVueインスタンスが持つフェーズである。
各フェーズでconsole.log()を出力させるようにすると、以下の動画のように各フェーズに到達してconsole.log()が出力されているのが分かる。
![ezgif.com-gif-maker (1).gif](https://qiita-imag