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

知識ゼロから始めるTypeScript 〜クラス編〜

## はじめに

基本編と関数編の続きです。

予習はこちらから:point_down:
[知識ゼロから始めるTypeScript 〜基本編〜](https://qiita.com/yukiji/items/52ea9106e254c1a12dea)
[知識ゼロから始めるTypeScript 〜関数編〜](https://qiita.com/yukiji/items/614ff63ade4072731750)
[知識ゼロから始めるTypeScript 〜クラス編〜]
(https://qiita.com/yukiji/items/3db06601ece7f080b0d0)　:point_left:今ココ

クラス編ではTypeScriptの便利機能がもりもりです。

どのような機能があるか見ていきましょう。

## クラスの型定義

– クラスのトップレベルで型宣言
– constructor(関数)の引数にも型宣言
– constructor(関数)の戻り値の型宣言は行わない(TypeScriptの言語仕様)

“`ts
class Person {
// クラスの型宣言

[Tips] Babylon.js でカメラの操作がスマホだと逆方向になってしまう対策

# はじめに

Babylon.js では `FreeCamera` で `attachControl` した際のカメラ操作が、
スマホで通常画面操作する際の向きとは逆になってしまっています。。:movie_camera: :arrow_down:


# カメラの操作を逆方向にする

修正するには [angularSensibility](https://doc.babylonjs.com/api/classes/babylon.freecamera#angularsensibility) という値をネガティブにします :thumbsup:
`camera.angularSensibility = -camera.angularSensibility;`

念の為、Babylon.js の Playground にも動作確認出来るコードを置い

.htaccessを使わず、S3から圧縮したJS,CSSを提供する

サーバーレスのアプリのため.htaccessを操作しづらい環境があったのでS3からこうやりました。
肝はアップロード時のcontent-encodingとcontent-typeの指定です。これがないとうまく読み込んでくれないです。

“`bash
gzip –best -f public/js/app.js # app.js.gzが生成される -fつけないと２回目から上書きしてくれない
aws s3 cp public/js/app.js.gz s3://xxxx/ –content-encoding “gzip” –content-type “text/javascript”
“`

“`html

“`

参考
[How to: Gzip compression of CSS and JS files on S3 with s3cmd](https://christianfei.com/posts/how-to-

NFCシールを活用して自動打刻ツールを(個人的に)作ってみた話

# はじめに

今回はNFCシールを使用して会社の自動打刻システムを、完全に自分用で作ります!

# 要件定義

## なぜつくるか?

現在､弊社の勤怠は､エクセルで管理されています｡
実際の打刻フローとしては､

1. 出社したら出社時刻をエクセル開いて手動で打刻
2. 保存
3. 退社するときに退社時刻をエクセル開いて手動で打刻
4. 保存

｡｡｡
**毎日エクセルポチポチするの面倒すぎる!!!!!!!!!**

作業自体も面倒なのに､何日か打刻を忘れるとまあ面倒臭いことになります｡

せっかくIT企業にいるんだからいろいろスマートにやりたい…
ということで､今回の自動打刻システムの開発を決意しました｡

## どう作るか?

今回開発する自動打刻システムでは､NFCシールを活用していきます｡

処理の流れとしては､

1. NFCシールにスマホをかざして専用のWEBサイトを表示する
2. WEBサイトから自動打刻システムにリクエストを投げる
3. 打刻する

といった感じにしようかと思います｡

NFCシールにスマホかざすのとリクエストを投げるところにWEBサイト表示をは

Trello風Webアプリケーションを作成してみた

## 作ったもの

最近、プログラミングから少し離れていたので、思い出すこともかねてTrello風のWebアプリケーションを作ってみた。


▼デモ（ https://x-color.github.io/vue-trello ）

▼完成品のリポジトリ
「Scrapboxにコードを書いて実行する」を説明してみる

この記事は[株式会社クロノス](https://www.kronos.jp/)の[「~2020年春~勝手にやりますアドベントカレンダー」](https://qiita.com/beeeyan/items/342d51fa301bcf81e9c0)の12日目の記事です！

# はじめに
今回の投稿は[ScrapboxのUserScriptテンプレートまとめ][1]に引き続き、[Scrapbox](https://scrapbox.io/features)ネタです。（よっぽど好きだということです）

まずは以下のリンク先ページをご覧ください。
[Scrapboxにコードを書いて実行する][4]

なんとっ Scrapbox上に書いたJavaScriptのコードが実行されてるじゃないですか！　すごい。UserScriptととはまた違ったことやってる！
自分もやりたいぃってことで、どうやって実現しているのか調べてみました。

※ `Vue.js`タグにさせてもらいましたが、`Vue.js`自体は実演で使わせてもらっただけで、チュートリアルの域を出ていないです。ご注意ください。

# 知れること

エンジニアの貴方必見

https://www.reiwarss.com/OpenProject

Top tags
python
swift
javascript
go
C
C++
C#
Ruby
TypeScript
PHP

CSS設計・Sassディレクトリ管理の標準化（CROCSS）

はじめに
===

HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。
CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。
この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。
コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。

前提事項など
————————————————–

* SassなどのCSSプロプロセッサの使用を前提とします。
* 本記事の一部は、後で見られるよう別記事として切り出しています。（?のマークのもの）
* この記事は標準化ノウハウ公開の一環として書いています。
仕組みの概要や前提事項などについては「[UltimateCoding 概要・前提事項](https://qiita.com/croco_works/private/23a5aac6afc4964

2020年から始めるAzure Cosmos DB – JavaScript SDK (SQL API)を見てみる (Part.1)


# この記事について

本記事は、2020年3月6日 (米国時間) にて、Azure Cosmos DB に新しく Free Tier (無償利用枠) が登場したことに伴い、改めて Azure Cosmos DB を色々と触っていく試みの 3 回目です。
今回は、[前回記事][PrevLink1] にて作成した CRUD アプリ内で使用している **Microsoft Azure Cosmos JavaScript SDK** について見ていきたいと思います。

– [Microsoft Azure Cosmos JavaScript SDK][npm]
– [Azure/azure-cosmos-js][GitHub1] \(old\)
– [Azure/azure-sdk-for-js][GitHub2]

[PrevLink1]:https://qiita.com/ymasaoka/items/0b0b72635

Yahoo!広告APIによる広告パフォーマンス計測の自動化

# はじめに
広告運用を行なっている方はあるあるだと思うのですが、パフォーマンスをチェックするために、日々各媒体の管理画面を見にいくのは骨が折れる作業です。
そこで今回はYahoo!広告APIとGoogle SpreadSheetsを使って、Yahoo検索広告とYahooディスプレイ広告のデータを自動的に取得する方法をご紹介します。

# Yahoo!広告APIとは？
従来利用されていたYahoo!プロモーション広告APIがリニューアルされて、Yahoo!広告APIとして生まれ変わりました。
[Yahoo!広告APIのリリースと、現行APIへの新規利用受付の終了について](https://promotionalads.yahoo.co.jp/support/release/727936.html)

Yahoo!広告APIを利用するためには、[申し込み手順](https://ads-developers.yahoo.co.jp/developercenter/ja/startup-guide/apply-api-use.html)に従い、利用申請を行う必要があります。

# アプリケー

Laravelでjs読み込む時に「$ is not defined javascript」エラー

めちゃめちゃ基本的なところでつまづいたので備忘録。

laravelを使ってjs読み込みたいのに何故か最初のおまじない部分でずっとコンソールエラー。
*$ is not defined javascript*

“` ruby:hoge.js
$(function(){ //←処理入る前のここで既に怒られる
//ここに処理
});
“`

なんでえ？？？と思ってたらjsの呼び出し方間違えてました。
↓こう書いてたのを

“` ruby:hoge.blade.php

“`

こうしないといけなかったみたい。

“` ruby:hoge.blade.php

“`

> 参考にさせていただいた記事
https://qiita.com/sakuraya/items/411dbc2e1e633928340e

React開発環境を作る1

reactを勉強するときに開発環境を作るところでいろいろ躓いたのでまとめていきます。
##使用ツール
– webpack
– babel
– css-loader
– style-loader

##ツールインストール

“`
npm install
“`

まずはこれを叩いてpackage.jsonを作る。

“`
npm install –save react react-dom
“`

reactとreact-domのインストール

“`
npm install –save-dev webpack webpack-dev-server
npm install –save-dev babel-cli babel-loader babel-preset-env babel-preset-react
npm install –save-dev eslint eslint-loader eslint-plugin-react
npm install –save-dev css-loader style-loader babel-loader
“`

開発をサポー

関数と引数と戻り値

#関係性について

翻訳機、消費税に例えると下記の写真の通りになります↓↓

####翻訳してください。
と言って「翻訳」と定義した箱に野球を入れて渡すと、baseballとなります。

####消費税かけて下さい。
と言って「消費税」と定義した箱に 1万円を入れて渡すと
1万1000円となります。

一度関数名を定義すれば、
箱に何かを入れて「翻訳！」とか「消費税！」と言って呼び出すだけで、
それぞれの処理を実行してくれます。

#記述方法

“`js
function 関数名(引数) {

処理内容
return文
}

関数を使う

“`

上記のようになり、
return文を使用すると、
処理を終了し、処理結果を返すこと

Javascript命名規則

write_index → スネークケース(DBのカラム名)
getCookie → キャメルケース

JavaScriptは基本的に
関数、メソッド、変数命名→Lower Camel(小文字で初めて途中単語の頭文字を大文字に）
クラス名→Upper Camel(大文字で始めて途中単語の頭を大文字に)

#キャメルケースとは

キャメルケースは「単語の先頭を大文字にしてつなげる表記方法」です。
変数名の付け方の話で、よく出てきます。

Glide.jsでスライドショーを作る

##Glide.jsとは
https://glidejs.com/

無料で使用できるオープンソースプロジェクトです。
他のライブラリに依存することなく、軽量なことが特徴です。

##インストール
###npm
“`
npm install @glidejs/glide
“`
###GitHub
https://github.com/glidejs/glide/releases/tag/v3.4.1

##読み込み
以下の二つをHTMLで読み込みます。

“`html “`

“`html



```

##基礎的な宣言やら条件分岐やら反復やら
#####変数と定数
```js
///////変数///////
var hen = 1;
///////定数///////
const hen = 1;
//////テンプレート文字列///////
let msg = `こんにちは${name}さん。` //${変数}で埋め込み
```
#####配列
```js
//普通の配列
var array =['佐藤','鈴木','田中']

//オブジェクトリテラル
var array = [key

Vue CLIで作成したindex.htmlからオブジェクトを取得する

## タイトルの内容をもうちょっと詳しく
- Vue CLIで作ったプロジェクト
- ディレクトリ構成はデフォルトのまま
- 画面表示用にオブジェクトを渡したいが、諸事情によりindex.htmlに書くことしかできない
- index.htmlに```script```タグを書いて埋め込む
- なのでVue側からindex.htmlに記載された値を取得する

## サンプルコード

```html:index.html