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

広い海で遊ぶゲーム。



### 広い海で遊ぶゲーム。スペースキーを押すと発射。

カーソルキーで移動です。

“`python
import os
import webbrowser
from http.server import SimpleHTTPRequestHandler, HTTPServer
import threading

# HTMLコードを生成
html_content = “””

x-line-signatureの署名検証についての備忘

## 背景

LINEのMessagingAPIにてWebhookを使用する際、そのリクエストがLINEからのものであるかの検証を行うため、リクエストヘッダの`x-line-signature`の署名を検証する必要がある。

公式 – 署名を検証する
https://developers.line.biz/ja/reference/messaging-api/#signature-validation

Node.jsのサンプルコードで`const crypto = require(“crypto”);`とあるが、`npm view crypto`で見ると非推奨

“`bash
bash-3.2$ npm view crypto

crypto@1.0.1 | ISC | deps: none | versions: 4
This package is no longer supported and has been deprecated. To avoid malicious use, npm is hanging on to the package name.
https://g

Reactで簡単な学習記録アプリを作った

# 学習記録アプリをReactで作ってみました

## 作成物


## 工夫したところ

・学習時間の入力フォームは数値しか入力できないようにした
・無駄なState変数を作らなくても動くようにした（合計時間を計算するときにreduce関数を使用した）

## つまづいたところ

・時間の入力フォームのところで数値しか入力できないようにしたら残り一文字のときにバックスペースを押しても消せなくなってしまった点　→onchangeに設定したイベントハンドラは入力内容が反映されたものが渡されるのだとわかった

Azure DevOps ReposでAdvanced Securityを有効にしてcodeScanする

# 目的
GitHubにはGitHub Advanced Securityがあるが、そのAzureDevOps版を利用して、コードスキャンを実行する

# Advanced Securityの有効化の手順

参考:
https://learn.microsoft.com/ja-jp/azure/devops/repos/security/configure-github-advanced-security-features?view=azure-devops&tabs=yaml

– ReposのAdvanced Securityを選択する


– 有効化されていないと以下の画面になるので「Enable in settings」を押下

![image.png](https://qiita-image-store.s3.ap-northeast-

scrollendイベントをiosでも処理したい

# 前提
Webアプリケーションにおいて、PC、Android、iPhoneで同じスクルール終了時のアクションを行いたい

# 課題
PC、Androidにはscrollendイベントが存在するが、safariには存在しない

https://developer.mozilla.org/ja/docs/Web/API/Element/scroll_event

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollend_event

# 対処案
safariの場合のみ分岐させ、scrollイベントでなんとか（※）する
※setTimeoutで100ms後に動作させるイベント登録を行う。継続してscrollイベントが来る場合にはclearした上で、再度登録しなおす

“`tsx
useEffect(() => {
const timeoutFn = () => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeou

【超簡単】GASとGeminiで無料でAIのLINEbotを作成する。

geminiのAPIとGoogle Apps Scriptを使用すれば、自分なりのAIをLINEbotに組み込めるのでその方法を公開します。

とても簡単なので是非真似してみてください。

LINEBOTとGeminiのAPI Keyを発行してそれをGASに貼り付けた以下のコードのyour_～_keyに貼り付けてください。

アプリを公開して、WebhockにそのURLを設定すれば動くと思います。初めてGASを動かす方は色々トラブルと思いますが、調べれば簡単にできると思います。

ぜひやってみてください。

こちらの記事を参考にしています。詳しくはこちらを参考にしてください。

https://cros.co.jp/2024/01/12/%E6%A5%AD%E5%8B%99%E6%94%B9%E5%96%84google-apps-script%E3%81%A7gemini%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8Bgpts/#index_id8

“`
const GEMINI_API_KEY = ‘your_ge

java script のパワーに惚れた。揺れる水槽の中のパーテクルの動きゲーム。




#### java script のパワーに惚れた。GPUを使用しているみたいだ。どういう仕組みなんだ。

##### 水槽の中のパーテクルの動きゲーム。

Next.js完全ガイド初心者向け。今すぐ試せるコード付き

## 1. Next.jsとは

Next.jsは、Reactベースのフレームワークで、高速で効率的なウェブアプリケーション開発を可能にします。

“`jsx
// Next.jsの基本的な構造
my-app/
├── pages/
│ └── index.js
├── public/
├── styles/
└── package.json
“`

この構造が、Next.jsプロジェクトの基本となります。

## 2. Next.jsの特徴

Next.jsには以下のような特徴があります：

– サーバーサイドレンダリング（SSR）
– 静的サイト生成（SSG）
– ファイルベースのルーティング
– APIルート

“`jsx
// pages/index.js (SSRの例)
export async function getServerSideProps() {
const res = await fetch(‘https://api.example.com/data’)
const data = await res.json()
re

はじめてのRuby On Railsチュートリアル

## Ruby on Railsマスターへの道：30章で学ぶWeb開発の全て

こんにちは、Railsエンジニアの皆さん！今回は、Ruby on Railsの基礎から応用まで、30章に渡って詳しく解説していきます。

各章にはサンプルコードも含まれていますので、ぜひ手を動かしながら学んでいきましょう。

## 第1章: Railsのインストールと初めてのアプリケーション

まずはRailsをインストールし、最初のアプリケーションを作成します。

“`ruby
# Railsのインストール
gem install rails

# 新しいアプリケーションの作成
rails new my_first_app
cd my_first_app

# サーバーの起動
rails server
“`

## 第2章: モデルの作成

データベースとの連携を行うモデルを作成します。

“`ruby
rails generate model User name:string email:string
rails db:migrate
“`

## 第3章: コントローラーの実装

ユーザーから

もうやだ。もう駄目だと感じたときに実行するコード。



#### もうやだ。もう駄目だと感じたときに実行するコード。

“`python
import os
import webbrowser
from http.server import SimpleHTTPRequestHandler, HTTPServer
import threading

# HTMLコードを生成
html_content = “””

[JS] ボタンクリックでアラートを表示させるコードがうまく動かない

# はじめに
JavaScriptでTODOアプリを作るチュートリアルを行っていた際、躓いたので共有します。

#### 開発環境
vscode

# buttonクリックでアラートを表示させるコードがうまく動かない

“`index.html:

追加

JavaScriptを基礎から学ぼう！おさらいチュートリアル

## はじめに

JavaScriptは、Webフロントエンド開発に欠かせない言語です。フレームワークやライブラリに頼らない「バニラJavaScript」の基本を15のステップで解説します。

## 1. 変数とデータ型

JavaScriptの基本的な変数宣言と主要なデータ型を学びましょう。

“`javascript
let name = “田中”;
const age = 30;
var isStudent = true;
“`

## 2. 条件分岐

if文を使った条件分岐の基本を押さえます。

“`javascript
if (age >= 20) {
console.log(“成人です”);
} else {
console.log(“未成年です”);
}
“`

## 3. ループ処理

for文を使った繰り返し処理を学びます。

“`javascript
for (let i = 0; i < 5; i++) { console.log(`${i + 1}回目のループ`); } ``` ## 4. 関数 関数の定義と呼び出し方を理解しましょう

Bootstrapで今から何か作りたい人に読んでほしい初心者向けチュートリアル

## はじめに

ブートストラップは、ウェブサイト制作を効率化する人気のCSSフレームワークです。このフレームワークを使うことで、レスポンシブデザインの美しいウェブサイトを簡単に作成できます。

## 1. ブートストラップの導入

まず、HTMLファイルにブートストラップのCSSとJavaScriptを読み込みます。

“`html
“`

## 2. グリッドシステム

ブートストラップのグリッドシステムを使用して、レイアウトを作成します。

“`html

[paiza]島流しにしてやろうか（島探し (paizaランク S 相当)

# コードの指摘は受ける
ネガティブな批判を相手のことを何も考えずにしちゃう人って何なんだろうね？
きっと頭と心が残念なのかな？（特大ブーメラン

https://paiza.jp/works/mondai/s_rank_skillcheck_sample/search-island

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

## 解き方2つ
今回はちょっと調べながらやってみて、
データ量によってスタックオーバーフローで実行できない可能性のあるコードと
多分実行できるであろうコードの2つを書いてみたよ。
※例題の2つはどっちのコードでも動いたけど、100 * 100とか1000 * 1000だと、どうなるかわからないのでこの記事を投稿した後にテストしてみてって感じかな
※ちなみに凄い単純な500 * 500は問題なく動いた（パラメータ例有り

### 1：深さ

paiza問題ランクA「山折り谷折り」を解いてみた & 解説

paiza×Qiitaコラボキャンペーンから、今回はランクA問題「山折り谷折り」に挑戦してみました。

https://paiza.jp/works/mondai/real_event/origami

## 問題概要
どんなブームなんですかね。
> ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙のような凝った折り方ではなく、紙の右辺が上から左辺に重なるような二つ折りを、ただひたすら繰り返すだけです。

> 折る回数 N が与えられるので、紙を折って広げたあとの山折り谷折りの折り目を計算するプログラムを作成してください。

期待する出力は以下の通りです。
> 山折りの折り目を “1”、谷折りの折り目を “0” として、答えとなる折り目を左から順に “0” と “1” からなる文字列として一行に出力してください。

## 問題を解くポイント
この問題にはきっと規則性があるはずで、それがわかれば簡単に解けそうな気がしますね。
その通りで、規則性があります。

### 規則性を見つける
まずいくらか折ってみましょう。4回折

CordovaのWebページをブラウザからの開けるようにする

Cordovaの開発をする際に、Webページをサーバ上に配備して、アプリの再インストールすることなく、すぐにリロードすることができます。

【参考】
[Cordovaアプリ開発の備忘録](https://qiita.com/poruruba/items/f03b1691fd0f113735b3)
[Cordovaアプリ開発の備忘録(プラグイン編)](https://qiita.com/poruruba/items/a454f1b90c5d8b0cb2f8)

今回はさらに、通常のPCのブラウザからもWebページを開けるようにします。
そうすることで、ネイティブの機能を使わないロジックはPCのブラウザで開発し、ネイティブの機能を使うときだけCordovaのネイティブアプリから開発することができます。

ちなみに、この投稿は、以下の投稿の補足です。
　[散歩ルート計画アプリを作った](https://qiita.com/poruruba/items/90d25395670f1bf5a5fe)

# index.html

通常は、こんな感じでcordova.jsをロードしていたかと思います

D3.isを始めたい人むけチュートリアル

## はじめに

D3.jsに関する12章以上のチャプターとコード例を含む形で構成します。

## D3.jsの基礎と活用ガイド

D3.jsは強力なJavaScriptライブラリで、データを視覚化するための豊富な機能を提供します。この記事では、D3.jsの基本から応用まで、段階的に解説していきます。

## 第1章: D3.jsの概要

D3.jsはData-Driven Documentsの略で、データに基づいてDOMを操作するためのライブラリです。SVGを使用して、インタラクティブなグラフや図を作成できます。

## 第2章: D3.jsのセットアップ

D3.jsを使用するには、以下のようにHTMLファイルにスクリプトを追加します。

“`html

“`

## 第3章: 基本的な選択と操作

D3.jsの基本は要素の選択と操作です。

“`javascript
d3.select(“body”)
.append(“p”)
.text(“Hello, D3!

CordovaアプリでGoogleMapからロケーション情報を共有する

[散歩ルート計画アプリを作った](https://qiita.com/poruruba/items/90d25395670f1bf5a5fe) の作成時に習得したテクニックです。

GoogleMapでスポットをクリックすると以下のような詳細ダイアログが表示されます。
そのダイアログの右上に共有ボタンがあり、これを選択すると他のアプリにこの情報が共有されます。


この共有機能をCordovaアプリで実現してみます。

# 共有内容

共有ボタンをクリックすると、以下のような共有先アプリの選択ダイアログが表示されます。
今回はこの選択先アプリに含まれるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ceb1f015

【JS初学者へ送る】thisとbind()を徹底解説(アロー関数との違いも)

# JavaScriptの`bind()`メソッド解説

## 1. はじめに
下記のコードでなぜ`this.name`の出力結果がundefinedになるか、あなたは説明できるでしょうか？
“`js
const person = {
name: “Alice”,
greet: function () {
console.log(“こんにちは、” + this.name + “です。”);
}
};
const greetFunction = person.greet;
greetFunction(); // 出力: こんにちは、undefinedです。
“`
説明できなかった方この記事を読んで損はないはずです:writing_hand:

JavaScriptの`bind()`メソッドは、関数の挙動を制御するためのメソッドですが、初学者が非同期処理と同じくらい理解不能に陥ってしまうのがこの`bind()`です。

今回は`bind()`の使い方と概要について解説していきます。

## 2. 関数の呼び出し方とthisの値

まず。大前提とし

[React]Hooksの備忘録

# 投稿理由
React Hooksの復習して理解を深める為
随時更新していきます。

# useState
hooksの中で一番使われている
コンポーネントの値を保持したり、更新するために使う
使用例：　入力フォームなど
“`
const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
“`

# useEffect
コンポーネントの副作用を制御する為につかう
副作用とは、UI構築以外の処理のことをいいます。
使用例：外部APIからデータを取得する
“`
useEffect(() => {
// 副作用処理を記述
return () => {
// クリーンアップ処理を記述
};
}, [副作用関数の実行タイミングを制御する依存配列]);
“`

# useContext
複数のコンポーネント間で共通して利用したいデータを管理する
使用例：認証情報
“`
const コンテキストから値を受け取る変数 = useContext(コンテキストオブジェクト);
“`

# useRef
refオブジェクトを生成するときに使う
再レンダリ