JavaScriptとは？

JavaScript
JavaScriptはWebブラウザ上で動くプログラミング言語です。
文章構造→HTML、装飾→CSSとともに、Webページを構築する上でとても重要な要素がJavaScripです。

例えば一例として、次のようなことが実現できます。
・ページ遷移せずに、画面の一部だけを切り替える
・HTMLの要素をアニメーションさせる
・フォームを操作する
・日付や時間を扱う
・時間に応じて背景を変化させる
・ユーザーのアクションに伴って処理を行う

JavaScriptは[JS]と訳すことがある。

『ライブラリ・フレームワーク』
JavaScriptにはさまざまなライブラリやフレームワークが存在しています。
『ライブラリ』
・汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。「こういう動きをJavascriptで作りたい」という時に、一から全て自分で書くのではなく、完成されたプログラムを使い回すイメージ。

『フレームワーク』
・「枠組み」や「骨組み」。「JavaScriptの開発を楽にするために用意された枠組み」と言えるでしょう

代表的なライブラ

Node-RED MCU EditionでIoTしてみた。

# はじめに

Node-RED MCU Editionの環境構築、簡単なフロー、Lチカ、ネットワーク接続(HTTP, MQTT)まで終わったので、組み合わせと連動(IoT)を試してみます。

環境構築と動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/15cba2f4622bf3682083

GPIOの動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/bac2b860b7d26fb450f4

ネットワーク接続(HTTP, MQTT)については以下を参照してください。

https://qiita.com/kitazaki/items/9b93992f6c342828e8f8

# 前提条件

– Intel MacBook Pro (2017)
– macOS Big Sur (バージョン 11.7)
– M5Stick-C
– LED(GPIO10)
– HTTPサーバ、ダッシュボード (Node-RED, Dashboard)
– MQTTサーバ (

JavaScript で文字列や Date を yyyymmdd のようなフォーマットに変換する

## 概要

Vanilla JS での日付の整形に関する記事

例えば、”1970-01-01 00:00:00″ みたいな文字列を YYYY-MM-DD のような書式に整形したり、 “1970-01-01” を “1970/01/01” みたいな形に調整したり
エンドポイントから取得したデータをそのまま表示みたいなので済めばいいけど、プレゼンテーション上の要件で上記のような調整が必要になることがある。

Rubyだと `’2022-10-12′.to_date` とか `Time.zone.today.strftime(‘%Y/%m/%d’)` みたいに簡潔に実現できるが、
JavaScriptの標準APIだとこれほどシンプルなものは備わっていない気がしたのでワンライナーでは済まない程度のコードを書いて対応した。

今時TypeScriptは使いたい（使えない環境もあって今回はそこで必要になったコード）し、実装も適当なのでちゃんと書き直す必要はあるけど、
JavaScript案件で今後再利用することはありそうなのでスニペットとしてここに残しておく

## 文字列を YYYY-MM-

javascriptのawaitにタイムアウトを設定したい

### 通常の `await`

“`typescript
// ただ１秒待つだけの関数
async function sleepOneSec() {
await new Promise((resolve) => setTimeout(resolve, 1000));
}

async function main() {
await sleepOneSec();
}

// 実行
main();
“`

—

### `await` with timeout

“`typescript
/**
* await にタイムアウトを設定する
*
* timeoutを超えて await で待機すると UnhandledPromiseRejection 例外が throw されます。
* @param {Promise} promise – 実行したい promise 関数
* @param {number} timeout – タイムアウト(ms)
* @returns Promise
*/
export function withTimeout(p

JavascriptをHTMLファイルに反映させる方法

# はじめに
学習中のJavascriptについて自分用の備忘録としても書いていきます。
間違っている所等、ご指摘あれば教えてください。
## script要素
Script要素とはHTMLであり、HTML内で実行できるコードを埋め込んだり、参照する事のできる要素です。
“`html

“`
以上のように記述します。
script要素はbody要素の一番最後に記述することが推奨されています。
理由は、HTMLはブラウザで上から読み込まれていくため、複雑なJavascriptがHTMLの上部に記述されていると、Webページが読み込まれるのが遅くなってしまうからです。（アプリケーションによってはhead要素内に記述することもある）
## イベント
JavascriptはHTMLで「何かが起きたら」コードが実行されます。
その「何かが起きたら」をイベントと呼びます。
具体的には、「クリックをする」や「カーソルが上にくる」などになります。
また、イベントを認識してJavascriptのコードが実行されることを「イベントが

VSCode の Code Runner で Jest のテストを実行する

調べると [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) というそのものズバリな拡張が存在するが、
[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) ユーザーであれば ↑ を入れる必要はなく、下記の設定を書くだけで良い。

“`json:settings.json
“code-runner.executorMapByGlob”: {
“*.test.ts” : “cd $workspaceRoot; npx jest $dir$fileName”,
“*.spec.ts” : “cd $workspaceRoot; npx jest $dir$fileName”,
“*.test.js” : “cd $workspaceRoot; npx jest $dir$fileName”,
“*.spec.js” : “cd

画面文字コードがShift_JIS の場合、FormData を使ったファイルアップロードでファイル名が文字化けする

ので、FormData の第3引数に encodeURIComponent したファイル名を設定、

“`html:test.html

“`

受け側で urldecode して対応。

“`php:upload.php

Google Apps ScriptでFolder内のファイルを再起的に扱える関数を作成した

### 元の関数

“`js:recursive.gs
// rootFolder: Folderクラス
// type: both, onlyFolder, onlyFile
// func: function(object: Folder or File, type: “Folder” or “File”)
function recursive(rootFolder, type, func) {
const files = rootFolder.getFiles()
const folders = rootFolder.getFolders()

if(type==”both” || type==”onlyFile”){
while(files.hasNext()){
func(files.next(), “File”)
}
}

while(folders.hasNext()){
const folder = folders.next()
if(type==”both” || type==”onlyFolder”)

Reactの基礎４

https://qiita.com/hiro949/items/855e64ba7934d1774d91

https://qiita.com/hiro949/items/633a9086abfb1be274fe

https://qiita.com/hiro949/items/9fde00a08441c149f8fe

の続きです。

# ボタン操作

以下のようにしてボタンをクリックして関数を起動させることができます。次のコードではボタンを押すと関数handleClickが実行されて、コンソールに”I was clicked!”と表示されます。

“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

function App() {
function handleClick() {
console.log(“I was clicked!”)
}

return (

模写学習 殴り書き日誌③（Codestep/英会話スクール）

コーディング学習サイト[Codestep](https://code-step.com/)を使用した模写学習での気づきを解説仕様でまとめた記事です。

完全に自分の振り返り用なので悪しからず、、、

# 【HTML/CSS コーディング練習】中級編：ランディングページ／CSSアニメーション

※元サイトは[こちら](https://code-step.com/lp-menu/)

## 学び①：スライドショー

**＜完成見本＞**
スライドショーで画像が切り替わる。

**＜実装方法＞**
まずは仕組みから整理しておきます。

・スライドショー用の画像３枚を重ねて配置
・画像３枚を透明（非表示）にしておく
・以下を実行するアニメーションを組む
　(1)１枚目の画像の表示
　(2)１枚目の画像を非表示にし、２枚目を表示
　(3)２枚目の

JavaScriptにおける文字列の切り出し

# はじめに
JavaScriptにおける文字列の切り出しをまとめました。

# substr
:::note alert
この機能は非推奨とされているので新たにこの機能を採用するのは避けてください。
:::
Stringオブジェクトに組み込まれたメソッドの一つで、指定した位置から指定した文字数だけ文字列切り出してくれる関数です。
typescriptで定義された型は以下のようになっています。
“`ts
String.substr(from: number, length?: number): string
“`
文字列オブジェクトから呼び出されるメソッドで、文字列を`from`で指定した場所から`length`で指定した分を切り出して返却する関数です。
`length`は任意で渡すことができ、何も渡さなかった場合は`from`で指定した以降の文字列を全て取得することができます。負の値、`NaN`は0として扱われます。
`from`が正の値の場合は文字列の先頭から数えた位置から切り出します。`String.length + 1`(文字列の長さ+1)を超える値を指定した場合は空の文字

コラッツ予想をイテレータ、ジェネレータでそれぞれ再現してみた

独習JavaScriptで反復処理を勉強しています。
イテレータ、ジェネレータを覚えて、何かに使えないかということで試してみました。

htmlファイルは同じものを使っております。（h1タグだけ異なりますが）
generatorを用いた記述のほうが簡潔で、１０行ほど短く済みました。

何かアドバイス等ございましたらお気軽にコメントください。

“`index.html

Collatz Iterator

SakuraサーバーにNode.jsをインストールする方法

# 目的
* Node.js v16.17.1（2022/10/13時点の最新版）をSakuraサーバーにインストールする

# 前提
* Python3がインストールされていること（Node.jsのコンパイルに必要）

# 参考サイト
* https://blog.pinkumohikan.com/entry/how-to-install-nodejs-to-rental-server-of-sakura

# 手順
## Sakuraサーバーにアクセス
“`
$ ssh @.sakura.ne.jp
“`
## Open SSLのコンパイル
“`
$ curl -sSf https://www.openssl.org/source/openssl-1.1.1o.tar.gz -O
$ tar zxf openssl-1.1.1o.tar.gz
$ cd openssl-1.1.1o
$ ./config –prefix=/home//openssl –openssldir=/home//local/openssl
$ ma

localStorageとsessionStorage

# localStorageとsessionStorageについて
html5で提供しているAPIのこと。
両方ともkeyとvalueをもつデータを保存場所として使うが、有効期間があるかどうかが大きな違いと言える。
localStorageとsessionStorageはドメインごとにstorageを保有し、各storageは互いの情報は共有しない。

# localStorageとsessionStorageの違い
localStorageはsafari以外は有効期間は存在しないが、sessionStorageは存在するのが特徴。
なお、chromeやその他のブラウザーもsafariと同様にlocalStorageの有効期限を制限する動きあり。

| |localStorage|sessionStorage|
|—|—|—|
|有効期間の有無|なし
なお、safariは最終アクセスから7日間に制限されるという仕様変更|ブラウザー（またはタブ）が終了するとデータは削除
または、一定の時間がすぎるとデータは削除|

# chromeからstorageを見る方

Vuejs3