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

なぜnpx create-react-appすると”export default” Appなのか？

## はじめに
最近Reactを勉強していますが、export（名前付きエクスポート）とexport default（デフォルトエクスポート）に惑わされています。
どちらを使えばいいのか疑問に思い軽く調べたところ、「exportでは〜ができます。export defaultでは〜ができます。」というややズレた答えが散見され、「exportなのかい？export defaultなのかい？どっちなんだい！！？？（きんに君風）」と思っていました。

（stackoverflowでも「全部の質問読んだけど、わかんねえ、、、」という記事がありました。）

https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules

## exportとexport defaultのどちらを使うべきか
結論から言ってしまうと、この問いに対する答えは

### どちらを使ってもよく、プロジェクトで決めた方針に従う

です。

下で

JavaScriptのinheritanceについて part2

# 初めに
前回でコンストラクタ関数の継承方法をまとめて紹介しました。
[JavaScriptのinheritanceについて（Constructor Function）](https://qiita.com/hu-yu/items/13635160a4616d6d1c0d)
今回はコンストラクタ関数を使わない方法をまとめたいと思います。

↓は今回デモの初期コードです。
“`jsx
const Person = {
nation: ‘Japan’
}

const Occupation = {
career: ‘Business Man’
}
“`

# `object()`
これは`json`の発明者Douglas Crockfordの発想です。
“`jsx
function object(obj) {
function F() { }
F.prototype = obj
return new F()
}
“`
コンストラクタ関数でなく、一般関数の内部に空関数のプロトタイプに継承対象のプロパティやメソッドを受け継がせ、新しいイスタンスを返すという方法です

【JavaScript】ループするスライドショーをJavaScriptのみで実装した

# 1. はじめに
JavaScriptの勉強を始めて約2週間くらいの人間による備忘録です。
間違い、冗長なコードがあります。
頑張ってんな～。くらいの気持ちで見ていただけると幸いです。

## 1-1. 動作確認
* ボタン押下で画面遷移
* 4秒間ボタン操作がない場合、自動でスライドを遷移する
* スライド時間は0.7秒
* スライド遷移中（0.7秒間）はボタン操作禁止

### 自動画面遷移
時間経過（4秒）で自動画面遷移

### ボタンを押下時の画面遷移
* ボタン押下で、時間処理クリア
* 0.7秒間はクリック禁止
![click.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/29c640e8-5788-dc9e-f0ec-51595

社内でデスクトップアプリを開発する手段まとめ

社内でWindowsデスクトップアプリが作りたーーーい。
しかし自由なソフトウェアやパッケージの導入ハードルができなーーーい。
そんなときの検討材料として、開発手段とメリデメを一覧する。

## Visual Studio (IDE)で C# を使用
### メリット
– GUI（人が操作する画面）が一番作りやすい
– デスクトップアプリ開発のデファクトスタンダード
– チュートリアルやインターネット上の知見が抜群に多い
– Microsoft製のためOffice等との連携がしやすい
– EXE化もできる
### デメリット
– 機能が多いため操作習得には時間がかかる
– エンタープライズ企業では無料のcommunity版が使えない
大企業でも使えるProfessional版は買い切り6万円弱、サブスクは月額45ドル

## Python ＋ Tkinter（標準ライブラリ）
### メリット
– 無料で使える
– 標準ライブラリでGUIアプリが作れる（追加インストール不要）
– インターネット上の知見が多い
– GUIアプリに限らず、導入すれば計算や分析などに利用できる
### デメ

【Ruby on Rails】トップに戻るボタンの作成

# 目標

よくWebページで見るトップへ戻るボタン（画像右下）を作成します。


# 開発環境
Rails 6.1.4
ruby 2.6.3

# 目次
– Viewページの作成
– CSSファイルの作成
– jQueryの定義（jsファイルの作成）

## Viewページの作成

まずトップへ戻るボタンとして使用したい画像を用意します。
今回は下記の画像使用。


下記のように記述します。

“`ruby:index.html

React18で追加されたAutomatic Batchingとは

先月ついにReact18の正式版がリリースされました。
今回のリリースで追加された機能をコード付きでざっくり解説していきたいと思います。

紹介する機能は公式のReact Blogの下記記事に掲載されているものとなります。

https://reactjs.org/blog/2022/03/29/react-v18.html

## Automatic Batching

`useState`を使った下記のようなコードがあるとします。

“`jsx
function Sample1() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);

const increment = () => {
setCount(count + 1);
setFlag(!flag);
};

console.log(“rendering”);

return (

jsonの要素を全て表示する方法

## 概要

JSONで値の取り出し方を毎回ググっているので、具体例を以下においておきます。

“`javascript
var json = {
one: [11, 12, 13, 14, 15],
two: [21, 22, 23],
three: [31, 32]
}

for(var key in json) {
console.log(key);
for (var key1 in json[key]) {
console.log(json[key][key1])
}
}
“`

## 結果
“`
one
11
12
13
14
15
two
21
22
23
three
31
32
“`

## 参考
https://www.microverse.org/blog/how-to-loop-through-the-array-of-json-objects-in-javascript

【JS、rails】要素の外側をクリックすると、その要素が閉じる

# 実装したいこと
クリックすると要素が変化し、要素外をクリックすると要素が元に戻るという機能を実装します。

今回の例は、自分のオリあぷに実装したものです。
検索フォームにホバーするとアンダーバーが表示されます。
検索フォームをクリックすると、アンダーバーの表示が維持されます。
検索フォーム以外をクリックすると、アンダーバーが消えます。
わかりにくいですがGifを参照ください。
https://gyazo.com/a36d20cbf9d2dd2b66f00d4b73b437b3
# 結論
JavaScriptを利用します。
“`javascript:JavaScript
function search_box() {
const search_box = document.querySelector(“#search-box”); // クリックした時にイベントを発火させるための要素を取得
if (!search_box) return null; //　目的の要素がないページでは何も処理しないようにする。⇨ページの挙動がよくなる
const line = doc

defaultとexport defaultの違い

はじめに

最近Reactを勉強していますが、exportとexport defaultによく惑わされるので、違いを整理しました。

※あくまでできるかできないかの整理となりますので、実際のプロジェクトでこういった書き方がされているかは存じ上げません。

概要

|No.| 項目 | 名前付きエクスポート
（export） | デフォルトエクスポート
（export default） |
|:-:|:-:|:-:|:-:|
|1| import時の{ }の必要性 | ○ | × |
|2| エイリアスの可否 | ○ | ○ |
|3| １ファイルからの複数エクスポート可否 | ○ | △ |

1. import時の{ }の必要性

名前付きエクスポート

“`FruitsBasket.jsx
export const FruitsBasket = () =>

FruitsBasket?

“`

“`App.jsx
import

【１３日目】加速度センサを使ったゲーム [monaca]

## はじめに
今回は加速度センサを使用してゲームを作ります。開発環境にはmonacaを使用します。
簡単に概要を説明すると、スマホを傾けると移動するボールを動かしポイントを稼ぐゲームです。

)

“`
(後ほど動画を貼り付けます)
“`

## 加速度センサ

まずはゲームのもとになるプログラムを作ります。`navigator.accelerometer.watchAcceleration();`を使ってスマホを傾ける度にxとyの変数が変わるようにし、そのx,yの値をellipseで指定します。するとスマホを傾ける操作でボールを操作できるようになります。

“`
(後ほど動画を貼り付けます)
“`

当たり判定はdist関数を使用して、一定間近づくと円が再生成されるようになっています。

“`javascript
d

javascriptの特徴的なオブジェクト（Window）について

javascriptについて学んでいく中、特徴的なオブジェクト（Window）について調べたことをまとめておく。

# Windowオブジェクト
Windowオブジェクトが最上位に存在し、後ろにプロパティ名を付けることで様々なオブジェクトを参照できる。

プロパティ一覧
・window Window オブジェクトへの参照
・document Document オブジェクトへの参照
・event Event オブジェクトへの参照
・console Console オブジェクトへの参照
・navigator Navigator オブジェクトへの参照

# 補足
・documentはWindowオブジェクトのプロパティであるため、「window.document」と記述することもできるが、「window.」の部分を省略しても記述できる。

・documentオブジェクトはDOMツリー[^1]にアクセスすることができる。

・[.window | JavaScript 日本語リファレンス](https://js.studio-kingdom.com/javascript/window/)
[^

初心者による初心者のためのJavaScript基礎１【変数】

# 目次
[1. 変数](#1-変数)
 [・const](#const)
 [・let](#let)
 [・var](#var)
 [・変数定義の使い分け](#変数定義の使い分け)
[2. console.log](#2-consolelog)
[3. テンプレートリテラル](#3-テンプレートリテラル)
[4. 参考記事](#4-参考記事)

# 1. 変数
変数定義のキーワードとして、`const`、`let`、`var`の3種類があります。
それぞれ次のような特徴があります。

## const
constには再代入不可、再定義不可という特徴があります。
“`js
const name = “Qii太郎”;

name = “Zenn次郎”; //エラー　再代入×

const name = “はてなブ郎”; //エラー　再定義×
“`
:::note info
constの特徴
再代入　×
再定義　×
:::

## let
letには再代入可、再定義不可という特徴があります。
“`js
let age = 25;

age =

JavaScriptのinheritanceについて part1

# 初めに
前回は [JavaScriptのPrototypeについて](https://qiita.com/hu-yu/items/d6d9f3ca0f1dd98f2bcc) でプロトタイプ、プロトタイプチェーンをまとめてみました。
今回はConstructor Functionの**Inheritance（継承）** 、四つの方法をまとめていきたいと思います。

# Inheritance
ここから継承の仕方を紹介したいと思います。
デモのためにまずは2つのコンストラクタ関数から行きます。
“`jsx
function Animal() {
this.species = ‘animal’
}

function Cat(name, color) {
this.name = name
this.color = color
}
“`
コンストラクタ関数`Animal`を、コンストラクタ関数`Cat`に継承させるのがデモの目的です。

## by binding methods (call, apply…)
“`jsx
function Animal() {
t

Node.jsとytdl-coreでYouTubeをDLする時につまずいた点（DLできない、無音になる）

# はじめに
YouTube動画をDLしようとWebで検索すると、怪しげな広告が表示される海外のサービスばかりだったりします。こういったサービスを利用するのはちょっと怖いなと思うので、YouTube動画をDLできるアプリが欲しいと思い調べてみました。

調べてみたところ、[wintyoさん](https://qiita.com/wintyo)が [youtube-downloader](https://github.com/wintyo/youtube-downloader) というアプリを公開していたため、動かしてみることにしました。（[wintyoさん](https://qiita.com/wintyo)ありがとうございます）
その際に、動画ダウンロードの処理でつまずいた点があったため記事にしてみようと思います。

動かすにあたって以下の記事を参考にさせて頂きました。
– [YouTube動画をダウンロードするWebアプリを作る](https://qiita.com/wintyo/items/4dd93221ae4094abd80a)
– [Node.jsでYoutube動画を

Node.js・Expressでmulterを使って、ファイルをアップロードする方法

はいさい、ちゅらデータぬオースティンやいびーん！んな、がんじゅー？（みんな、元気？）

# 概要
本記事では、Node.jsのexpressフレームワークで、multerというミドルウェアを使って、FormDataからファイルを取って、アップロード機能をバックエンドに追加する方法を紹介します。

## 事前準備
### Node.jsのローカルインストール
https://nodejs.org/en/download/

## 目次
1. Expressのセットアップ
1. \

の作成
1. multerの導入

# Expressのセットアップ

## パッケージをインストールする
今回は、TypeScriptを使ったExpressプロジェクトを元に作っていくので、まずは、新規フォルダーを作って、`package.json`を作ります。

また、筆者はyarn推奨派なので、全てのコマンドはyarnを使います。
“`
mkdir express-multer-upload

フロントエンド周りでお世話になった本と記事一覧（随時更新）

## 概要
フロントエンド周りで参考になった、学びがあった本と記事のまとめ
公式ドキュメントは見ている前提なので省いてます（ReactだけBeta版があるので紹介）

## JavaScript
### [JavaScript Primer](https://jsprimer.net/)

### [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

## TypeScript
### [TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)

### [サバイバルTypeScript](https://typescriptbook.jp/)

### [プロを目指す人のためのTypeScript入門](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%

IntersectionObserverを使うときに、複数作っても大丈夫？と悩んだのでメモ

# observer　=　new IntersectionObserver はいくつも作れます！

コーディング練習でPhotoshopカンプからのコーディングを練習していたときに、
少し悩みました。
でも、よく考えたら、ふつうにつくれるでしょうということのような気もしますが、
ぼくの勉強も含めて記事にしようと思いました。

# やりたかったこと

１つのページの中で、交差オブザーバーを使って、以下の２つを付けたいと思いました。

– ある程度スクロールしてきたらヘッダー出現
– スクロールに合わせて、タイトルや画像が入ってくる、よくあるやつ

最初にヘッダーの出現をIntersectionObseverを使って実装していました。
その後、スクロールに合わせてのアニメーションはお手軽なAOSにしようとしました。
すると、まだきちんと確認していないのですが、競合してしまっているような感じがしました。
なので、すべてのアニメーションをIntersectionObseverを使おうとしました。

# ちがうアニメーションをつけたい。
ということで、オブザーバーのインスタンス（？）を２つ作りた

無料でJavaScriptを学べるサイト

# 無料でJavaScriptを学べる「javascripttutorial.net」

プログラミングの学習をしていて出会ったサイトがあります。
それが「**javascrittutorial.net**」というサイトです。

https://www.javascripttutorial.net/

ほとんどの内容が網羅されている海外のサイトになります。

すべて英語表記なので、苦手な方はとっつきずらいかもしれませんが、
このサイトをみながら英語読解にも慣れていこうという勢いでぜひ見てみてください（笑）

ちなみに
– **ES6(ES2015)以降の内容**
– **JS BOM / JS DOM**
– **WEB API**

などなどの内容が載せられています！

# まだまだあった！
JavaScriptだけではなく、他にも言語別でサイトがありました！
どちらも「javascripttutorial.net」の姉妹サイトです。

## Pythonが学べる「pythontutorial.net」

https://www.pythontutorial.net/

## Ty

AngularJsを勉強してつまづいたところを振り返る【コントローラー編】

# はじめに
先日、AngularJsを初めて勉強したのですが、
これまでFWを用いたフロントエンドの改修経験が全くなく、
勉強の過程で色々つまづいたので個人的に重要そうなところを備忘録として残します。

今回はAngularJsのコントローラーについて取り上げます。

:::note warn
バージョンについて
本記事で扱うフレームワークはAngular（ver2以降）ではなく、AngularJs（ver1.x系）です
:::

# 初めてコントローラーの定義を見た時の感想
タイトルにもある通り、AngularJsのコントローラーの定義の理解に時間がかかりました。

AngularJsを解説しているサイトを色々見ていると
サンプルコードとして以下のようなソースが取り上げられるのですが、

なんとなくwebpackを使うのはもう終わりにする。【動作確認編】

[webpack公式サイト](https://webpack.js.org/)

# はじめに
webpackビギナーです。
タイトルの通り、なんとなくwebpackを使っていたのでなんとなくを卒業すべくまとめてみました。:hatched_chick:

今回は**基本動作を確認し概念を理解**します。
具体的なwebpackのファイルの設定方法はまたの機会にしようと思います。

# webpackってなんだ
* JavaScriptのモジュールバンドラー。
* 通常**Babel**と一緒に使われる。
* **複数のファイルを一つまたは少数のファイルにバンドルしてくれる**（束ねてまとめてくれる）。
* ちなみに画像ファイルとかも一緒にバンドルしてくれる。

# webpackを使うメリット
* ファイルをバンドルするので、**リクエス