- 1. ReactでWebSocketを扱う
- 2. SvelteKitのFlowbite-Svelteを実装した話
- 3. 検索APIで申請書を関連付けしてみた
- 4. オレオレつぶやきProcessing
- 5. javascript フォームに入力した値をコンソールで取得できない
- 6. iframe内にマークアップをレンダリングしたいときに便利なwhyframeを使ってみる
- 7. [Day8] データ型 part2
- 8. JavaScriptのおもしろサービス
- 9. Pleasanterのサイトマップを作る
- 10. 簡単Elixirシリーズ ~ カラーコードからRGB変換する簡単なお仕事
- 11. 簡単Elixirシリーズ ~ RGBからカラーコードへ変換する簡単なお仕事
- 12. TypeScriptを勉強するとJavaScriptの解像度あがる
- 13. 【JavaScript】演算子「+」を理解したい
- 14. Laravel8(API) × Vue.js で中間テーブルにPOSTする
- 15. 配列のネイティブメソッド何個言えるかな？
- 16. Alpine.store()を活用してグローバルな状態を定義しよう
- 17. obnizとGyazoAPIを使って自分史上最高の体を撮影できる装置を作りたい。
- 18. Node.jsからDiscordに通知を送るメモ（Fetch API）
- 19. 【JavaScript】DOMツリーからHTMLの要素を取得する方法
- 20. javascriptのfetchAPIで外部にあるphpファイルやxamppにあるphpファイルにアクセスしようとしたらなんか出来なかった
ReactでWebSocketを扱う
とある案件でReactからWebSocketを扱う必要が出てきたので、その時調査したことをまとめます。
調査のつもりが、React 18で追加された[useSyncExternalStore](https://ja.reactjs.org/docs/hooks-reference.html#usesyncexternalstore)を利用したオレオレ状態管理ライブラリ作りにいつのまにか脱線していたので、そのお話も添えて。React、WebSocket共に目新しい技術ではないですが、誰かのためになれば幸いです。
# 1.はじめに
お品書きは次の通りです。
[1.はじめに](#1はじめに)
[2.WebSocket?](#2websocket)
[3.Hello World – React x WebSocket の基本形](#3hello-world—react-x-websocket-の基本形)
[4.自動で再接続できるようにする](#4自動で再接続できるようにする)
[5.カスタムフック化 – useSyncExternalStoreを利用したオレオレライ
SvelteKitのFlowbite-Svelteを実装した話
# はじめに
SvelteKitの開発を始め、いくつかのUIコンポーネントを試しましたが、
* 一部のコンポーネントが動かない
* 一部のクラスが動かない等の事象が発生し、なかなかこれだ！というものに決まりませんでした。。
(きっと私の構築方法が悪いんだと思いますが、、)`Flowbite-Svelte`が私の環境では唯一ちゃんと動いたので実装方法を載せておきます。
# ①SvelteKitの構築
1. `SvelteKit`構築
“`bash
$ npm create svelte@latest
Need to install the following packages:
create-svelte@2.0.0-next.198
Ok to proceed? (y) ycreate-svelte version 2.0.0-next.198
Welcome to SvelteKit!
This is release candidate software; e
検索APIで申請書を関連付けしてみた
[コラボフロー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/collaboflow) 8日目の記事です！
こんにちは！気づけばもう8日目。。時が経つのはほんとに早いと改めて感じているこにおです。
—
みなさん、10月にリリースされた[検索API](http://docs.collaboflow.com/api-docs/#/Document/searchDocument)は利用されてますでしょうか？
検索APIでは指定した条件の申請データを取得できますので、取得した申請データを利用して
以下のようなことが実現できます！* 基幹システムとの連携
* 取得したデータをBIツールで分析する
* 過去のデータを取得してストレージサービス（Box等）にバックアップするただもっと違う使い方できないかな～と考えながらリファレンスを見ていたところ、、、
**閃きました**?
検索APIでは申請書のURLも取得できるので、このURLを申請書にセットすれば
関連する申請書を紐づけできるのでは。。。と思い
オレオレつぶやきProcessing
# はじめに
こちらは[Processing Advent Calendar 2022](https://adventar.org/calendars/7370)の8日目の記事になりますところで[#つぶやきProcessing](https://twitter.com/hashtag/%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DProcessing)をご存じですか?
知らない?
そうですか…(終)# 説明
そういえば #つぶやきProcessing の説明をしていなかった。
Processingというデジタルアートのためのプログラミング言語があります。https://t.co/ynQwP6S1RR#つぶやきProcessing はProcessingを使い、1ツイートに収まるプログラムで、どこまでアートを表現できるかに挑戦するものです。
— はぅ君 (@Hau_kun) June 5, 2019
[#つぶやきProcessing](https://twitter.com/hashtag/%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DProcessing)はProcessingを使い、1ツイート(280字)に収まるプログラムで、どこまでアートを表現できるかに挑戦するものです。
とにかく短いコードで色んなものを作ります。# 本編
去年に知り、時々暇があれば[投稿](https://twitter.co
javascript フォームに入力した値をコンソールで取得できない
## 環境
Mac(M1, 2020)
vscode５# [概要]
javascriptでTODOアプリを作成中、フォームに入力した値を取れているか確認するために
console.logで確認してみると
一瞬だけ入力した値がコンソールに表示され取得できてない現状
“`
const form = document.getElementById(“form”);
const input = document.getElementById(“input”);form.addEventListener(“submit”, function () {
console.log(input.value);
});
“`
原因としてはフォームでenterを押すと画面がリロードされるとのこ
iframe内にマークアップをレンダリングしたいときに便利なwhyframeを使ってみる
[Ateam LifeDesign Advent Calendar 2022(カレンダー2)](https://qiita.com/advent-calendar/2022/ateam-life-design)の8日目は
株式会社エイチームライフデザインの@oekazumaが担当します。# whyframeとは
[whyframe](https://whyframe.dev/)を使えば、Svelte、Vue、Solid、Preact、Reactなど、あらゆるUIフレームワークのマークアップをiframe内でレンダリングすることができます。
どういうことをしたい場合に使うと便利か？
– 実際の使用例を示したコンポーネントライブラリのドキュメントを作りたい
– コンポーネントの使用例を埋め込む記事を書きたい
– Story
[Day8] データ型 part2
本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。## 5.7 Map と Set
### 知らない単語
– iterableとは
– 反復可能プロトコル### 学んだこと
– Map
Mapはキー付されたデータの集まりで、任意の型のキーを許可する
主なメソッド
new Map()は新しいmapを作る
map.set(key, value)はキーで、値を格納する
map.get(key)は指定されたキーの値を返却する
map.has(key)はキーが存在する場合に true を返し、そうでなければ fa
JavaScriptのおもしろサービス
[MYJLab Advent Calendar 2022](https://qiita.com/advent-calendar/2022/myjlab)、8日目の記事です。
前回は@toshiki19さんの[コムドットのヤマト風のTwitterつぶやきを自動生成してみようと思った](https://qiita.com/toshiki19/items/860034f8c0c45919feb4)でした。
8日目の今日はジェネラティブアートのお手軽体験サービスを紹介します。
ではいきましょう
# 背景
最近JavaScriptをさわる機会が増え、何か面白そうなサービスとかライブラリないかなと調べていたところでした。そこで出会ったのがジェネラティブアートです。簡単にできそうなのないかな。# ジェネラティブアートとは
プログラムによって描かれた芸術作品のことを指します。懐かしの\sinや\cosなどを使って書いたり、乱数使って書いたりして作っていきます。コードの組み合わせによって思いがけない作品ができるかもしれないという面白さがあります。
なんとジェネラティブアートは国際
Pleasanterのサイトマップを作る
本記事は、[OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/pleasanter) の8日目の記事です。
# 前置き
Pleasanterでフォルダ作ってサイトをまとめて移動して、さらにつくって・・・を繰り返した結果、あのサイトどこだっけ？ってなりませんか？なりますよね？そんなときのためのサイトマップを作ってみたいと思います。# 作るサイトのイメージ
使い方は、サイトID（フォルダのID）を指定し、「サイトマップ」ボタンをクリックすることで、説明欄に表示されるというもの。
結果はマークダウン形式にして、リンクを設定します。# 仕組み
[以前の記事](https://qiita.com/m-isik/it
簡単Elixirシリーズ ~ カラーコードからRGB変換する簡単なお仕事
この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」8日目の記事です
東京にいるけどFukuokaexのYOSUKEです。
簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。
仕事柄、Elixir以外の言語を使ってサンプルコードを作成する。または教材を作ることをやっています。最近、RGBをカラーコードに変換してくれる関数を作りなさい。というお題のJavaScriptのコードを書いたので、Elixirで書くとどうなるか？を試してみようという記事です。
ちなみに、カラーコードをRGBに変換するも書いたのですが長くなるので、それは次回にしたいと思います。（そう、この記事はサクッとがコンセプトW）まずはJavaScriptで“`toRGB(“#DB7093”)“`を入力して“`[ 219, 112, 147 ]“`や、“`toRGB(“$DB7093”)“`、“`toRGB(“#DB709”)“`の入力の場合
簡単Elixirシリーズ ~ RGBからカラーコードへ変換する簡単なお仕事
この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」8日目の記事です
東京にいるけどFukuokaexのYOSUKEです。
簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。
仕事柄、Elixir以外の言語を使ってサンプルコードを作成する。または教材を作ることをやっています。最近、カラーコードをRGBに変換してくれる関数を作りなさい。というお題のJavaScriptのコードを書いたので、Elixirで書くとどうなるか？を試してみようという記事です。（そう、この記事はサクッとがコンセプトW）
まずはJavaScriptで“`toColorCode([ 219, 112, 147 ])“`を入力して“`#DB7093“`を返すようにしたいと思います。
“`javascript
function toColorCode(array){
const R = array.slice(0,1).pop().to
TypeScriptを勉強するとJavaScriptの解像度あがる
もっと早く勉強しておけばよかったな…と感じたのでみなさんには後悔してほしくなのでTypeScriptを勉強することのメリットを伝えたいと思います！
:::note info
【こんな方にオススメ！】
・JavaScriptの習熟度を上げたい人
・今JavaScriptを勉強している人
:::JavaScriptを勉強するなら切り離せないい存在となっているので一緒に学んでいただきたいです！
## TypeScriptってなに？
TypeScriptはJavaScriptの拡張言語で、2014年にMicrosoftによって発表されました。
TypeScriptで記述したコードをコンパイルすることでJavaScriptに変換されます。なので記述してみるとわかりますが、書き方などは基本JavaScriptと同じになるので、
**JavaScriptを知っている人であれば勉強を始めるときのハードルは低い**と考えています！### JavaScriptと何が違うのか？
最大の違いは**静的型付け言語**であることです。（JavaScriptは動的型付け言語）
型を自分でつけるか、勝
【JavaScript】演算子「+」を理解したい
## 題材
**JavaScriptの「+」の用途**
なんか使い方が色々あるらしいですね……
## 単項プラス演算子
– オペランド(被演算子)の前につけて使う
– オペランドをNumber型に変換する。“`js
+”100″ // 100
+”abc” // NaN
+true // 1
+false // 0
+null // 0
“`https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus
## 算術加算演算子
– 2項演算子
– 左右が両方Number型なら左右の値の和を生成
– そうでないなら、両方をStringに変換して連結文字列を生成“`js
12345 + 54321 // 66666
“abc” + “de” // “abcde”
“DECO*” + 27 // “DECO*27” 片方がNumberでも両方がNumberでないなら文字列結合
“`https://developer.mozilla.org/ja/d
Laravel8(API) × Vue.js で中間テーブルにPOSTする
現在お知らせ機能を実装しており、「次回から表示しない」ボタンを配置しています。ユーザーごとにどのお知らせを非表示にするかを管理するために、中間テーブルを作成しています。
現状はINSERTで中間テーブルにレコードを追加しています。
Vue.jsでaxiosを使って、APIからお知らせの情報を取得&表示まで実装済。
今回はAPIを完成することをゴールとします。Laravel8（APIモード）
Vue2（SPA）### 実装手順
– 中間テーブルのモデルを作成&関連付け
– UserControllerで中間テーブルへPOSTする内容を記述
– ルーティングの設定（api.php）
– PostmanでPOSTリクエスト送信
– Vue.jsからのリクエスト→APIとの疎通を確認
### 中間テーブルのモデルを作成&関連付け多対多の中間（ピボット）テーブルのモデルを作成する場合、`using`メソッドを呼び出すこと。
Notificationsモデル
“`php
public function users() {
return $this->belongsTo
配列のネイティブメソッド何個言えるかな？
1. map
1. filter
1. concat
1. reduce
1. slice
1. push
1. pop
1. unshift
1. shift
1. splice
1. indexOf
1. なんだっけ要素が含まれてるか検索してくれるやつ…
1. forEach
1. …12個でした。撃沈。
[Array – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array) のページに載っているものは40個ありました?
▼ **ネイティブメソッド言えるかなアプリを作ってみました。君もやってみよう！**
https://array-methods.onrender.com/~~
2022年に学び残したことを学び切ってスッキリする Qiita アドベントカレンダー 『ひとりJavaScript』 7日目になります。6日目は [DOM に立ち向かうために知っておくべきこと6つ – Qiita](https://qii
Alpine.store()を活用してグローバルな状態を定義しよう
# 別のファイルでグローバルな状態を定義する
JSファイルをViteやWebpackでバンドルする場合に使う書き方を紹介していきます。# 覚えること
### Alpine.store
これはグローバルな状態を定義するために使います。
以下が基本の形です。x-dataの書き方とほぼ同じです。
“`js
Alpine.store(‘名前’, {
プロパティ: 値,
関数() {
// 処理
}
})
“`
これをJSファイルにどのように書けばいいかと言うと、
“`js
// alpinejsをインポートする
import Alpine from ‘alpinejs’// グローバルなデータを定義する
Alpine.store(‘darkMode’, {
on: false,
toggle() {
this.on = ! this.on
}
})// v3からインポート後にAlpine.start()を呼び出す必要がある↓
Alpine.start()
“`
### $store
これはマ
obnizとGyazoAPIを使って自分史上最高の体を撮影できる装置を作りたい。
## トレーニングを通して変わったこと
初めまして！あべれんと申します。筋トレ歴2年程度の新米トレーニーです。
「みんなの筋肉体操」をきっかけに筋トレにハマりました。コロナ禍で武田真治と何度一緒に腕立て伏せをしたかわかりません。https://www.youtube.com/watch?v=JDc-xApip7k
そんな経験を通して少しずつ体が変わり、筋トレの沼にハマっていきました。
筋トレにハマって一番変わったのは朝のルーティーンです。人間の体はだいたい朝が一番絞れてます(見栄えがいい状態)。毎朝起きたら洗面台の前で上裸になり、鏡に映る体の状態を見て、一人少しニヤニヤしています。
え、ちょっとキモイって？**きっとみなさんも筋トレにハマったらこうなります。**## 毎朝のルーティーンで感じたこと
ルーティーンを通して鏡を見て幸せな気分にはなれますが、より一層自分が「頑張ったなぁ」と思えるように写真を撮って記録をしてみようと思いました。
ですが、思ったより道のりは大変でした。自分で写真を撮ってみて以下のようなことを感じました。::: note
– スマホで撮影をすると片
Node.jsからDiscordに通知を送るメモ（Fetch API）
前書いた記事のFetch版です。
https://qiita.com/n0bisuke/items/264ba2b79a0c5ed72678
基本は一緒
“`js
‘use strict’const URL = `DISCORD_WEBHOOK_URL`;
//送信するデータ
const postData = {
username: ‘n0bisuke BOT’,
content: ‘Node.js Fetch APIからポスト’
}const main = async () => {
const response = await fetch(URL, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(postData)
});
【JavaScript】DOMツリーからHTMLの要素を取得する方法
# はじめに
本記事では、JavaScriptでDOMツリーからHTMLの要素を取得する方法についてまとめていきたいと思います。
JavaScriptの初心者向けな内容あとなります。興味のある方はぜひ見て頂けると嬉しいです。# DOM、DOMツリーとは
DOMツリーからHTMLの要素を取得する方法を書いていく前に、簡単にDOMとDOMツリーについて触れておきます。
DOM（Document Object Model）とは、HTMLを解析してデータを作成する仕組みのことです。
HTMLやCSSがユーザーに閲覧されるまでの流れはご存じでしょうか。
HTMLファイルは単なる文字情報なので、そのまま表示してもユーザーにとって見にくいです。
その為、HTMLを解析してCSSやJavaScriptによる装飾を行った後に画面に映しています。
これを行っているのは、Googleやsafariなどの「ブラウザ」です。
HTMLは階層構造になっていて、この階層構造であるデータのことをDOMツリーやドキュメントツリーと呼びます。
の第二引数内でmode: “cors”を指定する。
アクセスされるphp側では header()でAccess-Control-Allow-Originを設定すればアクセス出来る。
