JavaScript関連のことを調べてみた2023年07月28日

構文解析について

構文解析について

構文解析

軸解析
パーサに分けられる

字句解析は
トークンごとに要素をまとめる役割がある。

パーサは構文ルールにのっとっているか知れる。

hist Enums.py

from enum import Enum

class Token(Enum):
KEYWORD = ‘keyword’
SYMBOL = ‘symbol’
IDENTIFIER = ‘identifier’
INT_CONST = ‘int_const’
STRING_CONST = ‘string_const’

class Keyword(Enum):
CLASS = ‘class’
METHOD = ‘method’
FUNCTION = ‘function’
CONSTRUCTOR = ‘constructor’
INT = ‘int’
BOOLEAN = ‘boolean’
CHAR = ‘char’
VOID = ‘void’
VAR = ‘var’
STATIC = ‘static’
FIELD = ‘field’
LET = ‘let’
DO = ‘do’
IF = ‘

7/27 プログラミング4日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
——————————–
本日は条件分岐続きをやりました
・条件分岐の種類
if文
Switch文
この二つ使用する

⬜️if文について
—
“`
//変数x
let x = 5;
if(x >= 10) {
console.log(“大きい”);
} else {
console.log(“小さい”);
}
“`
この場合xより値10が大きいため、ブロックされて小さいと表示される
ブロックされるかというと「x >= 10」というのはxのところを数字に置き換えるとわかりやすい
「5 >= 10」であれば見比べたら５から１０大きくないためfalseとなる
elseとはそれ以外を示している
なので、今回でいえばそれ以外の小さいってのがtrueになる

⚫️使用方法としてはこんな感じだと思われる
“`
if (条件) {
// 条件が真（true）の場合に実行される処理
条件結果;
} else {
// 条件が偽（false

スマートフォン向けのハンバーガーメニューボタンの動作方法（jQuery利用）

# ハンバーガーボタンの作り方

お久しぶりです。コウヤです。

今まで、Python関連の記事を中心に書いておりましたが、この度、WebデザインやWebコーディングのスキルを強化して、Webコーダーをまずは目指していきたいという気持ちが固まりました。
現在は副業または業務で活かすことを念頭にスキル強化中です。

さて、今回のWeb作成の課題で、ハンバーガーメニューの作り方を学ぶ機会があったので、実装方法を紹介したいと思います。

皆さんもスマートフォンでWebサイトを見ているときに、以下の画像にあるハンバーガーボタンを見かけることが多いと思います。


さて、このボタンを押下すると、以下のように背景が薄く白くなり、ページ内リンクが出るようになりますが、今回はこれを実装することを考えていきたいと思います。

ここまでの背景デザインまで作成はしませ

Supabase入門

## はじめに
Supabaseを触ったので、Next.jsでSupabaseからデータ取得ができるまでのやり方を書いていきます。 以下のURLからSupabaseの登録をしておいてください。
https://supabase.com/

以下のドキュメントに沿って書いていきます。
https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

## Supabaseとはなんぞや
**ChatGPTに解説してもらいました。**
Supabase（スーパーベース）は、オープンソースのリアルタイムデータベースであり、
バックエンドの機能を提供するプラットフォームです。
Supabaseは、アプリケーションのバックエンドを構築する際に必要な一般的な機能を簡単に利用できるように設計されています。

SupabaseはPostgreSQLデータベースをベースにしており、
リアルタイムのデータ同期、認証、ロールベースのアクセス制御、ストレージなどの機能を提供します。
これにより、開発者はサーバーサイドのコードを書かずに、高度

ABC086C-Travelingの嘘解法を解く（Javascript版）

どうもアットコーダーをJavascriptで解いてる野蛮人です。
300の問題、Travelingを解いてたのですが、どうしても解けなくて以下の記事を参考にしたところ、
https://qiita.com/ytanto/items/caf7bf0ba287da81b20f

まさかの**WA**！！
前の距離から次の目的地までが移動可能かがロジックに入っていないため、失敗するようでした。
私と同じ難民が出たらと思い、正解コードを晒しておきます。

“`javascript:Javascript
function Main(i) {
let a = i.split(`\n`);
a.pop();

let total = [];

for (let i = 0; i < Number(a[0]); i++) { if (i == 0) { let array = a[1].split(" "); let t = Number(array[0]); let x = Number(array[1]); let y =

【Next.js v13.4 AppRouter】触ってみた備忘録（public repository付き）

## 目次
[1.はじめに](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#1%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
[2.この記事の対象者](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#2%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%AF%BE%E8%B1%A1%E8%80%85)
[3.今回作ったアプリの要件](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#3%E4%BB%8A%E5%9B%9E%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A6%81%E4%BB%B6)
[4.成果物](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#4%E6%88%

javascriptのinsertBeforeを利用して、HTMLの要素を移動させる(要素順の入れ替え)

# 結論
ある親となるHTML要素に、すでに存在している子要素を`insertBefore`で挿入しようします。すると子要素は関数で指定した場所に移動します。

# insertBefore関数
“`.js
(親).insertBefore(newNode, referenceNode)
“`
は、ある親が持つ`referenceNode`の前に、`newNode`を挿入する関数です。[^1]HTML要素を追加する目的で使用する想定だと思います。しかし、下記の2つの仕様を持っているため、HTML要素を移動させるときにも利用できます。
– `newNode`に「既に存在する要素」を指定した場合、指定された要素は`referenceNode`の前に移動される。
– `referenceNode`がnullの場合、`newNode`は末尾に挿入・移動される。

サンプルコードで実際の挙動を確認いただけると幸いです。

[^1]:正確性を欠くかもしれませんが、ノードはjavascriptで扱う「HTMLの要素」という考えでいいかと思います。

# サンプルコード

React18におけるStrictモードについて調べました

# これは何
React18社内勉強会の発表資料です。

# Strictモードとは
Strict モードは、コード内の意図しない副作用の検出だったり、潜在的な問題を実際のバグになる前に発見するのに便利な`開発モードのみで実行される`開発ツールです。
潜在的な問題とは、現時点では目に見えないものの、将来的には問題を生じる可能性のある事を指します。

# React18でのStrictモード
以下DeepLを使用した公式の翻訳です。
> – コンポーネントは、不純なレンダリングに起因するバグを見つけるために、余分な時間を再レンダリングします。
> – コンポーネントは、Effectのクリーンアップの欠落に起因するバグを見つけるために、Effectを余分に再実行します。
> – あなたのコンポーネントは、非推奨のAPIを使用していないかチェックされます。

つまり、`表示`→`表示したのを破棄`→`再表示`という順番で実行されます。
なぜこのような動きをするのかというと、冒頭に書いたような「副作用」があるコードをあぶり出すことができるようになります。

### 副作用がある簡単なサンプル

React Ariaを使ってアクセス可能なUIコンポーネントを作成しよう

## はじめに

Webアプリケーションのアクセシビリティは、ユーザーが利用しやすいかどうかを左右する重要な要素です。障害のあるユーザーやアシストテクノロジーを利用するユーザーにも良好なユーザーエクスペリエンスを提供するために、アクセシビリティを考慮したコンポーネントを開発することが必要です。そこで登場するのが「React Aria」です。

## React Ariaとは？

React Ariaは、アクセス可能なUIプリミティブを提供するReact Hooksのライブラリです。WAI-ARIA Authoring Practicesに従い、スクリーンリーダーやキーボードナビゲーションのサポートを提供します。これにより、ユーザーがアプリケーションをより簡単に操作できるようになります。

## WAI-ARIA Authoring Practicesとは？

WAI-ARIA Authoring Practices（以下、Authoring Practicesと略します）は、Web Accessibility Initiative（WAI）によって提供されるアクセシビリティに関するガ

スマートフォンで物体検出

# 0. 概要


– スマートフォンでリアルタイムに物体検出を行います。ROG Phone 3 (ゲーミングスマートフォン ASUS社 2020年)で**約6fps**で動作します。
– 物体検出には**yolox**という機械学習モデルを使用します。yoloxのpytorchのモデルファイルをonnx形式に変換して**javascript**上で動作させることによりスマートフォンで実行可能とします。
– **Google Colaboratory**に開発・実行環境を構築するので、パソコン、スマートフォンに何もインストール

JavaScriptデザインパターン入門

## 1. はじめに

JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。

## 2. モジュールパターン

モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。

これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。

JavaScriptでは、クロージャを使用してモジュールパターンを実装することができます。

クロージャを使用してプライベートメンバー（関数、変数、データ）を包むことで、これらのメンバーがアクセス可能な範囲を作り出し、外部の世界か

限界ド文系大学生がプログラミングをやってみて思ったこと

こんにちは、初めまして。堕罪ｵｻﾑです。
某文豪みたいな顔をしていますが、大学生で**国語学・日本語学**を専攻しています。
今日はざっとですが、初学者のｵｻﾑがつまずいているところをほんの少し掘り下げて記事を書いてみました。共感していただけたり、こんなところがわからないのか！と発見になればいいなと思います。よろしくお願いします！

ド文系の私がなぜプログラミングを始めたのか?

プログラミングとの出会いは唐突でした——。

というのも、当方限界大学生であるため就活云々で問題を抱えていまして、お付き合いをしている方にウワ～！と相談したところ、

「俺エンジニアだからプログラミング教えられるよ～」

という返事だったので私も、

「ほな、やってみるかあ」(プログラミングってJavaScriptとか、ぱいそん？とかそういうのだよね？)

という、ざっとこんな感じでした。

実際やってみて難しかったこと

1．HTML&CSSについて

まずはHTMLとCSSから始めました。引っかかった部分としては

**「閉じタグを忘れる」**
**「a

7/26 プログラミング3日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
———————
前回は算術演算子を学びました
復習：算術演算子使って文字列と値を組み合わせて
コードを書く
“`
let values = “合計:” + 20 * 1000 ;
console.log(values);
//合計:20000
“`
今回はlet使ってやってみました
letだと上書きが出来てしまいますので
複数書く場合はconstで前回と同じようにした方が良いなと思いました
letで変数別々に書いてると
変数同じやつが使った時上書きしないか心配になりました。

⬜️本日3日目の課題
→条件分岐
if文とelse文を使う
演算子も使用する

時間がなかったのでここまでしか出来ませんでした
改めて時間作り条件分岐を再度学ぼうと思います。

可動式todoリスト作成記 / 拖動可更換次序的todolist

(JP)
8月。といえば旅行！

今年は青森，台湾に行く計画を立てた！

しかし、9月にさらに一大イベントがある。引越しだ。

私は同じところにずっといるのが嫌な性で、賃貸更新のタイミングで毎回引越ししている。

今年も田町から芝浦あたりに引っ越そうと思う！（近場に限る）

そうなると8月月初に飛行機予約，宿予約，賃貸物件選定と、やることが盛りだくさん。

何からやればいいのかわからん、、

そこでtodoリストを作りたいと思ったのだ！

作ってみたけど、結構手こずった。

コードはかなり煩雑になってしまったが、綺麗にする気力がない、、

今週か来週にはコード載せたいと思うので、誰かに手直しして欲しい、、

ちなみに、調べまくってドラッグで項目を入れ替えることも可能にした。

——
(CN)
最近很繁忙，要幹的事情好多，，，

8月份計劃去旅遊，9月要搬家等等

想整理一下該做的事情

於是做了一個只屬於自己的完全original的todolist

憑藉網友們的智慧，前天終於完成了！！（如下圖）

但編程碼非常凌亂，打算下禮拜發編程碼，希望有網友們來修改

這todolist

jQuery　基本文法

# jQueryの書き初め
HTMLの読み込みが終わった後にjQueryが実行されるように，以下のように記述する．実際のjQueryの処理はこの中に記述していく．
“`javascript
$(document).ready(function(){
//ここにjQueryの処理を書く
});
“`
↓省略形
“`javascript
$(function(){
//ここにjQueryの処理を書く
});
“`

# jQueryの基本形
“`javascript
//イベントの設定
$(‘セレクター’).イベント(function(){

})

//メソッドの設定
$(‘セレクター’).メソッド();
“`
jQueryの処理は以下の３つの基本要素によって記述する．
**・セレクター**
操作するHTMLの要素を指定する．→　”何を”操作するのか
**・イベント**
jQueryによる操作するタイミングを指定する．→　”いつ”操作するのか
**・メソッド**
セレクタによって指定した要素に行う操作の内容

jQuery 基本知識

# jQueryとは
jQueryはWebブラウザ用のJavaScriptのコードをより短く容易に記述できるように設計されたJavaScriptのライブラリ．
jQueryのキャッチコピーは「write less, do more（少ない記述で，もっと多くのことをする）」

# jQueryの特徴
jQueryには次のような機能や特徴を持つ．
**○DOM操作・変更**
簡単な構文とセレクターを提供して，DOMの要素を選択と操作，変更することができる．要素の選択，追加，削除，属性の変更などの操作が容易に行うことができる．

**○CSSの操作**
jQueryはCSSのプロパティを直接操作するためのメソッドを提供している．例えば，要素のスタイルを変更したり，要素の表示/非表示の切り替えが簡単にできる．これにより動的なUIの作成やスタイルの変

Next.js Material-UIの導入

## 開発環境

– Windows
– node v18.16.0
– Next.js v13.4.12

## 参考情報
[Installation – Material UI](https://mui.com/material-ui/getting-started/installation/)
[Next.js App Router – Material UI](https://mui.com/material-ui/guides/next-js-app-router/)

## 行った内容
◆公式を参考にライブラリのインストール
“`bash
npm install @mui/material @emotion/react @emotion/styled
# Robotoフォントがデフォルトのためインストール
npm install @fontsource/roboto
# アイコン
npm install @mui/icons-material
“`
◆公式を参考にPeerDependencesとlayout.tsxへ記載。
package.json
“`tsx
“pe

【React】アコーディオンリストの作成

# はじめに
Reactで簡単なアコーディオンリストを作成するための実装例を紹介します。

# 作るもの
以下の画像のような、ボタンをクリックすると表示、非表示を切り替えることができるようなUIです。


# 実装
・以下のコマンドで、Reactの雛形を作成する。
“`terminal:terminal
npx create-react-app プロジェクト名
“`

・作成されたApp.js、App.cssファイルを以下のように置き換える。
“`js:App.jsimport { useState } from ‘react’;
import ‘./App.css’;

function App() {
const [selected, setSelected] = useState(

React + SpringBootアプリ　簡易まとめ

# 初めに

今回の記事ではReact、SpringBootを用いた旅行予約管理アプリケーションの作成を行った際に使用したコードを復習も兼ねて簡単にまとめていこうと思います。
今まではEclipseでコード編集を行っていましたが今回のアプリケーション開発ではフロントのコード編集にVC CodeとバックにはIntellijを使用しました。
環境構築などは[YouTube](https://www.youtube.com/watch?v=4LZKnegAm4g&list=LL&index=8&t=3405s)を参考にしました。

## フロント(React)からバック(Java)のAPI呼び出し
SpringBootを使用してアプリケーションを作成する際に使用するControllerに`@CrossOrigin`を使用します。
今回のReactアプリケーションではデフォルトのURL`http://localhost:3000`を使用しているのでControllerには`@CrossOrigin(“http://localhost:3000”)`とすればフロント側から指定のAPIのURLをた

Laravelで削除確認メッセージを出す方法

# 概要
この確認は正直どこでも使うので
汎用性が高いと考え記事にしました。

# バージョン
* laravel 9.x
* composer 2.5.8
* php 8.1

# 対象コード
“`html