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

[初心者向け] JavaScript で AtCoder の問題を解く

# はじめに
JavaScript で AtCoder の問題を解く方法を教える機会があり Notion にまとめたので、どうせなら公開しようと思って記事を書いています。

※ JavaScript の関数やメソッドを学んだくらいの方を想定しています。

# 目次
[1.AtCoderとは](#1-atcoderとは)
[2.標準入出力とは](#2-標準入出力とは)
[3.基本の型](#3-基本の型)
[4.受け取った値](#4-受け取った値)
[5.とりあえずこれだけは覚える](#5-とりあえずこれだけは覚える)
[6.値の扱い方](#6-値の扱い方)
[7.全体のコード](#7-全体のコード)
[8.さいごに](#8-さいごに)

# 1. AtCoderとは
AtCoder は、**競技プログラミングコンテストを開催している国内サイト**です。
詳しくは↓のサイトで詳しく説明されているので、こちらでは割愛します。

https://and-engineer.com/articles/YfPo9xAAAB8ATGLv

# 2. 標準入出力とは
AtCoder では、**何らかの入

超初学者向け 関数宣言とアロー関数の違い(イメージ)

## 関数宣言の書き方

“`JavaScript
function greet(name){
return `Hello ${name}`;
};
 
console.log(greet(“John”));
“`
出力結果
“`
hello John
“`

## アロー関数の書き方

“`Javascript
const greet = (name) => {
return `Hello ${name}`;
};
 
console.log(greet(“John”));
“`
出力結果
“`
Hello John
“`

### 解説
どちらも同じ出力結果になっています。

2つの書き方について感覚的ではありますが、自分なりの解釈を書きたいと思います。

– functionの英語の意味は、機能，用途，目的；役割，任務など。
イメージとしては、「function」でこういう機能を持ちます！と宣言をするということ。
– アローとはarrow(矢印)という意味なので、関数を矢印 => で表現しますというイメージ。

どちらの方を使ったらいいのかは諸説あるよ

JavaScriptでvarが使われないかつ非推奨な理由

– 再宣言できてしまう
– グローバル変数の上書き
– 変数の巻き上げ
– 関数スコープ

## 参考
– https://typescriptbook.jp/reference/values-types-variables/vars-problems
– https://myprg.dev/posts/javascript-declaration-type

5-②.JavaScript のオブジェクト(属性記述オブジェクト)

#### 概要
JavaScript は、オブジェクトの属性を記述し、その動作を制御するための内部データ構造を提供しています。たとえば、属性が書き込み可能かどうか、列挙可能かどうかなどです。この内部データ構造は「属性記述オブジェクト」（attributes object）と呼ばれます。各属性には対応する属性記述オブジェクトがあり、その属性に関するメタ情報を保持します。

以下は属性記述オブジェクトの例です。

“`
{
value: 123,
writable: false,
enumerable: true,
configurable: false,
get: undefined,
set: undefined
}
“`

属性記述オブジェクトは6つのメタ属性を提供します。

（1）value

valueはその属性の値で、デフォルトはundefinedです。

（2）writable

writableはブール値で、属性の値（value）が変更可能かどうかを示します（つまり書き込み可能かどうか）。デフォルトはtrueです。

（3）enumerabl

JavaScriptの == と === の違いを簡単に理解しておく

Ruby等からプログラミングを始め、その後JavaScript二触れ合う人は、「===」という比較演算子に馴染みがないことも多い気がします。（私はそうでした。）
なんとなく、「===」は厳密な比較で「==」はもっと緩い比較くらいに捉え、「===」を利用すべきなんだなとは思っていましたが、慣れてきたところでちゃんと理解しておこう、というモチベーションの記事です。

## 「==」 と 「===」 って何が違うの？

用語のみだと

「==」：等価演算子
「===」：厳密等価演算子

となります。仰々しい名前。ただ、一体何が<厳密>なのか？
両者の違いは、簡単にいうと「型変換をして比較 or しないで比較」 ということになります。

### 厳密等価演算子「===」について
こちらの方が単純なため、先に記載。
名前の通り、左辺と右辺の値を厳密に比較してくれます。
以下の例は、全て何も出力されません。

“`js
if (1 === ‘1’) {
console.log(‘number と string’)
}

if (0 === false) {
console.log

Bootstrapを使ってみた

## はじめに
簡単なアプリやHP作成はできるようになったけれど、なかなかHTMLやCSSが思ったようにいかないというのが課題でした。ChatGPTにどうしたら上手くできるか聞いたところ、CSSフレームワークとしてBootstrapというフレームワークがあると知り、学習したため記録を残します。

## Bootstrapについて
Bootstrapは、Twitter社が開発したオープンソースのフロントエンドフレームワークで、ウェブ開発者が迅速にレスポンシブでスタイリッシュなウェブサイトやウェブアプリケーションを構築するのに役立ちます。Bootstrapを使用することで、CSSとJavaScriptの基本的な部分を簡単に取り入れることができます。

https://getbootstrap.jp/

## 主な特徴
### 1. レスポンシブデザイン
Bootstrapはモバイルファーストのデザインを採用しており、デフォルトでレスポンシブレイアウトを提供します。これにより、異なるデバイスや画面サイズに応じてウェブサイトのレイアウトが自動的に調整されます。

### 2. 豊富なコンポーネ

【JavaScript】DOM操作で”getElementsByClassName”の仕組みに苦戦した件

## ▼最初に
JavaScriptで頻繁に使用するDOM操作。操作したい要素を取得して、その要素に対して作成、更新、削除といった操作ができる便利な機能ですよね。
皆さんは要素を取得する時にどのメソッドを使っていますか？私は“getElementById“をよく使っています。と言ってもこれしかほぼ使った事がないのが本音です。
今回は初めて“getElementsByClassName“を使ってDOM操作をする時に苦戦した話をアウトプットとして記事にしたいと思います。

## ▼苦戦した話
まずは“getElementsByClassName“の仕組みに苦戦した話をしたいと思います。
以下のコードを例に説明します。
このプログラムは、ボタン１、２，３が画面上に表示されており、
どのボタンを押しても”ボタンがクリックされました。”と表示されます。

“`HTML:HTML

ボタン１
ボタン２
【初心者用】Reactでよく使用される三項演算子の例

# はじめに

三項演算子は少し難しく感じることがありますが、適切に使用すると簡潔で読みやすいコードを書くことができます。以下に、よく使われる三項演算子を紹介しますので、初学者の方はこれらのパターンから理解できるようにしてきましょう:writing_hand:

# 1. 条件に基づいて値を代入する

“`javascript
const age = 20;
const canDrink = age >= 21 ? “Yes” : “No”;
“`

# 2. nullチェックと同時にデフォルト値を設定する

“`javascript
const username = user.name ? user.name : “Anonymous”;
“`

# 3. 条件に基づいてCSSクラスを切り替える（React等のフレームワークでよく使用）

“`jsx

Content

“`

# 4. 条件付きメソッド呼び出し

“`javascript
const

スプレッドシートに配列の内容を一括で出力する

## 目的
VBAからGASへの移行作業をしていて、スプレッドシートに一括でデータを書き込みたい場面があり、VBAのノリでチャチャっとできるだろうと思ってやってみると意外とハマったので備忘録として残しました。配列操作の勉強にもなりました。
## 結論
GASにおいてシートに配列を貼り付ける際の注意は以下の通りです。
– 貼り付け対象の配列は必ず**二次元配列**にする
GASの場合、VBAと違い一次元配列だとエラーが発生します。
– 配列の行列サイズと貼り付け範囲の行/列数を一致させる
VBAで言うところの`Resize`のイメージです。
## コード
“`outputArrayToSheet.js
// 3行４列のシート範囲に一括貼り付け
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName(‘シート1’);

function outputArrayToSheet() {
sheet.clearContents(); // シートクリア
var arrT

101日目 TypeScriptがわからなかった社畜M

## ♠はじめに
こんにちは、社畜Mだぜ。
今回は俺が最近勉強しているTypeScriptについて話すぜ！
さぁ、行くぜ！！！

**デュエル！**
## ♠TypeScriptとは
俺のターン！ドロー！TypeScripの効果発動！

TypeScriptとはMicrosoftが開発したプログラミング言語で、JavaScriptをベースとしたものだぜ。
JavaScriptは基本的に型を指定せずにコードを書くが、TypeScriptでは変数や関数に型を措定でる。これにより、コードがどのようなデータを処理し、どのように動作するかを明確にする手段を提供するぜ。

例を出すと、JavaScriptでは
“`javascript
let age = 30;
“`
となり、TypeScriptではこの変数に型を指定することができる。
“`typescript
let age: number = 30;
“`
こんな風に、TypeScripでは変数や関数の型を指定することで、プログラムの品質を向上させることができるぜ。特に大規模なプロジェクトでは、型情報を持つことで予期せぬエラーやバ

Type Script で onClick={function()}がダメな理由

## Type Scriptを書いていて、疑問だった箇所の忘備録

### しがちなミス
“`tsx
export const funcA = () => {
console.log(‘test’)
}

// この呼び出しはエラーになる

“`

### OKな呼び出し
“`tsx
export const funcA = () => {
console.log(‘test’)
}

funcA()}
/>
“`

### 違い
“`tsx
function()
“`

と記載した場合、単純な関数の呼び出し（即時関数）となってしまうため、関数そのものではなく関数の結果（関数の戻り値）がonClickに設定されてしまう。
よって、動かなかったりエラーとなる

下記二つは、関数自体をonClickに渡せている。
アロー関数もOK

“`tsx
export const fu

asciidocの図や表の番号を章番号に合わせる

色々調べたが、どうもadocファイル単体では難しそうということがわかった。

javascriptを埋め込んでhtml表示時に置換するのが一番楽っぽい

# adocファイル

sectnums,figure-caption,table-captionを指定する。
scriptは生成されるhtmlからの相対位置にあるものを指定する。
“`asciidoc
# SomeTitle
:toc:
:toc-levels: 3
:toc-title: 目次
:nofooter:
:sectnums:
:figure-caption: 図
:table-caption: 表
:stylesheet: asciidoc.css

++++

++++

…
“`

# javascriptファイル

図は`

`タグに記載されている。
表は`

`タグに記載されている。
余計なものも交じるので弾くようにする。

章番号は`

Bootstrapを使用したファイルアップロードボタンのデザインと最新機能（2024年版）

https://qiita.com/yo-naka/items/46d44793827920282f75

上記の記事から時間が経ちましたので最新の状況や新着情報をまとめました。

このポストでは、Bootstrapを使用してファイルアップロードボタンをデザインし、最新のWeb技術を活用する方法を紹介します。2024年のWeb開発トレンドと最新のBootstrapバージョンに基づいて更新しています。

## Bootstrapのバージョン

[Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/)（2024年7月19日現在の最新版）を使用しています。

## 基本的な実装

### 1. シンプルなファイルアップロードボタン

最新のBootstrapでは、`class=”form-control”` を設定することで美しいファイルアップロードボタンを作成できます：

“`html

Javascript 非同期処理について

Javascript初心者であれば、必ずつまずく「非同期処理」についてまとめました。

文中のコードはコピペするだけで実際に以下のサイトでも動くことを確認していますので、
ぜひ、実際にコードをコピペしてデバッグしていただきながら読んでいただけると理解が深まると思います。

https://paiza.io/ja/projects/new

# 非同期処理と同期処理の違い

同期処理・・・上から順番に実行される処理になります。

“`javascript
console.log(“A：ボタンクリック”)
console.log(“B：APIを叩いてデータを取得して、加工”);
console.log(“C：新しい画面の表示”);
“`

`A → B → C`の順番に処理が実行されたと思います。

それではもっと複雑な処理を考えてみましょう。

もし、Bの処理が非常に重い処理の場合どうなってしまうでしょうか？
仮のコードで体験してみましょう。

“`javascript
console.log(“A：ボタンクリック”);

// ここでは「重い処理」を体験するために強制的に処理が

[JavaScript] 三項演算子(条件演算子)の使い時、変数の値を返すということ

# [JavaScript] 三項演算子(条件演算子)の使い時、変数の値を返すということ
## はじめに
三項演算子、条件分岐を行う方法のひとつ。 条件演算子とも言う。
`const A? B: C;` などのやつ。この記事では三項演算子と呼び方を統一することにする。

__重要ポイント__
google検索結果ページの上位のリンク先を見ると、条件分岐で処理をする『if文やswitch文の代わり』だとか『if文の短縮形』だとかはたまた『三項演算子は使うな』関連の記事だとか、そういうのが多いがこの記事は**ソコじゃない**という観点での内容。

:::note
実感として最も体感したコトは

**➡︎ 条件によって値の異なる“変数”を使える**

こと
:::

※↓分かりやすさを目指し色分け　
__三項演算子 の書き方__
const valueA = true ?　“A” : 　　　　　

元記事を表示

[JavaScript] 表示/非表示にif文を使わない方法

# [JavaScript] 表示/非表示にif文を使わない方法

この記事は表示/非表示(あるいは可視/不可視)を実現するJavaScript(JS)についてのメモです。DEMOページは特にありません、あしからず。
HTML x JS x CSS

__前提__
– アコーディオンやドロワーではない、単純にパッと表示＝可視したり、非表示=不可視になったりするタイプの表示/非表示
– CSSでいう`display:none;`、`display:block;`をJSから操作するタイプ
– 以降、この記事で略してfuncと書かれているのはfunctionのこと

## JSコード
JSにおいて複数回出てくる頻出値であることを見越して変数化。ついでに配列化。後に出るfuncで共通。
### 共通func
“`javascript: 共通：可視/不可視func
// id取得短く書く用
const $ =(id)=>{ return document.getElementById(id) };

// 可視/不可視の変数化と配列化
const blAk = “bloc

元記事を表示

分割代入でつまづきました

## はじめに
Reactを学んでみようと思い、Udemyの教材で学んでいたところ分割代入でつまづきました

## 問題
const {name, age} = myProfile;　の箇所で「Cannot redeclare block-scoped variable ‘name’」というエラーが発生しました
調べたところ、ブロックスコープで再宣言はできないよ！と怒られているようです
“`JavaScript:
const myProfile = {
name: “ナマケモノ”,
age: 3,
};

const {name, age} = myProfile;

const message2 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
“`

## 解決？
エラーが出ているconst {name, age} = myProfileの行をまるまる消すと動くようになりました
しかし、これで本当に分割代入としてできているのでしょうか！？（宣言も何もなしにプロパティの値をつっこんでいるだけでは？？？）
他の所で

元記事を表示

【個人開発】釣り具の登録、管理、検索ができるアプリを開発しました🎣

# はじめに
こんにちは！[レイ](https://twitter.com/ida09r)と申します！

未経験からエンジニア目指して日々学習をしております。

今回、釣り道具に特化した「[Tackle Master(タックルマスター)](https://tacklemaster.net/)」というサービスを開発しました。

釣りに興味のある方や好きな方には、ぜひ使っていただけると嬉しいです。

### 自己紹介

地元の工業高校で情報系コースを専攻し、PC操作やプログラミング（Python、SQL、HTML/CSS）を簡単に学びました。
卒業後は総合化学品メーカーで製造オペレーターとして約3年間勤務。その際、社内ITシステムに助けられた経験から、システム開発に興味を持ちました。

2024年2月からプログラミングスクール「RUNTEQ」に入学し、エンジニアを目指しています。

# 1.サービス紹介

「Tackle Master」は釣り道具に特化したサービスで、釣り道具の管理・登録・検索ができます。

![tackle_service.jpg](https://qiita-image

元記事を表示

[JavaScript] クラス、コンストラクタ、プロパティ、メソッドについて

# まとめ

#### クラスとは
> クラスはオブジェクトを作成するためのテンプレートです。処理するためのコードでデータをカプセル化します。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)

#### コンストラクタとは
> クラスで作成したオブジェクトを作成して初期化するための特別なメソッドです。 “constructor” という名前の特別なメソッドは、クラスに 1 つしか定義できません。クラスに複数の constructor メソッドが存在した場合、SyntaxError が発生します。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)

#### メソッドとは
> メソッドはクラスごとにプロトタイプに定義され、すべてのインスタンスで共有されます。メソッドには、プレーン関数、非同期関数、ジェネレーター関数、非同期ジェネレーター

元記事を表示

縦書き画像ジェネレータを作った話

# やったこと

深夜の思いつきでこんなものを作ってしまいました。

https://tategaki-generator.pages.dev/

このように縦書きの文章と画像を合成できます。


ソースコードはこちらです。

https://github.com/Nitoryu008/tategaki-generator

# 技術スタック

Vue3+Bulmaで作っています。今回、Cloudflare Pagesを使ってみたんですが、開発体験がとてもよかったです。プッシュしたら即時デプロイしてくれるのがありがたい。突然の思いつきを形にするにはもってこいですね。

# 仕組み

仕組みは割と単純で、 HTML+CSSで描画した後にDOM to Imageというライブラリを使って画像に変換しています。
HTML5だとCanvasに描画してからごにょ

元記事を表示