- 1. 【やってみた】小中学生向けJavaScript教材「サイレントリアル」
- 2. Reactで避けるべき useState の間違い
- 3. 【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】
- 4. javascript joinメソッド
- 5. Babylon.js の Particle Helper を使うとお手軽にパーティクルシステムを扱えて便利だった！
- 6. 【Three.js】1つのページに複数のThree.jsシーンを作成する
- 7. 素数判定関数を使って簡単なゲームを作った話③
- 8. イベントハンドラの関数名についての雑記
- 9. 【jQuery】Nightly BuildsのDataTablesプラグインを使っていたら突如エラーになった
- 10. lenis.jsでposition:fixed要素のoverflow:scrollを効かせる
- 11. AstroにおけるCSRの使い方
- 12. Promise：非同期処理の完了後に目的の処理を実行する
- 13. 素数判定関数を使って簡単なゲームを作った話②
- 14. JavaScript 第10回 ウィンドウをドラッグ＆ドロップで移動（マウス、タッチ両対応）
- 15. 素数判定関数を使って簡単なゲームを作った話①
- 16. 素数判定関数を使って簡単なゲームを作った話(目次用)
- 17. Brainfuckを簡単に書けるサイトを作った
- 18. 【JavaScript】ぼく「import文の{}って？」 #ぼくの大発見日記
- 19. 【Go言語】for文の奇妙な動作
- 20. eqメソッドとは
【やってみた】小中学生向けJavaScript教材「サイレントリアル」
# サマリ
小中学生向けJavaScript教材「サイレントリアル」の無料教材をやってみました。# 背景
ふらふらネットの波に揺られていると、ふとこちらの記事を目にしました。https://prtimes.jp/main/html/rd/p/000000007.000036248.html
なんとなく興味はあったものの手が出ていなかったJavaScript。
すぐできそうだったので、この機に学べればと思ってやってみることにしました。# ゴール
サイレントリアルの無料教材である、
– Part1：ジャンプゲームを作ろう！
– Part2：アイコンをデザインしよう！をそれぞれやってみる
# 対象読者
– JavaScript学習のとっかかりを探されている方# 前提
必須：PC、インターネット環境
# 環境
– ホストOS：Window10 Home
– ブラウザ：Google Chromeバージョン 120.0.6099.225
# 手順
以下の公式ページにアクセスし、気になる方をクリック。（雑）
– [間違い1：前の状態を考慮することを忘れる](#前の状態を考慮することを忘れる)
– [間違い2：状態の不変性の無視](#状態の不変性の無視)# 概論
React.jsは現代のウェブ開発において重要な役割を果たしています。特に、コンポーネント内での状態管理に対する独自のアプローチが特徴です。よく使用されるフックの一つである`useState`は基本的でありながら、しばしば誤用されています。このような一般的な間違いを理解し、避けることは、効率的でバグのないアプリケーションを作成しようとする初心者と経験豊富な開発者の両方にとって重要です。
このブログでは、Reactの`useState`を使用する際に避けるべき4つの重大な間違いについて深く掘り下げていきます。一緒にReactのスキルを高めましょう！
# 前の状態を考慮することを忘れる
Reactの`useState`フックを使用する際、最新の状態を更新するときにそれを考慮に入れないのは一般的な間違いです。この見落としは、特に迅速な状態更新や複数の状態更新を扱っている場合に、予期せぬ挙動
【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】
## 1. はじめに
これは [XPath](https://developer.mozilla.org/ja/docs/Web/XPath) を利用して DOM からノードを取得する方法を紹介する記事です。
最近 XPath の存在を知り、「XPath を利用して `document.querySelector()` のように DOM からノード（要素）を取得したい！」と思い立ったため、その方法をまとめていきます。
:::note warn
最近 XPath の存在を知ったばかりの拙いエンジニアによる記事です。誤りや不適切な記述がある場合はご指摘ください。
:::## 2. 結論
XPath を利用して DOM からノードを取得する関数です。取得したノードは配列に格納して返却します。
“`js
const getNodesByXPath = (xpath) => {
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression(xpath);
co
javascript joinメソッド
## Joinメソッドとは
配列に対して使用できるメソッドの一つ
配列に入っている要素を引数で指定した文字で、区切り、文字列連結する引数なしで呼び出すとデフォルトである、カンマ区切りで実行される
## 例
“`
const names = [Alice, Bob, Hanako];names.join(‘/’) → Alice/Bob/Hanako
names.join(”) → AliceBobHanako
names.join() → Alice,Bob,Hanako
“`
Babylon.js の Particle Helper を使うとお手軽にパーティクルシステムを扱えて便利だった！
## はじめに
今回の記事は、Babylon.js の以下の公式ドキュメントのページで扱われている「Particle Helper」に関するものです。●The Particle Helper | Babylon.js Documentation
https://doc.babylonjs.com/features/featuresDeepDive/particles/particle_system/particleHelper
↓こちらのポストに出てきている内容を作るのに使ったものです。
部屋に太陽を召喚できてしまったｗ#BabylonJS の「Particle Helper」での描画を、#p5js の WEBGLモードのオフスクリーンキャンバス（createGraphics()で作成）で行い、三角関数の揺れを加えてカメラ画像上に表示#genuary2024 #genuary1 としても投稿してみる（Using Particle Helper） #genuary pic.twitter.com/vCRkn3qYhq
— you (@youtoy) January 25, 2024
## Babylon.js でパーティクルシステムを使う話(Particle Helper以外の話)
### 基本の流れ
Babylon.js
【Three.js】1つのページに複数のThree.jsシーンを作成する
Three.jsでHTMLのbody内にシーンを追加する場合、`new THREE.Scene();`で新たにシーンを作成しますが、1つのbody内に複数のシーンを作成して、スクロールなどで切り替えたい、というようなケースもあります。その場合、HTMLで要素に`data属性`を指定して複数のシーンを描画する、という方法を紹介します。
デモは[こちら](https://codepen.io/outsider-kithy/pen/rNQZEZY)
## data属性とは
HTML5では、``の`src`や`width`,`height`のような、標準で定められている「属性」の他に、独自の属性を開発者が付加できる`data属性`というものがあります。これは、接頭辞に`data-`をつけて、開発者が自由に名前をつけることができます。
“`html
“`
素数判定関数を使って簡単なゲームを作った話③
ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。https://qiita.com/hitoki_univ/items/8e3feab0add17befc700
前回の内容については、こちらからどうぞ。
https://qiita.com/hitoki_univ/items/5893785797243794d33a
# 今回やること
第2回では、ゲームのタイトル画面を作成しました。
今回は、タイトル画面からのリダイレクト先である、プレイヤー名と制限時間を設定する画面を作成します。# プレイヤー名、制限時間の設定画面
前回作成したページでは、選択したプレイヤー人数に応じて異なるページにリダイレクトするようにしました。
今回はそのリダイレクト先のページを作成するので、複数のページを作成します。しかし、基本構造はどのページも同じなので、今回は2人用のページを主に確認していきます。### HTML
“` html
イベントハンドラの関数名についての雑記今日のXでは、イベントハンドラの関数名についての話題を見ました。[元の投稿はこちらです](https://twitter.com/plus_one_masaki/status/1750705805152944273)。要するに、次の`handleClick`のような`handleイベント名`という命名は良くないということです。
“`jsx
const handleClick = () => { … };
“`これについて少し考えたので、せっかくなのでアウトプットしておくことにしました。
## この記事の目的
– 考えたことを頭の中に残しておくのがもったいないので、文章の形にしておく。
– 色々な意見が出る問題であり、ベストな答えは無いので各々好きにすれば良いということを、読者に理解してもらう。
– とはいえ、筆者の考えに納得して同じ考えの人が多いと嬉しいので、なるべく納得してもらう。## 筆者の考え
自分の考えとしては、むしろhandleClickいいじゃん！ どんどん
【jQuery】Nightly BuildsのDataTablesプラグインを使っていたら突如エラーになった
# 概要
今まで使用できていたページ（jQueryを使用）が突如動かなくなってしまいました。検証ツールのConsole Logを見ると以下のようにありました。こちらの記事では、以下エラーの原因と解決方法について解説します。
“`
dataTables.buttons.min.js:44 Uncaught TypeError: t.ext.features.register is not a function
at dataTables.buttons.min.js:44:337
at dataTables.buttons.min.js:5:281
at dataTables.buttons.min.js:5:308
(anonymous) @ dataTables.buttons.min.js:44
(anonymous) @ dataTables.buttons.min.js:5
(anonymous) @ dataTables.buttons.min.js:5jquery.dataTables.js:6188 Uncaught TypeError
lenis.jsでposition:fixed要素のoverflow:scrollを効かせる
## はじめに
慣性スクロールを手軽に実装できる、Lenis.jsを使っているサイトでモーダルを作成した際、position:fixed要素のoverflow:scrollが効かない時の対処法です。## 解決方法
### 1. スクロール要素に `onwheel=”event.stopPropagation()”`を追加
“`“`### 2. jsでwheelイベント伝播を停止
“`
const modal = document.querySelector(‘#cc-main’)
modal.addEventListener(‘wheel’,(e)=>{
e.stopPropagation()
})
“`
をjsに追加すれば解決します。## 参考元
https://github.com/studio-freight/lenis/issues/14AstroにおけるCSRの使い方
## Astroでフロントエンドフレームワークを読み込む時の注意点
今回はAstroでVueやReactといったフロントエンドフレームワーク(CSR)を読み込んで表示する際の注意点を自分なりにまとめてみました。
公式ドキュメントには一応書いてあったものの断片的、英語のみだったのでお役に立てれば嬉しいです。### CSR（クライアントサイドレンダリング）とは
CSRはサーバー上ではなくブラウザ上でJavaScriptを実行してDOMを生成し、コンテンツを画面に表示する。この時HTMLファイルは空っぽでありブラウザ側でデータを取得してからレンダリングする。
つまり初期のロードではコンテンツが何も表示されない（HTMLファイルが空）、よってSEOにはどちらかというと不向きということになります。https://document.microcms.io/manual/rendering-methods#h46438108d6
### Astroでフロントエンドフレームワークを使う
Promise：非同期処理の完了後に目的の処理を実行する
JavaScriptには同期処理と非同期処理の２つがあり、プログラムを期待通りに動作させるにはPromiseという組み込みオブジェクトについて理解する必要があります。学習中に私がつまづいた部分についても記載します。
## 同期処理と非同期処理
まずはJavaScriptの同期処理と非同期処理の違いについて確認します。
### 同期処理
ある実行文の処理が終わるまで次の処理を行わないのが同期処理です。コードを１行ずつ順番に処理して行くため、コードの流れ通りに処理が行われます。
“`JavaScript:同期処理
console.log(“処理開始”);
console.log(“処理完了”);
console.log(“プログラム終了”);“`
実行結果
“`plaintext
処理開始
処理完了
プログラム終了
“`
### 非同期処理
処理が終わる前に次の処理を許可するのが非同期処理です。例えば、Webページにアクセスした時に全てのデータが表示されていなくても画面スクロールができます。もし、データを全て受け取って表示まで完了していないと操作ができないとフリーズし素数判定関数を使って簡単なゲームを作った話②
ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。https://qiita.com/hitoki_univ/items/8e3feab0add17befc700
前回の内容については、こちらからどうぞ。
https://qiita.com/hitoki_univ/items/e1b8ec9e6c7c39d5e761
# 今回やること
前回は、これから作成するゲームの概要などについて説明しました。
今回は、そのタイトル画面を作成していきます。# ゲームのタイトル画面
タイトル画面では、プレイヤー人数を選択し、人数に対応したプレイヤー名入力画面に遷移する機能を実装します
1. プレイヤー人数を選択し、人数に対応したプレイヤー名入力画面に遷移する機能
2. 過去のランキングを表示する画面に遷移する機能具体的なコードは以下の通りです。
### HTML
“` html
JavaScript 第10回 ウィンドウをドラッグ＆ドロップで移動（マウス、タッチ両対応）# はじめに
今回は、第９回で作成したモードレスウィンドウをドラッグ＆ドロップで移動できるようにしたものをタッチにも対応するようにします。
モードレスウィンドウの作成については、[第９回の記事](https://qiita.com/Mount/items/d9dccef62ed22145452c)を参照ください。
第９回の記事でコメントをいただいて、**mouse・・** の代わりに、**pointer・・** が使えるということを伺いましたので、それに対応します。
また、関数名もコメントいただきましたので修正します。第９回に記載していた「**もう少し改善の余地があることがわかりましたので、そのあたりは今後また記事にしたい** と思います。」については、引き続き保留とし、今回はマウス、タッチ両対応にフォーカスします。
申し訳ありません。
ドラッグ＆ドロップの動作については、すでに第９回の記事に記載していますので、本記事はほぼ書き換えたソースだけの紹介です。申し訳ありません。
タッチ対応のPCやタブレットを持ち合わせていないため、タッチ対応と記載しながら、タッチの動作については素数判定関数を使って簡単なゲームを作った話①
ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認くださいhttps://qiita.com/hitoki_univ/items/8e3feab0add17befc700
# ゲームの概要
このゲームは、複数人による対戦形式を想定して作成しています。
動作の概要は以下の通りです。①プレイヤーの人数を選択
②プレイヤーの名称を入力
③順番に素数を入力していく。この時、前回より大きな素数を入力する必要がある。制限時間内に前の人より大きな素数を見つけられないとゲームオーバー今回は、生徒たちにより楽しみながらプレイしてもらえるように、ランキング機能も作成します。
ちなみに、前の人より大きな素数を入力していく、という遊び方は、学習支援事業で会った生徒さんの発案です。# 次の投稿について
次回(第2回)は、このゲームのタイトル画面を作成します。
~~投稿次第、リンクを追加するので、ぜひご覧ください~~
以下のリンク先から、是非ご覧ください。https://qiita.com/hitoki_univ/i
素数判定関数を使って簡単なゲームを作った話(目次用)
こんにちは。
私は、週に何度か某市の学習支援事業の指導員として活動しています。そこでは中学生に指導を行っているのですが、その休憩時間に、生徒たちに多少なり頭を使いながら遊んでもらえるものを作れないかと思い、今回のゲームの開発に至りました。
以前の大学の授業で、JavaScriptで素数判定を行うプログラムを作成していたので、今回はそれを活用して、Webアプリケーションの形式でゲームを作っています。# この投稿の構成
一度にすべての内容を書くと長くなりそうなので、何回かに分けて投稿します。このページは、その目次のような形で使っていければと思います。# 第1回
1回目は、作成したゲームの概要等について簡単に説明しています。
詳しくは、↓のリンク先をご参照ください。https://qiita.com/hitoki_univ/items/e1b8ec9e6c7c39d5e761
# 第2回
2回目は、ゲームのタイトル画面を作成します。
詳しくは、↓のリンク先をご参照ください。https://qiita.com/hitoki_univ/items/589378579724379
Brainfuckを簡単に書けるサイトを作った
[Brainfuck Compiler](https://shinoshike005.github.io/brainfuck/compiler/)
打つコード量は増えますが、圧倒的に見やすくなります
# サンプル
“`text:足し算
def x 1
def y 2goto x
change = 4goto y
change = 7[
goto x
change + 1goto y
change – 1
]
“`
↓
“`brainfuck:足し算
>++++>+++++++[<+>-]
# メモリ1に4+7で11が入る
“`
“`text:かけ算def res 1
def a 2
def b 3
def copy1 4
def copy2 5
def copy3 6def zero 48
goto a
input 0
change – zero
goto b
input 0
change – zero# copy1へaを移動する
goto a
[
goto copy1
change + 1
goto a
change – 1
]g
【JavaScript】ぼく「import文の{}って？」 #ぼくの大発見日記
# はじめに
ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。
最近Vueを勉強し始めました。
– 公式チュートリアル(https://vuejs.org/tutorial/)
– 本(『Vue 3 フロントエンド開発の教科書』(https://gihyo.jp/book/2022/978-4-297-13072-5))で基礎的な部分の理解が進んできたので、
Vueの公式サイト(https://vuejs.org/)にある実装例集(https://vuejs.org/examples/)を見ながら写経しながら勉強を続けております。で、公式サイトの実装例集を見てたらふと思ったことがありました。
# 「import文の{}って何？」
実装例集内の[Grid with Sort and Filter](https://vuejs.org/examples/#grid)のApp.vueのうちのこの部分↓
“`vue:App.vue