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

【JavaScript】forEachよりもreduceのほうが万能性高くない？

# forEach の模倣

次のような`forEach`は、

“`forEach.js
array.forEach(body);
“`

`reduce`により一行で模倣できる。

“`simulation_forEach.js
array.reduce((_, …args) => void body(…args), void 0);
“`

# reduce の模倣

逆に、次のような`reduce`も、

“`reduce.js
const result1 = array.reduce(reducer, init);
“`

`forEach`により模倣できる。ただし、一行では模倣できない。

“`simulation_reduce.js
let acc = init;
array.forEach((…args) => {acc = reducer(acc, …args)});
const result2 = acc;
“`

# 用法用量を守って畳み込みましょう

`forEach`は万能だけど、`reduce`はそれにもまして万能なので、気

【JavaScript】forEach vs map

## forEach
配列の各要素をぞれぞれ呼び出します。またループの戻り値は`undefined`になります。

“`js
const o = [1, 2, 3, 4, 5].forEach((num, index) => {
return num * 2;
});

// undefined
console.log(o)
“`

## map
配列の各要素をそれぞれ呼び出し、新しい配列を生成します。ループの戻り値は新しい配列に格納されます。

“`js
const o = [1, 2, 3, 4, 5].map((num, index) => {
return num * 2;
});

// Array [2, 4, 6, 8, 10]
console.log(o)
“`

## forEachとmapの使い分け
元の配列の要素を単にループさせたい場面や、元の配列を値を直接書き換えたい時はforEach、メソッドチェーンを使ってfilterやreduceなどと一緒に使いたい場合はmapを使ったりすることが多い気がしてます。

“`js:filterを

Windows10のDocker×VSCode環境でReactを動かすまでの道のり

初Qiita投稿です！

現在React Bootcampに参加しており、
Windows10でのDockerを使った環境構築で躓いたポイントがあったので共有します。

https://react-nagoya.connpass.com/event/220664/

# そもそもなぜDockerを使ったのか
もともとNodistで構築しようとしていたが過去に手動で導入したNode.jsと干渉しまくってうまく動作しなかった。
調べていく中で以下の記事にたどり着きNodistではなくDockerで構築することに。

https://zenn.dev/ymasaoka/articles/note-uninstall-nodish-windows

# ハマったポイントの要約
– docker-compose.ymlでエラーが出まくる
– →ファイルの文字コードをUTF-8に変更したら直った
– Docker上のReactアプリにアクセスできない
– →Docker立ち上げ時にポート開放を行う

# 導入手順
## ① Dockerの導入

https://www.docker

JavaScriptを基本からまとめてみた【9】【コールバック関数】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##コールバック関数とは
コールバック関数（英：callback function）とは、関数を呼び出す際に引数として引き渡される別の関数のこと。呼び出し側が引数として指定した関数を、呼び出し先のコードが「呼び出し返す」（callback）形。この呼び出し側が引数に指定した関数のことを「コールバック関数」という。

“`
コールバック関数のイメージ例
関数A（引数A）{
引数A();
}
関数B（）{
関数A(関数B);
“`

##コールバック関数の流れ
①「関数A」の引数にコールバック関数「関数B」を指定して呼び出す
②「関数A」内で引数として受け取ったコールバック関数「関数B」を呼び出す
③ コールバック関数

このタイミングでReactの基礎を押さえてみた。

# はじめに
自分はReact初心者ながら、数冊の書籍と動画でとりあえずの基礎学習を終えましたので、基礎的な部分を復習して基礎力をつけていこうかなと思います。

# Reactとは
Reactとは、Facebookにより開発されたJavaScriptライブラリの一種です。JavaScript単体では開発生産性は低いので、補う手段としてReactなどのライブラリを導入します。
Reactは、`コンポーネント`と呼ばれるUI部品を積み上げて、アプリを作っていきます。

# コンポーネントについて
コンポーネントとは、UIの一部分となるビュー (View) を切り出したもので、これらを積み上げてアプリケーションを作り上げていきます。
※現在(2021年8月現在)では、コンポーネント作成は関数コンポーネントを利用するのが一般的らしいです(昔はstateがクラス内でしか使えませんでしたが、今はどちらでも可能のため)。

“`react
import React from ‘react’;

// クラスを用いた定義方法
class Greeting extends React.Componen

scriptタグを使いまわしたい

#どういうことか
いろんなHTMLに同じscriptタグ(js,css)を使いたい…!
ググっても出てこない…そんなあなたにお勧めです！
初投稿です。
#沼ってたとき
Document.write 非推奨
innerHTML 使えない
insertAdjacentHTML 使えない
#なぜ
セキュリティの関係で無効化されてるようです。
#解決策
createElementを使いましょう！
コードを書いてみました。

“`js:head.js
var script;
var link;
var js = url => {
script = document.createElement(‘script’);
script.src = url;
document.head.appendChild(script);
}
var css = url => {
link = document.createElement(‘link’);
script.href = url;
script.rel = “stylesheet”;
do

ReplitでNode.js v16を使用する

先日、discord.js v13がリリースされました。

ですがv13は、Node.jsのバージョンがv16以上でないと使えません。

では、Node.jsがv12であるReplitは使えない！？と思ってしまいますが、裏技で使うことができます。
# 使う方法
## Node.jsのインストール
“`bash
npm install -D node@v16
“`
でNode.jsのv16をインストールします。
## Replitをいじる
そのあと`.replit`に

“`toml
run=”npm start”
“`

って書いて
`package.json`に

“`json
{
“scripts”: {
“run”: “npx node index.js”
}
}
“`
以下を付け加えましょう。(index.jsは適宜変更してください)

# 実行すると…?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1518670/7f579f5c-d169-

近年のソフトウエア技術のトレンドレポートまとめ(随時更新)

#概要
情報サイトInfoQでは、様々なトピックがテクノロジー採用ライフサイクルのどこにあるかをレポートしている。
近年の技術動向を知るきっかけになるので、記事にリンクをまとめる。

[Wiki:テクノロジー採用ライフサイクル](https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC%E6%8E%A1%E7%94%A8%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB)
[テクノロジー・ライフサイクルとは](https://www.nsspirt-cashf2.com/entry/2018/09/24/201/)

下記がトレンドレポートの一例
「ソフトウェア

【kintone&FromBridge】履歴テーブルの実装方法を紹介

# はじめに
業務でkintoneとFromBridgeで履歴テーブルを実装する必要があったため、その実装方法について紹介します。

### システムの概要
申請者が申請し、その後承認者が承認をしていくワークフローシステムです。ユーザがアクションを行い必要であればコメントを入力し、更新日時とユーザとコメントを履歴として残すよう実装しました。

# 実装方法の紹介
## kintone
### フィールドの設定
フォームの設定画面にてテーブルを追加し、必要な項目を追加していきます。


– 更新日時について

DOM要素の幅を境界で変えられるようにする【JavaScript】

## したいこと
Flexで並べた要素の間に境界を設置して、そこをドラッグすることでそれぞれの幅を変えられるようにする。
例えるならVSCodeの分割ウィンドウみたいな感じ。

## コード
### HTML
““HTML

““

###CSS
““css
#wrapper {
display: flex;
height: 200px;
width: 300px;
}
#one, #two {
height: 100%;
}
“`

###JavaScript
““javascript
window.onload = () => {
let parent = document.getElementById(“wrapper”);
colResizeable(parent, 300);
};

let colResizeable = (element, totalWidth, borderWidt

JSで動画のアップロード前に尺を取得する

# やりたいこと
動画をアップロードする前に、フロント側で再生時間に上限を設けたい

# 完成形

“`html