- 1. Reactとはなんぞ？
- 1.1. Reactとは
- 1.2. Reactの特徴
- 1.2.1. 都道府県連動の市区町村セレクトボックス
- 1.2.2. javascriptで取得した売り上げデータの重複月を合計する
- 1.2.3. 【Vue.js】なぜVue.jsがトランジションの機能を提供しているのか？
- 1.2.4. Vue - data() { return {} } vs data:() => ({ })
- 1.2.5. 分割代入・スプレッド構文・map・filter
- 1.2.6. GSAP(基本機能)
- 1.2.7. Cloudflare Pagesでビルド時にreplaceAll is not a function出ちゃう件
- 1.2.8. 强制覆盖标准tag的css，或者标准的slds
- 1.2.9. 【Javascript】郵便番号から住所を自動入力する方法
- 1.2.10. 【JavaScript初心者】ブラックジャック(BJ)を作った。
- 1.2.11. 【TypeScript超入門 - 型注釈編】TypeScriptでDOMを取得するときに初学者が躓きやすいポイントを分かりやすく解説
- 1.2.12. [JavaScript] class取得した値にaddEventListenerは使えない
- 1.2.13. Cordova：InAppBrowserのエラー処理で林檎にしてやられた件
- 1.2.14. [JavaScript]paizaスキルチェックD 「足し算」/JavaScriptで数値化するには?
- 1.2.15. 【Javascript】forEach関数について-学習ノート1
[JavaScript] まじほんとしょーもねーミスでまる二日潰した
JavaScriptを使って、表示されているユーザー名をクリックするとコメント表示、非表示ができる機能を実装するのに、めちゃくちゃ時間かかって、コード自体の記述量は少ないのに、しょうもないミスでハマりにハマり、まる二日潰すという自体に発展してしまいました。
JavaScript初心者なのでほんとに小さいミスや、理解が浅いところでかなり時間がとられてしまって、戒めもかねて、ハマった事をざっと書いていきたいと思います。
よろしくお願いします！##前提として
これは実装の仕方を説明しているものではありません。
なのでコードの解説を逐一しませんが、読んでいただいている方になんとなくイメージを掴んでいただくために、こういうものを作るときにハマったんだよ〜って完成形のGIF貼っときます。
##エントリーNo.1 不器用でわがまま addEv
Gatsbyビルド時にOutgoingMessage.prototype._headers is deprecatedと怒られる件
# はじめに
こんにちは。名探偵コナンの99巻を買って2か月ほど経ちました。まだ読んでいません、筆者です :innocent:さて、Gatsbyプロジェクトビルド時になんかエラーが出てたのでそれ対応した話です。
同じエラーが出て困っている方の参考になれば幸いです:pray:# エラーはこれ
“`sh
$ gastby develop
…
…ERROR
(node:21481) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node –trace-deprecation …` to show where the warning was created)
“`廃止されたんすか:thinking:
# ほんとだ…廃止されてた :innocent:
https://nodejs.org/api/deprecations.html#DEP0066
### 追記
上記リンク踏んで思ったのですが、アンカーリンクが期待通りの動
WIP: JavaScript/Vue.js勉強メモ1
# 概要
[本](https://www.amazon.co.jp/dp/B087JF4JHB/)を読みつつメモをまとめるだけ（備忘録）# JavaScriptの基本
– htmlファイル中に`
```## Tween
Tweenという小さな単位でアニメーションを作っていきます。### アニメーションでよく使うCSSプロパティ
|プロパティ|説明|
|---|---|
|opacity|透明度(0～1の間)|
|x|x軸方向に移動(単位はpx) ※translateX()のショートカット|
|y|y軸方向に移動(単位
Cloudflare Pagesでビルド時にreplaceAll is not a function出ちゃう件
# はじめに
こんにちは。今月で楽天モバイルの1年無料が終わるので解約する予定です。wifi専用端末として使用してきました！**...長い間！！！ くそお世話になりました！！！** :bow:
さて、今回は、**Cloudflare Pages**でビルドの際に使用しているreplaceAllでエラーが出てしまう件について書きたいと思います。
# エラーはこれ
```sh
TypeError: $(...).html(...).replaceAll is not a function
```# 結論
**Cloudflare Pages**でビルド時に使用しているNode.jsのバージョンがv15.0.0より古いため。replaceAllはv15.0.0で追加された。
https://github.com/node.js/node/pull/35415
## ちなみにCloudflareのNode.jsのデフォルトバージョン
**v10**でした :innocent:https://developers.clou
强制覆盖标准tag的css，或者标准的slds
renderedCallback() {
//この段階で標準のコンポのスタイルを上書きします
console.log(this.isRendered);
if (this.isRendered) {
return;
}
this.isRendered = true;let style = document.createElement('style');
style.innerText = '.slds-th__action:focus, .slds-th__action:hover {background-color: #F5C9C6; color: #000000;}';
this.template.querySelector('c-cks_custom_table').appendChild(style);
let style2 = document.createElement('style'
【Javascript】郵便番号から住所を自動入力する方法
#成果物
郵便番号を入力することで住所をある程度自動で入力できるものを作ったので
そのアウトプットです。(100-0000と入力しても自動入力可能です。)#環境
・Windows10
・Visual Studio Code
・jQuery
・zip cloud###zip cloudとは？
[公式サイト](https://zipcloud.ibsnet.co.jp/)の概要よると、
日本郵便のWebサイトで公開されている郵便番号データを再配信するサービスです。
Web APIをたたくと以下のようなJSONで返してくれます。```
{
"message": null,
"results": [
{
"address1": "東京都",
"address2": "千代田区",
"address3": "",
【JavaScript初心者】ブラックジャック(BJ)を作った。
JavaScriptの勉強のため、ブラックジャック(BJ)を作りました。
様々な要件と仕様があるわりには難しすぎないので言語学習に丁度いいと思います。
遊んでみるのもよし、自作して私のものと比較してみるのもよしだと思います。#本記事の環境
※PCに環境構築を行う必要はありません。
WEBブラウザ(Google Chome)
テキストエディタ# ブラックジャック(BJ)とは
ブラックジャック（英語: Blackjack）は、トランプを使用するゲームの一種。カジノで行われるカードゲームではポーカーやバカラと並ぶ人気ゲームである。カードの合計点数が21点を超えないように、プレイヤーがディーラーより高い点数を得ることを目指す。
https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%83%83%E3%82%AF#要件・仕様
* 言語の勉強が主目的なので、見た目はこだわらない。
* 言語の勉強が主目的なので、処理は小分けにするし、コメントも残す。
* フレームワーク
【TypeScript超入門 - 型注釈編】TypeScriptでDOMを取得するときに初学者が躓きやすいポイントを分かりやすく解説
##この記事で学べること
- Non-null assertion operator（例: document.getElementById("〇〇")__!__）
- Type Assertions（例: document.getElementById("〇〇") __as HTMLElement__）TypeScript入門者はもちろん、JavaScriptしか触ったことのないプログラミング初心者も対象です。
## Non-null assertion operatorとは
私がTypeScriptに入門して最初に躓いたのがDOM操作でした。TypeScriptはJavaScriptより型に厳しいので、同じコードを書いてもTypeScriptだと警告が出ることがあります。簡単な例を紹介します。```javascript
// Javascriptファイル
const input = document.getElementById("usernameInput");
input.placeholder = "ユーザー名を入力してください";
``````typescrip
[JavaScript] class取得した値にaddEventListenerは使えない
##はじめに
JavaScriptでclassを取得してaddEventListener使ったら、エラーが出たので、自分なりに原因を突き止めてみました。
間違いや、補足知識などあればガンガンコメントしていただけると幸いです！
よろしくお願いします！##前提として
今回、簡略化しわかりやすく説明するために、一部分のコードしか載せておりません。
しっかりと説明できるよう努めますのでよろしくお願いします。問題が発生したコードの記述がこちらです↓
```JavaScript
const studentName =document.getElementsByClassName("student_name");studentName.addEventListener("click", function() {
// 以下省略
});
```これは取得したclass名の要素をクリックしたら、イベント発火するように意図した記述となります。ちなみにこのclassで取得した要素は複数あります。
もちろん私は複数の要素全てにaddEventLisnerでイベント発火させたくてこの記
Cordova：InAppBrowserのエラー処理で林檎にしてやられた件
良い子の皆さんは、InAppBrowserをそのままエラー処理なしで使ってなんかないと思います。
僕はクズ野郎なのでエラー処理なしで使ってました。
そうすると、ネット接続不良時とか、画面が真っ白になってアプリが死にます。クレーム殺到オワタ！(*^-^*)ﾉミ_☆というわけ、ようやく一般常識に気づいた僕は、InAppBrowserのエラー処理を実装してみました！
```javascript
this.Ref.addEventListener("loaderror", function(){
// なんか処理
});
```えらい！これでぼくもまっとうなぷろぐらまーだ！
と思ってたら、iPhoneでエライことになります。
どうもiOSの場合、InAppBrowserでリンク先への遷移実行中（ブラウザが考えてるとき）に再度リンクをタップするとエラーが発生するらしいです。クレーム殺到オワタ！(*^-^*)ﾉミ_☆```javascript
this.Ref.addEven
[JavaScript]paizaスキルチェックD 「足し算」/JavaScriptで数値化するには?
https://paiza.jp/works/mondai/skillcheck_sample/addition
足し算 (paizaランク D 相当)
今度は、javaScriptで挑戦しました。
Rubyが完璧とは程遠い中でJavaScriptを勉強し始めたため、若干混ざってしまいます...
こちらの問題はpaizaのスキルチェックDの見本問題集の問題ですので、コードの公開は自由だそうです。問題を開いて言語を選択した段階で、下記の通りコードが与えられますので、
追記、修正していきます。```
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) => {
【Javascript】forEach関数について-学習ノート1
# 初めに
javascriptのforEach()関数について学習した内容のoutput用記事です。※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。前回の記事：https://qiita.com/redrabbit1104/items/c3501e087f54facc52fe
# forEach()関数
関数を引数にする関数（高階関数）の一つ。配列の要素を一つひとつに対して関数の中で記述した特定の処理を行うことができる。# for of文と比較しながら使ってみる
forEach()関数を使ってchangesという配列の各要素の値を２倍にしコンソールに表示してみます。```javascript
const changes = [100, 400, -300, 120, -50, -330, 1400, 500];changes.forEach(function (change) {
console.log(change * 2);
});
```
配列の各要素の値が
