- 1. Service Locator と DI の違いを TypeScript を書きながら体験してみる
- 2. Azure OpenAIをWebサイトに組み込む
- 3. tk.memo_data-input-page
- 4. 社内フォルダへのリンクを開けるようにしたい_プリザンターで
- 5. React + TypeScript: useCallbackフックの使い方と使いどころ
- 6. JavaScript初心者が最低限これだけは覚えておくこと
- 7. ブックマークレットとQiita APIを使って記事一覧を取得する
- 8. これからはJavaScript勉強しよう 4回目
- 9. Vite + Reactプロジェクトを途中からTypeScriptに変更する方法
- 10. 即時関数について
- 11. 多重minify
- 12. 配列内のオブジェクト、任意の値を比較してランキングを作成（練習）
- 13. 14日目「if」と「try-catch」で揺れる社畜L
- 14. 改正：予約時刻表の雛形を作りました．
- 15. TypeScript 「never」を使った網羅チェック
- 16. JavaScript 三項演算子と||演算子と??演算子
- 17. ディズニーホテル ミラコスタは、どんなホテルだったのか。
- 18. Node.jsで普通のJavaScriptをimportする
- 19. クロージャーを用いたプライベート変数の書き方
- 20. プロパティ 'xxx' は型 'never' に存在しません。
Service Locator と DI の違いを TypeScript を書きながら体験してみる
この記事を読みました。すごくわかりやすい記事です。
以下のことがふんわりわかりました。
– Service Locator も DI も同じような課題を解決するためのもの
– Service Locator と DI コンテナは利用する目線だとほとんど同じもの
– DI の方がおすすめなんとなく理解したんですが、たぶん後輩に聞かれても説明できないです。
このモヤモヤを取り払うため、実際に TypeScript で書いてみることにしました。## 何も考えずに書くと
“`ts
class A {
exec(){
console.log(‘exec A’)
const b = new B()
b.exec()
}
}class B {
exec(){
console.log(‘exec B’)
}
}class App {
main(){
const a = new A()
Azure OpenAIをWebサイトに組み込む
# はじめに
Azure OpenAIにWeb ClientからWeb Serverを介してリクエストを行い、
応答をWebクライアントに表示する方法をサンプルコードで紹介します。※node.js、socket.io、Azure OpenAIについての学習を行う過程で作成したもののため
回りくどいやり方をしている部分があります。ご了承ください。
### 作るもの
テキストボックスに質問を入力して送信するとAzure OpenAIからの応答が表示される
プログラムを作成します。
# Azure OpenAIについて
Azure OpenAI ServiceとはChatGPTを含む、複数のAIモデルを利用することができるMicrosoftの提供するサービスのことです。
プラットフォームはAzureでAzureのリソースと組み合わせて利用す
tk.memo_data-input-page
備忘録
入力フィールドをラジオボタンの選択した項目によって制御する
社内フォルダへのリンクを開けるようにしたい_プリザンターで
プリザンターでURLを入力すると勝手にリンクが付いてくれる。
でも通常ブラウザでは社内サーバーへのリンクなんかはブロックされます。
⇒**カスタムURLスキーマにて開けるようにする！**# スクリプト
下記内容をスクリプトに入れて、「一覧」にチェック。
今回は一覧状態の時にリンククリックで開きたいので。
– クリックで実行
– 対象はリンク先が指定した時の場合のみ`file://\\\\192.168.xx.xx`。知らない場所は飛ばないように限定する
– 元のaタグでのリンクを無効にして、カスタムスキーマの文字列に置き換える
– カスタムスキーマでファイルが開く！“` js
document.addEventListener(“click”, (Event) => {
let hr = Event.target.getAttribute(“href”);
if (hr != null) {
if (hr.startsWith(“file://\\\\192.168.xx.xx”)) {
Event.preventDefault();React + TypeScript: useCallbackフックの使い方と使いどころ
[`useCallback`](https://react.dev/reference/react/useCallback)は、再レンダリング間で関数定義をキャッシュするReactのフックです。
本稿はReact公式サイト「[`useCallback`](https://react.dev/reference/react/useCallback)」にもとづき、useCallbackはどう使うのか、およびどのような場合に使うとよいのかを解説します。説明内容と順序は、公式ドキュメントにしたがいました。ただし、解説はわかりやすく改め、またコード例とサンプル([StackBlitz](https://stackblitz.com/))はTypeScriptを加えたうえで修正した部分が少なくありません。
# 構文
“`react
const cachedFn = useCallback(fn, dependencies)
“``useCallback`はコンポーネントのトップレベルで呼び出して、再レンダリング間で関数の定義をキャッシュします。
“`react
import {JavaScript初心者が最低限これだけは覚えておくこと
## 概要
JavaScriptを勉強し始めたので自身の備忘録のために分かりやすく自分の言葉で噛み砕いて解説して残しておく## 目次
[1. 変数](#1-変数)
[1-1. const](#1-1-const)
[1-2. let](#1-2-let)
[2. テンプレート文字列](#2-テンプレート文字列)
[3. アロー関数](#3-アロー関数)
[4. 分割代入](#4-分割代入)
[4-1. 配列の分割代入](#4-1-配列の分割代入)
[4-2. オブジェクトの分割代入](#4-2-オブジェクトの分割代入)
[5. デフォルト引数](#5-デフォルト引数)
[6. オブジェクトの省略記法](#6-オブジェクトの省略記法)
[6-1. プロパティ名の省略](#6-1-プロパティ名の省略)
[6-2. 関数プロパティの省略](#6-2-関数プロパティの省略)
[7. スプレッド構文](#7-スプレッド構文)
[8. forEach/map/filterを使った処理](#8-forEach/map/filブックマークレットとQiita APIを使って記事一覧を取得する
## はじめに
記事を見ているとき、ユーザーが書かれた記事タイトル一覧を見たいと思ったことはありませんか？
ユーザーが書かれた記事一覧をタグごとに個数分析したり、タグごとに記事タイトル一覧をフィルターして見たいと思ったことはありませんか？
本記事は、その方法のひとつを提案します。
## 本記事の対象者
– ブックマークレットで記事一覧を取得したい方
– 取得した記事一覧をExcelで見たい方
– 過去記事から有用な記事を効率的に発掘したい方## 方法
その方法とは、以降の節で紹介するブックマークレットで記事一覧を取得し、Excelに貼り付けることです。
つぎにVBAでタグの個数分析を行い、Excelのフィルター機能を使ってタグで記事一覧をフィルターして記事タイトルを見ます。
## 手順
1. Qiitaのページ（タグか、検索結果か、ユーザー）を開きます。URLによって記事を取得するQiita APIが変わります。
2. 以降の節で紹介するブックマークレットをクリックして記事一覧を取得します。
3. 取得した記事一覧をExcelに貼り付けます。
4. VBAでタこれからはJavaScript勉強しよう 4回目
https://fadotech.com/quiz-javascript/
“`html
テストの点数を入力しましょう
60点であれば合格です