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

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

チャットbotをchromeの拡張機能として作成してみた

## はじめに
#### この記事の目的や背景
今回自社botをLangchainを使用して作成している際にインターフェースをコミュニケーションツールに置くのか、webアプリを作成するのか使い勝手を検証するためのChromeの拡張機能を使用してチャット画面を常に表示させるとどうなるのかなと思い試してみました。
#### 対象読者
・チャットアプリを作成してみてたい方
・Chromeの拡張機能の作り方を知りたい方
## 目次
1. Chromeの拡張機能とは
2. Chromeの拡張機能でできること
3. Javascriptコードの実装
4. Manifest.jsonの作成
5. ChromeのデベロッパーモードでChromeにアップロード
6. 実際に触ってみる

## 1. Chromeの拡張機能とは
見出しの通りになりますがChromeの機能を拡張することができます。
こちらのwebストアからhttps://chromewebstore.google.com/?utm_source=ext_sidebar&hl=ja色々な拡張機能をインストールすることができます。
また自分

元記事を表示

JavaScript(php smarty内 .tpl 記述) ラジオボタン、テキストエリア 制御

## ■完成イメージ
・ラジオボックス(香炉)デフォルト、連絡事項に記述無し
・テキストエリア(連絡事項)
![スクリーンショット (924).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478380/ab05efe8-21ac-cf11-a637-3f5a9dc53d02.png)

・ラジオボックス(香炉)香炉有りの場合は、連絡事項に追記
・テキストエリア(連絡事項)
![スクリーンショット (925).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478380/2f0f2098-bf2d-3e41-a33b-f818c02279a0.png)

※香炉以外の他にラジオボタンが3つ

## ■ソースコード
“`javascript main.js

// === コンテンツをロードしたら実行
document.addEventListener(“DOMContentLoaded”, function() {

元記事を表示

Zendeskで目次機能を実装した

# はじめに

これまで大きなZendeskカスタマイズの受託を2件ほど経験してきました。あまりZendeskのカスタマイズについて、個別具体的に解説している記事がないので、我流のカスタマイズで恐縮ですがここに残したいと思います。

### 「Zendeskとは?」 という方へ

私自身ZendeskのGuide機能しか取り扱っていないのですが、ざっくり説明すると「企業のヘルプセンターがノーコード(カスタマイズ等を実施する場合はローコード) で構築できるよ!」というSaaSです。もっと詳しく知りたい方は[こちら](https://zeq.co.jp/case)を読んでみてください。

# Zendeskで目次機能を実装する

## 最終的に目指している状態

記事内の任意の場所に``と記述することで、記事内のヘッダー要素を取得して下記のような目次を作成する。(前提としてjQueryを使用しています。)変数名の前に「$」を付けることで、その変数がjQueryオブジェクトを格納していることを明示しています。

### 記事の状態

#### 記事内の任意の場所に``

元記事を表示

JavaScript の && 演算子は true/false を返すとは限らない

# はじめに
React Hook Form のサンプルを見ていたら、こんなコードがありました。

:::note info
というか、React 本家のチュートリアルにもありますね。
https://ja.react.dev/learn/conditional-rendering#logical-and-operator-
:::

“`react:エラーがあれば&&の右を出力
{errors.exampleRequired && This field is required}
“`

普段 JavaScript を書かない立場としては、すぐには理解できませんでした。
入力チェックの結果、エラーがある場合ならこういう挙動のはず。
1. `errors.exampleRequired` に何らかのオブジェクトが入っている
1. `true` と評価される
1. 右オペランドが評価される
1. 右オペランドが `true` と評価されれば、`true` が返される
1. 右オペランドが `false` と評価されれば、`false` が返され

元記事を表示

addEventListenerを使ってみた

こんにちはAtsu1209です。
今日は最近jQueryに頼りすぎたので、jQueryを使わずにコードを書きます。

# 初めに
今日はフォームに入力した値をalertで表示します。
そしてjQueryの代わりにaddEventListenerを使います。

# HTML
まずフォームを作ります
“`html


HAHAHA




“`
ごく普通のフォームを作りました。
次に本題のJSを書きます。

# JS
“`html


```
jsファイルを作成し、コードを書いていきます。
JavaScriptは、console.log~で出力することができます。
```:hello.js
console.log('文字列');
```

出力結果を確認する方法は以下の通りです。
Webブラウザでin

元記事を表示

p5.jsをVue3のコンポーネントにする

こんにちは|こんばんは。カエルのアイコンで活動しております @kyamaz :frog: です。

本稿は、少し前に寄稿されている@shibuya01055さんのエントリ『[Vue3 Composition API + TypeScriptでp5.jsを動かす](https://qiita.com/shibuya01055/items/c2c7794140f7b517e214)』を参考[^1]に、p5.jsをVue3のコンポーネントで扱うための手順を取り上げます。
かなり類似のエントリになりますが、複数の手順を参考にしながら本稿にまとめてみました。

## Vue 3 + TypeScript + Vite の環境を整える
はじめに、プロジェクト名を`p4vue`(お好きな名前でよいです)として[Vue 3 + TypeScript + Vite + Jest](https://github.com/imomaliev/vue-ts)の環境をまず整えます。

```shell
% npm init vite@latest p5vue -- --template vue-ts

Scaf

元記事を表示

OTHERカテゴリの最新記事