JavaScript関連のことを調べてみた2021年02月11日

メモリ不足でyarn dev出来ない

vuepressを立ち上げたいがreactのプロジェクトをファイルに追加したら立ち上がらなくなった。

https://github.com/webpack-contrib/babel-minify-webpack-plugin/issues/87

と同じエラー、、、

“`sh
<--- Last few GCs --->

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory
1: 00007FF786DB1DDF napi_wrap+109135
2: 00007FF786D56D06 v8::internal::OrderedHashTable::NumberOfElementsOffset+33350
3: 00007FF786D57AD6 node::OnFatalError+294
4: 00

これから学ぶ言語について

#HTML
##HTMLとは
– HTMLはHyper Text Markup Languageの略である。
– Webページを作る際に、マークアップ言語という視覚表現や文章構造を記述するための最も基本的な言語が使われるが、HTMLはこのマークアップ言語のうちの一つである。
– Webサイトやアプリ、電子メールなどを適切に表示するために使用されている。

##HTMLでできること
– ホームページビルダーなどのWeb制作ツールがなくてもWebサイトを制作できる。
– 無料配布されているWebサイトのテンプレートを自分なりにアレンジすることができる。

#CSS
##CSSとは何か
– CSSはCascading Style Sheetsの略である。
– 先述したHTML文章に、装飾やレイアウトを施すために使用される。

##なぜCSSが必要か
– Webページの見た目はHTMLでも指定することができるが、HTMLだけで行うとWebページの情報構造が乱れ、検索エンジンに理解されにくく、ブラウザによって表示のされ方が変わってしまう。
– そのため、HTMlとは別のファイルでCSSによってス

Reactのevent poolingとは何だったのか

## はじめに
現在のReactのバージョンは17ですが、バージョン16以前はevent poolingという機能がありました。(ReactNativeでは現在もあるみたいです)

event poolingがどういう機能だったのか、なぜ削除されたのかについて書いていきます。

## Eventオブジェクトが使えなくなる機能？
“` jsx
const Component = () => {
const [text,setText] = useState(“”);
const onChange = (e) => {
setText(state => e.target.value);
}
return(

【jquery,js】csvからリンクリストを生成する [replace] [js01_20210211]

#### 処理の概要
表示しているcsvからリンクリストを生成して表示する

##### 処理のフロー：
　(1)実行ボタンを押下する
　(2)テキスト1から文字列を取得する
　(3)文字列からURLを取り出してリンクするように置換する
　(4)改行コードを変換
　(5)テキスト2に文字列を表示
　(6)div領域に生成したリンクを表示する

#### 画面イメージ
画像１の実行ボタンを押すと画像２のようになります。

#####画像１

#####画像２
サボるのは開発者にとって最も重要なスキルの1つ、知っていても最高に役に立たないイースターエッグ17選

## 動機
[ググるのはデベロッパーにとって最も重要なスキルの1つ、知っておくと便利なGoogle検索のテクニック](https://coliss.com/articles/build-websites/operation/work/use-google-like-a-pro.html) に倣い（倣ってない）、Google でサボるテクニック もとい、各種イースターエッグをまとめた。プログラミングの知見が得られることを保証はしないが開発者の遊び心の一つとしてユーモアを見習いたく以下記載する。参考: [Wikipedia イースターエッグ](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%BC%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%BB%E3%82%A8%E3%83%83%E3%82%B0_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)) / [隠しコマンド](https://ja.wikipedia.org/wiki/Google%E3%81%AE%

今頃、湯婆婆やってみた。

今頃、湯婆婆やってみました、、、流行に乗れなかったのでいまごろ。。。
試してみました。因みにいつの間にか貫徹でした。
このコードが原因ではなく・・・。

サンプルURL
https://taoka-toshiaki.com/changer/yuba-ba/

“`javascript:assets/js/index.js

const yubaba = function(){
this.start();
};

yubaba.prototype = {
start:function(){
var result = window.prompt(‘契約書だよ。そこに名前を書きな。’);
result = result===null?””:result.replace(/[ |　]{0,}/g,””);
result = (result!==”” && result)?result:”池山千尋”;
var sen= result.split(“”);
var moji = sen[Math.floor( Math.random() * sen.length )]

JavaScript で小学生の通過算を解いてみた！

## はじめに

こんにちは。私は普段ある教育大学に通わせていただいているのですが、講義の課題で以下のようなものが出ました?

> 1両20ｍで10両編成、時速72Kmで走る上り電車と、1両20mで8両編成、時速90Kmで走る下り電車がすれ違います。すれ違い始めてからすれ違い終わるまでにかかる時間は何秒でしょうか。

これを面白く解いてみてください！とのことでした！
よく見かけるちょっと応用的な問題だな〜と感じながら、ちょうどJavaScriptのCanvasを使ってみたかったので、そちらで解いてみました！

## 実際の動作

## コード

#### HTML
“`

問題3

1両20ｍで10両編成、時速72Kmで走る上り電車と、1両20mで8両編成、時速90Kmで走る下り電車がすれ違います

初心者向に初心な気持ちでJS書いてみた。

初心者向に初心な気持ちでJS書いてみた。
同じ挙動をするコードをいろいろな視点から書いてみるのも
良いことだと思います。ある企業が書いたJSのコードを見て
IT土方さんだなと思いお疲れ様という気持ちになった。
一人の人がおそらく何千行のコードをJSで書いていた。綺麗なコードでしたよ。

サンプルURL
https://taoka-toshiaki.com/changer/kaita/

“`javascript:assets/js/kaita.js

const kaita = function(){
this.init();
};

kaita.prototype = {
init:function(){
document.getElementsByName(“nanika”)[0].value = “何も書かないで？”;
},
mojikaita:function(){
document.getElementsByName(“nanika”)[0].addEventListener(“input”,function(){
document.getElem

初心者向にJSの例を書いてみた初心者？

初心者向にJSの例を書いてみた初心者のコードです。
この頃、どんなコードを書いたら悩んだり苦しんだりして覚えるのだろうかと！
「あはっ！」体験が技術を覚えるときに役立つと思います。ある程度、わかりだすと
逆に学習する能力が落ちるような気がします。抜け落ちるです・・・なぜか？

サンプルURL
https://taoka-toshiaki.com/changer/nanika/

“`javascript:assets/js/nanika.js

var nanika = (function(){
return {
kaita:function(){
document.querySelector(“[name=nanika]”).addEventListener(“input”,function(){
document.getElementById(“view1”).innerHTML = this.value;
})
},
gyaku:function(){
document.querySelector(“[name=nanika]”).add

【ド基礎から始めるJS講座②】Objectが解った気がするので調子に乗ってclassを作ってみる

# はじめに

前回の [【ド基礎から始めるJS講座①】Objectが解ればJSの半分くらいは解った気になれる！](https://qiita.com/layzy_glp/items/8eef954eac74bf974d4a) はそこそこ役に立ったでしょうか？
ちょっと内容が薄かったので。調子に乗ってclassの話までしたので、そこの部分もテキスト化しますね。

# mitsuha爆誕

深海映画の「君の名は。」には瀧くんと入れ替わっちゃう三葉という女の子がいます。
序盤でご飯をクッチャクッチャしてンベッて吐いて**美少女JKの口噛み酒**と言うフェチズムに満ちたアイテムを爆誕させる娘です。

彼女を瀧くんと同じようにObjectであらわすとこんなかんじですかね。

“`javascript
const mitsuha = {
name: {
familyName: ‘miyamizu’,
firstName: ‘mitsuha’
},
sex: ‘woman’,
age: 20, //瀧より3歳上という設定なので

Firebaseを使ってコメント機能を実装する

## はじめに
Webページにコメントフォームを埋め込み、閲覧者がコメントを投稿できる機能をシンプルに作りたいと思ったので、`Firebase`を使ってコメントの保存と取得して一覧表示をする方法をご紹介します。

## こんなものを作っていきます


## 前提
* 今回`Firebase`を使うのでGoogleアカウントが必要です。
* ReactやAngularなどを使ったほうがやりやすいですが、今回はピュアなJavaScriptを使って実装していきます。
* 実装には関係ないですがデザインは`UIKit`を使いました。

## Firebaseとは
Firebaseは、Googleが提供するモバイル及びWebアプリケーションのバックエンドサービスです（これを`mBaaS`と言います）
通常、今回のよう

Optional Chaining （？．）

オプショナルチェイニングはどうでも良いが、エラーがエグくて判明まで時間がかかったのでメモしとく

## ことの発端

こんなコードを書いてみて、Storybookで確認しようとしたら、エラーになる。

“`vuejs