- 1. 私的WSH/Jscript総括①～なぜ今更しつこくWSH/Jscriptなのか？
- 2. 【JavaScript】関数とオブジェクト⑱ ビルトインオブジェクトとラッパーオブジェクト
- 3. React GoogleMapAPIで住所or地名から座標（緯度経度）を取得する。
- 4. RailsのAPIをブラウザのコンソールから呼ぶ
- 5. 【Vue.js】条件付きレンタリング v-ifとv-else
- 6. 【jQueryの基本】ー jQueryの設置方法 ー
- 7. 今日からコーディング開始できるアプリのアイディア7選
- 8. Denoでできること
- 9. Chrome 拡張機能の content_scripts で CORS を回避する方法
- 10. Firebase JS SDK 9の新スタイルへの移行は必須？いつまでに完全移行するべきなのか？
- 11. 【Javascript】即時関数から見る, Javascriptの関数の宣言と式と文法など
- 12. 【振り返り】研修期間中（2週間）で学んだ事・受けたコードレビューまとめ
- 13. excel 風jsライブラリ
- 14. 【JavaScript】関数とオブジェクト⑰ super
- 15. 無料のナビゲーションライブラリ
- 16. Azure IoT Hub と Azure Functions と LINE Notify による通知を組み合わせる（簡単な動作テスト）
- 17. Azure IoT Hub へのデータ送信と Azure Stream Analytics による可視化の下準備を試す（公式ドキュメントやサンプルをピックアップしつつ）
- 18. javascript演習 １１日目/３０日
- 19. 【学習記録⑮】Vue Routerを用いてURLごとに表示を切り替えてみる！
- 20. JavaScriptのthisを理解する
私的WSH/Jscript総括①～なぜ今更しつこくWSH/Jscriptなのか？
・バッチファイル感覚で書ける。
・実行する上で特段の準備（インストール等）が必要ない。☆なんでバッチファイルじゃないのか？
・さすがに機能や仕様が貧弱すぎる。
・でもバッチファイルで済むことはバッチファイルで済ませる。☆なんでPowerScriptじゃないのか？
・スクリプトファイルを実行出来るようにするために前準備（実行ポリシーの変更）が必要。
・ActiveXオブジェクトを直接扱えない。☆なんでWSH/VBScriptなのか？
・嫌い^H^H言語使用が貧弱。Classはあるけれども。
・これから習得するとしてVB系orJavaScriptの二択ならJavaScriptでしょう。★WSH/Jscriptはここがいい。
・Jscriptはes3レベルとはいえJavaScript。基本的な考え方は以降のバージョンにつながるものも多い。
・perl5レベルの正規表現が使えるので文字列処理も捗る。
ファイルシステムは FileSystemObject というライブラリがあって一通りのことはできる。
・ActiveXオブジェクトを扱えるので、WordやExcelを嬲ることもでき
【JavaScript】関数とオブジェクト⑱ ビルトインオブジェクトとラッパーオブジェクト
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/22855dcefd673e4b447e
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.ビルトインオブジェクトビルトインオブジェクトとは、コード実行前にJSエンジン側で**自動的に**生成されるオブジェクト
““具体例.
String, Object, Number, Function,
Math, Boolean, Date, Symbol, etc….
““`####例1
windowオブジェクトにビルトインオブジェクトが格納されているか
““Console.
window
Window {window: Window, self: Window, document: document, name: ”, location
React GoogleMapAPIで住所or地名から座標（緯度経度）を取得する。
#はじめに
Reactで住所や地名から座標（緯度経度）を取得する方法をまとめました。
以下の方に、参考になれば幸いです。
・Reactにて住所検索してMap上に表示させたい方。
・住所をDB登録して、マーカー等を一覧で表示させたい方#導入方法
以下のページを参考に、GoogleMapのAPIキーの取得と有効化とGeocoding APIの有効化を行います。
https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037次に、ライブラリを利用する準備を行います。
“`react:ターミナル
$ npm install –save @react-google-maps/api
“`# 住所から緯度経度を取得
下記のコードで取得できる。“`react:get.js
import React from ‘react’;
import { useState } from ‘react’;
import { LoadScript } from ‘@react-google-maps/api’;function Get
RailsのAPIをブラウザのコンソールから呼ぶ
### POST
“`js
await (await fetch(‘/example/api’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
‘X-CSRF-Token’: document.querySelector(“meta[name=’csrf-token’]”).getAttribute(‘content’)
},
body: JSON.stringify({
params1: ‘パラメータ1’,
params2: ‘パラメータ2’,
})
})).json()
“`### GET
“`js
await (await fetch(‘/example/api’)).json()
“`
【Vue.js】条件付きレンタリング v-ifとv-else
#はじめに
こんにちは！
今回は【Vue.js】v-ifとv-elseについてアウトプットしていきます！#v-ifとv-elseとは
真偽値により要素の表示/非表示を切り替えることができる。#書き方・解説
“`HTML:HTMLYES
NO
“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
toggle: true
}
})
“`
`toggle`が`true`なのでYESと表示されています。
`toggle`が`false`なのであればN
【jQueryの基本】ー jQueryの設置方法 ー
## はじめに
jQueryは、JavaScriptを短く簡単に記述できるライブラリです。
代表的なライブラリは、React、Vue.js、Angular.jsなどがあり、使用するライブラリによってソースコードの書き方や難易度は変わってきます。
ここでは、初心者の方向けに、jQueryを設置する方法について解説していきます。
## jQueryの設置方法
jQueryのHTMLへの設置方法は２つです。
① jQueryのサイトからソースコードをダウンロードして設置する
② jQueryをインターネット経由で読み込んで設置する### ① jQueryのサイトからソースコードをダウンロードして設置する
jQueryの公式サイトから、必要なバージョ
今日からコーディング開始できるアプリのアイディア7選
本記事は、Trevor Indrek Lasn氏による「[Here’s a List of App Ideas You Can Start Coding Today](https://betterprogramming.pub/heres-a-list-of-app-ideas-you-could-start-coding-today-b5f33f94a42e)」（2020年2月8日公開）の和訳を、著者の許可を得て掲載しているものです。
#今日からコーディング開始できるアプリのアイディア7選
>コーディングスキルを磨くのに役立つインスピレーション
Photo by Fotis Fotopoulos on Unsplash.##はじめに
他のスキルと同様に、コーディングを上達させるには、努力と時間を費やす必要があります。コーディングを上達させるための最良の方法の1つは、できるだけ多くのさまざまなアプリケーションを作ることです。しかし、私たちプログラマはジレンマを抱え
Denoでできること
Denoを触りたい、使ってみたいと思っている方に対して、「Denoを使うと何ができるの？」という情報をまとめます。
## Denoとは？
JavaScriptとTypeScriptのランタイムです。
Node.jsやChromeと同様にJavaScriptを実行できるほか、TypeScriptのサポート、安全な実行環境を提供します。
多くのWeb APIをサポートしていることも特徴です。## Denoの実行方法
`deno run`コマンドで対象ファイルを実行します。TypeScriptのコンパイルは必要なく、直接実行します。
“`shell
> deno run ./main.ts
“`ただし、Denoは「デフォルトで安全」なので、実行時にコマンドラインフラグを渡さないと、ファイル読み書き等の権限を与えることができません。
“`shell
> deno run –allow-read ./main.ts # 全フォルダへファイル読み込み権限を与える
> deno run –allow-read=. ./main.ts # カレントディレクトリ内に存在するフ
Chrome 拡張機能の content_scripts で CORS を回避する方法
# 注意
現在は [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/) が登場しているので、もしかしたら Manifest V3 とはやり方が異なるかもしれないが、備忘録として残しておく。Manifest V3 での方法については気が向いたらいずれ投稿する予定。# 概要
Chrome 拡張機能の `content_scripts` のスクリプト内で `XMLHttpRequest` や `fetch` などの非同期通信を実行すると以下のようなエラーが発生する。“`
XMLHttpRequest cannot load https://example.com/. Origin chrome-extension://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx is not allowed by Access-Control-Allow-Origin
“`このエラーは CORS というセキュリティ機能によるもので、許可されていない異なる
Firebase JS SDK 9の新スタイルへの移行は必須？いつまでに完全移行するべきなのか？
久々にFirebase WEB SDKをインストールすると、SDK Versionが9.Xになっていました。
どうやらmodularスタイルの追加など、推奨される書き方が従来のやり方と大幅に異なります。https://qiita.com/kiyopikko/items/f1da74f4f921ea778a61
わざわざ破壊的変更を予定していることを考えると、この変更はFirebaseコミュニティ全体に相応のメリットがありそうです。
しかし、**変更する必要はあるのでしょうか**。例えば、古いバージョンを使えばいいのでは？
なるべく学習コストを最小にしたいので、もし必要なければ現状維持をしたいのが人間の性。# TL; DR
### 公式ドキュメントでは9.Xへの移行が強く進められている。
https://firebase.google.com/docs/web/modular-upgrade?hl=en
>Apps currently using Firebase Web SDK version 8 or earlier should consider migrat
【Javascript】即時関数から見る, Javascriptの関数の宣言と式と文法など
即時関数はこのようなものですね
“`js
// function
(function () {
console.log(“foobar”);
})();// アロー
(() => {
console.log(“foobar”);
})();
“`ワンセットで覚えても良いですが, それでは応用が効きませんし, 何よりJavascriptの関数の文法理解が進んでいません. というわけでこれを分解してみます.
## 構造
“`js
// ↓ 関数本体 ↓ ↓呼び出し
( function () {} )()
//↑ 関数式を評価 ↑// 改行する
(
function () {
// …
}
)() // ← この()が関数の呼び出し
“`つまり, 関数本体と, それを囲む括弧と, その関数を呼び出すための括弧で構成されています.
## 最初の括弧の役割
“`js
//↓ ここ ↓
( /*…*/ )();
“`この括弧は, `( 式 )` という構造をとります.
【振り返り】研修期間中（2週間）で学んだ事・受けたコードレビューまとめ
#目次
[1.はじめに](#1-はじめに)
[2.laravelコードレビュー](#2-laravelコードレビュー)
[3.jsコードレビュー](#3-jsコードレビュー)
[4.その他コードレビュー](#4-その他コードレビュー)#1. はじめに
入社して1ヶ月が経ちました。今回が初投稿になります。今回、研修で受けたコードレビューについてまとめたいと思います。
ちなみに言語・フレームワークは、“`「Laravel(PHP)と、jQuery（JavaScript）」“`です。
**これから、エンジニアになられる方には参考になる部分があるかと思います。**
##なぜ書こうと思ったか？
– 同じミスを2度としないように、メモに残しておいて確認するため。
– 最初に指摘されるミスは大体似ると考えたため、今後入社するであろう方にも参考に。#2. 【Laravel】コードレビュー
##○【Laravelルーティング】api用のルートを使う
全て、“`web.php“`に書いていたことを指摘されました。
**apiの部分は“`api.php“`に記載する様
excel 風jsライブラリ
excel 風 jsライブラリのまとめ
* SpredJS https://www.grapecity.co.jp/developer/spreadjs (commercial)
* slickgrid https://github.com/6pac/SlickGrid (MIT)
* hansontable https://handsontable.com/ (commercial/MIT)
* jspreadsheet https://bossanova.uk/jspreadsheet/v4/ (MIT)
【JavaScript】関数とオブジェクト⑰ super
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/3cb497a27e534f20d5c1
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.supersuperとは継承元の関数を呼び出すキーワード
####例1
superの使用例
“`js
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}hello() {
console.log(‘hello ‘ + this.name);
}
}class Japanese extends Person {
constructor(name, age, gender)
無料のナビゲーションライブラリ
2021年に、いくつかの人気のあるライブラリとナビゲーションビルダープラグインをWebサイトに導入しました。
#Webナビゲーションとは何ですか？
ナビゲーションはWebサイトの不可欠な部分であり、その主な機能は、ユーザーがWebサイトの主要なセクションに簡単に移動できるようにすることです。 ナビゲーションを設計する際の最初の条件は、ユーザーが簡単にアクセスして使用できることです。 次に、より便利な機能と美しいデザインを組み合わせます。#Vertical Fixed Navigation
垂直ナビゲーションをすばやく簡単に作成できます。 これにより、ユーザーはページのコンテンツをより一般的に表示し、サイトのセクションにすばやく移動できます。 右側の各ボタンにカーソルを合わせると、重要な情報が自動的に表示されます。 私が気に入っているのは、コンテンツを編集し、各ナビゲーション要素のスタイルを設定する方法の詳細な手順です。
そして、その後に調査をしていた際に以下の記事を見かけました。
– [Azure IoT Hubで受け取ったデータを利用する方法（Azure function） – Qiita](https://qiita.com/kmaepu/items/016608d1b810a9bd6470)
つい最近、以下のようなことをやっていたのがあり、ふと上記の 2つの内容を組み合わせたものを動かしてみたいと思って、今回の記事の内容を試しました。
– [Azure Functions と LINE Notify の組み合わせ（Node.js を利用、ポータルで開発） – Qiita](https://qiita.com/youto
Azure IoT Hub へのデータ送信と Azure Stream Analytics による可視化の下準備を試す（公式ドキュメントやサンプルをピックアップしつつ）
公式ドキュメント等を見ながら、Azure IoT Hub を試していきます。
（参照した公式ドキュメント・サンプルの情報は、記事の中に記載していきます）## リソースの作成とデバイス登録
以下の公式ドキュメントの「IoT Hub の作成」・「IoT ハブに新しいデバイスを登録する」の項目の内容を進めていきます。●Azure Portal を使用して IoT Hub を作成する | Microsoft Docs
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-create-through-portal以下は、IoT Hub のリソース作成が完了した後です。
そして、試していく。 pic.twitter.com/TJAPpocM28
— you (@youtoy
javascript演習 １１日目/３０日
覚えたこと
splice()とslice()の違い
・spliceメソッドを使うと元になった配列要素が変更されてしまう
sliceメソッドは元の配列を変更しない
・slice()は文字列型のメソッド“`javascript
arr.slice([start[, end]])
splice(start, deleteCount)
“`配列の最後から一定数文字を取得して、
配列をつなげて、特定の文字が含まれてるかどうか調べる“`javascript
arr.splice(-secretCode.length -1 , pressed.length – secretCode.length);
if(arr.join(”).includes(secretCode)){
}
“`
【学習記録⑮】Vue Routerを用いてURLごとに表示を切り替えてみる！
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はVue Routerを用いてページごとに表示を切り替える方法について記載していきます。## Vue Router
`Vue Router`はVue.jsにおいてルーティングを制御するためのライブラリです。https://next.router.vuejs.org/
※現在僕の学習環境はVue.js 3のため、Vue Routerのバージョンは4で動作確認をしています。
## セッティング
まずはVue Routerをインストールします。“`console
npm install vue-router@4
“`https://next.router.vuejs.org/installation.html
## ルートファイルの設定
上記にて`vue-router`をインストール後、`router.js`などのファイルを作成し、以下のようにrouterの設定を行います。
インストールした`vue-router`から`createRouter`, `crea
JavaScriptのthisを理解する
## thisとは
**呼び出し元のオブジェクトへの参照を保持するキーワードのこと**`this`の参照先は、実行コンテキストによって変わります。
実行コンテキストには「グローバルコンテキスト」や「関数コンテキスト」があり、今回は関数コンテキストにおける`this`について見ていきます。関数コンテキストにおける`this`の場合は、呼ばれた関数ごとに参照先が変化します。
## consoleで「hello Taro」と表示する場合
“`javascript
const person = {
name: ‘Taro’,
hello: function () {
console.log(‘Hello ‘ + this.name);
},
};
“`この場合、`this.name`の`this`は自身のオブジェクトの`person`を参照します。
## helloメソッドを呼び出してみる
“`javascript
const person = {
name: ‘Taro’,
hello: function () {
console
