配列（Array()オブジェクト）の基礎知識

## アジェンダ
配列は `Array()` オブジェクトを使用して作成され、様々なプロパティやメソッドを提供します。
この記事では、`Array()` オブジェクトの基礎から配列操作の詳細まで簡単にまとめます。

## `Array()` オブジェクトの基礎

`Array()` は JavaScript の組み込みオブジェクトの一つで、複数の要素を格納するために使用されます。配列は、整数のインデックスを持つリスト状のデータ構造で、各要素にアクセスして操作することができます。

“`javascript
// 配列の作成
let arr = new Array(1, 2, 3, 4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
“`

## `Array()` コンストラクタの使用方法

`Array()` コンストラクタは、以下のように様々なパラメータを受け取ります。

– **指定した要素で配列を作成**: 複数の要素をパラメータとして渡し、それらの要素を持つ配列を生成します。

“`javascript
let arr = new A

画像を和色のみの構成に変換する html を公開してみる

画像を和色のみにした場合に
どんな見た目になるかどうかを
軽くチェックするための html を
作成しましたので
皆さんの役に立てばと思い
公開してみようと思います。

[本体はこちら(BOOTH)](https://giftedstyle.booth.pm/items/6002643)
[本体はこちら(Google Drive)](https://drive.google.com/file/d/1MReoq0hTMXFdpS28ha2z-vklwN1-l_3w/view?usp=sharing)

[洋色バージョンはこちら](https://drive.google.com/file/d/1j606X7SGYo3SqLfla0iqvL1NouyvDL4Y/view?usp=sharing)
[セーフカラーバージョンはこちら](https://drive.google.com/file/d/1B9ov__zccNbMertMr1yUYAQPh_fOheto/view?usp=sharing)

***

このアプリケーションの見た目
![image2.png](https://qiit

React初心者から始めるReactチュートリアル

## はじめに

Reactは、ユーザーインターフェースを構築するための強力なJavaScriptライブラリです。このチュートリアルでは、Reactの基礎から応用まで、段階的に学んでいきます。

## 第1章: Reactの基本概念

Reactの主要な概念であるコンポーネント、props、stateについて説明します。

“`jsx
function Welcome(props) {
return

こんにちは、{props.name}さん

;
}
“`

コンポーネントはReactアプリケーションの基本的な構成要素です。propsを通じてデータを受け取り、UIの一部をレンダリングします。

## 第2章: 開発環境のセットアップ

Node.js、npm、Create React Appを使用して、Reactプロジェクトを始める方法を学びます。

“`bash
npx create-react-app my-app
cd my-app
npm start
“`

これらのコマンドで新しいReactプロジェクトを作成し、開発サーバーを起動できます。

#

【Publisher】Spreadsheet with Chart

# Introduction #
This time, I will convert an Excel report with charts into a web-based spreadsheet. Here is how the converted spreadsheet looks:
Now, let’s review the steps.
[Related Article](https://qiita.com/Miki_Yokohata/items/51c6d0c48e3ff172a3ac)
# Excel Worksheet #
I created three tables using Sharperlight table formulas with SAP Business One. The first table is defin

Automating Calendar Event Notifications with Google Apps Script and Slack: A Step-by-Step Guide

Google Calendar and Slack are indispensable tools for managing schedules and team communications. By integrating these two, you can automate sending notifications about calendar events to a Slack channel, ensuring everyone stays informed. This article will guide you through creating a Calendar Events Notification App using Google Apps Script and Slack.

## Table of Contents

1. **Introduction**
2. **Setting Up Your Environment**
– Required Tools and Accounts
– Obtain the Group Calendar ID

Google Apps ScriptとSlackでカレンダーイベント通知を自動化する方法の紹介

Google CalendarとSlackは、スケジュール管理やチームコミュニケーションに欠かせないツールです。この二つを統合することで、Slackチャンネルにカレンダーイベントの通知を自動化し、全員が最新情報を把握できるようにすることができます。本記事では、Google Apps ScriptとSlackを使用してカレンダーイベント通知アプリを作成する方法を紹介します。

## 目次

2. **環境設定**
– 必要なツールとアカウント
– グループカレンダーIDの取得
– Slack Webhookの作成
3. **Google Apps Scriptプロジェクトとスクリプトの作成**
– スクリプトの記述
– Slack通知機能の実装
– 毎日のイベント通知
– 新規・更新イベントの確認・投稿
– デバッグ用ボーナス機能
4. **Apps Scriptのトリガー設定**
– 毎日のイベント通知トリガー
– カレンダー更新時のトリガー
5. **結論**
– リソース

## 環境の設定
### 必要なツールとア

【いらすとや図解】はじめてのレンダリング

# この記事に関して
ブラウザのレンダリングについて書いていきます。
細かい仕様とかは抜きにしてざっくり概要を書いていきますのでわかりやすくなっているかなと思います。
ブラウザのレンダリングから、具体的な問題への対処法、将来を見越した設計の基本などを今後書いていく予定です。
この記事は下記の本をベースとして書いています

https://gihyo.jp/book/2017/978-4-7741-8967-3

# この記事の対象者
– レンダリングってなんですか？という方
– フロントエンドのパフォーマンスになんとなく意識(興味)を持った方

# この記事で取り扱わないこと
– React.jsやVue.jsといったフレームワーク特有のレンダリング
– 細かい仕様等に関して(わかりやすさを重視しているため)

# 関連記事
(準備中)

# レンダリングの流れに関して
ブラウザにURLを打ち込んでから、ウェブページが表示されるまでにどういった超ざっくり説明すると以下の4つの工程になります。これがレンダリングと呼ばれるものです

– Loading(リソースの読み込み)
– Scrip

RustとWebAssemblyでドット絵フィルター作ってみた_修正版

# はじめに

下記で作ったドット絵フィルターを友人に見せたところ

友人「解像度低い映像になっただけやん。。。😑」

と言われたのでリベンジも含めて修正版を投稿します。

https://qiita.com/shisojuice/items/7142c594afd6bdc79b13

前回の成果物のフィルター


# プロジェクトの作成

前回作成したドット絵フィルターが微妙な理由は、

色合いがドット絵調ではなかったことがあげられる。😑

なので今回は、色をなるべくドット絵調に近づけてみる。

そもそもドット絵の色って何だろうと思い調べたところ、

下記のようなファミコンカラーパレット(ファミコン52色)と呼ばれる色があるみたいなので

これをベースに色を変更してみる

ファミ

【GDevelop】数字をカンマ区切り（の文字列？）にする

# はじめに
絶対に公式関数でありそうな気がする、数字のカンマ区切り。

調べても調べても自作拡張機能とかの話ばかりで、なんかスッキリしないのでJavaScriptでの記述を探しました。

ChatGPTのある時代で良かった。

# 答え

右クリック「追加」「JavaScript」から。

条件の無いとこで大丈夫でした。

（画像）

「JavaScriptに渡すオブジェクトを選択して下さい」は無視して良いっぽいですね。

（ソースコード）
“`javascript
// カンマ区切りにする関数
function formatNumberWithCommas(x) {
if (x < 10000) { // 10000未満なら小数点以下1位まで表示 return x.toFixed(1).replace

ESLintをeslintrcからFlat Configに移行する際の最新手順 (2024年8月版)

## 記事を書くことにしたきっかけ

ESLintの設定ファイルのフォーマットが別物に変わろうとしています。
現在は過渡期となっており、ネットで調べていると古い情報もありました。

自分が移行した際にハマったポイントや、最初から知っておけたらよかったと思ったポイントをこの記事にまとめてみます。

## この記事を読む際の注意事項

状況は日々アップデートされています。
この記事の情報は古くなっていくと予想されますので、最終更新日と他の情報を照らし合わせながら読んでください。
(気が付いたら最新情報に更新していきたいと思っていますが、どうしても遅延はあると思います)

## 動作確認で使用したバージョン

– ESLint 9.9.0

## ESLintの設定ファイルのフォーマット

### これまで (ESLitnt 8系以前)

– 設定ファイル名: `.eslintrc.js` `.eslintrc.json` `.eslintrc.yml`
– 設定フォーマット名: `eslintrc`
– 呼び方: “eslintrc”や”Legacy”と呼ばれることが多い
– 公式ドキュメ

1, 2, 3 発射。ロケット打ち上げゲーム。



### スペースキーを押すと発射。ロケット打ち上げゲーム。

“`python
import http.server
import socketserver
import tempfile
import webbrowser

html_content = “””

type(型エイリアス)とinterfaceの違い – TypeScript

TypeScriptを実用している中で、typeとinterfaceの使い道の違いがわからなかったので、今回まとめることにしました。

# 定義の方法と用途

## interface
主にオブジェクトの形状（プロパティやメソッド）を定義するために使われます。
インターフェースは拡張（継承）が可能で、他のインターフェースやクラスを継承することができます。
“`typescript
interface Person {
name: string;
age: number;
greet(): void;
}

class User implements Person {
name: string;
age: number;

constructor(name: string, age: number) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
“`

## type（型エイリアス）
型エイリアスは

NodeJSで作ったアプリを無料でリリースする方法

### この記事の内容

NodeJSで作ったアプリをNetlifyにアップロードしてWebサービスをリリースする方法を解説しています。

### Chapter 1: Node.jsとExpressのインストール

1. **Node.jsのインストール**
Node.jsを公式サイトからダウンロードし、LTSバージョンをインストールします。

2. **Expressジェネレーターのインストール**
ターミナルで以下を実行し、Expressジェネレーターをインストールします。
“`bash
npm install -g express-generator
“`

### Chapter 2: Expressアプリの作成

1. **新しいExpressアプリの生成**
ターミナルで以下を実行してアプリを作成します。
“`bash
express myapp –view=pug
“`
2. **依存関係のインストール**
作成したディレクトリに移動し、依存関係をインストールします。
“`b

【JavaScript】Ruby → JS はじめての基礎文法

はじめに

私は普段Railsチュートリアルで学習しており、Rubyしか基本的に触ったことがない。
しかし昨日までハッカソンに参加しており、TypeScript + React + Next.jsで開発を行うことになり、なんかフロントが楽しくなったので学習してみることにした。

変数と定数など

変数

JavaScriptの変数の定義はこのように書く
“`js
let hello = “Hello,world”;
“`
まず初めに`let`を置き、そのあとに変数名を書く
Rubyでは変数名からいきなり=でつなげて定義していた。
JSの場合はletを宣言する必要があるから、少し大変だね

変数というものは上書きできるので、letを省略し、この後に続けて書くと上書きをすることができた

Rubyと違い閉じタグをわすれないように！

`console.log(変数名);`とすることで、デベロッパーツールのconsoleの部分で見ることができる。rubyだと`putｓ`でやってたやつかな

定数

変数と似たようなもので定数というものがある。
“`js

初心者エンジニアがleetCodeのTop Interview 150を解いてみる #1Merge Sorted Array

## 1.　☺️はじめに☺️
### 始めようと思ったきっかけ
+ コーディングスキル向上と理解定着のため
→業務で必要なコーディングをするだけでは知識の幅が狭まるのではないかと思い、全般的な知識を身につけるべく、leetCodeに手を出してみた。
また、解いて終わりではなくて、問題を解く中で調べたことの記録をアウトプットすることで記憶を定着させる目的もある。
+ 言語化能力向上のため
→実務で人に自分がなぜこう書いたのか説明するのが苦手だな〜と思っていたので、問題を解くときに考えたことを書くことで練習できると思った。

### 💻対象言語
JavaScriptとJava

### 👀注意事項
当方実務経験1年のエンジニアなので、およそ最適とは言えない解き方をしているという自覚はありますので、温かい目で見守っていただけるとありがたいです😂💦

## 2.💪早速解いてみる💪
・88.Merge Sorted Array
https://leetcode.com/problems/merge-sorted-array/

（問題）
与えられた引数（配列 nums1,nums2 および整数

基本的なTypeScriptの文法

# TypeScriptとは
TypeScriptは、JavaScriptのスーパーセットとして設計されたプログラミング言語です。マイクロソフトによって開発され、静的型付けを特徴としています。これにより、変数や関数の型を明示的に宣言することができ、開発時のエラーを早期に検出することが可能となります。TypeScriptは、JavaScriptのすべての機能を含みつつ、型安全性と大規模アプリケーションの開発を容易にするための追加機能を提供します。これにより、コードの品質と保守性が向上し、開発者の生産性も高まります。

※スーパーセット・・・元の言語との互換性を保ちつつ、元の言語を拡張して作った言語のことを指します。TypeScriptは、JavaScriptとの互換性を保ちつつ、JavaScriptを拡張して作った言語です。

## コンパイル
TypeScriptは、ブラウザやNode.jsで直接実行することができないため、実行する前にJavaScriptに変換する必要があります。この変換のプロセスを**コンパイル**と言います。
コンパイルの際、TypeScriptコードはJavaS

初心者向け　paizaDランク「N倍の文字列」を解く

「paizaxQiita記事投稿キャンペーン」より、Dランク問題「N倍の文字列」を解きます。

言語はJavaScriptです。

https://paiza.jp/works/mondai/d_rank_skillcheck_archive/square

## for文を使用
回数分回して`*`を文字列追加しています。

“`javascript
let str = ”;
for (let i = 0; i < lines[0]; i++) { str += '*'; } console.log(str); ``` ## Arrayオブジェクトを使用 ```javascript console.log(Array(+lines[0]).fill('*').join('')); ``` 個数分の空配列作って、それを文字列`*`で満たし文字連結させます。

JavaScriptでpaizaAランク問題「本の整理」に挑む。

私はこれまでC・Bランクを解いてきました。計算方法は気にせず自分の思うように解けるので難しい印象はありませんでした。
しかし、Aランクから一筋縄ではいかない様子。

特に「本の整理」問題はアルゴリズムを使用しなければいけないようです。

ということで、挑戦してみました。※問題文はURLから確認してください。

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

## 解き方
結論、「**選択ソート**」を使用しました。
配列の先頭から順番に最小の要素を選び、並び替えていくアルゴリズムです。

1. `for`文にそって比較の元になるインデックスを決めていきます。ここでは`minIndex`と表現しています
2. そこから値を比較し、より小さい値があるか精査します。もしあった場合、最小値のインデックスが変わるので、`minIndex`を更新します
3. 最終的には元インデックスと最小インデックスにある値を入れ替えます

“`javascript
const bookIds = lines[1].split(‘ ‘).map(line

Slackの@メンションをGmailで転送する

Slackでの投稿をメールに転送するための実装です．
Gmail->Slackへの転送はいくつか記事にまとめていただいているものを見つけましたが，逆は見つからなかったので2024年8月時点の実装方法の備忘録を残します．

* 個別メンションされた場合は，メンション相手にだけ転送する
* @ channelでメンションされた場合は，メーリングリストに転送する

Google App Script（以下GAS）のリミットレートが50件/minであることetcから，少人数のワークスペースでしか流用できないかもしれません．また**とりあえず動けば何でもいいの精神で実装した**ので，あんまりちゃんとしたフローではないです．

# 1. Slack APIの設定

1.1. Slack Appの作成
* [Slack API](https://api.slack.com/)にアクセスして右上の「Your Apps」をクリック
* 「Create New App」をクリックして「From scratch」を選択
* アプリ名（なんでもよい）を入力して，導入したいワークスペースを選択して「Create

Notion APIでロールアップのカラムを検索できないメモ

“Notion APIでロールアップのカラムの検索をする”という記事を前に書いてましたが、Notion APIでロールアップのカラムを検索できない事象が発生していました。

https://qiita.com/n0bisuke/items/b9977f08d9e001bc08ea

## 事象

“`js
//色々省略

console.log(res.results[21].properties[‘課題カテゴリ’]);
console.log(res.results[21].properties[‘カテゴリ(自動化用)’]);
“`

“`json
{
id: ‘XXxW’,
type: ‘rollup’,
rollup: { type: ‘array’, array: [], function: ‘show_original’ }
}
{
id: ‘%7Cyt~’,
type: ‘formula’,
formula: { type: ‘string’, string: null }
}
“`

## インテグレーションへの権限付