- 1. はじめてのJavaScript:初心者の学び場（配列操作編）
- 2. GWTはなぜ最新のフロントを作れるのか？
- 3. plunkerで liquidfun
- 4. box2djsの作法 その11
- 5. box2djsの作法 その10
- 6. JavaScriptファイルにcssをimportしようとしたらエラー吐かれた件
- 7. はじめてのJavaScript：初心者の学び場（スプレッド構文編）
- 8. AWSが公開したJavaScriptランタイムLLRTを試してみる
- 9. インデントは半角スペースの方がオススメ
- 10. plunkerでtateno その2
- 11. box2djsの作法 その9
- 12. plunkerでtateno
- 13. 【JavaScript】Switch文を使うシーン
- 14. 【React】App.jsの構成
- 15. 【React】propsとは
- 16. 【React】コンポーネントとは
- 17. 【React】stateとは
- 18. 【React】handleClick メソッドとonClickメソッドの違い
- 19. 【React】handleClickメソッドとは
- 20. 【React】onClickイベントとは
はじめてのJavaScript:初心者の学び場（配列操作編）
これはJavaScriptを学んでいるうえでのメモ書きです。
間違っている個所などご指摘の方お願いします。
# 配列操作
## map() メソッド
map() メソッドは、元の配列の各要素に対して指定されたコールバック関数を実行し、その戻り値を新しい配列に格納します。元の配列の要素数と同じ長さの新しい配列が作成
“`diff_ruby:
const newArray = array.map((element, index, array) => {
// 各要素に対する処理を記述し、その結果を返す
});
“`
## コールバック関数の引数
map() メソッドに渡されるコールバック関数は、3つの引数を取ります。
1\.要素の値(element)
現在処理されている配列の要素の値です。この値を変更しても、元の配列に影響を与えることはありません。2\.インデックス (index)
現在処理されている配列の要素のインデックスです。配列内の要素の位置を示します。3\.元の配列 (array)
map() メソッドが呼び出された元の配列自体です。この引数を使用して、元の配列全体
GWTはなぜ最新のフロントを作れるのか？
# GWTはJavaをjavascriptに変換します。
その為、最新の状態でプログラムを更新する事が可能です。# GWTのJava→javascript変換は、割と凄い
・最適化（サイズ縮小）
・難読化（セキュリティー向上）
・互換性（各ブラウザ別変換）
plunkerで liquidfun
# 概要
plunkerで liquidfunやってみた。# 写真
# サンプルコード
“`
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var w = canvas.width;
var h = canvas.height;
var timeStep = 1.0 / 30.0;
var velocityIterations = 8;
var positionIterations = 3;
var drawScale = 14;
var world = new b2World(new b2Vec2(0, 10));
ctx.font = “normal 14px arial”;
ctx.textBaseline =
box2djsの作法 その11
# 概要
box2djsの作法、調べてみた。
エレベーター、やってみた。# 写真
# サンプルコード
“`
var b2Vec2 = Box2D.Common.Math.b2Vec2,
b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2World = Box2D.Dynamics.b2World,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
b2CircleShape = Box2D.Collision.Shapes.b2CircleSha
box2djsの作法 その10
# 概要
box2djsの作法、調べてみた。
細胞の様な物、やってみた。# 写真
# サンプルコード
“`
var b2Vec2 = Box2D.Common.Math.b2Vec2,
b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2Fixture = Box2D.Dynamics.b2Fixture,
b2World = Box2D.Dynamics.b2World,
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
var NUM = 6;
var ball = [];
v
JavaScriptファイルにcssをimportしようとしたらエラー吐かれた件
# はじめに
とあるudemy(下記に記載)を進めていたところ、エラーが出たので共有します!
TODOアプリをjavascript, html, cssにて作成中です。https://www.udemy.com/course/react_stepup/
# 問題
JavaScriptファイル内でcssファイルをimportしようとしたらエラーが出た。
“`javascript:index.js
/* エラーコード
Failed to load module script: Expected a JavaScript module script
but the server responded with a MIME type of “text/css”.
Strict MIME type checking is enforced for module scripts per HTML spec.
*///エラーが出た箇所
import “./style.css”;
“`
# なぜエラーがでた???
– **サーバーを立てない**とimport文が使えないらしい
# 解
はじめてのJavaScript：初心者の学び場（スプレッド構文編）
これは自分がつまずかないように残すメモです。
今回はスプレッド構文について学びました。
# スプレッド構文とは
配列やオブジェクトなどの展開やコピーを行うための構文です。
JavaScriptで複数の値をまとめて扱う場面で非常に便利です。# 配列におけるスプレッド構文
スプレッド構文を使用して、既存の配列の要素を展開して新しい配列を作成“`js
const array1 = [1, 2, 3];
const array2 = […array1, 4, 5, 6];console.log(array2); // [1, 2, 3, 4, 5, 6]
“`この例では、array1 の要素が展開されて、array2 に結合されています
# 配列のコピー
スプレッド構文を使用して、配列のコピーを作成することができます。
“`js
const originalArray = [1, 2, 3];
const copiedArray = […originalArray];console.log(copiedArray); // [1, 2, 3]
この例では、
AWSが公開したJavaScriptランタイムLLRTを試してみる
# What’s？
AWSからJavaScriptのランタイムである「LLRT」が発表されたので、軽く試してみました。
https://www.publickey1.jp/blog/24/awsjavascriptllrtlow_latency_runtimeaws_lambda.html
# LLRT（Low Latency Runtime）
LLRT（Low Latency Runtime）のGitHubリポジトリーはこちら。
https://github.com/awslabs/llrt
LLRTはサーバーレス向けに設計されたJavaScriptランタイムとされていて、AWS Lambda上の他のJavaScriptランタイムと比べて10倍以上の高速な起動と最大2倍のコスト削減を実現するとされています。
> LLRT (Low Latency Runtime) is a lightweight JavaScript runtime designed to address the growing demand for fast and efficient Server
インデントは半角スペースの方がオススメ
# ソースコードのインデントは、タブよりも半角スペースの方がオススメ
# 理由
環境依存で見え方が変わってくるため。
（1タブをスペースいくつで表示するかによって、見え方が変わってしまう）例：eclipseとかで「半角スペース何文字をタブに変換」とかの設定があり、各々の環境によって差異が生まれてしまう
以上より、タブは使わない方がいい。
**大体は半角スペース4文字を使うハズ！！**
（ただし、**既存のソースコードに合わせる** のが一般的なため、既存のコードを **要確認** だけど……）
# 参考サイト
https://s8a.jp/tab-space-or-space
plunkerでtateno その2
# 概要
plunkerでtatenoやってみた。
走る人、やってみた。# 写真
# サンプルコード
“`
game = new Game();
game.fps(10);
game.start();
var foo = new Sprite(85, 102, “lib/hito.png”, 6, 5);
foo.x(20);
foo.y(130);
foo.frame(10);
foo.enterframe = function() {
foo.frame(foo.frame() + 1);
if (foo.frame() > 29)
foo.frame(0);
foo.x(foo.x() + 1);
};“`
# 成果物
https://embed.plnkr.co/plunk/xsHD7mT
box2djsの作法 その9
# 概要
box2djsの作法、調べてみた。
倒立振子、やってみた。# 写真
# サンプルコード
“`
function KalmanFilter(rate, pnoise, mnoise) {
this.F = math.matrix([[1, rate], [0, 1]]);
this.G = math.matrix([[math.square(rate) / 2], [rate]]);
this.H = math.matrix([1, 0]);
this.Q = math.multiply(math.multiply(this.G, math.transpose(this.G)), pnoise);
this.R = mnoise;
this.P = this.Q;
}
KalmanFilter.pro
plunkerでtateno
# 概要
plunkerでtatenoやってみた。
モグラ叩き、やってみた。# 参考にしたページ
http://tatenosystem.com/product_jquery_ie_game_engine
# 写真
# サンプルコード
“`
var t1 = “lib/mogu_tan1.png”;
var t2 = “lib/mogu_tan2.png”;
var t3 = “lib/mogu_tan3.png”;window.onload = function() {
game = new Game();
game.fps(30);
game.preload(t1);
game.preload(t2);
game.preload(t3);
game.start();
var aLabel = new Lab
【JavaScript】Switch文を使うシーン
## はじめに
[こちらの記事](https://qiita.com/Yuzaburo/items/d5fb2ed8ef0f9769df07)にもある通り、現在Vanilla JSで野球クイズアプリを開発しています。開発を進めている中で、問題の難易度ごとに配点を変えてみたいなと思ったので、その過程をメモします。
## やりたいこと
* それぞれの問題に難易度を追加したい
* 難易度ごとに配点を変えたい## 解決法
* まずはクイズデータの配列のそれぞれの要素に、「difficulty」プロパティを追加
* 1（最も簡単）〜5（最も難しい）の範囲で難易度を設定することにします“`javascript: quizdata.js
const quizData = [
{
question: “日本はWBCで何回優勝している？”,
choices: [“1回”, “2回”, “3回”, “4回”],
answer: “3回”,
explanation: “日本は2006年、2009年、2023年にWBCで優勝しています。”
【React】App.jsの構成
# App.jsの構成
`App.js`は、多くのReactプロジェクトで使用されるエントリーポイントの1つです。通常、`App.js`はReactアプリケーションの最上位のコンポーネントとして機能し、その中に他のコンポーネントを含むことができます。`App.js`の構成はプロジェクトによって異なりますが、一般的には次のような構成になることがあります：
1\. **必要なモジュールのインポート**
– `react`や`react-dom`などのReact関連のモジュールをインポートします。
“`jsx
import React from ‘react’;
“`2\. **コンポーネントの定義**
– `App`コンポーネントを定義します。これは通常、`class`または`function`として定義されます。
“`jsx
function App() {
return ({/* 他のコンポーネントを含める */});
}
“`3\. **他のコンポーネントのインポートと配置“
– `App`コン
【React】propsとは
# propsとは
`props`は、Reactコンポーネントに渡されるデータの受け渡しメカニズムです。`props`を使用することで、親コンポーネントから子コンポーネントにデータを渡すことができます。`props`は読み取り専用であり、子コンポーネント内で変更することはできません。`props`はJavaScriptのオブジェクトとしてコンポーネントに渡され、コンポーネント内の`this.props`を通じてアクセスされます。`props`は、コンポーネントのインスタンス化時に指定され、そのコンポーネントが描画される際にそのまま使用されます。
# 使用方法
以下は、propsを使用して親コンポーネントから子コンポーネントにデータを渡す例です：
“`jsx
import React from ‘react’;function ChildComponent(props) {
return{props.message};
}function ParentComponent() {
return
【React】コンポーネントとは
# コンポーネントとは
コンポーネントは、UIを構築するための再利用可能なビルディングブロックです。コンポーネントは、UIの一部を表し、独自の状態を管理し、必要に応じてレンダリングされます。Reactでは、コンポーネントを使用してUIを階層的に構築し、複雑なUIをより小さな部分に分割して管理することができます。Reactのコンポーネントには、以下の2つの主要なタイプがあります：
1\. **クラスコンポーネント**
– クラスコンポーネントは、React.Componentクラスを継承して作成されます。
– `render()` メソッド内でUIを定義し、`this.state` を使用して状態を管理します。
– ライフサイクルメソッド（例：`componentDidMount`、`componentDidUpdate`）を使用して、コンポーネントのライフサイクルイベントに応答します。
“`jsx
import React, { Component } from ‘react’;class MyComponent extends Component {
render()
【React】stateとは
# stateとは
`state`は、Reactコンポーネント内で管理される内部の状態を表します。`state`は、コンポーネントの動的なデータを保持し、そのデータの変更に応じてUIが更新されるようにします。Reactの`state`は、コンポーネントが自身の状態を管理し、状態に基づいてUIを変更する際に非常に役立ちます。`state`は、Reactのクラスコンポーネントや、React Hooksを使用して関数コンポーネントで管理されることができます。`state`は以下の特徴を持ちます：
1\. **コンポーネント固有の状態** : `state`は、それが定義されたコンポーネント内でのみアクセス可能です。他のコンポーネントからは直接アクセスできません。
2\. **可変性** : `state`は変更可能なデータです。コンポーネント内の`state`が変更されると、Reactは自動的にUIを再レンダリングして変更を反映します。
3\. **this.setState()メソッド** : `state`を更新するためには、`this.setState()` メソッドを使用し
【React】handleClick メソッドとonClickメソッドの違い
# handleClickメソッドとonClickメソッドの違い
`handleClick` メソッドと `onClick` メソッドは以下の違いがあります。1\. **handleClick メソッド**
– `handleClick` メソッドは、Reactコンポーネント内に定義されるJavaScript関数です。
– 通常、UIイベント（例：クリック）が発生したときに呼び出されます。
– これは単なるJavaScript関数であり、Reactに特有の機能ではありません。2\. **onClick メソッド**
– `onClick` メソッドは、Reactの要素（例：ボタン）に設定されるプロパティ（属性）です。
– これは、要素がクリックされたときに実行される関数を指定するための特別な属性です。
– `onClick` メソッドには通常、`handleClick` メソッドや他の関数が渡されます。例えば、以下のコードでは、onClick メソッドに handleClick メソッドが渡されています。
“`jsx
import React, { Component }
【React】handleClickメソッドとは
# handleClickメソッドとは
Reactでよく見られる命名規則の1つが、イベントハンドラー関数に `handle` という接頭辞を付けることです。例えば、ボタンがクリックされたときの処理を行う関数を `handleClick` と命名することがあります。`handleClick` メソッドは、通常、クリックイベントなどのUIイベントが発生したときに呼び出される関数です。これはReactコンポーネント内に定義され、そのコンポーネントが持つ状態を更新したり、他のコンポーネントとのやり取りを行ったりするために使用されます。
例えば、以下のようなコードでは、ボタンがクリックされたときに `handleClick` メソッドが呼び出されます。
“`jsx
import React, { Component } from ‘react’;class MyComponent extends Component {
handleClick() {
console.log(‘Button clicked’);
}render() {
return (
【React】onClickイベントとは
# onClickイベントとは
onClickイベントは、要素がクリックされたときに実行されるイベントハンドラーを定義するための特別な属性です。onClickイベントは、ユーザーがマウスやタッチデバイスで要素をクリックしたときに発生します。onClickイベントを使用すると、ユーザーの操作に応じて特定の処理を実行することができます。onClickイベントは、Reactコンポーネントの要素に直接適用され、以下のように使用されます：
“`jsx
“`
上記の例では、ボタンがクリックされたときに `handleClick` という関数が呼び出されるように設定されています。onClick属性には、クリック時に呼び出される関数を指定するためのコールバック関数が渡されます。# 使用方法
コンポーネント内でonClickイベントを定義する方法はいくつかあります。以下は、クラスコンポーネントと関数コンポーネントのそれぞれでのonClickイベントの定義方法の例です：クラスコンポーネントの場合
