- 0.0.1. SharePoint OnlineとJavaScript帳票ライブラリで作る帳票システム（2）
- 0.0.2. unjs/h3 のバリデーションを Joi で書く
- 0.0.3. SharePoint OnlineとJavaScript帳票ライブラリで作る帳票システム（1）
- 0.0.4. JavaScriptのバブリングとキャプチャリング
- 0.0.5. JavaScriptで蟻本 グラフ ダイクストラ法
- 0.0.6. 目と脳を持つ人工生命関数の計算模型。まるで脳が目で見たものを記憶してるかの様。いろいろと面白い予測をしてくれます。
- 0.0.7. JavaScriptでTODOリストを作ってみた part.2
- 0.0.8. Reactについて学んだことをまとめる
- 1. Hello!
- 2. 送信フォーム
- 2.0.1. kintoneでフィールドが特定の値に変更された時にSlackのワークフローへフィールドの値を連携するJavaScriptサンプルコード
- 2.0.2. 【React】React初心者がuseStateの基本を振り返ってみた
- 2.0.3. for … of 時に直接代入以外のアプローチによる 配列操作について
- 2.0.4. 未経験PGを目指す人へのJavaScript型まとめ
- 2.0.5. JavaScriptの復習⑥
- 2.0.6. DjangoでNone判定をして、HTMLの表示を切り替える方法（JavaScript活用）
- 2.0.7. 製造業のコーポレートサイトからヘッダーデザインを考える
- 2.0.8. 全てのチェックボックスをチェック、または解除するjs
- 3. チェックボックス一括切り替えサンプル
SharePoint OnlineとJavaScript帳票ライブラリで作る帳票システム（2）
# はじめに
前回の記事では、「ActiveReportsJS」と「SharePoint Online」を利用した帳票システムを開発の為、使用する環境の準備や「SharePoint Online」の情報の取得方法、レポートファイルの作成について解説しました。
https://qiita.com/masataka-yonei/items/800c0ee4b056953ab72a
今回の記事では、SharePoint Onlineを活用した、Web帳票システムの構築の第2回目として、SharePoint Online上に配置したレポートファイルを参照し、複数の帳票を表示可能なWebアプリケーションの作成方法について解説していきます。
## アプリケーションの登録
今回のWebアプリケーションでは、前回の記事で解説したとおり、SharePoint Onlineからのデータ取得に「[Microsoft Graph API](https://learn.microsoft.com/ja-jp/graph/overview)」を利用します。こちらのAPIを利用するにあたり、作成するW
unjs/h3 のバリデーションを Joi で書く
[unjs/nitro](https://nitro.unjs.io/) や [Nuxt3](https://nuxt.com/) が依存する [unjs/h3](https://github.com/unjs/h3)（以後 h3） について [zod](https://zod.dev/) を使用したバリデーションの書き方は公式のドキュメントや色々なサイトで紹介されていますが、他のバリデーションライブラリ（今回は [Joi](https://joi.dev/) ）での書き方が見当たらなかったので作成しました。
特にこだわりが無ければ公式のドキュメントでも紹介されている zod と組み合わせて使うのが良いと思います。今回は
– Joi のバリデーションメソッドに渡す「秘伝のたれ」化したオプション情報が存在する
– スキーマで定義するメッセージについてラベル部分をメソッドチェーンの中で都度書きたくない（zod は2024年現在も標準ではサポートしていない？）といった事情があり、h3 × Joi の組み合わせについてコードを書きながら考えたという内容になります。
## おさらい① P
SharePoint OnlineとJavaScript帳票ライブラリで作る帳票システム（1）
# はじめに
「[SharePoint Online](https://www.microsoft.com/ja-jp/microsoft-365/sharepoint/collaboration)」は、ファイル管理やチームコラボレーションに優れた機能を提供し、多くの企業が活用しています。SharePoint Online上でファイル管理を行ったり、「[Microsoft Lists](https://www.microsoft.com/ja-jp/microsoft-365/microsoft-lists)（SharePointリスト）」を使ってデータを管理している方も多いのではないでしょうか？JavaScript帳票ライブラリ「[ActiveReportsJS（アクティブレポートJS）](https://developer.mescius.jp/activereportsjs)」では、多くの方が利用されているSharePoint Online上でも使用できる「Microsoft Lists」のようなクラウドサービスのデータをデータソースとして活用し、Web帳票を簡単に作成するこ
JavaScriptのバブリングとキャプチャリング
JavaScriptのイベントバブリングとキャプチャリングについて知る機会があったので簡単にまとめます。
### バブリングとは
ご存知の方も多いと思いますが、子要素で発火したイベントが親要素にまで伝播することをバブリングと言います。よく考えてみれば普段から目にする光景で、
“`html“`
このようにid=’button’のdiv要素にクリックイベント時の処理を追加した時、内部のテキスト部分（子要素のdiv）をクリックしても処理が実行されます。これは子要素から親へとイベントが伝播しているためです（ボタン内部の要素もボタンの一部なので、感覚的にこの挙動に違和感がなく、バブリングについて意識することがありませんね）
また、子 → 親 → その親 → その親 … とどんどん上へバブリングしていくイベントですが、イベントリスナーに渡すコールバック関数のイベント引数の**currentTarget**でアクセスできます。逆に、イベントが生じた出発源とな
JavaScriptで蟻本 グラフ ダイクストラ法
# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・グラフのダイクストラ法 p96 についてです。
隣接行列を使った方法です。# 問題
“`
以下隣接行列の点A-点G間の最短距離を求めなさい。[
[0,2,5,INF,INF,INF,INF],
[2,0,4,6,10,INF,INF],
[5,4,0,2,INF,INF,INF],
[INF,6,2,0,INF,1,INF],
[INF,10,INF,0,INF,3,5],
[INF,INF,INF,1,3,0,9],
[INF,INF,INF,INF,5,9,0]
]出力
16“`
# コード部分
“`javascript
//
/** p97 隣接行列を使った配列ダイクストラ法
* @param destination{Number} 目的値の番号
* @param vertexCount{Number} 頂点の数
* @param edgeCount{Number} 辺の数
* @return {Number} 最短経路のコスト
目と脳を持つ人工生命関数の計算模型。まるで脳が目で見たものを記憶してるかの様。いろいろと面白い予測をしてくれます。
#### ショートストーリー 目と脳を持つ人工生命体関数
裕太は自分の技術を駆使して「目と脳を持つ人工生命体関数」を開発することを決意した。裕太は、ウェブカメラを通じて外界を観察し、映像を解析するシステムを構築することに集中した。
コードが完成するにつれ、裕太は自分の創造物に命を吹き込む準備が整った。彼はカメラを起動し、映像をリアルタイムで取得するプログラムを実行した。目の前の風景がモニターに映し出され、64×64ピクセルの小さなブロックに変換されていく。これが彼の人工生命体の「目」となる。
「さあ、始めよう」と裕太は呟いた。彼はデータセットを生成し始め、4096次元のベクトルに変換された映像の情報を蓄積していった。彼の指先がキーボードを踊るように動き、200フレームのデータが蓄えられる
JavaScriptでTODOリストを作ってみた part.2
こんばんは！gamubaruです！
引き続きTODOリストの作成をしたいと思います！
今回は、TODO追加したリストに編集ボタンと削除ボタンを付ける仕様を作成していきます！では製造します！
よろしくお願いします！！１.ボタン作成
–
編集ボタンと削除ボタンの作成
“`
// ボタンを作成
const editBtnElm = document.createElement(‘button’)
const delBtnElm = document.createElement(‘button’)
// ボタンの名前
editBtnElm.textContent = ‘編集’
delBtnElm.textContent = ‘削除’
“`
createElementメソッドでボタン要素を作成して、
作成したボタンに名前をつける。↓createElementメソッドはこんな感じ
記法
ReactはJSX記法を用いてコードを記述する。
JavaScriptの中にHTMLのような形でコードを書くことができる。
“`
import { StrictMode } from ‘react’;
import { createRoot } from ‘react-dom/client’;const rootElement = document.getElementById(‘root’);
const root = createRoot(rootElement);const AppHoge = () => {
return (
<>Hello!
);
};root.render(
【環境準備不要】JSXなしにReactコンポーネントを定義してfrappe-ganttでガントチャートを作る
# はじめに
仕事内でもReactを利用することも増えてきて、パッケージやらコンポーネントやら便利だよね、って思い始めて久しい。
一方で、古き良きjavascriptオンリーのページを触るときにも「あれ使えたら楽に実装できるかもなあ」と思って何とかならんもんかと試行錯誤してみた、という話。# 概要
* ガントチャートを作るにあたって「frappe-gantt」を使ってみた
* nodeなどは使わずに、シンプルな単一ページのみでReactを読み込んで完結するように実装してみたhttps://zenn.dev/rabee/articles/how-to-use-frappe-gantt-js
# こんな感じになる
# 準備するもの
* ウェブページが開けるもの（つまりエディタとブラウザ）
# 最初に成果物
なんと以下のhtml
CSS変数とJavaScriptを使って、アンカーリンクのジャンプ先の位置を柔軟に調整する
ウェブサイトでアンカーリンクを使用する際、固定ヘッダーがあると目的の位置に正確にジャンプできないことがあります。この問題を解決するために、CSS変数とJavaScriptを組み合わせた柔軟な方法を紹介します。
## 解決策の概要
1. CSS変数を使ってデフォルトのアンカー位置調整値を設定
2. HTMLで個別の調整を可能にする
3. JavaScriptを使って動的にスタイルを適用## コードと解説
### 1. CSS
“`css
:root {
–header-height: 4.125pc;
–anchor: var(–header-height);
}@media print, screen and (min-width: 744px) {
:root {
–header-height: 8.25pc;
–anchor: var(–header-height);
}
}[anchor] {
margin-top: var(–anchor);
padding-to
フォーム内のtype=”submit”はひとつだけにしよう
こんな感じのフォームがあります。
“`html“`
名前を入力してエンターキーを押したら送信されると思いますが、
フォームをエンターキーで送信をかける場合、**formタグの子要素にある「最初」の`type=”submit”`のボタンを実行**してしまう。「戻る」ボタンはtype属性が記述されていないのでスルーされるかと思いきや、`button`タグの`type`属性は初期値が`type=”submit”`らしい。
[HTML5タグリファレンス](https:
kintoneでフィールドが特定の値に変更された時にSlackのワークフローへフィールドの値を連携するJavaScriptサンプルコード
# 概要
下記の記事でkintoneからSlackへ、
メッセージを送るJavaScriptを紹介しました。https://qiita.com/ito_futa/items/4b6ba9b75fffd7d776b7
が、後続の業務処理を考えて、メッセージではなく、
SlackのWorkflowへ情報を連携したい場合もあると思うので、
そちらも紹介します。# Slack側での事前設定
:::note info
残念ながら有料のSlackでないと、Slack Workflowは使えないようです
:::## 1. 「自動化」をクリック
Slackの左側メニューから「自動化」をクリックします。
## 2. 「ワークフローを作成する」を選択
右上の「新しいワークフロー」をクリックします。
【React】React初心者がuseStateの基本を振り返ってみた
こんにちは。あがさんです！！
今回はReactでよく登場する“useState“について解説していきます。
## Reactって何？
Reactは、Facebook（現Meta）が開発したユーザーインターフェース (UI) を構築するためのJavaScriptライブラリです。主にシングルページアプリケーション (SPA) の開発で使用され、複雑なUIを効率的に管理するためのコンポーネントベースのアプローチを提供します。## useState
useStateは、ReactのHook (便利機能みたいなもの) の一つで、関数コンポーネントで状態（state）を管理するために使います。useStateをインポートし、コンポーネント内に定義することで、管理したい値の更新を手軽に行うことができます。これにより、ユーザーの操作に応じて動的にUIが変わるようなアプリケーションを簡単に作ることができます。# useState の特徴
### 実際にカウントアプリを作ってみました。
“`page.jsimport { useState } from “react”; // Rea
for … of 時に直接代入以外のアプローチによる 配列操作について
JavaScript には 参照変数 / 参照渡し はありませんが クロージャがありますので 変数への代入を反映することができます。
例えば 配列を for…of 中に 代入による対象の上書きをしたいとします。
その場合はどうしたらいいのでしょうか？
# 問 for … of 上で 各要素に 1 を足した値を設定してください
“`js
const array = [1,2,3,4,5];
console.log(‘before: %o’, […array]);
for(const a of array) {
// TODO
}
console.log(‘after: %o’, […array]);
“`## 答1
array.values()が使われていたのを entries()にして key と value を取り出して 操作 するなら次の様になります。
“`js
const array = [1,2,3,4,5];
console.log(‘before: %o’, […array]);
foreach(const [key, val
未経験PGを目指す人へのJavaScript型まとめ
# データ型の種類
## JavaScriptで使用可能なデータ型
| データ型 | 説明 | 値 |
|:—|:—|:—|
| String | 文字列 | シングルクォート(‘)、ダブルクォート（”)、バッククォート(`)で囲んだ文字列 |
| Number | 数値 | -(253 – 1) ～ 253 – 1 の数値（整数または浮動小数点数）
※ 253 – 1 = 9007199254740991 |
| BigInt | 巨大な整数 | 任意の大きさの整数値 |
| Boolean | 真偽値 | true / false |
| null | ヌル | null
※ 値が空（存在しない）ことを表す |
| undefined | 未定義 | undefined
※値が未定義であることを表します。
| Symbok | シンボル | 一意で不変な値 |
| Object | オブジェクト |キーと値を対で格納する入れ物※バッククォートは、「Shiftキーと＠の同時押し
JavaScriptの復習⑥
# はじめに
今回は、配列とfor文について復習していきます。繰り返し処理を用いることで、HTMLとJavaScriptがどう関連しているのかを知ることができます。# 配列とは
JavaScriptの配列（Array）は、複数の値を1つの変数にまとめて格納できるデータ構造です。各値は要素と呼ばれ、インデックス（0から始まる番号）でアクセスできます。
下記では、fruitsという配列に3つの文字列が格納されています。それぞれの要素にはインデックスを使ってアクセスできます。また、配列は以下のように動的に要素を追加・削除することができます。多様なデータ型（数値、文字列、オブジェクトなど）を混在させることも可能です。
“`js
let fruits = [“apple”, “banana”, “cherry”];console.log(fruits[0]); // “apple”
console.log(fruits[1]); // “banana”
console.log(fruits[2]); // “cherry”fruits.push(“orange”); //
DjangoでNone判定をして、HTMLの表示を切り替える方法（JavaScript活用）
## 問題の発生
Djangoのテンプレートで値がNoneだった場合、その情報をもとにHTMLの表示を切り替えたいことがある。例えば、データがあった場合は、試合結果を表示するようにし、データがない場合は、「データがありませんでした」と表示するようにしたい。
今回は以下のようにしたい
・match_countの値がnoneだった場合、match_count_sentenceのdisplayをnoneとする。
・match_countの値がnoneだった場合、match_result_sentence_noneのdisplayをblockとする。
“`HTML{{ match_count }}戦でした。
試合がありませんでした
“`
## 解決策
pタグ自体にmatch_countの値を埋め込み、その値で判断する。## 手順
1.pタグに値を埋め込む
“`HTML
製造業のコーポレートサイトからヘッダーデザインを考える
# はじめに
今回は、製造業のコーポレートサイトでよく見かけるデザインパターンを作っていきます。# 参考サイト
– 株式会社TKS
– 株式会社バイタル
https://vaital.co.jp/vaital/?_gl=1%2A3fitv4%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OTc5My4xLjEuMTcyODI4MTAwNS42MC4wLjA.
– 株式会社ISSダイニチ
https://www.kk-dainichi.co.jp/?_gl=1%2A3fitv4%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OT
全てのチェックボックスをチェック、または解除するjs
“`html
チェックボックス一括切り替えサンプル
チェックボックス一括切り替えサンプル
