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

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

Electronでデジタルサイネージを作る時の画面設定

# はじめに
デジタルサイネージでコンテンツを作る際、モニタサイズに合わせて画面を表示する必要があります。
画面の設定にはElectronのBrowserWindow APIを使ってウィンドウを固定してしまえば、あとはhtml内で表示の処理をすれば、コンテンツの制作が進めやすくなります。

# 目次
1. BrowserWindowのオプション
2. 参考

# 環境
– Windows10 64bit
– electron 8.2.1
– 縦型のFullHDモニタ(1080px x 1920px)での使用を想定

# 1. BrowserWindowのオプション
Electronで制作したコンテンツをアプリケーションとして起動する際、
画面サイズやフルスクリーンなどの設定は、BrowserWindowにオプションを追加することで、指定することができます。
まずは、[electronのサイト](https://www.electronjs.org/docs/tutorial/first-app#electron-development-in-a-nutshell)からmain.jsの一

元記事を表示

自作インタプリタをセルフホスティングするまで

[Calcium](https://sites.google.com/site/calciumlanguage/) というインタプリタを作っています。今回、Calcium インタプリタを Calcium 言語自身で実装するまでを振り返りました。

# Calcium 言語とは

まずは Hello, World してみます。

“`json:hello.json
[
[1, [], “#”, “0_18”],
[1, [], “call”, null, [“var”, “print”], [“Hello, World!”]],
[1, [], “end”]
]
“`

Calcium 言語のコードは JSON 配列でできています。なぜ JSON でコードを記述しようとしたのかというと、字句解析が要らない(`JSON.parse()` 等すれば良い)ためです。また、おそらく Web 環境と相性がいいはずだと、なんとなく考えていました。データフォーマットとして記述できれば、何かに使えるのではないかと。(後で調べたところ、例えば Scratch の内部 VM は JSON で

元記事を表示

[JS記号プログラミング] 入門したのでFizzBuzzをやってみた

## JS記号プログラミングとは

こちらの記事で紹介されている、JavaScriptで有効な記号を使ってプログラミングを行うというものです。
[JS記号プログラミング入門](https://qiita.com/acid_chicken/items/eeb0b42a1ecbba0c49e3)

## ルール

ルールはこちらの記事で紹介されているルールに従います。
[JavaScriptで記号のみを用いてできるだけ短く英数字を出力する + 記号のみを用いてFizzBuzzをやってみる](https://qiita.com/acid_chicken/items/1c0d6881d7648578e34d)

> 手持ちのブラウザで動作する文法ならなんでも構わない。
外部のJavaScriptの参照はresourceスキームとchromeスキーム(拡張機能を除く)に限る。
次の文字のみを利用すること。
引用符で文字列を括って任意のStringオブジェクトを作成してはいけない。
0x20 – 0x21
!
0x22 – 0x26
” # $ % &
0x27 – 0x2f
‘ ( ) *

元記事を表示

Vue.js公式チュートリアルをゆっくり読んでいく3

# 前置き
[前回](https://qiita.com/jcong7495/items/e54376f4f77997d0a902)に引き続き、Vue.jsの[公式チュートリアル](https://jp.vuejs.org/v2/guide/index.html)をゆっくり読んでいきます。

前回は主にv-bind等のディレクティブに触れました。今回は、「コンポーネント」についてです。

# コンポーネントとは

コンポーネントとは一般的には「部品」のことですが、 チュートリアル上では、以下のように記載されています。

> Vue においては、「コンポーネント」は本質的にはあらかじめ定義されたオプションを持つ Vue インスタンスです。

ところで「Vueインスタンス」とは何だったでしょうか。VueインスタンスはVue関数で作成されるインスタンスで、ここまでで何度も下記コードにより生成してきました。

“`javascript
new Vue({ /* オプション */ });
“`

これは、ルートVueインスタンスと呼ばれるものを生成しており、全てのVueアプリケーションは、こ

元記事を表示

【JavaScript】URLをコピーするボタンを作る

# 概要
URLをコピーするボタンをJavaScriptで実装する。
実装はとっても簡単なのでサクッと書きます。

## 実装(html)

“`html

“`

## 実装(JavaScript)

“`javascript
function copyUrl() {
const element = document.createElement(‘input’);
element.value = location.href;
document.body.appendChild(element);
element.select();
document.execCommand(‘copy’);
document.body.removeChild(element);
}
“`

URLをコピーするにはテキストボックスを用意し、そこにURL(location.href)を設定します。
テキストボックスをDOMに追加した後、 `select()` で

元記事を表示

JSで関数を使う

今回はJSでの関数の宣言と使用法をまとめます。
そもそも関数とは、様々な処理を一つの処理としてまとめたものです。
そしてそのまとめたものを呼び出すことで中身の処理を行うというものです。
処理を関数としてまとめておくことでミスも防ぐことができるし、楽に処理の修正もできます。

##1 基本的な書き方

“`js
function 関数名(){
命令文;
}
“`

基本的にはこの書き方です。関数名は中でどんな処理をしているかわかりやすいような名前をつけるようにします。

##2 関数の呼び出し方

作成した関数を呼び出す際には

“`js
function 関数名(){
命令文;
}

関数名();
“`

のようにするだけで宣言した関数を呼び出すことが可能です。

##3 実際に使用してみる

今回は身長、体重からその人のBMIを取得する関数を作成します。

“`js
//calculationBMI関数にheightとweightの引数を受け取れるよう設定
function calculationBMI(height, weight){
//処理の結果をretu

元記事を表示

javascript var と const

#はじめに
去年、会社の若い人と、javascript のvar と const の違いについて話していた時に気が付いたことです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626779/189046c8-3564-f142-f76d-5c07d359b874.png)

ボタンをクリックすると、テキストボックスに数字が出るだけの簡単なjavascriptですが、下記のソースは動きません。

“`javascript