f@ctor

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

JavaScript関連のことを調べてみた2020年04月30日
目次

`SyntaxError: Cannot use import statement outside a module` JSでimportの箇所でエラー起きる

### エラー
“`
(node:211) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
~/getMessageOnSlack.js:1
import axios from ‘axios’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
“`

### 解決法
エラーが言っているように、package.jsonに`type:module` を追加するだけ

“`package.json
{
“name”: “”,
.
.
.
“type”: “module”,
}

“`

元記事を表示

Node.jsを使ってHTTPサーバを作ってみる

#はじめに
この記事はなんとなくJSとかを勉強している学生がメモ代わりに書いているものです。内容は期待しないでください。

#1.仮想環境を構築する
今回はUbuntuで行うのでiTerm2で仮想環境を起動する。

起動したところで
1.Virtual Box(バーチャルボックス)
2.Vagrant（ベイグラント）
という2つのソフトウェアを使った仮想環境でUbuntuを使用します。
cd ~/vagrant/ubuntu
vagrant up
vagrant ssh

Ubuntuがインストールされたディレクトリに移動。vagrant upは仮想的なPCにインストールされたUbuntuを起動するコマンドで,vagrant sshはVagrantの仮想マシンがセットされている状態でSSHに接続します。

#2.プログラムのひな形(テンプレート)を用意する
ディレクトリ内に以下を記述します。
“`yarn init
echo “‘use strict’;” > ファイル名
“`

１行目はyarnで新しいプロジェクトを始める際に記述するものです。

#3.プログラムを書く
先ほど記

元記事を表示

【JavaScript本格入門】グローバル変数とローカル変数

こちらの技術書のスコープについてのまとめです。

– [改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X)

## グローバル変数とローカル変数の違い
– 関数の外で宣言した変数 → グローバル変数
– 関数の中で宣言した変数 → ローカル変数

元記事を表示

raspberrypiとESP32を使った自分でIoTプラットホーム作成(その1)

#raspberrypiとESP32でIoTシステム
GWで時間があるので結構ハードル高いですが作ってみます。下記がゴールになります。
センサーやESP32はあるものを使います。
すべてローカルネットワークでのアクセルを考えています。

1.ESP32を使ってセンサー制御し、raspberrypiへwifiで測定値転送
2.raspberrypiをWebサーバーとデータベースサーバー作成
3.クライアントPCからrasberrypiへアクセスし異常値やグラフなどBIツールで可視化

元記事を表示

OpenLayersのプラグインを公開してみた

![openlayers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/9e155ed2-c221-63b6-dca7-90160144740a.png)

![スクリーンショット 2020-04-29 22.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ce2bfed0-db29-7072-f2b5-dbf048e53b11.png)

### OpenLayersのプラグインを構築して公開してみました :tada:

[ol-opacity](https://github.com/dayjournal/ol-opacity)という、透過機能を持ったLeafletライクなUIのOpenLayersプラグインを構築して公開してみました。

# サンプル
[example](https://dayjournal.github.io/ol-opacity)

# リポジト

元記事を表示

【HTML・JavaScript】画面表示までの処理順序

## 概要
HTMLファイルを読み込んでからブラウザに表示されるまでのJavaScriptの処理の流れをまとめました。

## 用語の確認

– [オブジェクト・プロパティ](https://qiita.com/hirotatsu/items/1e56186dd24e55d0bcac)

– [DOM(Document Object Model)](https://qiita.com/bocc/items/5d7213431e5a5e3a67e9)

## JavaScriptの処理順序

1. windowオブジェクトの生成
1. Documentオブジェクトの生成
1. HTMLを記述順に構文解析(パース)
1. `