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

プロジェクト内全てのファイルのエラーを表示させるVSCodeのtips

# はじめに
最近Reactのメジャーアップグレードを結構な規模のリポジトリで行いました
それに伴って、TypeScriptや、その他過去バージョンに依存していたライブラリのメジャーバージョンアップも行ったのですが、開くファイルファイルでことごとく赤い波線が引かれていました。。。
数十ファイルくらいの規模なら一つひとつ開いて確認・修正するのでも良いのですが、そんな訳にもいかず、スマートに全て確認する術を調べてみると意外と日本語でまとまった記事がなく苦労したので共有します
ということで全てのファイルに対してのTypeScriptのエラー内容を問題（PROBLEMS）タブに表示し、左のディレクトリ構成一覧画面からもどこのファイルがアウトなのか赤文字で出るようになるようになって幸せになることが本記事のゴールとなります

# 環境
Visual Studio Code: 1.73.1 (Universal)
※ 以下でも説明しますが、v1.42.1以降じゃないとうまくいかないと思います
Japanese Language Pack for Visual Studio Code: 1.73.x

条件文（if、else、else if）を使ってみる【JavaScript】

今回はJavaScriptで条件文を書いてみます。

ifとelse

おそらく、実際のプログラムを見た方が理解が早いと思いますので、早速以下のプログラムを実行してみましょう。

“`html









“`

上記を実行すると、以下のように「変数Aの値は10以上です。」と表示されます。

![exe_practice7.png](https://qiita-image-store.s3.ap-north

JavaScript参考サイト

https://www.youtube.com/watch?v=HeLnMQ-R86M

https://ja.savefrom.net/1-youtube-video-downloader-144.html

https://www.youtube.com/watch?v=ZCt06tXxtFg&list=RDCMUCHxqQ8b

[Java Script] jQueryを用いてinput, textareaの編集中にエンターでイベントを発生させる

# Code
このように編集する内容があると仮定、
`form`を用いておらず、ajax通信をしているので`input`や`textarea`でEnterキーを押しても何も反応しない。
より直感的に操作できるようにしたいので、`input`上でEnterキーを押したらボタンを押すようにしたい
## jQuery
“`html:jQuery

“`

## inputでEnter
“`javascript:input
$(“input[type=text]”).on(‘keyup’, function(e){
if(e.key===’Enter’||e.keyCode===13){

JavaScriptからReact、Next.js(TypeScript)を学んでPFに取り掛かれるレベルになるまでのロードマップ

以下のロードマップ/学習記録は[ProadMaps](https://proadmaps.com/1506616851853242371/roadmaps/14)で作成しました。
ロードマップの作成、共有から、作成したロードマップをマークダウンで出力ができるので、Qiita等の外部サイトや、個人ブログへの転記にも便利です。

https://proadmaps.com/1506616851853242371/roadmaps/14

# JavaScriptからReact、Next.js(TypeScript)までの学習ロードマップ

**概要**

Next.jsでポートフォリオを作成できるようになるまでの学習記録になります。今だったらこの順番でやればよかったなぁと思う順番に並び替えています。

**タグ**

Next.js,React,TyepScript,JavaScript,Ruby,Rails

**開始時スキル**

Railsの学習経験あり

**終了時スキル**

ポートフォリオに取り掛かれる

**総ステップ数**

7

## ステップ1 【Progate】 Pr

ひきこもりサークル＆ネットワーク

はじめまして

はじめまして。
ちばっしーと申します。
[ひきこもりサークル＆ネットワーク](https://chiba-shii.com/)というブログをやっております。

社会貢献を目指したブログです。
そちらでプログラミングに関する記事も書いております。

>【誰のどんな問題を解決するのか？】
>ひきこもりの人達の孤独、生きる楽しさがない、収入が少ないなどの問題を解決する。
>
>【理念】
>それぞれの好きなことから、人と繋がり、楽しみ、収入を得て、人生を豊かにする。

〇〇の始めかた

初心者の方向けの記事です。

[・プログラミングの始めかた](https://chiba-shii.com/start-programming/)
Progate

unko64ウンコーダー

# unko64
trimscashです
https://github.com/trimscash/unko64

https://trimscash.github.io/unko64/

うんこを使って意思疎通するやつを作った．

# 仕様

ボタンを押すとそれぞれunko64(base64)でエンコード，デコードしてくれる．

# 仕組み

“`js:main.js

let base64Strings = “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789/+=”;
let unko64Words=[
“くそ”,
“クソ”,
“糞”,
“うんち”,
“ウンチ”,
“うんこ”,
“ウンコ”,
“うんにょ”,
“うんにゃ”,
“うんぴ”,
“ゲ

TypeScript　参考サイト

https://qiita.com/S42100254h/items/5f284b3e86cdbd5a5787?utm_content=buffer581f6&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer#5%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E3%81%AE%E8%AA%B2%E9%A1%8C

https://zenn.dev/yumemi_inc/articles/js-front-constants-a1fb3c49eb1199

class名やid名指定でaddEventListenerを処理させる方法

class名やid名の指定の仕方によっては、戻り値が変わってきます。（配列とかHTMLCollectionとかNodeListとか）今回はどんな形であっても、addEventListenerで処理させる方法をまとめます。

### document.getElementByIdの場合
~~~ JavaScript
const btn =document.getElementById(“btn”);

btn.addEventListener(‘mouseenter’, function() {
//処理内容
});
~~~
`document.getElementById`の場合、途中の処理を必要とせず、直接記述できます。
### document.querySelectorAllの場合

~~~ JavaScript
const btn = document.querySelectorAll(“.btn”);

btn.forEach(function(btn) {
btn.addEventListener(‘mouseenter’, function() {

JSのプラグイン「Swiper」を使ってみた

# はじめに

今回の記事では、JavascriptのSwiperというライブラリについて

実際に使ってみた感想も踏まえて解説したいと思います。

結論から言うと、かなり簡単に時間をかけずに実装ができます。

# Swiperとは？使用に至った理由

私はWebアプリを制作する中で、トップページは印象に残りやすい動きのあるものがいいなと考えておりました。

検索をしているとjQueryを使った実装が多く、これまでjQueryを触ったことがなかった私にとっては学習コストがかかってしまうため、

ほかの方法を探していたところjQueryが不要な「Swiper」にたどり着きました。

# Swiperを導入することで可能なこと

– スライドをループさせる
– スライドのスピードを変更できる
– スライドの自動再生
– スクロールバーの表示
– スライドにページネーションを付けられる
– スライドにホバーした時にズームインする
※他にもいろいろあります

# Swiperの導入手順

手順は2つだけです。

– ファイルの読み込み
– HTMLとJSのコーディング

### ファイルの読み

javascriptでtableタグのtd内の数値の合計を自動で計算

javascriptを使ってtableタグ内のtdに入っている値段の合計を計算する方法。
もっと効率よく綺麗に書く方法あったら教えてくださいm(_ _)m


“`html