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

【JavaScript】追加、編集、削除機能付きのToDoアプリを作ってみた その2

## はじめに
先日書いた以下の記事で、「IndexedDBやlocalStorageを使えばより実用的になります」とのコメントをいただいたので、この度localStorageを使ってToDoアプリを改良してみました。

https://qiita.com/ry0h3i/items/a7f74e0333e4c55b95c5

## 完成品

See the Pen 【hono】Hello, worldした。

はじめまして。新卒1年目エンジニアのいちたです。

初投稿はhonoで「hello, world」を表示するところをまとめてみたいと思います。
ほぼ、公式ドキュメントでできる内容にはなってしまいますが、ご容赦ください。

# hono:fire:とは
honoは、JavaScriptのWebフレームワークです。**めっちゃ軽量で高速**に動くそうです。実際、Nuxtに比べて、プロジェクト作成や起動が高速でした。すごい…
（Webフレームワーク自体の開発にも興味が…）

さまざまなJavaScript Runtimeに対応しているのもすごい…

# 実際に動かす
「さまざまなJavaScript Runtimeに対応している」とは言いましたが、今回はNode.jsを使います。また、パッケージマネージャは”pnpm”です。
## プロジェクト作成
以下のpnpmコマンドでプロジェクトを作成します。
“`sh
pnpm create hono@latest
“`

こちらを実行するとアプリケーション名、JavaScript Runtimeを選択できます。
選択後、すぐに作成

プログラミング初学者の壁(JavaScript編)

## はじめに

* プログラミング初学者にAtCoderを紹介し
* 突き当たった壁を百本ノックでこなす

—
## AtCoder 概要

競技プログラミング大手

– C++, Python, Rust, Java, C#, JavaScript, Ruby, Elixir[など](https://img.atcoder.jp/file/language-update/language-list.html)いろんな言語で参加できる
– **Algorithm Contest**と**Heuristic Contest**の2種類
– **Algorithm Contest**
– [AtCoder Beginners Selection](https://atcoder.jp/contests/abs?_gl=1*pn71tn*_ga*ODEwMjMwMjE0LjE3MjUyNTgxMTM.*_ga_RC512FD18N*MTcyNTI1ODExMy4xLjEuMTcyNTI1ODU5MC4wLjAuMA..): まず第一にこれをこなす
– [「A

個人で路上ライブマッピングサイトを作りました

この記事を見てくださりありがとうございます。今回、路上ライブが開催される場所を地図上にマッピングして集客できるようなWebアプリケーションを作ってみました。以下のリンクから
https://livespot.onrender.com/


# 1. Webアプリの目的
大学で音楽活動をしていて、何かインディーズ界隈に貢献できるサービスを開発できないかと考えていたときに「路上ライブ」に目をつけました。私が考える路上ライブの課題及び改善点として、「集客のしにくさ」が第一に挙げられます。この課題を解決する手段として、POKEMON GOのようなマッピングサービスが有効だと考えました。作ったアプリ(Livespot)ではアーティストはユーザー登録を行えばアプリ内でアーティストアカウントをもち、ライブを行

JavaScriptを記号だけに(関数名やキーワードも)変換するプログラム

[JavaScript で Hello,world! に挑戦 (ただし記号だけを使って)](https://blog.mudatobunka.org/entry/2024/09/02/140311)という記事をみて、記号だけ(アルファベットを使わない)でプログラムができることを知りました

例えば、こんな`hello world!`プログラムが
“`javascript
alert(‘Hello,world!’)
“`
こんな形に変換されます
“`javascript
_= ({}+[])[-~-~-~-~-~[]]+({}+[])[-~[]]+([][”]+[])[-~[]]+(![]+[])[-~-~-~[]]+(!![]+[])[+[]]+(!![]+[])[-~[]]+([][”]+[])[+[]]+({}+[])[-~-~-~-~-~[]]+(!![]+[])[+[]]+({}+[])[-~[]]+(!![]+[])[-~[]];__= (!![]+[])[-~[]]+({}+[])[-~-~-~-~[]]+(!![]+[])[+[]]+([][”]+[])[+[

Promiseについて

promiseについて勉強したのでメモ

promiseのインスタンス化
“`js
new Promise((resolve,reject)=>{
処理
})
“`
resolveとrejectはどこから受け取るのか？

JavaScriptエンジンが自動的に提供する。これらの引数は実行関数である。

`.then` resolveしたときに呼び出される

`.catch` rejectされたときに呼び出される

例
“`js
const myPromise = new Promise((resolve, reject) => {
const success = true; // 成功した場合

if (success) {
resolve(‘成功しました!’); // ここで呼び出されるのはJavaScriptエンジンが提供したresolve関数
} else {
reject(‘失敗しました!’); // ここで呼び出されるのはJavaScriptエンジンが提供したreject関数
}
});

// 使

モノレポでVueのSPA × HonoのAPI の技術スタックでCloudflare PagesにDeployし、フルスタックな開発する

## はじめに

Cloudflare Pagesでは静的なコンテンツは無制限に配信できる（すごいですよね）。また、Cloudflare Pages Functionsを利用すればエッジ上でJavaScriptを実行でき、バックエンドのサーバーを用意することもできる。

今回はそんなCloudflareのスタックに乗っかり、簡単にフロントエンドはSPA（Vue.js）で実装して静的なコンテンツとして配信、バックエンドはHonoでAPIを実装、というのをやってみたいと思う。

要件は以下。

– `/api/*`以外はSPA（静的なコンテンツの配信）として処理されるようにし、`/api/*`のみPages Functionsで処理する

※[HonoでAPI付き雑React SPA最小](https://zenn.dev/yusukebe/art

プログラム爆発の予感(杞憂?)について

# はじめに
ちょっと、衝撃的な考え方かもしれませんが、いま、自分でプログラムを作成していて、そんな予感をもっています。もしかしたら、自分だけかもしれませんが、どのような予感なのかを述べてみたいと思います。

# その予感とは
今まで、いろいろなコードを作成してきました。それまでは、何とか不具合を起こすことなく、動作してきたと思っています。それはたまたまだったのかもしれません。

世の中を見ると、至るところで、プログラムの不具合が発生していて、基幹システムでも発生しています。エラーが全くないシステムはないのかもしれません。おそらく、ある程度のエラーはあらかじめ想定内のことなのかもしれません。エラーのないシステムはありえないということかもしれません。

ソフトに限らず、ハードである車や水道管なども経年変化による不具合が発生しています。そのため、システム維持のための保守が必要になります。残念ながら、きちんと保守をしているから大丈夫ということは100%言えないと思います。保守をしていても不具合は起こります。

航空機でさえ、そうです。人命を預かっていますが、やはり不具合による事故は起こって

WebDeveropperVootcamp HTML/CSS/JavaScript編

# 本日から本格的にプログラミング勉強を始める
## 必ず守ること
– 焦らない
– Baby step & Jaiant straide
– 飛ばさない
– ドツボにはまらない
– ひたすらハンズオン
– 視聴率100％

# JavaScript
## 配列の操作

### forEach()
– 配列.forEach(function 関数(){})で**配列の各要素に対して**関数を適用できる

###map()
– 配列.map(関数{return })で**配列の各要素に関数を適用**し、**新しい配列を作る**
### 追加と削除
– push():末尾に追加
– pop():末尾を削除
– shift():先頭を削除
– unshift():先頭に追加

### constで宣言すると
– 中身は変えられるが再代入はできない

## オブジェクト

### 操作
– 再代入不可能
– 値の操作は可能
– オブジェクトobjに対して新たにlokking=”good”というプロパティを追加したいとき→obj.lokking =”good”
– メソッド：`{ key:val

自宅プロキシでのPACファイルによるアクセス制御の検証手順

## はじめに
PAC（Proxy Auto-Configuration）ファイルの存在は知っていましたが、具体的な理解が不十分だったため、自宅の検証環境でテストを行いました。
過去に「特定の通信のみ社内のプロキシを経由せず、直接インターネットにアクセスする」という案件があり、その際に苦戦した経験を基に、この記事を記録として残すことにしました。

PACファイルやWPADの仕組みを理解することで、端末のアクセス制御を柔軟に行えるようになります。
また、それをGPO（グループポリシー）などを通じてクライアント端末に一斉に配布できるため、今後役立つスキルだと思いました。

今回は自宅のプロキシサーバーにNGINXを導入し、WebサーバーとしてPACファイルを配置し、アクセス制御を行うことをゴールとします。

## 前提条件
・VirtualBox上で稼働しているAlmaLinux（CentOSの後継）を採用
・VirtualBox上で稼働しているWindows 10端末（評価版）を使用
・プロキシのミドルウェアとしてSquidを使用
・Webサーバーの要件としてNGINXを採用

## 全

デバッグしやすい書き方が掴めてきた気がする

最近『セイト先生が教えるプログラミング入門』でJavaScriptの勉強に取り組んでいます。その中でデバッグしやすい書き方が少しだけ掴めてきた気がします。
# デバッグ1
まず、第5章第13節「非同期処理を可能にするPromiseオブジェクト」の「Promiseとは」（pp.275-277）でPromiseオブジェクトを使った関数の例（foo）が紹介されていたのですが、1-10 & 12-16行目の { } 内が少し長かったためか、
“`
foo.then((resolve) => {…
});
“`
（p.275. コード12-16行目. { }内は省略）

のところで、fooの後ろに書くべき () が抜けていたことに気付かず、全体をハイライトしてctrl + shift + LでCursorのAIに聞いてみてもどこがおかしいのか自分にはよく分かりませんでした。そのためしばらく苦戦していたのですが、最終的に下記のような形で細かく関数を定義することを思いつきました。その上で再びAIにどこに問題があるのか尋ねたところ、上述の問題点を見つけることが出来ました。
“`js
// 教

3次元回転するドーナツをテキストで描画（ライブラリ無し, JavaScript, HTML）

## モチベーション
YouTubeでドーナツを作成している動画を発見し．大学時代に触れた立体の回転計算と合わせて試しに作ってみようと思いました．
回転計算を自力で実装したかったので，Three.jsを含めライブラリは未使用です．

## 実装内容

### 1. HTML, CSS
CSSは描画に使用するテキストの範囲設定と色，描画のための文字サイズ統一のみで，
HTMLもテキスト出力用のdivタグだけ置きました．

“`html:htmlとインラインのcss