技術とか戦略とか

SIerで証券レガシーシステムを8年いじってからSESに転職した普通の文系SEによる技術ブログ。

JavaScript

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

JavaScript:動的型付けとは

JavaやC#に慣れている人だとJavaScriptの動的型付けの概念に戸惑うと思うので、この記事では動的型付けについて簡単にまとめてみます。 ------------------------- JavaScriptには、下記の7つのプリミティブ型(ECMAScript 2015の場合)とObject型が存在し…

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

Node.jsをインストールすることで、JavaScriptをCUIで実行することができるようになります。JavaScriptが得意なエンジニアがサーバーサイドプログラミングに関わる場合によく使われるようです。 今回は、WindowsOSのPCにインストールし、実行確認をする手順…

JavaScriptでHelloWorld(ブラウザ上に文字表示)

JavaScriptはCUIでも実行できますが、GUIで使うケースの方が多いので、GUIでHelloWorldを書いてみました。JavaScriptのHelloWorldはログに出力したりポップアップ表示したりするものが多いですが、ブラウザ上に出力した方がJavaScriptっぽい気がするので、ブ…

WindowsバッチでJavaScriptの関数の結果を標準出力で受け取る

表題の通りですが、WindowsバッチでJavaScriptの関数の結果を標準出力で受け取ることができます。標準出力なので、パイプやリダイレクトも可能です。 JavaScriptで書かれた処理を自動実行したい場合や、JavaScriptのちょっとした仕様調査を行いたい場合等に…

ターン制・COMと1対1で対戦するブラウザゲームのサンプル

Javascriptのゲームエンジンである「enchant.js」で簡単なブラウザゲームをサンプルで作ってみましたので、ソースコードを公開します。ターン制で、COMと1対1で対戦するタイプのゲームのサンプルです。新しいゲームを作る時の雛形にする等の形でお役に立て…

サクラエディタ:JavaScriptでマクロ実装(サンプル:パスワード自動生成)

最近知ったのですが、サクラエディタのマクロはJavaScriptでも実装できるのですね。 サクラエディタ マクロを開発してみる http://totech.hateblo.jp/entry/2014/03/11/125058 キーマクロでは実現できないことも、JavaScriptなら実現できるということもあり…