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

fullCalendar dayGridWeek で週変更ボタン(<,>)を日付レベルで変更できるようにする

# FullCalendar v5.10.0
Angular,React,Vue,といったフレームワークにも対応した便利なカレンダーライブラリ。
今回はフレームワークは使用していない環境下での話ですが、参考になればと。
nodejs環境下であるため、プラグインの宣言方法など違いがあるかもしれません。

# 週単位で閲覧範囲が遷移する仕様
`initialView`を`dayGridWeek`に設定すると、
デフォルトで`<`,`>`のボタンが設置され、押下すると次週に遷移する。
## 例：10月

|`>`押下前|1(Fri)|2(Sat)|3(Sun)|4(Mon)|5(Tue)|6(Wed)|7(Thu)|
|:–:|:–:|:–:|:–:|:–:|:–:|:–:|:–:|
|`>`押下後|**8(Fri)**|**9(Sat)**|**10(Sun)**|**11(Mon)**|**12(Tue)**|**13(Wed)**|**14(Thu)**|

# 日付単位で表示範囲を変更したい
## 例：10月

|`>`押下前|1(Fri)|2(Sat)|3(Sun

[Snippet] JavaScript、Node.js

# これは何？
JavaScriptで「あれってどう書くんだっけ？」を集めたメモです。

# 時間系
## Sleep

– Return: [`void`]

“`javascript
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec))
“`

### UNIX timeを取得

– Return: [`number`]: `1635204475862` (msec)

“`javascript
(new Date()).getTime()
“`

### 文字列として時間を取得

– Inputs:
– TIMESTAMP_MSEC: [`number`]: `1635204475862`
– Return: [`string`]: `”Tue Oct 26 2021 08:27:55 GMT+0900 (Japan Standard Time)”`

“`javascript
new Date(1000 * TIMESTAMP_MSEC);
“`

## Timezoneを考

React×TypeScriptで作ったポートフォリオサイトを作成した

#はじめに
React、TypeScriptを使った初めての作品として自己紹介サイトを作成しました。

#作成したサイト
https://it-tsumugi.github.io/reactPortfolio/

#実現したいこと
・自分の経歴、能力、作品などが伝わるポートフォリオサイトの作成
・SPAによる高速なページ遷移
・必要な人のみ閲覧してもらえばいいのでSEO対策は考えない
・学習コストが増えすぎるのを防ぐため、サーバーサイドは考慮しなくていい構成にする
・同様の理由で必要以上のフレームワーク、ライブラリを導入しすぎないようにする
・レスポンシブ対応の実装
・チーム開発を意識したコーディングを心掛ける

#使用技術
**フロントエンド**
React, React-Router, React-Hook-Form, EmailJS, TypeScript, styled-component, styled-media-query, Material-UI, react-vertical-timeline-component Yarn, Prettier

**ツール**
Git

独学でタスク管理サービスFroteをポートフォリオとして開発した

#はじめに
現在情報系の大学院１年生のつむぎといいます。web業界に行きたいと思い、フロントエンジニアのポートフォリオとしてタスク管理サービスFroteを独学で開発しました。まだ完成とは程遠いですが、今回はとりあえずサービスが公開出来るまでの過程を書いていきたいと思います。作成したものはこちらです（初回アクセス時はかなり時間かかるかも）[[Frote]] [[github]]

#開発しようと思った背景
予算的、技術的に一般ユーザーが満足するクオリティのものは作れないと思ったので、自分が欲しいものを作ろうと決めました。毎日のタスクをvscodeのテキストファイルで管理していたのですが、問題点が大きくわけて２つありました。**１つは依存関係のあるタスク同士が分かりにくい**という問題です。Aが終わらないとBが出来ない状態を「BはAに依存している」と定義するとAとBは並列の関係にあるべきではありません。つまり、AのほうがBより優先度は高いですが、あたかも同じ程度の優先度に見えてしまっていました。**２つ目は優先度の決定に時間がかかる**という問題です。依存関係も気にしつつ、こちらのほうが優

Web開発者向けの24のChrome拡張機能

今日の投稿では、ウェブサイトのデザインと開発で一般的に使用されているGoogleChrome拡張機能について学習します。
#Google Chromeとは何ですか？
Google Chromeは、2008年に製造されたWebブラウザであるGoogleの有名で成功した製品の1つです。これは、高度なセキュリティ機能と優れたブラウジングエクスペリエンスを備えたクロスプラットフォームのWebブラウザです。 さらに、アドレスバーのURL提案、メモリ使用量の最適化、ページ応答時間の短縮など、他の多くのデバイスで一緒に使用できる便利なプロパティがいくつか見つかりました。
それだけでなく、プログラマーが作業効率を高め、時間と労力を節約するのに役立つ拡張機能も提供します。 次に、一般的に使用されるChrome拡張機能をいくつか見てみましょう。
#Lorem Ipsum Gener

Azure Functions と LINE Notify の組み合わせ（Node.js を利用、ポータルで開発）

この記事は、[Azure Functions](https://azure.microsoft.com/ja-jp/services/functions/) に HTTPリクエストを送ると、LINEアプリに通知が来る（[LINE Notify](https://notify-bot.line.me/ja/) を利用）という仕組みを軽く試したものです。

Azure Functions周りの開発や設定は、[Azure のポータル上](https://portal.azure.com/)で行いました。

## 手順の概要
今回の手順は、おおまかには以下のとおりです。

– LINE Notify のトークンを取得
– Azure のポータル上で Azure Functions を使えるようにする
– Azure Functions でのコーディング前の準備
– [axios](https://www.npmjs.com/package/axios) をインストール
– 環境変数を設定
– Azure Functions でのコーディング

## 実際に進めていく
### LINE

javascript演習　6,7日目/３０日

覚えたこと

someとevery

“`javascript
const isAdult = people.some(person => new Date()).getFullYear() – person.year >= 19)

const allAdult = people.every(person => new Date()).getFullYear() – person.year >= 19)
“`

findとfindInex
findIndexとslice

“`javascript
const index = comments.findIndex(item => {
return item.id === 823423
})
//comments.splice(index,1);これでもいい
const newComments = [
…comments.slice(0,index),
…comments.slice(index +1 )
];
“`

canvas

“`javascript
const canvas = docum

styled-componentsで入力補完を効かせる方法(vscode)

Qiita初投稿です。
テスト投稿も兼ねて。

結論: 拡張機能 「vscode-styled-components」 をインストールする。


こちらの方法がおそらく一番手っ取り早いです。

ES6から導入された分割代入について　オブジェクト編

#### 1.経緯

Reactを学習するためにTwitterで話題となっていた、上記の本を買い学習することになった。初めてJavascriptライブラリを使う人にも優しいようにES6復習してからReactを学習する内容となっていた。Vueをやっていた自分

属性ディレクティブ・構造ディレクティブを自作してみる

# はじめに
ディレクティブが全く理解できていなかったので勉強しました。
特に構造ディレクティブの考え方が分かりにくいので、`*`と`[]`の意味の違いに気を付ける必要があると感じました。
Angular公式などをみて書いていますが、あくまで勉強したときに書いたメモ書きなのであしからず。

# 属性ディレクティブを自作する
属性ディレクティブは適用した要素の見た目（CSS）を変えたりイベントハンドラを設定したりできる。ngStyle等が例。
構造ディレクティブは要素を追加したりできる。ngIfとかが例。

コマンド（例：`ng generate directive myColored`）

“`
ng generate directive ディレクティブ名
“`

ここではelementRefを使ってDOMを操作してみる

“`src\app\my-colored.directive.ts
import { Directive, ElementRef, Input, OnInit } from ‘@angular/core’;
import { style } from ‘@an

detaにNodeJSで入門(ほぼ自分用メモ)

# deta (baas)
なんかこれが欲しかったけど今まではなかったもの感が否めない最高なBaas(?)。
無料&クレカなし&簡単。満足。最高。

– データベース(NoSQL)
– Faas (lambdaとかFirebase functions みたいなやつ)
– ストレージ

これらが**本当にお手軽に**使える。

大切なことなのでもう一度言う。

**本当にお手軽に**使える。

## インストールもろもろ

### CLIインストール

“`
# Windowsの方 (PowerShellで実行してください！)
iwr https://get.deta.dev/cli.ps1 -useb | iex

# macの方
curl -fsSL https://get.deta.dev/cli.sh | sh

“`

自分はWindowsユーザなのでmacは試せていません。エラーなどあったらごめんなさい。

### パッケージインストール

“`
npm init -y
yarn add deta
“`

## 共通部分

いろいろインポートしておく。

“`

配列の中にある連想配列の「キーの値」から「他のキーの値」を引き出したい！　「conversionData」の使い方

#概要/やりたいこと
例えば以下のような配列。

“`
const sampleArr =
[{id: 1, name: ‘hoge’, note: ‘備考’},
{id: 2, name: ‘huga’, note:’備考2′},
{id: 3, name: ‘piyo’, note:’備考3′}];
“`
この配列の中の連想配列から、**任意のidのnameやnoteの値を取り出したい**ことってありませんか？

#解決方法

“`
const conversionData = {};
sampleArr.forEach((data) => {
conversionData[data.id] = {
name: data.name,
note: data.note
};
});
“`

というわけではい。
このconversionDataの中身はこんな感じ。

“`
{1: {name:”hoge”,note:”備考”},
2: {name:”huga”,note:”備考2″},
3: {name:”piyo”,note:”備考3″}}
“`

【Vue.js】算出プロパティのキャッシュ

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティのキャッシュについてアウトプットしていきます！

#キャッシュとは
・cpmputed・・・キャッシュされる（依存関係に元付きキャッシュされる）
・methods・・・キャッシュされない

#書き方・解説
ランダムの数字を返す処理をcpmputedとmethodsで記述。

“`HTML:HTML

Computed

1. {{ computedNumber }}
2. {{ computedNumber }}
3. {{ computedNumber }}
4. {{ computedNumber }}

Methods

1. {{ methodsNumber() }}
2. {{ methodsNumber() }}
3. {{ methodsNu

InDesign スクリプト 索引の参照の重複を解消

索引の参照の重複を解消するスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった、どのような不具合にも責任は取れません。
ご了承下さい。

更新 2021/010/25
*/

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

// スクリプト名
var scriptName = “索引の参照の重複を解消”;

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

// ダイアログ
var dialogueFlg = confirm(“索引の目次の参照の索引マーカーの前後の索引マーカーを調べ” + “\r”
+ “同じ目次の場合に参照が重複していると判断し削除します。”
,””, scriptName);

// Noの場合
if (dialogueFlg == false) {

// 終了
exit();
}

// 数
var num

TeamViewer IoTのAPIをNode.jsから触ってみたメモ #iotlt

LTネタとして1時間くらい調べたくらいの雑観です。時間かけてないので間違いが多いかもしれません。

[TeamViewer IoT](https://teamviewer-iot.com/)ってサービスがあるんですね、TeamViewerは学生時代にリモートデスクトップで使ったことあった気がする。そのソフトのIoT…?ほうほう。

[IoTLTのグループでコメントをもらった](https://www.facebook.com/groups/IoTLT/posts/1914940855343686/)ので触ってみました。

> ちなみに次回のIoTLTは11/16です！
> https://iotlt.connpass.com/event/228734/

また、こんなの作ったよー話はこちらのスライドに載ってます。

> 
> https://speakerdeck.com/n0bisuke2/teihuaruwang-rewen-ti-number-iotl

はじめてのJavaScript⑩ 「繰り返し処理 “do while”」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/b768c056565c01de640a#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
[2.”do while”の概要]( https://qiita.com/Stack_up_Rising/items/b768c056565c01de640a#2-do-while%E3%81%AE%E6%A6%82%E8%A6%81
)
[3.whileとの違い](https://qiita.com/Stack_up_Rising/items/b768c056565c01de640a#3-while%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84)
[4.構文](https://qiita.com/Stack_up_Rising/items/b768c056565c01de640a#4-%E6%A7%8B%E6%96%87)
[5.例題](https://qiita.com/Stack_up_Rising/items/b768c0565

Xampp環境で開発したReact x Laravel x mysql のアプリケーションをherokuにデプロイする。

#はじめに
開発したアプリケーションをherokuにデプロイしようと思ったのですが、使用した技術的にもあまり適当な情報がなかったので備忘録としてまとめるついでに誰かの役にたてばなと思います。環境がLinuxですのでMacの方は適宜読み替えてください。様々なサイトを参考にさせてもらっており、参考文献として最後に載せています。

#環境
Ubuntu20.04LTS
React
Laravel(php)
mysql
xampp

#前提
linuxのコマンドが触れる
gitを扱える
デプロイの概念がなんとなく分かる
laravelアプリケーションフォルダ直下をgitで管理している

#herokuの登録とClearDBの設定
こちら[[1]]から登録します。２段階認証みたいなやつはなんか飛ばしちゃいましたが、やっといた方が良い気がする。ログインまで行けたら**Create new app**を選択してアプリケーションの作成をします。名前を入力して、リージョンはアメリカとヨーロッパしかないのでアメリカを選択。**Overview**を押した後に**Configure Add-ons**を押す

はじめてのJavaScript⑨ 「繰り返し処理 “while”」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/a4f72612e6c8ae5b0e89#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.whileの使い道](https://qiita.com/Stack_up_Rising/items/a4f72612e6c8ae5b0e89#2-while%E3%81%AE%E4%BD%BF%E3%81%84%E9%81%93
)
[3.構文](https://qiita.com/Stack_up_Rising/items/a4f72612e6c8ae5b0e89#3-%E6%A7%8B%E6%96%87
)
[4.例題](https://qiita.com/Stack_up_Rising/items/a4f72612e6c8ae5b0e89#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_Rising/items/a4f72612e6c8ae5b0e89#5-%E3%81%8A%

オンラインプログラミングを学ぶための10のウェブサイト

プログラミング言語の基礎を学ぶとき あなたは長い間理解し、覚えることができるように練習したいと思うでしょう。 したがって、以下のウェブサイトは、子供たちがより長く覚えるための演習を解決する際にその知識を適用するために生まれました。

これらのサイトの目的は、プログラミングスキルのテストを支援することです。 低いものから高いものへと問題を解決することによって。 それだけでなく、あなたはしなければなりません より高いランキングを達成するために他の開発者と競争してください。 それはゲームをするようなものです。 あなたはブロンズ、シルバーからゴールド、プラチナのような低ランクから行かなければなりません…これらのページが場所になることを願っています プログラミングへの関心を高め、新しい知識を学ぶのに役立ちます。
#Exercism
Exercism Webサイトには、50を超えるサポートされているプログラミング言語で練習できる何千もの演習があります。 その演習も非常に多様で、初心者やプログラミング業界で多くの経験を持つ人に提供されています。 オープンソースであり、世界中のボランティアプログラ

JavascriptのPromiseを理解して、非同期処理を読み解く

#はじめに

最近、ブロックチェーンプラットフォームのHyperledger Fabricを勉強しています。

そこで、勉強のためにNode.jsで書かれているサンプルコードを読んでいたのですが、コードの端々に出てくる「await」って奴が何か分からず、調べてみることにしました。

ちなみに読んでいたのはサンプルコード「Fabcar」の「query.js」です。
URL：https://github.com/hyperledger/fabric-samples/blob/release-1.4/fabcar/javascript/query.js

#awaitとは何か？

まずは簡単にググってみると、どうやら**Promiseによる非同期処理をより簡潔に記述できる方法**らしいのです。

ふーん、なるほど！

って、恥ずかしながらPromiseがなんなのかを知りません。これはPromiseを理解する必要がありそうですね。

#promiseとはなにか？

まずJavaScriptには**非同期処理**といって、前の処理の終了を待たずに次の処理が動くという性質があります。

でも