- 1. JavaScript のデータ型について学ぶ ①JS の型の性質と分類
- 2. 名前付き export と デフォルト export
- 3. Stackプログラミング言語を実行できるJSライブラリを作った
- 4. 「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件
- 5. OpenAI APIをTypeScriptから実行するための備忘録
- 6. Reactプロジェクトのための新しい道: Bulletproof-React ディレクトリ構造の探求
- 7. 【初心者でもできる】Mapboxでウェブ上に位置情報を表示する
- 8. Alexaにスプラトゥーン3のステージを教えてもらおう！
- 9. 【PHP8.2】PHP8.2でジェネリクスが導入された
- 10. 【Chrome拡張】URLデコードで丸見えだ👀✨
- 11. ファイル分割アップロード
- 12. 【VanillaJS】ドラッグ&ドロップで要素を並び替える方法(1次元方向)
- 13. Stimulusでa11yを考慮した可変のカルーセルを実装する
- 14. React + React Router + TypeScript: チュートリアル[01] loaderとactionでデータを作成・編集・削除する
- 15. 【Next.js】レンダリングとは
- 16. レンダリングとは
- 17. 今さら森博嗣「笑わない数学者」のビリヤードの問題を解く６～答え合わせ編
- 18. JavaScriptのテンプレートリテラルを完璧に理解する
- 19. PlunkerでPhaser.Physics その15
- 20. PlunkerでPhaser.Physics その14
JavaScript のデータ型について学ぶ ①JS の型の性質と分類
このシリーズはプリミティブ型、オブジェクト型についての詳しい内容についてもそれぞれ記事を作成し、全3回の構成になる予定です。
## 結論
– JavaScript は弱い型付け、動的型付けの特徴を持つ
– プリミティブ型は変更ができない
– プリミティブ型に分類されるのは以下の7つ:
– String
– Number
– BigInt
– Boolean
– undefined
– Symbol
– null
– オブジェクト型は変更ができる
– オブジェクトに分類されるのは以下の（大きな分類で）7つ:
– Object
– Date
– Array
– 型付き配列
– Function
– インデックス付きコレクション
– キー付きコレクション
– Map
– WeakMap
– Set
– WeakSet## JavaScript の型の性質
> JavaScript は弱い型付けあるいは動的
名前付き export と デフォルト export
理解しているつもりでしたが、いざ質問されるとスラスラと回答出来ませんでした。これはうろ覚えというやつです。
二度とこういうことが無いように、今まとめておいて「この記事見て」で説明終わりにしようと思います。
# デフォルト export
**export default** という記述が、モジュールファイルに1回だけ記述出来る。
## サンプルコード1 – 関数編
### helloWorld.js
“`javascript
export default function HelloWorld() {
return ‘Hello World!’;
}
“`### index.js
“`javascript
// helloWorld.js に記述されているメソッド名は HelloWorld() だが、好きな名前を付けられる。
import TekitouFunctionName from “./helloWorld.js”;console.log(TekitouFunctionName);
// コンソール出力
// Hello World!
“`
Stackプログラミング言語を実行できるJSライブラリを作った
## 概要
こんにちは！
私がコミュニティで開発しているスタック指向型の強力なスクリプト言語「Stack」を、PHPみたいにHTMLに組み込んで動かせたら便利だと考えて、Webアセンブリ版Stackプログラミング言語を実行するJSライブラリを開発しました。https://qiita.com/KajizukaTaichi/items/1c3e3ee08d102bfd576c
# コード紹介
“`javascript
import init, { run_stack } from ‘./pkg/web_stack.js’;init().then(() => {
window.run_stack = run_stack;// ページの読み込みが完了したら実行する処理
// class が stack である要素を全て取得
const stackElements = document.getElementsByClassName(“stack”);// 各要素に対して処理を行う
for (let i = 0; i < st
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件
# はじめに
まず↓の記事を見てない方はぜひ見てください！
https://qiita.com/economist/items/d4254209330c11caff04
自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました…
なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。
ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。
OpenAI APIをTypeScriptから実行するための備忘録
# 概要
昨年の大晦日にOpenAIのChatAI APIを利用して検証したいことを以下の記事にまとめました。そこで、早速検証してみようと思い立ちました。年明けから色々と検証してみており、まだ終わってはいませんが、現状の備忘録をまとめておこうと思います。https://qiita.com/y-vectorfield/items/02734f8f6860d976ba10
# 検証1: TypeScriptで動作させたい
## 検証結果
以下のコマンドを実行すると環境構築が出来る。:warning: 筆者はNode.jsのパッケージマネージャーとしてnpmを利用しています。
“`bash
npm install –save-dev typescript && npm install openai
“`https://the2g.com/post/difference-between-npm-install
参考資料として以下の公式チュートリアルの内容が非常に役に立ちました。以前勉強のために購入した書籍は情報が古く、書籍内のコードをそのまま実行してもエラー終了してし
Reactプロジェクトのための新しい道: Bulletproof-React ディレクトリ構造の探求
## はじめに
Reactを用いてWEBサイトを構築する過程で、これまでAtomic Designを採用してきました。しかし、Atomic Designにおける判断基準のあいまいさとプロジェクトの複雑性の増加に伴い、その運用が困難になるケースがありました。この課題に対処するため、2024年02月現在で、[bulletproof-react](https://github.com/alan2207/bulletproof-react/tree/master)のアプローチに基づくディレクトリ構造の採用を検討し、ベストプラクティスに沿った構築ができるようにその理解を深める目的で本文書を作成しました。
## Atomic Designの課題
Atomic Designでは、以下のような構成が取られます。
“`
src
|
|– components
| |– Atoms
| |– Molecules
| |– Organisms
|– Templates
|–Pages ページ
“`このアプローチには、以下のような複数の課題を感じていました。
–
【初心者でもできる】Mapboxでウェブ上に位置情報を表示する
この記事の内容
この記事では地図サービスであるMapboxを使用して自分の位置情報をウェブのマップにマーカーとして表示する方法とそのコードを紹介したいと思います。
やり方やそのコードの意味についてなども具体的に解説していきたいと思います。
### ご挨拶
みなさんこんにちは！
世界を体験できるメディアをミラーワールドを通じて作っているかっつーです。それを作るための背景や思いなどについては[こちらの記事](https://note.com/katsu1008/n/n6b2cd805a929)を参考にしてください！
作るまでの具体的なステップについては[こちらの記事](https://note.com/katsu1008/n/nf72df1aa5d47)をご参考にしてください。
僕は世界のあらゆる境界線に関心があります。細胞や自己と他者、障害、国境、社会的対立など世界は境界線の積分でできていると考えています。
これらの境界線をテクノロジーによって、なめらかにし、自由自在にすることができれば、人々が生きやすいなめらかな社会が実現できると考えています。
### Mapboxと
Alexaにスプラトゥーン3のステージを教えてもらおう！
# はじめに
この開発をするきっかけは、同居人がイカリングを見ずにスプラトゥーンのステージ情報を知りたいとお願いしてきたからです。
自分としても、開発経験を積みたかったので承諾しました。
## Alexaスキルの設定
諸々選んだあとの設定画面。
今回はJavascriptで行きます。理由はなんとなく。
呼び出し名は一旦「ステージ通知」とします。ここはあとで使いやすいように変えよう。
スキルを起動したとき最初に動作する関数”LaunchRequestHandler”内の変数”speakOutput”にデフォルトで入力されている回答文`Welcome, you can say Hello or Help. Which would you like to try?`を、`スプラトゥーン3の現在のステージをお知らせします。`と書き換えます。
:::note
4. ジェネリクス
PHP 8.2 では、ジェネリクスのサポートが導入されました。
ジェネリクスを使用すると、コードの再利用性が向上し、型安全性も確保されます。“`php
interface Collection{
public function add(T $item): void;
public function get(int $index): T;
}class StringCollection implements Collection
{
// …
}$stringCollection = new StringCollection();
$s
【Chrome拡張】URLデコードで丸見えだ👀✨
# ➊ はじめに
会社で**Teams**から**Sharepoint**の資料を参照する際、ブラウザに表示されるURI（Uniform Resource Identifier）が、「`https://example.com/?text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF/file.txt`」などとエンコードされていて、ファイルへのパス確認が難しいため、Chrome拡張のお勉強も兼ねて、複数バイトのURIをデコードする**Chrome拡張**を作ってみたくなりました。
:::note warn
ちなみに普通にブラウジングすると、ブラウザ上部のURI表示場所にはデコードされたURIが表示されますので、ここではイメージとしてUTF-16でエンコードされたURIを使っています。
:::**➡これ
ファイル分割アップロード
“Vue.js“と“Laravel“によるSPAを構築しました。
“Vue“から“Laravel“へのファイルアップロード機能を実装しており、
大きいサイズのファイルをアップロードする際に少し苦労したので、
その備忘録としてここに残します。# 実装方法
初めは1つのファイルをフロントエンドからバックエンドへそのまま送る予定でした。しかし、5GBほどのファイルをアップロードすると、通信環境によってはタイムアウトでエラーが発生し、設定値等を変更しても改善しませんでした。
なのでフロントから分割してアップロードし、
バックで統合、保存する方式で実装することに決めました。# Vue.jsの実装
““は **multiple** に設定しているので複数選択可能です。
それぞれのファイル毎に“uploadChunks()“を呼び出します。実際のソースでは“upload()“が呼び出されるとバリデーションチェック等を行っています。
“`js
const upload = () => {/* バリデーションチェック等実装 *
【VanillaJS】ドラッグ&ドロップで要素を並び替える方法(1次元方向)
# はじめに
ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。
ドラッグして要素の並び替えする方法について今回は解説していきます。
:::note warn
今回は1次元方向のみの場合です。
(また、見やすさのため `li` 要素を垂直方向に並べています。)
グリッド状(2次元)の並び替えはこの記事では扱いません。
:::# 対象となるコード
“`html:index.html
- 項目 1
Stimulusでa11yを考慮した可変のカルーセルを実装する
カルーセルのアクセシビリティを考慮しつつ、Stimulusで実装してみたいと思います。
## カルーセルとは
> 文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。
via: [カルーセル | Accessible & Usable](https://accessible-usable.net/2014/03/entry_140316.html)
—-
「回転木馬」は、「メリーゴーラウンド」と言えば分かりやすいですかね。
ウェブサイト上でくるくる回るアレです。
自動でスライドするかどうかや、無限にループするかどうかは、仕様によります。### 可変のカルーセルとは
表示領域が固定されているカルーセルはよくありますが、今回はこの表示領域がコンテンツ幅によって可変するカルーセルを実装してみたいと思います。
具体的には以下のようなものです。
React + React Router + TypeScript: チュートリアル[01] loaderとactionでデータを作成・編集・削除する
[React Router](https://reactrouter.com)は、Reactに使われるもっとも人気の高いルーティングのライブラリです。シングルページアプリケーション(SPA)では、ひとつのページに表示されるコンポーネントを切り替えて複数のページが表現されます。それらのページにそれぞれURLを与えて遷移するのがルーティングの技術です。
そして、React Routerは「[クライアントサイドルーティング](https://reactrouter.com/en/main/start/overview#client-side-routing)」を実現します。通常のWebサーバーでは、ページ遷移のたびにドキュメント全体をリクエストして、コンテンツすべてがロードし直されなければなりません。クライアントサイドルーティングは、すでに読み込まれたJavaScriptで、必要な箇所はただちに更新します。そのうえで、新たに使うデータのみサーバーにリクエストするのです。ページを丸ごとリロードする場合と比べて、負荷がかかりません。
React Routerにはv6.4から新たなData A
【Next.js】レンダリングとは
# レンダリングとは
Next.jsのレンダリングは、Next.jsフレームワークにおいて、クライアントサイドとサーバーサイドのレンダリングの両方を含むプロセスを指します。1\. **サーバーサイドレンダリング（SSR）** : Next.jsでは、ページがサーバー上で最初にレンダリングされ、HTMLコンテンツがクライアントに送信されます。これにより、初期のページの読み込みが高速化され、検索エンジンのクローラーがページの内容を確実にインデックスすることができます。サーバーサイドレンダリングは、getServerSidePropsメソッドを使用してページごとに定義されます。
2\. **クライアントサイドレンダリング（CSR）** : ページが初めて読み込まれた後、Next.jsはクライアント側でルーティングを処理し、必要なデータをフェッチしてコンポーネントを再度レンダリングします。これにより、ページ間の移動が高速化され、ユーザーエクスペリエンスが向上します。クライアントサイドレンダリングは、通常のReactコンポーネントのマウントと更新によって行われます。
# まとめ
Next
レンダリングとは
# レンダリングとは
レンダリングとは、コンピュータのデータや情報を、人間が理解できる形式に変換するプロセスを指します。特に、ウェブ開発の文脈では、レンダリングはウェブページやウェブアプリケーションの画面表示を生成するプロセスを指します。# 手順
ウェブページやウェブアプリケーションのレンダリングは、通常次のような手順で行われます：1\. **HTML生成** : ウェブページのコンテンツや構造が定義されたHTMLコードを生成します。これには、テンプレートエンジンやフレームワークなどが使用されることがあります。
2\. **CSSスタイリング** : HTML要素に適用されるスタイルやデザインを定義します。これにより、ページの見栄えやレイアウトが設定されます。
3\. **JavaScriptの実行** : ウェブページがインタラクティブになるために、JavaScriptコードが実行されます。これには、イベント処理や動的なコンテンツの変更などが含まれます。
4\. **画面への表示** : 最終的に、生成されたHTMLコードとCSSスタイルがブラウザによって解釈され、画面
今さら森博嗣「笑わない数学者」のビリヤードの問題を解く６～答え合わせ編
# 0. はじめに
前回の記事までにビリヤードの問題は「ゴロム分度器」または「魔円陣」として古くから知られる数学の問題であることが分かった。今回，「魔円陣」を主題にした書籍（参考文献参照）を入手したので答え合わせを行いたい。
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く１～導入編 – Qiita](https://qiita.com/TETSURO1999/items/fa1db203d48858c607f1)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く２～計算機を使う – Qiita](https://qiita.com/TETSURO1999/items/be4a8b460a690a48236b)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く３～計算量オーダーを考える – Qiita](https://qiita.com/TETSURO1999/items/bcd0cceb66a3b6d5964f)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く４～世界記録に挑む – Qiita](https://qiita.co
JavaScriptのテンプレートリテラルを完璧に理解する
## はじめに
今回はJavaScriptにおけるテンプレートリテラルについて、基本構造から発展的な内容までを確認していく記事です。話は変わりますが、React（JavaScriptのライブラリ）の勉強をするなかで、**Styled Component** というスタイルを定義するためのライブラリを知りました。
その記載例が以下です。
“`react:Styled Componentsの記載例
const MyComp = styled.div`
width: 200px;
margin: 5px;
border: 1px solid blue;
`
“`
正直、これを見たとき面食らいました。
バッククォートが使われているのでテンプレートリテラルだということはわかりましたが、これによって何をしているのかは全くわかりませんでした。まだまだ知らないことが多すぎると感じたため、改めてテンプレートリテラルについて学び直し、JavaScriptの基礎を固めるべく、本記事の執筆に至りました。
では、早速基本から確認していきましょう。
## テンプレートリテラルとは
テン
PlunkerでPhaser.Physics その15
# 概要
Plunkerで、Phaser.Physicsやってみた。
CartPoleを、立たせます。
エージェントを、導入します。
環境が、エージェントにポールの傾きを与え、エージェントがPID制御を計算して、方向量ベクトルを返します。
環境が、重力シミュレートして、カートを動かします。
Kp,Ki,Kdは、自分が決めました。それぞれ、1.0，0.2、0.2です。
←キー、→キーで、外乱を与えることができます。# 写真
#
“`
var Agent3 = function() {
this.err2 = 0;
this.err = 0;
this.P = 0;
this.I = 0;
this.D = 0;
};
Agent3.prototype.get_action = function(set
PlunkerでPhaser.Physics その14
# 概要
Plunkerで、Phaser.Physicsやってみた。
いよいよ、シュミレーションやってみます。
強化学習で使われる、CartPoleです。
←キー、→キーでCartが、移動します。
pole.angleで、ポールの傾きが取れます。
cart.applyForceで、カートを動かせます。
次回は、立たせます。# 写真
# サンプルコード
“`
function preload() {
}
function create() {
game.physics.startSystem(Phaser.Physics.BOX2D);
game.physics.box2d.debugDraw.joints = true;
game.physics.box2d.setBoundsToWorld();
g
