JavaScript関連のことを調べてみた2021年10月29日

JavaScriptベースの動画編集サービスを作ってます

# はじめに
JavaScriptとWebAssemblyを駆使して動画編集サービス・[Double TONE – https://doubletone.jp](https://doubletone.jp)を作っています。2021年10月時点では限定公開ですが、近々ベータ版として一般公開する予定です。

イメージはこんな感じです。Qiitaでは、このサービスの開発ブログ的なことを書いていこうと思います。

# 自己紹介
趣味でコーディングをしているKumagaiです。
本職ではプログラミングすることはあまりなく、Excel職人・PowerPointer職人になってます。
保護猫５匹と楽しく生活してます。
![cats.png](https://qiita-

【JavaScript】関数とオブジェクト⑭　プロトタイプチェーン

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/fa058f7c761faf782703

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.プロトタイプチェーン

プロトタイプを多重形成したもの

どういうことかコードで確認します。

####例1

前提として

““js
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.hello = function() {
console.log(‘hello ‘ + this.name);
}
// インスタンス化
const bob = new Person(‘Bob’, 18);
bob.hello();
““

上記の状態で

忙しいエンジニアに捧げる！obnizとLINE APIでレトルト在庫管理！

##　レトルト食品最高
突然ですが、レトルト食品って最高ですよね。
茹でればすぐに食べられて、なおかつ食費も抑えられる。時間・価格ともにコスパ最高です。
日夜忙しく働くエンジニアの皆さんの心強い味方といっても過言ではありません。

さらに、「安い、早い！！」だけではなく、最近のレトルトはシェフ監修なんて書かれていたりして、非常においしいものがたくさんあります。スーパーで選ぶのもちょっとした楽しみになるくらいです。

*↓推しレトルトパスタ*

## 忙しい時に限ってなくなる
しかし、忙しい日が続いてしまうと、いつの間にかレトルト食品も底をつき、
一生懸命働いて帰ってきたのに食べるものがない…なんてことも。
そこで`obniz Board 1Y`というIoT向けのマイコンを使って、レトルトが尽きない仕組みを整えてみました！
![IMG_20

ウェブサイト用の16ファイルアップロードHTML5

コンポーネントファイルのアップロードは、今日のWeb開発で一般的に使用されている機能です。 必要に応じて、画像、製品、ビデオ、およびその他のファイルタイプをWebサイトにアップロードできます。 今日は、CSS、Javascriptを使用して事前に設計されたファイルアップロードテンプレートをいくつか紹介します…あなたのウェブサイトが美しいデザインとより多くの機能を持つのを助けるために…

#ファイルJqueryをアップロード
以下の結果をご覧ください！

obniz×LINEBOTで、鍵をいつもの場所に置いているか推しに教えてもらうことにした。

#家の鍵をなくしがち。
今日は友達と遊ぶ約束がある。
xx時の電車に乗らなきゃいけないから、そろそろ家を出なければ。

・・・あれ、家の鍵がない。
ポケットには？カバンの中？
え、無い・・・どこにも無い！
やばい。昨日帰ってきた時はどこに置いたんだっけ？
うわーどうしよう！電車もう間に合わない！遅刻だー！！！！

・・・みたいな経験、みんなあるよね？（ない）

私は家の中で家の鍵を紛失する競技種目があれば確実に金が取れるぐらいには家の中で家の鍵をよく紛失する。
鍵を置く用の決まった定位置を作ってはいるが、習慣的にそこに置くことができず、
無意識にポケットに入れていることもあるし、下駄箱の上に無造作に置いていたり、
酷いときは水を飲むために開けた冷蔵庫の中に入れていたりする。(全然記憶が無い）
その結果、外出直前になると必ずと言っていいほどテンパりながら鍵を探す羽目になっている。
結構自分でもヤバいと思っている。

ある日、プロトアウトスタジオの授業でobnizを使ったハードのモノづくりについて学んだ。
温度センサー、LEDライト、スピーカー、超音波距離

WebAssemblyを使ってJavaScriptからC++を動かしてみよう！

みなさんこんにちは、こんばんは！！！！
今回はWebAssemblyを使ってJavaScriptからC++を動かしてみます

:::note warn
なおこの記事を書いた人はただの高校生です 最近はライブラリに頼らず自力で図形描画してたりします
初投稿記事です
:::
認識が間違ってるよ、とかあればコメント欄で連絡してくれるとありがたいです。助かります。

# そもそもWebAssemblyって？
簡単に要約すると「高水準の言語をバイナリー形式に変換してウェブ上から動かすことができる」というのです

JavaScriptに実行速度が求められる時代になりましたが、インタプリンタ型で動的型付けをしている以上、コンパイラ言語より遅くなってしまうっておいう問題があります (グラフィック使ったりめちゃくちゃ凝ったサイトとかあるもんね)

そこでWebAssembly、バイナリに変換することで実際に読み込む量を減少させることができ、またC++など処理が速い言語を利用することができます

最高ですね

# 使ってみよう　インストール
今回はwasmを作ってもらうためにemscriptenを使うこと

javascript演習　〜１０日目/３０日

覚えたこと

e.shiftKey, ctrlKey, altKey

“`javascript
checkbox.addEventListener(‘click’, function(e){
console.log(e.shiftKey)
)
“`

thisの使い方、A = !Aとか

“`javascript
function handleCheck(e){
if(e.shiftKey && this.checked){
checkboxes.forEach(checkbox => {
if((checkbox === this || checkbox === lastChecked) && lastChecked){
inBetween = !inBetween;
}
if (inBetween){
checkbox.checked = true;
}
})
}
lastChecked = this;
}

obnizを楽器化してみたかった。。

皆さんこんにちは、khara_xedgeです。

今回、「obniz board 1Y」というデバイスを入手しました！
「obniz board 1Y」とは、wifiで簡単にインターネットへ接続することができるマイクロコンピュータです。各種センサ接続用の端子を持ち、センサから様々な情報を取得しながら動作するシステムの作成など、IoT工作が手軽に始められます。

そんな「obniz board 1Y」を使って、楽器もどきを作ってみたいと思います。

#環境

今回実装した時の環境は以下の通りです。

◆実行環境
・Node.js 16.10.0

◆パッケージ
・npm 7.24.0

◆コーディング
・Visual Studio Code 1.61.0

◆ハード部品
・obniz board 1Y
・IC温度センサ
・圧電スピーカー
・LED照明（赤）

#演奏スタート！！
いきなりですが、実行結果から！

obnizでスピーカー鳴らしてみた！ pic.twitter.com/FB3PWjWrC9

— khara (@khara_xedge) October 27, 2021

#ソースコード

動画で実行したコードは以下の通りです。

【Rails×LIFF】 モテたい人向けのマッチングアプリ完全攻略サービス 「マッチングアプリマスター」 を作りました。 (男性向け) 【個人開発】

# サービス概要
対応端末は`iPhone X 以降(スマホ)`を推奨しております。
LIFFアプリ(LINEで動くWebアプリ)なのですが、外部ブラウザ(SafariやChrome)からも開くことが出来ます。
※ 二極化

URL：https://dating-apps-master.com/top
Github：https://github.com/ryuki7/dating-apps-master

マッチングアプリを利用しているが女性と上手くいかない、女性の扱い方がわからない、女性との出会いが無くて困っている人に
目的別に適したマッチングアプリを導き出し、そのアプリごとのテクニックやコツを全て指南して、モテ男（マッチングアプリマスター）への道標となる
マッチングアプリ完全攻略サービスです。

Expressのerror handlingはmiddlewareで実装するのが良さげ

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n42b96d36f0cf

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

【Vue.js】算出プロパティと監視プロパティの比較

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティと監視プロパティについて比較していきます！

#算出プロパティ VS 監視プロパティ
算出プロパティと監視プロパティどちらでも実装できてしまう場合、基本的には**算出プロパティ**を利用することを推奨されている。理由としてはシンプルに記述することができるからである。

#書き方・解説
今回は以下のように、**firstNameテキスト**、**lastNameテキスト**を入力したら
`fullName: firstName スペース　lastName`
と表示されるようにしていきます。
これを`算出プロパティ`と`監視プロパティ`で記述し比較していきます。


“`HTML:HTML

arrow関数で名前付きの即時関数の書き方

やりたいこと

“`.js
var result = (function (param1, param2) {
return param1 + param2;
}(1, 2));
“`

みたいな感じで、名前付きで即時関数をarrowで書きたかった

方法

“`.js
const result = ((param1, param2) => {
return param1 + param2;
})(1,2);
“`

これでいけました。

ウェブサイトのデザインのための12のカラーピッカー

今、私たちはウェブデザインの色選択をサポートするツールを一緒に学びます 2021年に一般的に使用されました。

色はウェブデザインの重要な要素の1つであり、大きな注目を集めています。 ユーザーにアイデアを提供し、特定の意味を表現し、ウェブサイトとの相互作用を増やします… あなたのウェブサイトに適切な配色を選択することは難しく、多くの深い知識を必要とします。 したがって、 上記の問題を解決するために、カラーパレットの作成が生まれました。

#Color Hunt
Color Huntは、GalShirによって作成されたオープンパレットコレクションです。 それはデザインの同僚の間でパレットを共有するというアイデアから始まりましたが、その有用性のために、ますます多くの人々がパレットを作成してこのサイトで共有しています。 ウェブサイトを利用するためにアカウントを登録する必要はありません。 ウェブサイトの原色を入力するだけで、サイトに適した配色が自動的に検出されます。 または、このサイトで独自のカラーパレットを共有することで、コミュニティをサポートすることもできます（ただし、Color Hu

心が疲れたので、可愛いものをBGM付きで右往左往させた

https://twitter.com/nnmshita/status/1453598678757769219

# とにもかくにも癒されたい
お仕事に、お勉強に、みなさん本当にお疲れ様です。2021年も残すところあと2ヶ月。
とにかく**可愛いものを見て癒されたい。**
そう思って手を動かした結果、とても可愛いものが出来たので報告させていただく。
我々が右往左往しても全く可愛くないが、**可愛いものが右往左往する姿はとても可愛い。**

# 材料
Visual Studio Code 1.61.0
Node.js 7.24.0

* obniz Board 1Y
* 超音波測距センサ
* サーボモータ
* スピーカー
* 右往左往させたいもの（今回の主役）

各パーツ

右往左往させたいもの。（可愛い）
シルバニアの赤

Node.jsでJavaScriptによるレンダリングブロックを検証する

# はじめに
本記事では、ブラウザレンダリングについての説明は割愛します。
ブラウザレンダリングについての説明が必要な方は、
こちらの記事でわかりやすく説明されていたのでご覧ください。

https://zenn.dev/ak/articles/c28fa3a9ba7edb

また、この記事ではレンダリングブロックの中でも、JavaScriptによるものをご紹介します。

# レンダリングブロックとは
ブラウザレンダリングにおいて、レンダリングを遅延させてしまうことを指します。
レンダリングブロックの要因としては、以下が挙げられます。

1. JavaScriptによるもの
1. CSSによるもの

いずれも、外部リソースの読み込みによる遅延が大きな原因になります。

“`html:外部リソース読み込みの例

“`

# Node.jsでレンダリン

Kendo UIを使っていたのを振り返ってみた

##はじめに
初めまして。yamaguchiです。
IT系企業に入社して20余年のエンジニアです。
記事を書いた切っ掛けは、社会人となってから世の中の状況が大きく変わり、また業務における開発環境も様変わりしたことを実感して、その節目でどのように感じたのかを残しておきたいと考えたからです。
今回は、その節目の１つで 「Kendo UI for jQuery」 を利用した開発手法と出会った頃にフォーカスを当てたいと思います。

## １．「Kendo UI for jQuery」って何ですか？
Kendo UI は、HTML5とJavaScriptを使用して、Webソリューション開発を実現させるためのビジネス向けUIライブラリです。
当時すでに jQuery-UI が存在していましたが、よりモダンなレイアウトの提供をコンセプトとしたUIライブラリの１つとなっています。
jQuery の拡張をベースとした同コンセプトのフレームワーク群とは異なり、Kendo UIはJavaScriptを用いて速度を意識してゼロ構築されており、様々なデバイスで開発する上での強みともなっています。
「Kendo

家族の記憶を守る！obnizで認知症予防脳トレおもちゃ！

#家族を認知症にさせたくない！
先日日曜14時からのザ・ノンフィクション(フジテレビ系列)で認知症の父とその家族ドキュメンタリーが放送されていた。思わず見入ってしまった。
家族が記憶を失くす。その状況がいかに恐ろしいものか改めて考えさせられた。

そしてこう思ったのである。

***　　　　　　　　　　　　　　「家族を認知症にさせたくない！！」***

#日頃の脳トレが大事らしいが・・・？
では家族を認知症から遠ざけるためにどうすればいいか！
それは日頃の脳トレが大事なのでは？

たしかに、近年認知症予防のためのドリル本やアプリは出ているがこんな弊害がある。

・ドリル本 ← リウマチなどで長時間手を動かすことは困難な人もいる。私の祖母はこの例だ。
・アプリ 　← スマホなどの端末操作が困難な場合あり。手にするだけで嫌がるお年寄りは多い。

#これなら脳トレできるのでは？

そこで使えそうと思ったのが、obnizである。
操作方法はここから動画付きで載せていくが、軽い力で操作ができる＆簡単！
これならお年寄りでも操作可能である！

#仕様
obnizを使用し、問題を出題。
答えの選択は

GASでgmailをスプレッドシートに書き出すのができない！！！！

GASでgamilをスプレッドシートに書き出す方法を調べながらやるも、行きづまりました。


これで実行すると


となります。

getRange を呼び出している変数(今回のケースでは sheet)の値が null になっているので、シート名に間違いがあるのかと思いましたが、シート名を修正しても治らずお手上げです,,,,。

わかる方がいらっしゃいましたら、ぜひ教えていただきです。

カンバン方式のタスク管理アプリを作成する

# はじめに
[Recursion](https://recursionist.io/)というサービスのプロジェクト課題の１つであるタスク管理アプリを作成した際に
詰まった箇所が多かったので、頭の整理のためにまとめた。　　

今回は、デザインを良い感じにしてくれるVuetifyとドラッグ＆ドロップで要素を動かせるVue.Draggableを使用した。

* [Vuetify](https://vuetifyjs.com/ja/)
* [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md).

# 完成品
[GitHub – Task Management App](https://github.com/Takasu-y/task_management_app)
![c6c27ea05632584b1d32cb65cd859560](https://user-images.githubusercontent.com/63044039/139081751-ab45b653

express-generatorで作成したプロジェクトでTypeScriptを使用する

今回は、express-generatorでプロジェクトを作成し、一部でTypeScriptを使用できるように環境構築を行います。

express-generatorを使用してプロジェクトを作成するまでは、下記を参照ください。

https://qiita.com/shintaro_secual/items/b6e561c1255e4146eeaa

あらかじめ、npm、node、express-generatorをインストールしている前提で記載させていただきます。

## 環境
■ Nodeのバージョン
v14.14.0
■ 使用OS
MacOS Big Sur：バージョン11.6
■ 総合開発環境
Visual Studio Code

## プロジェクト作成

“`
% express –view=ejs types

create : types/
create : types/public/
create : types/public/javascripts/
create : types/public/images/
create :