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

JavaScript~文字列カウント~

#はじめに
あけましておめでとうございます前回記事から日が空いてしまいました。
ここやTwitterでの活動のやる気が認められて案件をもらいそれに取り組んでいました。
今まで全然たいした内容は投稿出来ていなかったですがそれを評価していただいて嬉しかったです。
ただ案件に時間がかかってしまいなかなか記事を書けず仕事をしながら投稿を続ける難しさを実感しました。
自分のように今勉強中で転職活動している人は今回のような例もあるので投稿してみるのをオススメします。

今回の投稿内容は文字列の長さをカウントするというコードです。
これは入力フォームの文字カウントに使えるのでぜひ参考にしてもらえたらと思います。

#文字数カウント
文字をカウントする構文は次のようになります。

“`JavaScript:構文
文字列.length
“`

これを実際に使うと

“`JavaScript:例
‘テスト’.length //3
‘test’.length //4
“`

このように文字の後ろに「.length」をつけるだけでカウントしてくれます。

#入力フォームカウント
これを元に入力フォーム

[ Java Script 入門 ] グローバルスコープとスクリプトスコープは同じものなのか？

##グローバルスコープとスクリプトスコープ　

“`　
let a = 0;
var b = 0;
function c() {}
debugger;
“`

これらを定義し、ブラウザ上で検証をぶちかます。
（**debugger**はブラウザを開いていると、この時点に達すると処理が止まる。）
検証の**Sources**内、Command + R　で更新。

“`
Script
a: 0

Global Window
PERSISTENT: 1
TEMPORARY: 0
addEventListener: ƒ addEventListener()
alert: ƒ alert()
atob: ƒ atob()
b: 0
blur: ƒ blur()
btoa: ƒ btoa()
c: ƒ c()
“`
Scope内にこのように表示された。　　
これがdebuggerから見える変数ということになる！

##グローバルスコープとは？

`Sources内の結果からわかるように、VarやFunctionで定義した際は

GoogleAPIをNode.jsから叩いてみた

今更ながら、GoogleAPIをNode.jsから触ってみます。
Google Drive、Gmail、Google Calendar、Googleフォトなど、皆さんgoogleサービスにお世話になっているのではないでしょうか。
ちゃんと、APIも提供されていて、npmモジュールもあるので、今後もいろいろ使えるかもしれません。
本人認証して簡単なリスト表示をするところまでですが、後はリファレンスを見れば拡張できるかと思います。

GitHubに上げておきます。

poruruba/GoogleApiSample
　https://github.com/poruruba/GoogleApiSample

#参考情報

googleapis/google-api-nodes-client
　https://github.com/googleapis/google-api-nodejs-client

Google Cloud Platform Console
　https://console.cloud.google.com/

Google CalendarのQuickStart
　ht

【アプリ開発 2】【Node.js JavaScript MongoDB】 JavaScriptを用いて端末の現在地を取得する。【2021年1月】

#Node.js Express MongoDBを用いたアプリ開発
Node.js Express MongoDBを用いたアプリ開発を行うことになりました。
開発の中で得られた知見を、支障のない範囲で記録していきたいと思います。

アプリの仕様上、各ユーザーの携帯電話の位置情報を取得し、googleマップ上で表示させる必要が生じました。
まずは、位置情報を取得する機能を実装してみます。

##要件
– ユーザーがログインし、「位置情報通知」ボタンをクリックした場合、位置情報がデーターベースに格納される。
– ユーザーがログアウトもしくは、「位置情報通知解除」ボタンをクリックした場合、位置情報がデーターベースから削除される。
– ２４時になった時点で、ユーザーの操作なしに、「位置情報通知解除」状態となる。
– ユーザーの位置が変更した場合、最新の位置情報がデータベースに格納される。
– 管理者は、定期的にデーターベースにアクセスしGoogleマップを用いて、ユーザーの位置を確認することができる。
– 位置情報には、ユーザーの連絡先と、コメント等が表示される。

##Javascriptを

JavaScriptとECMAScript（初心者向け）

#ECMAScriptとは
ブラウザ間の互換性を高めるために作られたJavaScriptのコアな部分（仕様）

###ECMAScriptのバージョン
| 年 | バージョン | 通称 |
|:-: |:-: |:-: |
| 2009 | 5版 | ES5 |
| 2015 | 6版 | ES2015(ES6) |
| 2016 | 7版 | ES2016(ES7) |
| 2017 | 8版 | ES2017(ES8) |
| 2018 | 9版 | ES2018(ES9) |

###ECMAScriptの仕様の決まり方
機能ごとに仕様を作り、最新版の使用所に追加する
####仕様策定プロセス
| 段階 | 通称 | 概要 |
|:-: |:-: |:-: |
| Stage0 | Strawman | アイデアレベル |
| Stage1 | Proposal | 機能提案・検討 |
| Stage2 | Draft | 暫定的に仕様決定 |
| Stage3 | Ca

JavaScriptの非同期処理について調べてみた

## 非同期処理とは
ググって一番最初に目に止まった文章がこれです。
>あるタスクを実行している際に、他のタスクが別の処理を実行できる方式である。
非同期処理をいれ、多重にコンテキストを用意することにより処理速度の向上を目指す設計。

### どのような処理を非同期処理に任せるのか？
外部リソースとの連携作業
– サーバーサイド処理
– ファイル読み込み
– ajax処理

など時間のかかりがち（？）で、JavaScript以外が行う作業(JavaScriptは完全シングルスレッドであるため)

非同期処理の結果を使うコードを非同期処理の直後に書いたりするとまだ値が用意できてないのに…みたいなことも起こるみたい。

## 3つの非同期処理
– コールバック
– Promise
– async/await

### コールバック
身近な例で言うと、普段何気なく使っていたsetTimeoutも非同期処理。
setTimeoutはコールバック形式でX秒後に実行する処理を指定するけど、その間次の処理が実行されている。

（コールバック＝非同期処理ってことか？何も指定しなくて

Railsのお気に入り機能(Ajax)をjQueryから素のJavaScriptに置き換える

Railsによる個人サービス [supplebox.jp](supplebox.jp) ではお気に入りの追加・削除機能をAjaxを利用して実現しています。

この非同期用のJavaScript用の埋め込みRuby（.js.erb）ファイルでは、jQueryを使っていました。
jQueryを利用しているのは、Rails Tutorialを始め、私の周りの学習教材ではjQueryが利用されていたためでした。

しかし、ここ最近しっかりとJavaScriptを学習しはじめると、わざわざjQuery使わなくても素のJavaScript(Vanila JS)でもできるんじゃないの?と思いたち、実際にできたため、書き方を記事にまとめます。

なお、本記事では`.js.erb`ファイルのみに焦点を当てているため、Ajaxを使った機能自体の詳細については、 [Rails Tutorial](https://railstutorial.jp/chapters/following_users?version=6.0#sec-a_working_follow_button_with_ajax)や参考記事をご

ブックマークレット・コンソールを使って Webページ内の複数の指定要素のテキストをファイルに保存

タイトルの通りの内容を、自分用のメモとして。

頻度は多くないものの、とある Webサイト上に登録された情報をまとめる作業があり、CSV出力する機能なんかはあったりするのですが、より手軽に情報をまとめられないかと思ってやってみた内容です。

## 開発者ツールのコンソールで処理を実行
とりあえず、以下を実行する処理について調べたり試してみたりしました。

– ページ内の指定要素を取得する処理
– 取得したテキストをファイルとして保存する処理

### ページ内の指定要素のテキストを取得してまとめる
処理対象として、Qiita のトップページを使ってみます。
適当に決めた内容ですが、「トップページでトレンドとして表示されている記事のタイトルをまとめて取得する」ということをやってみます。

開発者ツールで該当する部分の構成を見てみます。

![Qiitaのトップページ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f3dafc6f-8d47-afaa-8364-c0c82bc0abec.j

ReactプロジェクトをTypeScriptとscssで作成する方法

# はじめに
今回はReactプロジェクトにTypeScriptとscssを含める方法を紹介いたします

# 目次
1. Reactプロジェクトの作成
2. scssの導入
3. ブラウザでの確認

#1. Reactプロジェクトの作成
「npx create-react-app プロジェクト名 –template typescript」を実行します

“`
$ npx create-react-app react-project –template typescript
“`

コマンドを実行すると下記のようにReactプロジェクトの雛形が作成されます！
ちなみに、TypeScriptを用いてReactのコンポーネントを定義する際は、拡張子が「.tsx」になります

#2. scssの導入
作成したReactプロジェクトフォルダに移動し、

【Node.js】開発に必要な基礎知識まとめ

## はじめに
Node.jsで開発するにあたり必要な知識について手順とともにまとめてみました。

## Node.jsについて
JavaScriptをサーバーサイドで動かす仕組みのこと

## Expressについて
– Node.jsでWebアプリの開発をするためのフレームワーク
– Webアプリケーションを作る機能を提供する

### Expressの導入方法
npmというシステムを使いインストールをする

“`console
$npm install express
“`

### インストールしたExpressの利用方法
jsへの記述

“`javascript
// expressの読み込み
const express = require(‘express’);
// expressを使用するための準備
const app = express();
“`
## サーバーの起動について
サーバーを起動し、Webアプリを画面に表示する方法です

jsへの記述

“`javascript
// アクセス可能なサーバーを起動する(ここではlocalhost:8080)
a

[ JavaScript入門 ] JavaScriptとECMAScriptの関係性について

#JavaScriptとECMAScript

Javascriptで開発していると、よく耳にするのが**ECMAScript**。　　
実際これってなんの？:upside_down:

##歴史
1990年代、**Netscape Navigator**というブラウザが存在。
そこに現れたライバル:spy_tone4:というのが**Internet Explore**というブラウザ。
　　
Internet Exploreはみなさんご存知の通り、Microsoft社が開発したブラウザ。
Windowsと一緒にInternet Exploreを配布することによってシェアを拡大していったよ:muscle:
　　
そこでNetscape Navigatorが考え出したのが、**JavaScript**
MicrosoftもJavaScriptを使いたい！！　けどライセンスの関係で使えない:cry:
そこでMicrosoftが作成したのが**JScript**

この二つのプログラミング言語には互換性がない:frowning2:　　

そこで考え出されたのが**ECMAScript*

【Google Chrome】拡張機能の作成方法を分かりやすく解説してみた Part. 3

#アクセスしたページのh1（見出し）の数と内容をアラートで表示する

前回は軽いスクリプトとポップアップを作成した所で終わっていましたね。今回は見出し通りアクセスしたページのh1要素の数と内容をアラート上に出力させてみます。

前の状態のままやってもいいのですが、ごちゃごちゃしちゃうので**example_extension**フォルダ上のファイルを全て消去しちゃいましょう。

では、もう一度**manifest.json**を一から作りましょう。

“`json:manifest.json
{
“manifest_version” : 2 ,
“name” : “showh1” ,
“version” : “1.0”
}
“`

**manifest.json**を作成する上で、必ず書かないと行けないのが上記の三つです。

“`json:manifest.json
{
“manifest_version” : 2 ,
“name” : “showh1” ,
“version” : “1.0” ,

“permission

ESモジュールが読み込めないときに試してみたいApache 2.4の設定

当記事では、ESモジュール（JavaScript modules・ES6モジュール・ESMなどとも呼ばれる）を使ってみたところ、ブラウザのコンソールに以下のようなエラーが表示され、モジュールの読み込みに失敗したときの対処方法を紹介します。

“`
Failed to load module script: The server responded with a non-JavaScript MIME type of “”.
Strict MIME type checking is enforced for module scripts per HTML spec.
“`

## 1. 注意事項

これから紹介する対処方法を試してみるときは以下の2点に注意してください。

### 1-1. 動作確認済み環境

直ることを確認した環境は以下の通りです。

– OS: Windows 10 Home 64bit版
– Webサーバー: Apache HTTP Server v2.4.46（インストーラー不使用。バイナリを直接ダウンロード・配置して構築）
– ブラウザ: G

【Next.js】環境構築とパッケージを取り込む方法

# 前書き

筆者が`Next.js`を仕事で書くことになったので、1から勉強するためにアウトプット記事を書くことにしました。
基本的には[ドキュメント](https://nextjs.org/docs)を噛み砕いて、翻訳した記事です。間違っているところなどあれば、ご指摘していただけるとありがたいです?‍♂️

以下、本題です。

# `Next.js`環境構築


`yarn create next-app アプリ名`でサクッと開発環境を構築することができます。では、下記のコマンドを実行します。

“`
yarn create next-app toy
“`

処理が無事に成功したら、http://localhost:3000/にアクセスしてください。下記のような画面が表示されるかと思いま

webアプリを再リリースして学んだこと３つのこと

#始めに
今回、作ったwebアプリを公開してあまりに反響がなくすぐに閉鎖しまたすぐに公開した話をします。

##作ったwebアプリ

人生経験を募集したり、エッセイを書いたりするサービスです。
エッセイを書くほどでもない…というときはツイッターのような一言だけつぶやく機能もあります。

URL:
https://e-elder.herokuapp.com/

##公開した直後は…
全く反響がありませんでした。qiitaでも宣伝してみたのですがいいねもコメントも全く付きませんでした。
サービスサファリに掲載依頼したのですが落ちました。

あまりの反響のなさにherokuのアプリデータまでけしてしまいました。

##なぜまたリリースしたか
今回なぜ失敗したかを考えてみようと思い
先輩方の記事を読んでいるとwebアプリは最低１、

JavaScriptのif文を三項演算子を「使わずに」一行で書く

三項演算子を使ってif文を一行にするというTipsはよく見ます。しかし、僕はelseのない通常のif文すらも一行にしたい…といつも思っていました。これが実はいとも簡単に実現できたので、ここに残したいと思います。

#まずは基本フォーマットから
通常のif文はこちら。

“`Javascript:三項演算子を「使わない」基本フォーマット
if (a === b) {
console.log(“Yesなら処理”);
} else {
console.log(“Noなら処理”);
}
“`

これを三項演算子を使って一行にしようとすると、下記のようになります。

“`Javascript:三項演算子の基本フォーマット
a === b ? console.log(“Yesなら処理”) : console.log(“Noなら処理”);
“`

#elseのない通常のif文を一行で書く
“`Javascript:三項演算子を使わずに1行で書く
a === b && console.log(“Yesなら処理”);
“`

え？って思うかも分かりませんが、（条件文）&&（処理） と

JavaScriptの関数定義と使い方

#はじめに
ポートフォリオを作成するに当たってJavaScriptの必要性を感じたので勉強を始めました。

JavaScriptの関数定義についてアウトプットしていきたいと思います。

####さっそく書いていきます。

コンソールに名前を出力したい場合には

“`main.js
console.log(‘hello yamada’);
“`

問題ないですね。 hello yamada と出力されます。
この名前の部分を動的に変えたい場合は変数を使います。
例えば

“`main.js
let name = ‘yamada’;
console.log(‘hello’ + name);
“`
さきほどと同様にhello yamadaと出力されます。では、この名前の部分をほかの名前でどんどん出力したい場合はどうしたらいいでしょうか！

“`main.js
let name = ‘yamada’;
console.log(‘hello’ + name);
let name2 = ‘yamada2’;
console.log(‘hello’ + name2);
“`

hell

【kintone】新規登録画面で落書きした画像を添付ファイルに保存する

こんにちは！

今回は画像を描いてその場で保存するアプリを作ってみたいと思います。

↓画像のような感じに落書きをして、保存ボタンで添付ファイルフィールドに保存するというアプリです。

今回は**新規登録画面**で保存してみたいと思います。

※今までも、一覧画面に絵を描いて新規登録するというアプリは紹介しましたが、今回は新規登録画面でそのままレコードに保存するというアプリです?
参考：[【kintone】お絵描きして添付ファイルに保存する（改）](https://qiita.com/juri_don/items/7dbf37c78579e5a90be4)

# アプリの準備

フィールドは、添付ファイルとスペースだけ。

| フィールド種類 | フィールドコード (要素ID)|
|:-:|:-:|
| スペース | s

大量の非同期APIをawaitを使わずにシーケンシャルに呼び出す

## やりたいこと

こんな場面を想定します。
エンドポイント“/m1score“と、パラメータの配列がある。

“`javascript
const params = [
{ team: “madical”, score: 649 },
{ team: “oide”, score: 658 },
{ team: “mitori”, score: 648 },
…
];
“`

この配列の各要素を使って、POSTメソッドを全部シーケンシャルに（逐次処理で）呼び出したい。
下記のイメージ。

“`javascript
// まずは↓を実行
fetch(“/m1score”, {method: “POST”, body: JSON.stringify({“team”: “madical”,”score”: 649})});
// ↑が終わったら↓を実行
fetch(“/m1score”, {method: “POST”, body: JSON.stringify({“team”: “oide”,”score”: 658})});
// ↑が終わったら↓を実行
fe

【Vue.js】IMEで変換中の文字列を取得する

# v-modelだとIME変換中の文字は取得できない。

“`vuejs:出来ない例

// これだと変換中なにも取得できない…
“`

## ドキュメント見てたらそれらしきものを発見
>IMEを必要とする言語 (中国語、日本語、韓国語など) においては、IME による入力中にv-modelが更新を行わないことに気づくでしょう。このような入力に対しても同様に扱いたい場合は、代わりにinput イベントを使用してください。
> [フォーム入力バインディング/基本的な使い方](https://v3.ja.vuejs.org/guide/forms.html#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9)

## この書き方でできるらしい

“`vuejs:app.js