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

【JavaScript初心者】QiitaAPIで投稿記事ごとのviews数、LGTM数、ストック数、コメント数を取得、表示

投稿記事が10件を超え、そろそろ各投稿記事のviews数、LGTM数、ストック数等を一覧で確認してみたくなりました。今現在、「views数については」Qiita上にて一覧で確認する方法はありません。調べてみたところ、皆さん同じことを思うようで参考になるものがありました。ありがとうございました。
以下の記事の「①HTML/JavaScript」を参考にQiitaAPI(api/v2/authenticated_user/items、api/v2/items/[記事のID])を使用して投稿記事ごとのviews数、LGTM数、ストック数を取得、表示しました。LIKE率、STOCK率は省略し、代わりにコメント数と作成日を追加しました。

https://qiita.com/yoshi_yast/items/a0dacc4dd33106e66752

#本記事の環境
※PCに環境構築を行う必要はありません。
WEBブラウザ(Google Chome)
テキストエディタ

#使用技術
* HTML
* JavaScript
* jQuery
* Ajax
* Bootstrap

#事前準備
*

【コピペ可】スプレッドシートからGoogleFormを自動生成


こんにちは，だるだるし です
会社の代表してたり音声作品投稿してたりします
お金がありません，，，金か仕事をください，，，

はい，ていうのはおいておいて

# Googleフォームの自動生成
## 目標
GoogleフォームをスプレッドシートとGASで自動生成する

## 前段

『 [スタディステーション](https://service.nexsjp.com/studyStation/)』という（うちの会社の）サービス（現在完全無料なので本当に”サービス”）がある．

各自がGoogleフォームで

【Next.js】 Vercelビルド時のエラー解決方法 ‘Page Without Valid React Component’

## 使用環境
・MacOS BigSur（11.5.2）
・VScode（1.59.1）
・Node.js (16.1.1）
・React（17.0.2）
・Next.js（11.1.0）

## はじめに

Vercelのビルド時に出たエラー’Page Without Valid React Component’の解決方法です。


“`bash
04:50:30.440 > Build error occurred
04:50:30.442 Error: Build optimization failed: found pages without a React Component as default export in
04:50:30.442 pages/editPa

node.js超入門ノート11(Sequelizeでのバリデーション編)

# バリデーション
## モデルのバリデーション
以下のように修正します。

“`javascript:models/user.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define(‘User’, {
name: {
type:DataTypes.STRING,
validate: {
notEmpty: true
}
},
pass: {
type: DataTypes.STRING,
validate: {
notEmpty: true
}
},
mail: {
type: DataTypes.STRING,
validate: {
isEmail: true
}
},
age: {
type: DataTypes.STRING

[Ajax]フォロー機能を非同期にした

# はじめに
本記事では、フォロー機能を非同期通信にした方法を記述します。

以前にいいね機能について、非同期通信にした記事も投稿しておりますので、
ご参照ください。

https://qiita.com/mkato1013/items/9ee39a7675371aa585ce

## 前提
フォロー機能が同期通信できているものとします。

# コード
早速ですが、該当箇所のコードを記載します。

## コントローラー
showページにフォローボタンやフォロワーを確認できるボタンがあります。
後述のモデルに合わせて`followings`や“followers`メソッドを作成します。

また、`users`と`followers`などに分けている方もいらっしゃいましたが、
私は、`followings`や“followers`に分けた方がわかりやすいと思ったため、こうしています。

“`users_controller.rb
class UsersController < ApplicationController def show @user = User.fin

JavaScriptのvar,let,constの違いを理解する。ついでにスコープも理解する。

## 概要
変数宣言について、
「変数はvarかlet、定数はconst。」
「varはもう使うな。」
とか聞いたことあるけど、詳細を理解していないので調べてみました。

違いを理解するための前提知識としてスコープの理解が必要だったので、それも調べてみました。

## 変数宣言
変数の宣言とは、変数名を登録し値を格納するための領域をメモリに確保することです。

JavaScriptでは変数を使う際、変数の宣言が推奨されています。（※宣言しなくても動くが注意が必要。詳細はおまけ1で）
変数宣言をするための命令として以下3つがあります。
`let`と`const` はES2015から登場した新しい命令です。

* var
* let
* const

“`JavaScript
//宣言
var test;
console.log(test); //->代入していないのでundefined

//代入
test = 1;

//宣言時に代入してもOK（初期化という）
var test2 = 2;

//宣言せず代入することもできる
test3 = 3;
“`

## 3つの違いは？
ま

sliceとspliceの違いを簡単にまとめる。

#はじめに
文字の並びが似ているけれど使い勝手は全く異なる、sliceとspliceの違いについてまとめます。

#sliceとspliceの違い

###slice

* 元の配列の値を変更しない。
* 取得する値のstartとendの位置を指定するのみで値の挿入などはできない。

###splice

* 元の配列の値を変更する。
* 取得する値の範囲を決めて、別の値を追加したり削除したりできる。

sliceが配列を参照のみするのに対して、spliceは積極的に配列の値を変化させたいときに使えます。

#sliceの使用例
sliceはカッコ内に1つもしくは2つの数字を取ることができます。
最初の数字はスタート位置を、2つ目の数字は終了位置を示します。
仮に数字が1つの場合は指定したスタート位置から最後の配列まで取得します。

“`jsx
const numArray = [1, 2, 3, 4, 5, 6, 7, 8];

const list = numArray.slice(0, 2);

//出力　[1, 2]
console.log(list);

//出力　[1,

node.js超入門ノート10(SequelizeでのCRUD編)

# レコードの新規作成
以下のファイルを追加します。

“`html:views/users/add.ejs

【JavaScript】オブジェクト（連想配列）をObject.fromEntries()でmapする

# はじめに
オブジェクト（連想配列）をmapしたい場面があって調べたところ“Object.fromEntries()“に出会った。
実際に動作を確認しながら使ってみたのでそのメモ。

# 簡単なサンプル
シンプルなオブジェクトをmapしてみる。

“`js
const obj = { a: 1, b: 2, c: 3 }

const convertedObj = Object.fromEntries(
Object.entries(obj).map(([key, value]) => {
console.log([key, value * 2])
// コンソール出力
// １回目： [“a”, 2]
// 2回目： [“b”, 4]
// 3回目： [“c”, 6]

return [key, value * 2]
}),
)

console.log(convertedObj)
// コンソール出力
// {a: 2, b: 4, c: 6}
“`
なるほど、“Object.fromEntries()“

非同期処理を会社組織に例えて説明する。

単純なindex.html

“`









送信


“`

そして、単純なmain.js

“`
function bushoA() {
var suuji = document.getElementById(“suuji”).value;
var suuji = Number(suuji)
// 社員A
suuji = suuji + 1;
console.log( “shainA ” ,suuji);
// 社員B
suuji

【JavaScript】reduceメソッド

#はじめに
こんにちは。
JavaScriptのreduceメソッドについてアウトプットしていきます！

##reduceメソッドとは
>`reduce()` メソッドは、配列の各要素に対して (引数で与えられた) reducer 関数を実行して、単一の出力値を生成します。

> 参照：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

“`javascript:JavaScript
const numbers = [1,2,3,4];

const result = numbers.reduce((accu,curr) => {
return accu + curr;
})

console.log(result); //10
“`
上記の記述では、1回目の処理でaccuには配列の最初の要素の`1`が入る。currには`2`が入る。2回目の処理でaccuにはreturnで返された`3`が入り、currには配列の`3`が入る。

処理が完了すると

【ReactNative】アプリのプロフィール画像を変えるときに下から出てくる選択欄（アクションシートというらしい）を作ってみる

#画像のようなタップしたときに下から出てくる選択欄（アクションシート）を実装していきます。

この機能はよくアプリのアイコンや写真を設定する時に使われていると思います。
実際にはiPhoneのappleIDのアイコンやLINEのトップ画を設定するときに使われています

##プロジェクト作成、必要なライブラリをインストール
まずはReact-Nativeプロジェクトを作成します。
ちなみにExpoではなく、素のReactNativeで作っていきます。
作成方法はドキュメントなどを参考に進めてください。

#####次に必要なライブラリをインストールします
yarnの場合“`yarn add react-native-cross-actionsheet
“`npmの場合“`npm install

【Axios】速度改善のため、毎度APIを呼ばないようにする（〇〇秒キャッシュ）

#ページに遷移するたびにAPIを呼ぶのは効率が悪いため、ある程度の時間は再レンダリングしてもAPIを呼ばないようにする

独学の時はAPIを呼ぶのは基本一つしかなく、あまり速度が遅いとは感じませんでしたが、
本格的にアプリを作っていくと１ページに4種類のAPIを呼ばないといけないことになります。
その時に毎回全部のAPIを呼んでいると速度が遅くなる恐れがあります。
そこで、毎回呼ぶ必要のないAPIは次にAPIを呼ぶまでの時間を設定し、その間はレンダリングしてもAPIを呼ばないようにします。
#実装していく
実際にコーディングしていきます。

##１、APIを呼ぶ設定

まずはAPIの呼び出し共通処理を記述します

“`javascript
import axios from ‘axios’;

export const api = axios.create({
baseURL: ‘https://jsonplaceholder.typicode.com/’
});

api.interceptors.response.use(
response => {
retu

テキストファイルを出力する方法

“`
function downLoadTXT(text, filename) {
// TXTをダウンロードする
let blob = new Blob([text], {type: “text/plain”});
let link = document.createElement(“a”); // aタグのエレメントを作成
link.href = window.URL.createObjectURL(blob);
link.download = filename;
link.click();
}
“`

複数計測対応カウントダウンタイマー

複数の計測に対応したカウントダウンタイマーです。


**[動作デモ](https://akebi.jp/temp/countdown_timer.html)**

—-

“`html:countdown_timer.html