JavaScript関連のことを調べてみた

JSX・クラスコンポーネントと関数コンポーネント [5日間でReactの基礎を習得したい 2/5日目]

# はじめに

5日間でReactの基礎を習得する試みの2日目です。2日目は、Reactでよく使われるJSXの記法、クラスコンポーネントと関数コンポーネントについて学びます。

https://qiita.com/MichaelHashimoto/items/f3ad9f56081a40b9b788

私はC#やPythonを仕事で使っているため、オブジェクト指向の言語的な考え方や、Pythonでの例えを使って理解を進めます。同じような境遇の方の理解の助けになれば幸いです。

# JSX

次のような記事を作りたいとします。

この記事を作るために、ただのJavaScriptの構文でReactのHelloWorldクラスコンポーネントを作ると、以下になります。

“`js
class HelloWorld extends React.Comp

VSCodeの機能拡張を作った

今回は、Visual Studio Code(VSCode)の機能拡張を作っていきます。
ESP32で動くJavascript実行環境を作っていまして、普段使っているVSCodeからそのJavascriptの実装とアップロードができるようにしたかったのがモチベーションです。

コマンドとしては、5つ作ります。また、VSCodeの画面の左下のステータスバーに、1つのテキストのボタンと3つのアイコンのボタンを作ります。


[VScode Extension Guide]

https://code.visualstudio.com/api

# 開発

・環境構築
・ひな型作成
・コマンドの実装
・ステータスバーのボタンの実装
・メッセージトーストの表示
・入力ダイアログ
・選択ダイアログ
・コマンドの実行
・クリップボードへのコピー

## 環境

Webアプリ開発 ログイン編

# 初めに
webアプリの開発ができたので、開発中に考えたことを書いていきます。
今回はログインについてです。

# 開発環境

macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと

## ログイン編

### 作りながら考えたこと

まずはビューで意識したことは
ログイン機能のコンポーネント化です。

フォームの外枠の設定をする
panel.blade.php

フォーム欄の名前をつける
label.blade.php

バリデーションエラーを出す
error.blade.php

フォームでよく使われるものはコンポーネント化をすることで機能修正する際に該当箇所を見つけやすくしました。

次にルートは
“`web.php
Route::get(‘login’, [SessionsController::class, ‘create’])->middleware(‘g

【React】scriptタグを埋め込んで動かしたい！！

# はじめに
先日、4月頭にリリースしたサービスの広告審査が通りました。「よっしゃ、実装するぞ！」と意気込んだものの、対象画面内に`script`タグを埋め込む必要があり、どうやら単純に実装しても動かないようでした。
自分なりに色々調べて、`ChatGPT`や`Bard`に聞いたりしてうまいこと動いたのでメモとして残します。あまり必要としないかもしれませんが、同じく悩んでいる方の力になればと思います。

# ちょっと宣伝
審査が通ったサービスというのがこちらです。

https://wikimiru.com/

wikimiru（ウィキミル）という、時間経過でランダムに流れるWikipediaの情報を眺めることができるサービスです。

**本当にただそれだけです。**

通勤時間などに使ってもらえると嬉しいです（個人的には歯磨きをしながらよく見ています）！

# 実装
本題に入ります。
私の場合、以下のような構成にする必要がありました。

“`html

/* 実際はconsol

【GAS】tsからjsファイルにバンドルしたコードをGASのエディタ上でデバッグできる状態に修正する

「TypeScript+clasp+esbuild」でGASのローカル開発を便利にしたものの、そのままではデプロイした後にGASのエディタでデバッグすることができないため、
GASのエディタに反映されるタイミングで、デバッグできる状態にする方法を紹介します。

## プロジェクト構成

“`
.
├── dist/
│ ├── appsscript.json
│ └── main.js //バンドルされたファイル
├── src/
│ ├── main.ts
│ └── … //他のtsファイル
├── .clasp.json
├── esbuild.js
├── package.json
├── tsconfig.json
└── updateFileContents.js //今回紹介するファイル
“`

環境構築は以下の記事を参考にしています。
https://zenn.dev/funteractiveinc/articles/776b5812833475

## 問題点

バンドルされたmain.jsが

【JS】予約語

# はじめに

学習ログ記事です。読んでくださる方、ぜひ揉んでください。
対戦よろしくお願いします。

ECMA Script 公式ドキュメントより、予約語（`ReservedWord`）について

https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#prod-ReservedWord:~:text=Syntax-,ReservedWord,-%3A%3A%20one%20of

# 予約語とは

変数・関数の命名に利用できない文字列のこと
例
“`js
const a = ‘a’ // ok
const break = ‘a’ // ダメ（break は予約語）
function const // ダメ（const は予約語）
“`
`const` が命名に利用できると問題が発生するので、いくつかの文字列が予約語として使用を禁止されています。
# 予約語一覧

予約語の一覧は先ほどのURLより

https://tc39.es/ecma262/multipage/ecmascript

Reactの概要理解・新規プロジェクトの作成 [5日間でReactの基礎を習得したい 1/5日目]

# はじめに

5日間でReactの基礎を習得する試みの1日目です。1日目は、Reactとは何かをざっくりと学び、新規プロジェクトを作ってみます。

https://qiita.com/MichaelHashimoto/items/f3ad9f56081a40b9b788

私はC#やPythonを仕事で使っているため、オブジェクト指向の言語的な考え方や、Pythonでの例えを使って理解を進めます。同じような境遇の方の理解の助けになれば幸いです。

# Reactとは

Meta社(Facebook社)が開発したJavaScriptのライブラリのことです。

ライブラリということは、pythonでいうところのpandasやnumpyのようなものですね。
つまり、pythonにおけるpandasのDataFrameのように、JavaScriptのコードを書きやすくするようなコードを提供してくれるのがReactというわけです。

## Reactライブラリを使ってみる

Reactはただのライブラリなので、HTMLファイルにReactライブラリを読み込むコードをjavascriptで書けば

[test25] :hoverに設定したtransitionを止めない

# 1.基本

## 1-1.画面にマウスを乗せると画像がスライドイン

“`html

“`
– [codepen](https://codepen.io/yambejp/pen/jORjOzo)

第15回 JavaScript クリックで拡大(JavaScript＋CSS）

# はじめに
– 第13回は、JavaScriptを使用してクリックによるアニメーションの拡大・縮小
– 第14回は、CSSを使用して`hover`によるアニメーションの拡大・縮小

を試しました。

第14回のCSSの`animation-name`を使用して、CSSだけでクリックしてアニメーションをしようと思いましたが、CSSにはクリックに対する疑似クラスがないことに気づき断念しました。
`activve`を使用すればクリックになるのかと思ったのですが、`active`は、要素を押し続けている状態だけ動作するものであり、クリックではなかったので、期待通りの動作ではありませんでした。

今回は、CSSに加えてJavaScriptを使用することで、`hover`ではなく、クリックによるアニメーションを試したいと思います。

# 今回実施する内容
JavaScriptの`animate`で作成するクリックによる拡大と、JavaScriptとCSSの`animation-name`で作成するクリックによる拡大を実施します。
![Scale_CSS.gif](https://qiita-im

JavaScript Dateオブジェクト　ミリ秒までしか反映されない

## ミリ秒までしか反映されなかった
JavaScriptのDateオブジェクトは、MDN Web Docsに記載されている通り、`YYYY-MM-DD　HH:mm:ss.sss`のミリ秒までしか反映されません。
>メモ: Date コンストラクター（および Date.parse と同等）で日付文字列を解釈する際には、常に入力が ISO 8601 形式 (YYYY-MM-DDTHH:mm:ss.sssZ) であることを確認してください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

## 実際に動かしてみると
“`javascript
// 2024-01-01 12:00:00.999
var date1 = new Date(“2024-01-01 12:00:00.999”);
// 2024-01-01 12:00:00.99955
var date2 = new Date(“2024-01-01 12:00:00.99955”);

cons

FlaskとReactでToDoリストを作ってみた！

# はじめに
お久しぶりです。Tomita Kentaroです。今回は、過去に作ったFlask(python)とReact(JavaScript)で作ったToDoリストを紹介したいと考えております。Flaskをサーバーとして、Reactをフロントとして動かしてあります。

# Flask（バックエンド）の紹介
まずは、ディレクトリ構造の紹介です。
“`bash
.
├── TodoDB.db
├── main.py
├── mecab-test
│   └── …
├── requirements.txt
└── utils.py
“`
続いて、main.pyの紹介です。
使用できる、ユーザは “a” , “b” , “c” の3人を用意しました。
“`python:main.py
from flask import Flask
from flask import request, make_response, jsonify
from flask_httpauth import HTTPBasicAuth
from flask_cors import CORS
import

P5.js 日本語リファレンス(clip)

このページでは[P5.js 日本語リファレンス](https://qiita.com/bit0101/items/91818244dc26c767a0fe) の clip()を説明します。

## clip()

### 説明文
clip()以降で描画される内容の一部をマスクする(覆い隠す)ための形状を定義します。

最初のパラメータ callback は、マスクを定義する関数です。コールバックで描画された形状はすべてマスク形状に追加されます。マスクは、clip() が呼び出された後に描画されるものすべてに適用されます。

2番目のパラメータである options はオプションです。

invert: true }) のように、invert プロパティを持つオブジェクトが渡された場合、それはマスキング モードの設定に使用されます。 { invert: true } マスクを反転し、マスクされた形状に穴を作成します。 invert はデフォルトでは false です。

マスクは、push() 関数と Pop() 関数の間に含めることができます。これにより、マスクされた形状の後にマス

P5.js 日本語リファレンス(beginClip/endClip)

このページでは[P5.js 日本語リファレンス](https://qiita.com/bit0101/items/91818244dc26c767a0fe) の beginClip()〜endClip()を説明します。

## beginClip()〜endClip()

### 説明文
endClip()以降で描画される内容の一部をマスクする(覆い隠す)ための形状を定義します。

### 構文
beginClip(options);
　ここにマスク形状を定義する
endClip();

### パラメタ

– options
`invert:false` : マスク形状で覆い隠す(デフォルト)
`invert:true` : マスクを反転する(falseで覆い隠していた部分のみを描画する)

### 戻り値

### 例

https://editor.p5js.org/bit0101/sketches/E4nKra-8A

### 著作権

p5.js was created by Lauren McCarthy and is developed by a communi

[JavaScript] オブジェクト、プロパティ、メソッドについて

# まとめ

#### オブジェクトとは
> オブジェクト指向プログラミングにおいて、プログラム上の手続きの対象を抽象化する概念である。
※[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0))

#### プロパティとは
> 多くの場合データ構造と関連付けられた属性を記述する、オブジェクトの特性です。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Glossary/property/JavaScript)

#### メソッドとは
> オブジェクト指向プログラミング言語において、あるクラスないしオブジェクトに所属するサブルーチンを指す。
※[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%

jsのnavigationを使ってosとアプリの情報を取得するプログラムを作ってみた

# 初めに
皆さんこんにちは、今回はjsのnavigationを使ってOSの情報を取得するプログラムを作ってみました。
# ファイル構成
今回は多分html一つで大丈夫だと思います
# プログラムを書いていく
早速プログラムを書いていきましょう。
では、htmlに以下のプログラムをコピペしてください。
“`html:html