- 1. expressとmongoDBを使って簡単なコミュニティーを作ろう
- 2. アプリの紹介
- 3. 目次
- 4. 事前設定
- 4.1. JavaScript初心者必見！ゼロから学べる実践入門
- 4.2. JS/TSでRGBをPIXI JSのColorの数値型に変換するには?
- 4.3. デバッグ時に迂闊にalert()文を入れたための失敗例について
- 4.4. 【JavaScript】ドット記法とブラケット記法について
- 4.5. CodeSandboxのコンソール表記（HTML）のやり方
- 4.6. JavaScript + React + Viteで.envファイルを参照する方法
- 4.7. JavaScriptで簡易チャットアプリを作成して学んだこと
- 4.8. 【JavaScript】宝くじ (paizaランク C 相当) やってみたのと解説
- 4.9. 今日の発見 input要素にv-modelをしたときにstringになる
入力した文字列の中に禁止ワードが含まれているかチェック
“`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でランダムな値を扱う”)で配列をランダムに並べ替えるコードを紹介しましたが、そのやり方では大きな偏りが発生することをコメントで教えていただきました。その際に、偏りの検証や発生原因・対策について書かれた以下の記事を紹介いただいたので、自分でも試してみた結果について記事に残します。
【JavaScript】arr.sort(() => Math.random() – 0.5);がダメな理由の説明と適切なシャッフルの仕方
:::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
JavaScript初心者必見！ゼロから学べる実践入門
はじめに
—
JavaScriptは現代のウェブ開発において不可欠なスキルです。これからプログラミングを始めようとしている方や、基本からしっかり学びたいという方のために、本記事ではゼロからJavaScriptを学ぶための実践的なガイドを提供します。JavaScriptとは？
—
JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザで直接動作し、インタラクティブなユーザー体験を提供します。JavaScriptの基本構文
—
“`1. 変数とデータ型
let message = “Hello, World!”; // 文字列型
let number = 42; // 数値型
let isActive = true; // 真偽値型
“`
“` 2.演算子
let a = 5;
let b = 10;let sum = a + b; // 足し算
let difference = a – b; // 引き算
let product = a * b; // 掛け算
let q
JS/TSでRGBをPIXI JSのColorの数値型に変換するには?
# JS/TSでRGBをPIXI JSのColorの数値型に変換するには?
## 簡潔な方法(追記)
### 解説
これは、Rの値とGの値とBの値を二進数にして考えます。
例えば今回は、R=255,G=128,B=64として考えると、
Rを二進数にすると、’11111111’になります。
Gを二進数にすると、’10000000’になります。
Bを二進数にすると、’00010000’になります。
ここから、RGBの値を’<<(左シフト)'を使ってHEXの形にしていきます。 では、Rの二進数の値を左に16回動かします。 すると、結果は'111111110000000000000000'になります。 そして、Gの二進数の値を左に8回動かします。 すると、結果は'1000000000000000'になります。 そして、Bの二進数の値はそのままにします。 これらの値を'|(OR)'を使って結合していきます。 ``` R:111111110000000000000000 G: 1000000000000000 B: 00010000 -----
デバッグ時に迂闊にalert()文を入れたための失敗例について
# はじめに
このような経験は誰にでもあると思います。
console.log()ならば、問題なくデバッグが進んでいたと思います。
なぜ、alert()文だとダメなのかについての失敗例を示したいと思います。# 何をデバッグしていた時か
アメバのブログを作成しているときに、編集画面のサイドバーにyoutubeボタンがあります。このyoutubeボタンでクェリー入力して検索ボタンを押したときに発生しました。実際の症状を具体的にご説明いたします。
このyoutube検索でやりたかったことは、アメバにyoutube動画を埋め込むことと同時に検索結果のリストをサーバーへ保存することです。このDB保存処理をプラグインで処理しようとしました。つまり、アメバ編集処理とプラグインの処理の2つの処理を実行したかったことです。このデバックで、深く考えもせずにalert(“検索ボタンがおされました。”)文を以下のソースにあるように挿入していたことです。
# サンプルコード
“`
//アメバ編集画面のサイドバーの検索ボタンをクリック
$(“#js-searchButton-youtube”).
【JavaScript】ドット記法とブラケット記法について
## ドット記法とブラケット記法の違い
オブジェクトのプロパティの値を取得したり変更したりするために使う**ドット記法**と**ブラケット記法**は、使い方にどんな違いがあるんでしょうか？:thinking::::note info
**ドット記法**
オブジェクト名.プロパティ名
::::::note info
**ブラケット記法**
オブジェクト名[‘プロパティ名’]
オブジェクト名[“プロパティ名”]
:writing_hand: 引用符の「シングル・ダブルクォーテーション」どちらでもOK
:writing_hand: プロパティ名は文字列で指定する必要がある
:::
| |ドット記法 |ブラケット記法 |
|:———–|:———–|:———–|
| プロパティ名を変数に使用 |できない|**できる** |
| プロパティ名に制限 |ある |**ない** |“`javascript:ドット記法
co
CodeSandboxのコンソール表記（HTML）のやり方
## 初めに
初めて使った[CodeSandbox](https://codesandbox.io/)のコンソールのHTML表記方法でつまづいたのでまとめます
## 問題
[CodeSandbox](https://codesandbox.io/)でコンソールを表示した際、HTMLの形で表示されず困りました
例）
“`JavaScript:exsample.js
const li = document.createElement(“li”);
console.log(li)
“`
↓ 理想のコンソール表記
“`:理想“`
↓ 現実のコンソール表記
“`:現実
▶ HTMLLIElement—————————–
”▶” から展開が可能で以下のようになる（一部抜粋）
type: “”
value: 0
ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
・
・
・
“`
## (一応）解決
Udemyを使って勉強をしていたため、Q&Aを見たところ答えがあ
JavaScript + React + Viteで.envファイルを参照する方法
# はじめに
.envファイルで環境変数を設定する際、Viteでの方法が少し異なるそうなので記録します
# 問題
.envを読み込むには「dotenv」というライブラリを使います（Viteにはデフォルトで入っているようです）
その際、通常は`process.env.`を用いて参照するようです。“` javascript
const env = process.env.TEST;
“`ですが、Vite環境下では`undefind`となってしまいます。
# 解決方法
Vite環境でEnvファイルを参照する際は、以下のルールがあるようです。
1. `import.meta.env.`を用いる
1. 定数名の頭に`VITE_`を付ける（例：VITE_URL）“` javascript
const env1 = import.meta.env.VITE_ANPANMAN; // .envファイルの値が取得できる
const env2 = import.meta.env.CURRYPANMAN; // undifind
“`https://stackb
JavaScriptで簡易チャットアプリを作成して学んだこと
# 目次
[はじめに](#はじめに)
[学んだこと](#学んだこと)
[1.ボタンと入力値取得の流れ](#1-ボタンと入力値取得の流れ)
[2.メッセージ出力の流れ](#2-メッセージ出力の流れ)
[ソース](#ソース)
[さいごに](#さいごに)# はじめに
今回は「テッククルー / プログラミング学習」さんの下記動画をもとに、JavaScriptで簡易チャットアプリの作成をおこないました。具体的な作成方法についてはこちらの動画で説明されているため、この記事では今回の簡易チャットアプリ作成で「学んだこと」を記録と復習のためにまとめてみようと思います。
※ これまでJavaScriptで作成したものの記事はこちら↓
https://qiita.com/osakanaaaa/items/d6a1b6184ad412e2a182
https://qiita.com/osakanaaaa/ite
【JavaScript】宝くじ (paizaランク C 相当) やってみたのと解説
これのやつです。
https://qiita.com/official-events/9ab96aa95d62fe3cbdd7
今回は、「どんな風に書いていこうかな」ってノリを模索するために書いてます。
書き方は他の人のを真似しています。# 問題
https://paiza.jp/works/mondai/c_rank_skillcheck_archive/lottery# 解答コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, ()
今日の発見 input要素にv-modelをしたときにstringになる
まずこちらをご覧ください。
https://play.vuejs.org/#eNp9kc1OwzAQhF/F8qWtVBIQnKq0EqAe4AAIOPoSpZs0xX+y16EoyruzdpTSA+rNmpmd/Vbu+b21WReAr3jhK9daZB4w2I3QrbLGIeuZg3pZGWUDwo4NrHZGsRnNzISujPbIdFBsHWPz68WkKd+QNo3N54v1Bn8smDqms66UAShb5ONSWlcgKCtLBHozVuxvUn7F+j51DUORk5a8VlMp666U2YFcC06NgrM8luRnLXzJ0RNN3TbZwRtNN/ZxXvCI1UpwrxZbohWc1kQneqWU5vs5aegCLCe92kP19Y9+8MeoCf7mwIPrQPCTh6VrAEd7+/ECR3qfTKIPktIXzHfwRobIOMYegt4R9lku0T6ln2p18+m3RwTtp6MiaEwOKS84fdrjhdP/cG+zuzQn9MCHX8LatqY=
`num`にはリアクティブな0が入ってて、`msg`には`num`の値の型を`computed
