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

GASでAPIを叩きたくてエラーが直らなかった話

# 結論：JSON.stringify()したら直った！
そのままですね。
GASエディタ上でリクエストbodyをJSON形式で記述していたのですが、実際に格納されていた値がJSON形式でなくなっていました。ということです。

### GASでの記述
“`javascript
let headers = {
~省略~
};

let body = {
“hoge” : “fuga”,
“hogege” : [
{
“fugaga”: “hogefuga”
}
]
};

let options = {
methopd: “post”,
headers: headers,
payload: body
}

let response = UrlFerchApp.fetch(url, options); // ここでエラー”INVALID DATA RECEIVED”
“`
### 実際にbodyに格納されていた値
“`javascript
{
hoge : ‘fuga’,
hogege : [
{
f

JavaScriptの「??, ||, &&, !!」こいつらなんなん

## はじめに
“` js
const a = 0 ?? 5;
const b = 0 || 5;
const c = 0 && 5;
const d = !!0;
“`
このa, b, c, dに何が入るかみなさんわかりますか？
上から順に、Null合体演算子、論理和、論理積、二重否定と呼ばれます。
これがわかる皆さんにこの記事は必要ありません!! (<-これは二重否定ではない) 解説の中で`falsy`という単語が頻出します。 これはnull, undefinedだけでなく、`0`や`""`(空文字列)などのfalseとみなされる値のことです。 詳しくはこちら。 https://developer.mozilla.org/ja/docs/Glossary/Falsy ## Null合体演算子 名前の通り、Null判別が合体した演算子です。 `??`の左辺がNullの場合、右辺を返します。Nullと判別される値は`null`と`undefined`のみです。 つまり、実行結果は下記のようになります。 ``` js const a = 0 ?? 5; console.log(

JavaScriptのArray.reduce()メソッドの利用方法と活用例

JavaScriptには、配列の要素を処理して最終的な値を求める便利なメソッドがあります。それがArray.reduce()メソッドです。この記事では、Array.reduce()メソッドの基本的な使い方と実践的な活用例を紹介します。

Array.reduce()メソッドとは
Array.reduce()メソッドは、配列の各要素に対して指定された関数を適用し、単一の結果を返すメソッドです。このメソッドは、累積される値（アキュムレーター）と現在の要素を引数に取ります。

基本構文は以下の通りです。

“`
arr.reduce((accumulator, currentValue) => {
// 処理
}, initialValue);
“`

accumulator: アキュムレーターとして使用される値。
currentValue: 現在の要素。
initialValue: アキュムレーターの初期値（省略可能）。
活用例: 条件に応じた要素のカウント
以下のコードは、Array.reduce()メソッドを使用して、配列内の特定の条件を満たす要素の数をカウントする例です。

Webアプリ開発　記事の詳細とコメント編

# 初めに
webアプリを開発したので、開発中に考えたことをまとめます
今回は記事の詳細とコメント機能についてです。

# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## 記事の詳細
### 実装事例
ホーム画面から


記事のタイトルまたは「この記事を読む」を押してもらうと記事の詳細を確認できます。
今回の例では「スープ

Webアプリ開発　記事の更新、削除編

# 初めに
webアプリを開発したので、開発中に考えたことをまとめます
今回は作成した記事の更新、削除機能についてです。

# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## 記事の更新
### 実装事例
ダッシュボード画面から「記事を編集する」を押してもらうと


記事の編集画面が出てくるのでここで記事を編集

Webアプリ開発　記事の新規登録編

# 初めに
webアプリ開発ができたので、どんな感じで作成したのかをまとめたいと思います。
今回はマイページ編集についてです。

# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## 記事の新規登録
### 実装事例


権限があるユーザーには投稿一覧ボタンが出てきます。
押すと

![dashboard.png](h

【JavaScript】Identifierの構文エラー

# はじめに

前回に引き続き Identifier について学習ログ記事です。

https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#prod-IdentifierReference

# Identifierの構文エラー[^1]

[^1]: 「構文エラー」という章タイトルについて
ECMA公式ドキュメントでは”Early Errors”の項に記載されているものですが、”Early Error”が定義されておらず不明瞭かつ正確な役語が見つからないこと・実際に発生するエラーのすべてが”StntaxError”だったことから「構文エラー」という章タイトルにしています。
## `arguments` / `eval`

– 厳格モード（`strict mode`）かつ識別子名称が`arguments`もしくは`eval`
（`BindingIdentifier`のみ）

“`js
“use strict”;

//SyntaxError Unexpected eval or arguments i

配列から連結リストを組み立てる【TypeScript】

## はじめに

こんにちは！Shungiku です。
最近は就活のために専ら LeetCode の問題を解いていることが多いです。

さて、LeetCode では連結リストの問題（[例えばこれとか](https://leetcode.com/problems/reorder-list/)）において、入力のサンプルが以下のような配列で与えられます。
“`
head = [1,2,3,4]
“`

一方、実際に Submit した場合、関数（またはメソッド）の引数で受け取る入力値は連結リストのヘッドのノードになっています。

ちなみにノードの構造は LeetCode では以下のように定義されています。

“`ts
class ListNode {
val: number
next: ListNode | null
constructor(val?: number, next?: ListNode | null) {
this.val = (val===undefined ? 0 : val)
this.next =

sequelizeを外部ファイルconfig.jsonで接続の仕方

# sequelizeを外部ファイルconfig.jsonを使用し接続の仕方
### 外部ファイルで設定を記入する理由
gitでプロジェクトを管理をするため.gitignoreで設定ファイルを第3者から見えなくするため

### .gitignoreの概要
.gitignoreは、Gitでコード管理したくないファイルやディレクトリを指定するためのファイルです。”.gitignore”という名前の特殊なファイルであり、隠しファイルとして存在します。このファイルに指定したファイルやディレクトリは、Gitのトラッキングの対象外となります。つまり、Gitで管理しているディレクトリにあっても無視されます。
.gitignoreファイルを使うことで、個人のPC環境に依存するファイルやパスワード関連の重要なファイルなどをGitのリモートレポジトリにプッシュしないようにすることができます。また、不要なデータがプッシュされないため、第三者がコードを見る際に確認しやすくなります。さらに、公開したくない情報をGitの管理対象外とすることでセキュリティ面を向上させることもできます

### config.js

Warning: validateDOMNesting(…):

cannot appear as a child of

“`
Warning: validateDOMNesting(…):

cannot appear as a child of

“`
というエラーがでたので解決した方法をここに綴ります。

# 翻訳
< th >は< thead >の子要素として使用できません。

# 問題のコード
“`jsx:html

タイトル１	タイトル２
内容１	内容２

“`

# 解決方法
“`diff_jsx:html

+

+

タイトル１

タイトル２

内容１

内容２ 元記事を表示 【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え ## はじめに こんにちは！[@nyakako13](https://qiita.com/nyakako13 “Qiita ページ”) です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 ## vscodeの設定方法 vscodeのsetting.jsonを開きます https://qiita.com/y-w/items/614843b259c04bb91495 下記を追記します。 “` “editor.formatOnSave”: true, “editor.codeActionsOnSave”: { “source.orga 元記事を表示 [ReviewAI 使用例] コリア タッカンマリ [新大久保 韓国料理店] # はじめに レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。 本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！ [人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc) 今回は、コリア タッカンマリ の食べログに集まっているレビューを分析します。 ## コリア タッカンマリ > こだわりぬいたタッカンマリ専門店。 > ようこそコリア タッカンマリへ > [ホームページより引用](https://www.dakhanmari.com/) [食べログ](https://tabelog.com/tokyo/A1304/A130404/13118838/) ## ReviewAI (レビューアイ) 弊社 RetegyLink が開発中のレビュー分析 AI です。 https://reviewai.next-seed.work/ 試作版を公開中で、現在は – [食べログ](https://tabelog 元記事を表示 Memory based IPC on WSH Javascript runtime (C#, C++ compatible) ## Getting Started Recently, I came across an example of inter-process communication (IPC) between programs written in C# and C++, implemented using Windows API functions `CreateFileMapping` and `MapViewOfFile`, by chance. However, the sample I encountered was in a messy implementation state, leading me to believe it wasn’t implemented based on organized theory. Therefore, I decided to clean it up and generalize it for application in Windows Scripting Host (WSH). Using this, I succeeded in imp 元記事を表示 htmxとは何なのか？ htmxは、HTML属性を使用してAJAX、CSSトランジション、WebSockets、Server Sent Eventsを直接操作できる軽量なJavaScriptライブラリです。複雑なJavaScriptコードを書くことなく、シンプルでパワフルなハイパーテキストベースのモダンなユーザーインターフェースを構築することを可能にします。 **htmxの特徴** * **シンプルで軽量**: htmxはわずか14KB（gzip圧縮時）の軽量ライブラリであり、依存関係もありません。 * **使いやすい**: htmxはHTML属性を使用して動作するため、JavaScriptの知識がなくても簡単に使用できます。 * **パワフル**: htmxは、AJAX、CSSトランジション、WebSockets、Server Sent Eventsなど、モダンなWeb開発に必要な機能をすべて備えています。 * **アクセシビリティ**: htmxは、JaJavaScriptが無効なユーザーでもセマンティックHTMLの利用、プログレッシブエンハンスメント、フォールバック機能等により動作します。 * ** 元記事を表示 React Router で可変長のパスを表現したい ## :writing_hand: はじめに ### React Router について `React Router` はReactアプリケーション内のルーティングを管理するためのライブラリです。（多分React のルーティングライブラリで一番有名です） シングルページのアプリケーションにURLとコンポーネントを紐づけ従来の多ページWebサイトのような体験を実現させてくれます。 `React Router` で紐づけられるURLは静的なURLだけに留まらず、動的なURLとも対応させることが可能です。 静的なURLの場合 `/user/123`にアクセスできます。 “`jsx const routes: RouteObject[] = [ { path: ‘/user/123’, element: } ] const router = createHashRouter([…routes]); return 元記事を表示 new Date()を使いこなすには、形式の統一が鍵！ # 概要 JavaScriptにおけるnew Date()は、単なる日付取得ツールではありません。日付操作はもちろん、タイムゾーン変換、フォーマット変換、相対日付計算など、多彩な機能を備え、開発を支える強力なツールです。しかし、実装方法によって異なる挙動になる可能性があるため、意図しない結果を招きやすい落とし穴も存在します。 この記事では、“`new Date()“`を使った日付の値を定義する上で注意すべきポイントについて紹介しています。 # new Date()を使った初期化に気を付けましょう new Date()はいろんな方法で定義することができます。 たとえば、下記の4つの方法で“`new Date()“`を使って日付を定義することができます。 “`javascript // 現在時刻取得 const now = new Date() // 文字列から生成 const dateFromStr = new Date(“2023-12-25”) // 数値から生成 const dateFromNumber = new Date(2023, 11, 25) // タ 元記事を表示 【JavaScript】Identifierの構成要素 # はじめに 学習ログ記事です。読んでくださる方、ぜひ揉んでください。 対戦よろしくお願いします。 ECMA Script 公式ドキュメントより、13.1 Identifiers の章 https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#prod-IdentifierReference # Identifier とは？ https://wa3.i-3-i.info/word19477.html > 識別子（読：シキベツシ　英：identifier）とは > > **そいつを他のやつと区別するために付けた名前なり番号なり記号なりのこと** > > です。 > サクっと一言で説明すると > > **他と区別するために付けた名前** > > が「識別子」です。 わかりやすいですね。 以下に具体例を示しました。 `x` `func` が識別子です。変数名・関数名・アクション名など・・・のイメージです。 “`js const x = 0; function func( 元記事を表示 javascriptで始めるAtocder # はじめに この記事ではJavascriptでAtcoderを始める方向けに、問題を効率よく解くための環境構築方法を紹介します。 この環境構築を行うことで、以下のことがコマンド１つで可能になります。 – テストデータでの自動テスト – コマンドライン上からの回答の提出 ##### 動作環境 MacOS Ventura 13.5 # 目次 1. [ojコマンドを使えるようにする](#Chapter1) 1. [atcode-cliを使えるようにする](#Chapter2) 1. [テンプレートを追加する](#Chapter3) 1. [使い方](#Chapter4) 1. [コマンド一覧](#Chapter5) 1. [参考文献](#reference) # ojコマンドを使えるようにする ojコマンドをインストールします。 “` $ pip3 install online-judge-tools “` ojコマンドのバージョンを出力し、コマンドが使えるかを確認します。 `online-judge-tools 11.5.1`の 元記事を表示 React19のBetaが公開されたので、公式ブログの概要+気になって調べてみたことをまとめてみた ## この記事の方向性 2024-04-25にReact 19 Betaが公開されました。 この記事ではReact公式ブログの概要をまとめ、さらに気になって情報収集した内容をまとめてみます。 この記事の前半はサクッと理解することを重視します。 後半は所感や補足情報を記載します。 記事内では一次情報や丁寧な解説記事へのリンクを多く張るようにしました。この記事は概要理解として利用し、詳しく知りたいと思った内容はリンク先を参照するようにしてもらえたらと思います。 ## 公式情報 今回メインで参照したのは以下です。 – [React Blog](https://ja.react.dev/blog) (React公式ブログの日本語版) – [React 19 Beta](https://ja.react.dev/blog/2024/04/25/react-19) – [React 19 Beta Upgrade Guide](https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide) – ※ 記事投 元記事を表示 コードが書けない高専卒がUdemyのコードをアップデートしてみた # はじめに やっとこさ【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門を修了しました！ ハンズオン形式でTodoリストを作成していくコースです。 最初はバニラJSで作りその後Reactで再度作成したのですが、Reactが便利すぎてすでにバニラJSでの書き方8割忘れました笑 作成したTodoリストはこちら👇 テキストボックスでTodoを入力して、未完了エリアと完了エリアに分け可視化しています。  # 本題 コースで作成したTodoリストですが「タスクの一意性をテキストで担保しているため、同一のタスクが入力された際に意図しない挙動を行う」といういじくりがいを秘めています（！） 好奇心がうずいてしまったため、寄り道してこちらを解決していきます！！ ## 元記事を表示 OTHERカテゴリの最新記事 2024.09.19 JavaScript関連のことを調べてみた 2024.09.19 JAVA関連のことを調べてみた 2024.09.19 iOS関連のことを調べてみた 2024.09.19 Rails関連のことを調べてみた 2024.09.19 Lambda関連のことを調べてみた 2024.09.19 Python関連のことを調べてみた