- 0.1. Chart.js を使用したグラフの表示確認手順
- 0.2. jQueryのメソッド
- 0.3. JSF**k講座 2限目【最初の文字たち】
- 0.4. Cannot read properties of null (reading ‘getRange’)の対処法
- 0.5. object.map() is not a functionの解決策
- 0.6. GASとGoogleフォームを使ってクイズラリー
- 0.7. [JS] なんとなく分かった気になっているJSをはっきりしておく ~ 数字とMathオブジェクト ~
- 0.8. ページ分析ヒートマップ：ブロックや要素上に表示されるデータについて
- 0.9. Promise配列処理の備忘録
- 0.10. 入力した文字列の中に禁止ワードが含まれているかチェック
- 0.11. イベント操作で画像を表示するようにする。
- 0.12. JavaScriptの論理演算子の挙動
- 0.13. varとletとconstの違いについて
- 0.14. JavaScriptの配列をランダムに並べ替える
- 0.15. 学習記録 react
- 0.16. [JavaScript] オブジェクトリテラル、配列リテラルについて
- 0.17. TypeScript初心者必見！ゼロから学べる実践入門
- 0.18. JSF**k講座 1限目【基礎講座】
- 0.19. CORSって何？
- 0.20. expressとmongoDBを使って簡単なコミュニティーを作ろう！
- 1. expressとmongoDBを使って簡単なコミュニティーを作ろう
- 2. アプリの紹介
- 3. 目次
- 4. 事前設定
Chart.js を使用したグラフの表示確認手順
以下に手順を説明します。
#### 手順
1. **HTMLファイルの作成**
– まず、上記のサンプルコードをテキストエディタにコピーし、ファイルとして保存します。ファイル名は `test.html` など、任意の名前で構いません。2. **ファイルを保存**
– テキストエディタでファイルを保存します。例えば、デスクトップや任意のフォルダに保存します。3. **ブラウザでファイルを開く**
– 保存したファイルをブラウザで開きます。以下の手順で行えます。
1. ファイルが保存されたフォルダを開きます。
2. `test.html` ファイルを右クリックし、`開く` もしくは `ブラウザで開く` を選択します。
3. または、ブラウザを開き、アドレスバーに `file:///` を入力してファイルパスを指定する方法もあります。4. **表示の確認**
– ブラウザに表示されていることを確認します。これで、Chart.jsを使ったグラフがブラウザに表示されるか確認できます。
jQueryのメソッド
jQueryを勉強中（ど素人）なのですが、復習も兼ねて学んだメソッドを下記にメモとして記述していこうと思います。
随時更新していきます。# jQueryとは
* [ **jQuery** ]とは、効果やアニメーションを簡単に実装できるJavaScriptライブラリ
* jQueryを使うとWEBページにアニメーションや効果を簡単につけることができる
# css
CSSプロパティを変化させる# on
イベント発生時に実行する関数を割り当てる# fadeOut
要素を徐々に薄くして消していく (=フェードアウトさせる)# fadeIn
要素を徐々に表示していく (=フェードインさせる)# text
指定した要素の文字列を取得したり、書き換えたりする# slideTo
JSF**k講座 2限目【最初の文字たち】
# 初めに
[1限目](https://qiita.com/shimgo2008/private/b7421974a1aab8131b43)の復習をしっかりとしておきましょう
1限ではJSの型の変換などの基礎的な話をしています
# 第二回の内容
今回はJSFで文字を書く仕組みと、
`false`, `true`, `undefined`, `NaN`, `Infinity`,から取れる文字と`0~9`の数字たちを得る方法を教えていきます>説明の都合上被る文字がありますが
[チートシート(作成中)]()に最適化した文字の出力方法を記入していくのでそちらをご参考ください>1限でも言いましたがfuckと何度も言うのもアレなのでJSFでいきます
【定期】JavaServer Facesではありません# まずは`helloworld`と言いたいところですが….
肩慣らしにhelloworldを書こうと思っている方もいるかと思いますが
f**k(伏せ字なし)を書く方が数十倍楽です下にhelloworldのコードを置いておくので開く人は心してみてください
>私の技術力が未熟
Cannot read properties of null (reading ‘getRange’)の対処法
GASを使用して、arrayをスプレッドシート内に書き込む記述をした際、タイトルで表示されているエラーが表示された。
初歩的なエラーであるが、スプレッドシートの名前がない場合に生じるらしい。
その名前やIDを再度確認してほしい。
object.map() is not a functionの解決策
jsonファイルをスプレッドシートにいれる際、必要データのみを取り出すためにmap()を使用した。
その際に、object.map() is not a funcitonというエラーに悩まされたが解決したので方法をメモしておく。
mapはarray(配列)でなければ操作をできないが、jsonのデータはobjectらしい。
その違いは、{}で囲まれているか、[]で囲まれているかである。
つまり、array型にすれば解決するのである。
したがって、元の記述を以下のようにしていたら
“`
weatear.map(d => {
add_values.push([d.firstDay, d.lastDay, d.temp]);
“`以下のように変えればよいのである。
“`
Object.values(weather).map(d => {
add_values.push([d.firstDay,d.lastDay,d.temp]);
});
“`要するに、
“`
Object.values(“ここにオブジェクトデータを入れ
GASとGoogleフォームを使ってクイズラリー
今度、彼女と金沢へ旅行に行くのですが、それのためにGoogle Siteを使用して、観光地や日程をまとめたサイトを作成しました。
それだけではわざわざサイト作成した意味がないとGoogleフォームを使用してクイズラリーを作成しました。
なぜ、Googleフォームを使用したのかというとそのときはプログラミング不要でクイズラリーを作成できると思ったからです。しかしながら、Googleフォームではその回答に応じて返信を変化させることができないので、
GASというGoogleのサービスをスクリプトで操作できるサービスを使用して、
Googleフォームでの回答に応じて正解であれば、次の問題のフォームを送信し、不正解であれば不正解であるという通知を送る。
そして、ヒントと送信されれば、ヒントを送信するという仕組みを操作しました。以下にはそのGAS内のスクリプトを記述します。
“`
function sendemail(e) {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = Spread
[JS] なんとなく分かった気になっているJSをはっきりしておく ~ 数字とMathオブジェクト ~
# 数字に関して
簡単な例題を一つ解いてみよ！
“`js
var a = 0.1;
var b = 0.2;
a + b = ? //
“`
え、めっちゃ簡単！そんなの0.3ですよ！
しかし！
答えをコンピューターに聞いてみたら、、？“`js
a + b = 0.30000000000000004
“`
あれ？なんかコンピューターさん計算おかしくない。。？この様にJSを含めいくつかのプログラミング言語は小数をちゃんと計算できないよくわからない仕様となっております。
なぜ、コンピューターはこんな簡単な計算を間違えてしまうのでしょうか？
その理由は、コンピューターは小数を2進法に変換して計算していて2進法で変換すると上記の様な小数は無限の小数の値になります。それで、貯蔵できる容量があらかじめ決まっているコンピューターはこの無限値を貯蔵しきれずに端っこを切り捨てて有限な小数にしてしまいます。
これにより計算に誤差が発生してしまうのです！
この仕様のせいで昔、どこかの国ではミサイルを迎撃するためのプログラムで小数の計算誤差により迎撃に失敗してミサイルに打たれたとか。。
ページ分析ヒートマップ：ブロックや要素上に表示されるデータについて
デジタル時代において、ユーザー行動の分析はウェブサイトのUIの最適化、ユーザー体験の向上のために非常に重要です。ウェブサイトの問題点を客観的に洞察するにも、直感的に把握するにも、ヒートマップを活用する必要があります。ヒートマップはデータの可視化ツールとして、色の濃淡でユーザーのウェブページ上のインタラクションを表示し、複雑なデータを直感的で理解しやすいものにします。
クリックヒートマップやアテンションヒートマップとは異なり、Ptengineは新しいページ分析ヒートマップをリリースしました。この記事では、バージョンアップされたページ分析ヒートマップの概念と設定のプロセスを詳細に紹介し、コア技術と原理を解説することで、ユーザーがより良い操作体験を得られるようにサポートします。
## ページ分析ヒートマップとは
| 旧バージョンのページ分析ヒートマップ | 新バージョンのページ分析ヒートマップ |
|:———–|:————|
| `
* `promises`配列ですべての`Promise`が`resolve`
`then`に処理が移譲される。
コールバック関数の引数はもとの`promises`と同じ順番の各`Promise`で`resolve`された値の配列。
* `promises`配列のいずれかもしくはすべての`Promise`が`reject`
`catch`に処理が移譲される。
コールバック関数の引数は最初に`reject`された`Promise`のエラー。## `Promise.allSettled( promises )`
常に`then`に処理が移譲される。
コールバック関数の引数はもとの`promises`配列と同じ順番の各`Promise`結果の配列。
* `resolve`が返される要素の場合の処理結
入力した文字列の中に禁止ワードが含まれているかチェック
“`javascript
var inputA = lines[0];
var NGWord = [“NGWord1”, “NGWord2”, “NGWord3”];var contains = NGWord.some(char => inputA.includes(char));
“`## NGWord.some(char => inputA.includes(char))について
### NGWord.some メソッド
some メソッドは、配列メソッドの一つで、配列内の**少なくとも一つの要素が与えられた条件を満たすかどうか**をテストする。**満たす要素が見つかるとすぐに true** を返し、**全ての要素が条件を満たさない場合は false** を返す。### includes メソッド
includes メソッドは、文字列が**指定された文字列を含んでいるか**どうかをチェックする。**含まれていれば true** を、**含まれていなければ false** を返す。### 処理の流れ
dame 配列内の最初の要素 “I” が in
イベント操作で画像を表示するようにする。
お疲れ様です。
今日は自分で考えたもので、いずれかのラジオボタンを選択すると画像が表示されるというものを実装してみたいと思い、あれやこれやとコードを書いています。
ラジオボタンを div で囲わずにcssで justify-content: space-between を書いたらボタンが離れてしまいました…
各ボタンを div で囲って justify-content: space-between を指定するとちゃんとボタンがついてきてくれました。
縦並びだとそんな必要はないかなと思いましたが、均等に間を
JavaScriptの論理演算子の挙動
# 論理演算子(&&,||)について
Reactを学ぶ上でJavaScriptの論理演算子(&&,||)について、いまいち挙動を理解できていなかったので覚えたことをアウトプットします。
## 論理演算子(&&,||)の挙動
`&&`の左辺がtrueの場合、右辺を実行します。
“`JavaScript:
1 + 1 === 2 && console.log(“正解”); //console.logが実行される
“``&&`の左辺がfalseの場合、右辺は実行されません。
“`JavaScript:
1 + 1 === 20 && console.log(“正解”); //console.logが実行されない
“``||`は左辺がtrueの場合、左辺が実行されます。このような処理を選択的代入と呼ぶそうです。
“`JavaScript:
const hoge = fuga || “default”; //左辺がtrueならhogeにはfugaが、falseなら”default”が代入される
“`### 挙動の詳細
“`JavaScript:
true
varとletとconstの違いについて
# JavaScriptの変数宣言について
はじめまして。見習いエンジニアです。学んだことのアウトプットとしてたまに記事を投稿したいと思います。
JavaScriptには変数宣言で利用できるキーワードが3つあります。
`var`と`let`と`const`の3つです。この違いを見ていきましょう。## var let constの違い
| | 再宣言 | 再代入 | スコープ | ホイスティング |
| :——-: | :—-: | :—-: | :——: | :————: |
| **var** | ○ | ○ | 関数 | undefined |
| **let** | × | ○ | ブロック | エラー |
| **const** | × | × | ブロック | エラー |### 再宣言とは
その名の通り、同じ変数名を再度宣言してしまうことです。
`var`は再宣言してしまうと、最初に宣言した変数を上書きしてしまいます。
`let`と`const`は再宣言不可であり、間違えて再宣言してしまった場合もエラーで知らせてくれます
JavaScriptの配列をランダムに並べ替える
## はじめに
[前回の記事](https://qiita.com/ameRese/items/cdc73470fd065e475298 “JavaScriptでランダムな値を扱う”)で配列をランダムに並べ替えるコードを紹介しましたが、そのやり方では大きな偏りが発生することをコメントで教えていただきました。その際に、偏りの検証や発生原因・対策について書かれた以下の記事を紹介いただいたので、自分でも試してみた結果について記事に残します。
https://cpoint-lab.co.jp/article/202211/23527/
:::note warn
以下のコードは文脈に合わせたり自分仕様にカスタマイズしているため、
元記事のものとは若干異なる点があることをご了承ください。
:::## 今回使用するメソッドや構文
**`Object.entries(obj)` 静的メソッド**
オブジェクトを[キー, 値]形式の2次元配列に変換した結果を返します。
今回は、オブジェクトをその値に応じて並べ替えるために使用しました。**`Object.fromEntries(list)
学習記録 react
### ドラッグ＆ドロップのテスト
掴んで離すだけ。このままで要素を増やしても、状態管理が効いてないので元の場所に戻ってしまう。https://gyazo.com/8537bce2d9a14305ed001056d4046682
### 複数ドラッグ＆ドロップ
useStateを利用した状態管理による、複数の要素のドラッグ＆ドロップhttps://gyazo.com/d380d9ad131c3754e24fabf68646dd52
[JavaScript] オブジェクトリテラル、配列リテラルについて
# 目次
# オブジェクトリテラル
# 配列リテラル
# 参考リンク
– [オブジェクトリテラル (object literal)](https://typescriptbook.jp/reference/values-types-variables/object/object-literal)
– [配列リテラル (array literal)](https://typescriptbook.jp/reference/values-types-variables/array/array-literal)
TypeScript初心者必見！ゼロから学べる実践入門
はじめに
—
TypeScriptはJavaScriptに型付けを加えた強力な言語で、より堅牢で保守性の高いコードを書くのに役立ちます。TypeScriptとは？
—
Microsoftが開発したJavaScriptのスーパーセットで、静的型付けを提供します。
コンパイル時に型のエラーを検出しやすくなり、コードの品質向上とバグの発見が容易になります。関数と型
—
関数の引数や戻り値に型を指定することもできます。これにより、関数の使い方がより明確になり、エラーの予防になります。
“`
function greet(name: string): string {
return `Hello, ${name}!`;
}
“`
クラスとインターフェース
—
TypeScriptでは、オブジェクト指向プログラミングのためのクラスやインターフェースもサポートしています。
“` .クラスの例
class Person {
name: string;
age: number;constructor(name: string, age:
JSF**k講座 1限目【基礎講座】
# 第一回の内容
今回はJSFuckには触れず、基礎知識です
これが理解できないとお話にならないんできちんと理解しましょう# そもそもJSFuckってなんぞや？
JSFuckとは`[` `]` `(` `)` `+` `!`の6種類の文字だけを使ってjsをかくことです一言で言うなら
### 縛りプレイ
ですね
語源はbrain fuckから来てるっぽいです>あんまりfuckっていうのもアレなんで以降JSFと書きます
もちろんJava Server Facesではありません# JSの型の変換について
“`Num+Str.js
10 + ”
//’10’
“`
`10`はNumber, `””`が空のStringです。つまりやっていることは
`Number + String`
です。
この場合Stringで出力されます内部的には`10`と`”`(空String)の二つを結合しているため、Stringで出力される、と言うわけです。
“`+(-)Str.js
+’10’
//10
“`
`+`は単項演算子, `’10’`が10のStr
CORSって何？
CORS(Cross-Origin-Resource-Sharing)とは、異なるオリジンとのデータ交換を可能にするもの。
## オリジンって？
– URLのホスト
– プロトコル
– ポート番号上記3つで構成されている識別子のこと
上記3つがすべて同一の場合、同一オリジン。
基本的に、同一オリジンでしかデータ交換はできない。
## 異なるオリジン間のデータ交換
クライアント側はreact、サーバ側はexpressで作成してみる。
“` javascript
import { useEffect, useState } from “react”;
import axios from “axios”;function App() {
const [message, setMessage] = useState(“”);useEffect(() => {
axios.get(“http://localhost:3000/api/message”).then((res) => {
setMessage(res.data);
});
expressとmongoDBを使って簡単なコミュニティーを作ろう！
expressとmongoDBを使って簡単なコミュニティーを作ろう
アプリの紹介
このアプリはコメントを残すアプリです
コメントを読んだり、作成したり、編集したり、削除することができます！それだけです(笑)
目次
- 事前設定
- データベースのスキーマを作ろう
- CRUDのR
- CRUDのC
- CRUDのU
- CRUDのD
- 動作確認
事前設定
このアプリではexpress, mongoose, ejsを使うため、node環境が整っていることと、mongodbがインストールされていることを前提にします。
まず、npmでexpress, mongoose, ejs,method-overrideをインストールします。“`
npm i express mongoose ejs method-override
“`
そして、require
