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

Reactで画像をlazyloadしつつpreloadするコンポーネント

FirstViewにはいらんけど、スクロールして登場するまでにはなるべく存在してほしいみたいな画像があったので作ってみました。
正直こんな雑なやり方で合ってるのか分からんのでもっといい方法知ってる人がいたら教えてください頼みます。

“`tsx

import * as React from ‘react’;

type Props = {
imgUrl: string;
alt: string;
};

export default function LazyAndPreloadImage(props: Props) {
const [loaded, setLoaded] = React.useState(false);

React.useEffect(() => {
// preload しておく
const img = new Image();
img.src = props.imgUrl;

// 読み込めたら img タグ描画する
img.onload = () => {
setLoaded(true);

EXCELファイルをバックアップし、DBに格納【Node.js Express】

エクセルファイルをアップロードしたら、バックアップを作成し、中身のデータをデータベースに登録するAPIを作りました。また似たような作業することになりそうなので、メモ。
Node.jsとExpress、データベースはMysqlを使用

#使うもの
１）multer
アップロードされたエクセルファイルを特定のファイルにコピーする。
※ただし、multipart/form-dataのみ
https://www.npmjs.com/package/multer

インストール：
“`npm install –save multer“`

２）sheetjs
エクセルファイルの書き換え等ができる。
今回はエクセルファイルをJSONに変換するのに使用した。
https://www.npmjs.com/package/xlsx

インストール：
“`npm install –save xlsx“`

#実装

“““javascript
const express = require(‘express’)
const app = express()
const models =

プログラムの可読性を上げるための条件分岐を減らす方法7個

受託開発エンジニアでプロジェクトリーダーという立場になるにあたって品質保証について考えるようになりました。

品質と一口に言っても「内部品質」と「外部品質」の2点がありますが、エンジニアである以上、内部品質の向上が外部品質を上げる最適解だと思います。

※内部品質、外部品質については[こちら](https://speakerdeck.com/twada/quality-and-speed-2020-spring-edition)を参照。

そして内部品質を上げるためにはアーキテクチャを考えることが大切ですが、既存プロジェクトの場合はアーキテクチャが ~~存在しないレベルでぐっちゃぐちゃ~~ 十分に検討されていないケースも多いです。

そこで、一番手っ取り早くプログラムの可読性を上げる方法は、新規に書くコードをできるだけシンプルに実装することです。今回はその中でも個人的に使っている条件分岐を少なくする or 見やすくするテクニックについてまとめてみました。

## 条件分岐を減らす方法7個

今回の分岐を減らす方法ですが、基準としては

– 1メソッドあたりの[循環的複雑度](https

画像の代わりにaltのテキストを表示する

## スマホの時だけ画像非表示にしてくださいってたまに言われます
本当はスマホ用の画像を用意した方がいいのですが時間や予算がまったくなかったりするときのための方法

元の状態

See the Pen
wvaGyLX by sphenis

使えるようになって(いて)欲しいプログラミング言語

# はじめに

私はすでに全く若手ではないのだが、個人的な意見として、また新たに入ってくる技術者に言っていることを書いてみる。勿論賛否あって良い。

何気に私はいわゆる組込み系の仕事をしているのだが、ソフトウェア・オリエンテッドであまり組込みっぽくない人種です。

# 使えるようになって(いて)欲しいプログラミング言語

概ね以下の3種類でそれぞれ1つずつ。

## システム記述系

こういう括りが正しいかは別として、C/C++、Java、C#など。

プログラムの動きとか、コンピューターの動きとか、きちんと知るにはCが最適。アセンブラとは言わない。アセンブラでもいいけど、プロセッサごとに違うしね。概念は知ってると良い。

ただ、Cを実務で使うのはどうしても必要でなければ避けたいのが本音。スキルの差がモロに品質に直結するので。

後、オブジェクト指向しづらいし。それができるというのとはまた別。C++は好きだが、仕様がカオスになりすぎて完全にマニアの世界。Javaはできると実務でも使えて、オブジェクト指向にも慣れるので良いかもしれない。

C#も簡単で分かりやすかった。Windowsでし

一度入れたJavaScriptライブラリは二度とアップデートされることはない

以下はCloudflareによるレポート、[JavaScript Libraries Are Almost Never Updated Once Installed](https://blog.cloudflare.com/javascript-libraries-are-almost-never-updated/)の日本語訳です。

# JavaScript Libraries Are Almost Never Updated Once Installed

Cloudflareは、WebページにJavaScriptやその他のフロントエンドリソースを配置するための一般的な方法である、[CDNJS](https://cdnjs.com/)を支援しています。
今回我々は、CDNJSチームの許可を得て、CDNJSへのリクエストから匿名化・集約されたデータを収集し、インターネットでWebサイトがどのように構築されているかを分析することにしました。
今回のエントリでは、ひとつの疑問に焦点を当てています。
すなわち、いちどJavaScriptライブラリをサイトにインストールしたあとで、ライブラ

jQuery 仮サイト作成のbase ②　（自分用）


###前回の続き：スライドショーについてのみ###

“`html

“`

“`jquery.js

var page=0

htmlを介さずにjsonから自動でコンテンツを作って更新するスクリプト

こんにちは、wattak777 です。

最近、必要に迫られてNode.jsを嗜むようになったのですが、とある時に「jsonで記載された元データをロードしてコンテンツとして表示し、ユーザがそのコンテンツを更新するとそのjsonを更新する」みたいなことをしようとしてNode.jsでソース一本で出来ないか？と考えたサンプルです。

ファイル構成は以下。
+
├ server.js
└ db.json

“`javascript:server.js
var express = require(‘express’) ;
var url = require(‘url’) ;

var app = express() ;
var json_write = {
param1_label: ”,
param1_value: ”,
param2_label: ”,
param2_value: ”
}

app.get(‘/update_param’, function(req, res) {
console.log(” GET” ) ;
var url_parse = url.p

まだMVCで消耗してるの？〜Django x Reactで始めるSPA開発〜

ここ最近JSフレームワークを使ったサイトが増えてきています。
とくにReactやVueなどのJSフレームワークはSPAというアプリケーション開発によく使われ、サイトを利用するユーザーだけでなく開発者にも多くのメリットをもたらします。

# 想定読者
– Web開発経験者
– APIを使ったWebアプリケーションを開発したことがある人
– JavaScriptをそこそこ知っててPythonもそこそこ知ってる人
– Djangoをちょっと知っている
– MVCもしくはMTVを使った開発をしたことがある人

別記事にもっと詳細に書いた記事があるので、本記事で難しいと感じた方やもっと深いところまで学習したい方はこちらをご覧ください。
[まだMVCで消耗してるの？〜React x Djangoで始める今時Web開発〜](https://note.com/_uichi/n/n79a038ce791d)

この記事ではフロントエンドにReact、バックエンドにDjangoを使用してチュートリアルを進めていきます。
チュートリアルはToDoアプリを題材にして進めていきます。

# SPAとは
SPAは

うんちメーカーを支える技術 ~ 状態遷移はうんちの夢を見るか？

# うんちメーカーの誕生

「うんちメーカー」というブラウザゲームを作りました。

* [ホーム – うんちメーカー](https://naruport.com/unchi)


うんちの長さを競い合うゲームで、オンラインのランキング機能があります。
使用した技術はDjango, Vueなどです。
今回はこのうんちメーカーで使っている技術について書いてみたいと思います。

# 主役はVue

フロントエンドのフレームワークはVueを使いました。
Vueはコンポーネント志向のフレームワークで、SFC(Single File Component)という単位でモジュールを定義できます。
例えば↓のようにです。

“`vue:

アロー関数の思わずぴえんしちゃった記法

## はじめに
社内SEからJavaScriptを主に使用するWeb系企業を転職をして一ヶ月。
会社で使うわけではないですが、Reactを勉強する上でJavaScript（ES６）の記法を知らないと
頭がぐちゃぐちゃになる気がしたので、ちょっとだけ記事としてまとめたいと思います。

## 意味がわからなかった記法
こいつです。

:cry:アロー関数:cry:

「そんなこともわからないのなら辞めてしまえ」という声が聞こえてきそう。。。
基本的なことはわかっているのですが、ちょっと複雑にされると

「？？？？？？？？？？？」

となるのです。

## アロー関数
基本は簡単です。

```
const addFunc = function(a, b) {
return a + b;
}

const result = addFunc(1, 2);
console.log(result);
```

上記が今までの記法。

ES６だとアロー関数が使用できます。

```
const addFunc = (a, b) => {
return a + b;
}

const

モック生成・パターン管理ツールの am-mocktimes を Svelte で作り直した

## am-mocktimes の簡単なご紹介

[am-mocktimes](https://github.com/ampcpmgp/am-mocktimes) とは、モック生成とパターン管理を行うツールです。

直感的には、以下のコードを書くと

```yml:patterns.yml
Travel Plan A: [setPlan, A]
Travel Plan B: [setPlan, B]
Travel Plan Z:
- [setPlan, Z]
- [setLocation, Cell Game, true]

```

以下のような一覧画面が表示され


以下のコードを追加して、上記リンクをクリックすると

```javascript:mock-config.js
import mock from 'am-moc

Techpitの教材「Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！」を終えての感想

# 説明

[TechCommit](https://www.tech-commit.jp/)さんのお年玉企画で、[Techpit](https://www.techpit.jp/)さんの教材[「Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！」](https://www.techpit.jp/)が当選したので使ってみた感想を書きました。

## 前提

### 筆者のレベル

|言語・ツール | レベル |
|:-----------------|:---------------------------|
| HTML・CSS | 基礎レベル |
| JavaScript | 業務で少し触ったことがある 　　 |
| Vue.js | はじめて |
| Firebase | はじめて |

##

top-level awaitがどのようにES Modulesに影響するのか完全に理解する

先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（`#name`みたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱う**top-level await**もその一つです。

この記事では**top-level await**に焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実は**モジュール** (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。

**※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけです。**記事の長さに怖気付かずに、ぜひおまけの前までだけでも読みましょう。おまけでは、top-level awaitに限らずES Modulesについて完全に理解す

「JavaScript の this を理解する多分一番分かりやすい説明」を読んで手を動かして理解した

[JavaScript の this を理解する多分一番分かりやすい説明](https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)を読んで手を動かしてみた。

## サンプルコード

```js
function test() {
console.log(this)
}
var obj = {}
obj.test = test

console.log(test) //1
console.log(obj) //2
test() //3
obj.test() //4
```

####1

関数そのものを出力。

```
ƒ test() {
console.log(this)
}
```

#### 2

関数そのものが入っているオブジェクトを出力。

```
{test: ƒ}
```

#### 3

``this``はグローバルオブジェクト、ブラウザでは[Windowオブジェクト](https://qiita.com/tsukishimaao/items/39d22fd9178546d6cdeb

ReactNavigation v.5 とReduxでタブのバッジ数を管理する

# この記事でやること
Reduxで管理する通知バッジ数をReactNativeのボトムタブに表示させる記事です。
**通知バッジ数はスクリーンをまたぐ変数なので、Reduxで管理するのが良い**かと思います。

こんな感じのやつです ↓↓ (この記事ではこれの簡易版を作ります)

ReactNavigation v.4では、**ボトムタブのレンダリングのタイミングに癖があった(?)**ようです。
Reduxで状態を更新してもボトムタブに即時反映はされませんでした(僕の周りでも何人か言ってましたが、間違っていたら教えてください！)。
僕は無理やり**テキトーな変数を入れたNavigationActionsをボトムタブにdispatchすることで、無理やり再レンダリング**させて、即時反映させていました(本当はこの記事はそれを書く予

javascriptタブの切り替え　ザッと復習

#JavaScript
カリキュラムの復習。タブの切り替えです。
これから使いそうなのでまとめてみました。
[](https://gyazo.com/443a5d56481a8313e3a73efbf6b9a31c)

###タブ切り替え
今回メニュー三つはmenu_itemクラス、クリックされた時にactiveクラスを付与
メニュー下の内容はcontentクラスに、クリックされた時にshowクラスを付与して切り替えます。

####まずノードを取得し、配列に変換する
```main.js
let tabs = document.getElementsByClassName("menu_item");
// tabsを配列に変換する
tabsAry = Array.prototype.slice.call(tabs);
```
```
Array.prototype.slice.call()
```
これで引数にとったオブジェ