技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

JavaScript

TypeScript+Node.jsのHelloWorld

TypeScriptは、JavaScriptを拡張して作られた言語です。 JavaScriptを大規模開発で採用する場合、実行時のエラーが頻発することで生産性や品質が悪化する恐れがあります。JavaScriptのこの問題を、ビルド時のエラー判定を強化することで解決した言語が、Type…

ReactのHelloWorld

フロントエンドのSPA(シングルページアプリケーション)向けのJavaScriptのライブラリであるReactを使用して、HelloWorldを書いてみました。Reactで何かしらの記述の挙動を確認したい時のベースとして使いやすいようにしています。 今回は、下準備無しで動…

Vue.js:「算出プロパティ(computed) vs 監視プロパティ(watch)」を実際に書いてみた

Vue.jsの公式ドキュメントにて、算出プロパティ(computed) と 監視プロパティ(watch) の違いについて触れられています(https://jp.vuejs.org/v2/guide/computed.html)。しかし、例となるコードはユーザー入力を受け付けないごく簡単な例であるため、comput…

JavaScript:String型かNumber型かわからない変数をNumber型に置き換えるコード

JavaScriptは動的型付けを採用した言語であるため、実行するまで変数の型が分からない状態になります。この特徴により、数値計算を行う時を以下のような問題を引き起こすことがあります。 ・加算を行うつもりが文字列結合になってしまう (例えば、100 + "10…

Vue.js:プルダウンの選択値を動的に変更する

画面の各項目で設定された値に応じて、プルダウンの選択値(初期値)を動的に変更したい場合があります。 Vue.jsの場合、これは、値の状態を監視するウォッチャー(watch)と双方向データバインディング(v-model)を併用することで実現できます。画面の各項…

JavaScript:二次元配列(多次元配列)になる場合の長さの判定

JavaScriptで多次元配列を作るためにはpushを使用します。また、配列の長さを調べるにはArray.lengthを使用します。 ここで、pushの方法により、Array.lengthの使い方が異なってくるので、注意が必要です。(使い方を間違えると、undefinedが出力されます) …

JavaScript:async・awaitの例外処理

async・awaitで例外処理を行う場合、メソッドチェーンで受け取る方法と、try-catchで受け取る方法があります。これらの方法について、紹介していこうと思います。 サンプルコードはNode.jsで実行しています。 ---- awaitで呼び出される関数では、Promiseオブ…

JSONを整形するNode.jsのサンプルコード

JSONフォーマットはプログラムで読み込むことができるデータ構造であり、人間が読むのにも適しています。しかし、人間が読む場合、適切にインデントが入っていないと読みにくいです。 そこで、JSONフォーマットを整形するサンプルコードを紹介します。このサ…

JavaScript:未宣言・var・letの変数の挙動の違い

JavaScriptにおける変数の宣言方法は、constを除くと以下の4つがあります。 ・未宣言 var1 = "var1"; のように、値が代入された時点で変数が宣言されたものとみなされる。 ・var var var1; のように、var句により変数を宣言する。 ・var(巻き上げ) var1 =…

HTMLのclassを複数指定する

小ネタですが、HTMLのclassはスペース区切りで複数指定できます。cssで細かく部品化している場合に、複数指定すると便利です。以下、サンプルです。 【サンプルコード】・sample.html<html lang="ja"><head> <meta charset="UTF-8"> <title>sample</title> <style> .add-border { border: 3px solid #000; } .add-color { backgr</style></meta></head></html>…

JavaScript:オブジェクト型の定数値にはObject.freeze()を使う

プリミティブ型(Number型やString型等)の変数は、constで定義することで変更不可にできます。これを利用して、定数値を定義することができます。 【サンプルコード】const hoge = 1;hoge = 2;console.log(hoge); 【ChromeのデベロッパーツールのConsoleで…

Vue.js:componentでpropsを使って属性を受け取る

Vue.jsでは、componentを使用して独自タグを定義することができます。これは部品化に役立ちます。 独自タグではslotタグにより値を受け取ることができますが、propsプロパティを用いて属性値を受け取ることもできます。属性値はテンプレート構文で使用できる…

ChromeからJavaScriptを実行する

Chromeのデベロッパーツールの機能の一つであるConsoleでは、任意のJavaScriptを実行することができます。コマンドプロンプトでDOSコマンドを実行するような感覚でJavaScriptを実行することができるので、JavaScriptの仕様のちょっとした確認を行いたい場合…

Vue.js:componentで独自タグを定義する

Vue.jsの重要な機能の一つとして、componentという機能が存在します。これは部品化に役立ちます。 この機能を利用することで、独自にタグを定義できるようになり、冗長な記述を減らすことができます。例えば、今回はサンプルコードとしてsample1.htmlとsampl…

Vue.jsに出てくるコロン(v-bind)とアットマーク(v-on)について

Vue.jsのコードに時折コロン(:)やアットマーク(@)が出てきて戸惑う人がいるかもしれませんが、これは省略記法です。それぞれ、v-bind、v-onを指しています。 Vueオブジェクトの変数や関数をHTML側から参照するために、v-bindやv-onを使用します。 以下、…

JavaScriptのasync・awaitのサンプルコード

JavaScriptでは、通常は非同期処理となり、重い関数が終わるまで待つということをせず、次の関数に先に制御が移ってしまいます。そのため、API呼び出しやIO(ファイルの読み書きやDBの読み書き)を伴う関数を呼び出した後に、その結果を元に次の処理を行う、…

Chromeの拡張機能を使用した文字列置換

以前の記事で、URLからJavaScriptを読みこむことでブラウザに表示される文字の変換を試みました。しかし、URLから読み込ませる方法だと、大量の文字列置換はできません。 そこで、今回はChromeの拡張機能を使用した文字列置換を試みました。以下、サンプルコ…

JavaScript:thisの挙動と用途

JavaScriptの初心者を悩ます文法の一つとして、thisが挙げられます。thisが何を指しているのか、どのような場合に使われるのか、なかなかイメージが難しいと思います。 この記事では、その疑問について答えていきたいと思います。 今回の記事では、サンプル…

JavaScript:Strictモードとは

JavaScriptには「Strictモード」と呼ばれるモードが用意されています。Strictモードにすることで、バグに気付かずに実行が継続されるのを防ぎやすくなり、高速化することもあります。 詳しくはMozillaのページ(https://developer.mozilla.org/ja/docs/Web/J…

ブラウザで表示される文字列をJavaScriptのURLを読ませて置換する

ブラウザで表示される文字列について、お気に入りからJavaScriptを読みこませることで置換することができます。例えば、強調表示したいような場合にこれを活用できます。 例として、mozillaのJavaScriptのページを強調表示してみましょう。https://developer…

JavaScript:オブジェクトの中身をコピーする方法(deepcopyライブラリ使用)

JavaScriptにもJavaやC#と同じように参照型変数が存在し、オブジェクトや配列、関数が参照型変数です。そして、JavaやC#と同じように、単純に「=」で代入するだけでは参照先(オブジェクトのメモリ領域を示すポインタ)しかコピーできず、コピー先の変更がコ…

npmで公開されているパッケージをローカルに落とさず使用する

npmで公開されているパッケージは、UNPKG(https://unpkg.com/)で公開されています。UNPKGで公開されているパッケージをscriptタグ等で指定することで、ローカルにライブラリを落とすことなくライブラリを使用することができるようになります。インターネッ…

Jestを試してみた

Jestとは、JavaScriptのテスト用のフレームワークです。ここでは、Node.jsがインストールされていることを前提に、Jestを試してみます。公式ドキュメントであるGetting Started(https://jestjs.io/docs/ja/getting-started)を参考に、説明が割愛されている…

JSONフォーマットとは

JSONとは、データ構造を記述するフォーマットの一種です。CSV等とは異なり、階層構造を記述することができます。階層構造を表現できるフォーマットとしてはXMLも挙げられますが、JSONフォーマットはXMLよりも簡易的に記述できる、JavaScriptとの親和性が高い…

Vue.jsインストール手順とHelloWorld(Windows、2020年12月)

Vue.jsとはJavaScriptのGUIのフレームワークです。MVVM(Model-View-ViewModel)を採用しており、画面(View)と内部状態(Model)を分離して画面の制約にとらわれないようにすることで、画面で入力された内容をリアルタイムに内部状態に反映させたり、内部状態の…

JavaScript:ブラウザからローカルのテキストファイルの入出

JavaScriptをブラウザから使用する場合、セキュリティによりローカルへのテキストファイルへのアクセスは制限されています。その制約の中で、下記の方法を使用すれば、ローカルのテキストファイルへの入出力が可能になります。 ・入力 テキストファイルをJav…

JavaScript:inputの入力可能文字を制限する

HTMLのinputタグ(テキストボックス)では、onInput属性により文字が入力される度にJavaScriptの処理を実行し、入力された文字を取得したり編集したりすることができます。これを利用して、inputの入力可能文字を任意に制限することができます。入力の時点で…

JavaScript:Node.jsから対話式の外部プログラムを実行(別ウインドウ立ち上げ)

Node.jsでは、"child_process"を呼び出すことで、標準出力や標準エラー出力を受け取ることができます。しかし、この実行方法では、別ウインドウでプログラムを実行することができません。具体的には、対話式のプログラムを実行するような場合に困ることにな…

JavaScript:小数点以下の丸め誤差に対応する

JavaScriptでは数値リテラルがNumber型(浮動小数点型)として扱われるため、何も考えずに小数点以下の計算を行うと誤差が発生します。この問題への対処法は他の記事でも紹介していますが、大きく分けて以下の2つが存在します。1.数値項目の単位を変えた…

JavaScript:オブジェクト指向らしい記述をする

JavaScriptではオブジェクト指向がサポートされています。JavaやC#に触れている方であればお馴染みだと思いますが、オブジェクト指向を用いることで規模が大きいプログラムを作る時の生産性が向上します。 以下では、インスタンス生成と、ポリモーフィズム(…