Skip to content

JavaScriptで静的型付けを実現できる代替言語まとめ

JavaScriptを使っていて常に悩みのタネなのが変数の型付けです。スクリプト言語に慣れた方であれば気にならないかも知れませんが、サーバサイドやアプリ開発でコンパイルするのに慣れているプログラマーにとっては書いていて不安に感じる点もあるでしょう。

そこで今回はJavaScriptの代替言語の中でも静的型付けをサポートするものを紹介します。

Haxe

HaxeはJavaScriptだけでなくJava、C++、PHP、C#、Python、ActionScript3などに変換できます。例えば次のようなコードになります。

開発対象としてはiOS/Androidを含め、サーバサイドまで幅広く対応します。

Home – Haxe – The Cross-platform Toolkit

elm

elmで書く場合、HTML/JavaScript/CSSを直接書くことはできません。すべてelm上で提供されるので、Webアプリケーション全体の記述ができます。ベースになっているのはHaskellで強力な静的型付けが特徴になっています。

コード例ですが、これで表示まで含めてサポートされます。

home

Kotlin

主にAndroidアプリを開発するのに用いられるKotlinですが、JavaScriptとして変換もできます。Androidで動作するレベルでの静的型付けがWeb上でも可能となっています。

Kotlinの開発元はJetBrainsとなっています。

Kotlin Programming Language

RapydScript

RapydScriptはPythonにインスパイアされたaltJSになります。型を定義せずに記述もできますが、定義することで間違った使い方をした際にエラーを起こすこともできます。

Pythonの書き方に慣れた方はCoffeeScriptよりも手軽に使えるかも知れません。

RapydScript | Pythonic JavaScript that doesn't suck

Flow

既存のコードに対して型定義を行い、ビルド時に除去することによって既存のコードに影響を与えずに型付け機能だけを追加できます。

開発する言語自体は変えずに追加できるのが便利です。

Flow: A Static Type Checker for JavaScript

TypeScript

Microsoftが開発し、Googleの社内標準言語にも取り入れられたaltJSです。Visual Studio Codeとの親和性も高く、入力補完機能なども便利に使えます。より大規模な開発に向いています。

ECMAScript2017の先進的な機能も取り込まれているので、より新しいJavaScriptの機能を使っていきたいという方にもぴったりです。

TypeScript – JavaScript that scales.


業務システムであったり、エンタープライズ寄りになればなるほど、開発規模が大きくなって参加するプログラマも多くなります。そうした中ではスクリプト言語の変数の型が決まっていない開発は混乱をきたすこともあります。

今回紹介したような言語を使ってWebシステム開発を効率化してください。

banner_02

チャートライブラリの使い方(5)「動的に系列データを追加する」

hifiveのチャートライブラリの紹介です。今回は動的に系列データを追加する方法を紹介します。

現在、動的な系列データの追加は積み上げグラフの場合のみサポートされています。実際の動作は下の画像のようになります。

サンプルはこちらのURL にて確認できます。ベースはチャートライブラリの使い方(1)「基本編」 | hifive開発者ブログのグラフです。

ボタンを追加

まずHTMLにボタンを追加します。

追加イベントを作成

追加時の処理ですが、これはシリーズデータを作成(配列)し、チャートコントローラの addSeries を実行します。配列であることに注意してください。

色の生成処理を追加

これはおまけですが、グラフの系列データの色をランダムで生成するようにしました。ランダムなカラーコードを生成 – Qiitaを参考にさせてもらいました。

色コードを系列データの名前に適用しています。また、fillColor(塗りつぶしの色)に対しても別なランダムな色を適用しています。塗りつぶしについてはチャートライブラリの使い方(2)「データを塗りつぶす」 | hifive開発者ブログを参考にしてください。


これで完了です。後はボタンを押すだけで系列データが生成されてグラフが自動的に描画更新されます。

データを非同期で読み込んで描画する際にも利用できるでしょう。サンプルを参考の上、実装してみてください。

banner_02

チャートライブラリの使い方(4)「積み上げグラフを作る」

hifiveのチャートグラフの使い方です。今回は チャートライブラリの使い方(2)「データを塗りつぶす」 | hifive開発者ブログチャートライブラリの使い方(3)「データを追加する」 | hifive開発者ブログ を組み合わせて積み上げグラフを作ってみたいと思います。

サンプルはこちらになります。表示すると次のようなグラフになります。

系列データを追加する

これは3回の時と同じですが、今回はさらに塗りつぶしの色と値の範囲を指定するようにしました。

それに合わせて系列データを作成する _createNewSeries を変更します。

type を stacked_line とすることで積み上げグラフになります。さらにfillColorを指定することで塗りつぶす色が指定できます。


グラフを見ると分かりますが、積み上げグラフを配列で指定した前のデータの上に積み上げられます。これが折れ線グラフ(typeをlineに指定)にした場合にはデータが重なります。

このように折れ線グラフと積み上げグラフを必要に応じて切り替えられるようになっています。

サンプルはこちらにあります。チャートライブラリを使いこなしてユーザビリティの高い業務システムを構築してください。

banner_02

WebAssemblyとは何か?

最近にわかに注目を集め始めているのがWebAssemblyと呼ばれる技術です。アセンブリという単語でも分かる通り、Web上でコンパイルされたプログラムを使える技術になります。

今回はそんなWebAssemblyの紹介と、利点などについて紹介します。

コンパイルすればコードの隠蔽化が可能に

JavaScriptはスクリプト言語であり、良くも悪くもオープンな存在でした。そのため、Webブラウザで読み込まれたコードは誰でも閲覧が可能で、真似できました。それによってセキュリティ上の問題が出ることもありますが、JavaScriptが現在ほど広く使われるようになった一因とも言えるでしょう。

セキュリティ上、公開を避けたいキー系のデータについて、WebAssemblyによって隠蔽化ができるようになります。オープンという制約があるために、これまでサーバサイドでしか処理できなかったような内容がWebブラウザ側で実現できるようになります。さらにJavaScriptの使われる場面を増やせることでしょう。

Webブラウザではできなかったことを可能に

元々がPNaCl(とasm.js。後述)をベースにしていることもあり、Webブラウザ上でネイティブコードを安全に実行できるようになります。Webブラウザでは難しかった処理をこなすための存在です。

JavaアプレットやFlash、Silverlightといった技術が廃れたことで、Webブラウザ上でネイティブコードを動かす技術がなくなっています。HTML5もAPIが拡充されていますが、それでも足りない機能は多数あります。WebAssemblyはその一助になるでしょう。

転送量の低減

コンパイルすることによってスクリプトファイルに比べてサイズは低減できることが多いです。転送量が減るのは表示の高速化であったり、省メモリ化にも貢献してくれるでしょう。

最近のWebアプリケーションはどんどん肥大化する傾向にありますので、JavaScriptが1MBを超えることもあります。バイナリ化によってサイズが低減するのはユーザにとって大きなメリットになります。

開発言語について

現在のところ、C/C++からのコンパイルをサポートするのが目標となっています。さらにMozillaはRustでWebAssemblyをサポートすることを表明しています(1.14からサポート)。

asm.jsとの違い

Web上でのアプリケーション動作を高速化するために生み出された技術としてasm.jsが知られています。JavaScriptのサブセット版として開発されています。asm.jsでは標準のJavaScriptに比べて1.5倍程度高速化します。WebAssemblyではまだそのレベルまで達していないようですが、今後はパフォーマンスは向上するでしょう。

Webブラウザのサポート状況

2017年3月にリリースされたFirefox 52がWebAssemblyをサポートしました。さらにChromeやEdgeでも動作します(Chrome Canaryであったり、開発用のフラグを立てる必要があります)。WebAssemblyの開発にはAppleも参加していますので、今後ブラウザすべてで標準的にサポートされていくようになるでしょう。


今後WebAssemblyは標準になっていくことを考えると、C/C++によるWebブラウザ向けのアプリ開発も盛んになっていくことでしょう。もちろん現在は素のC/C++ですが、今後フレームワークも多数出てくるはずです。それによって開発が効率化すれば業務システム開発でも使えるようになるでしょう。

banner_02

Webアプリケーション用 フリーの脆弱性診断ツールまとめ

脆弱性診断は色々な分類がありますが、今回はWebアプリケーション用でフリーの脆弱性ツールをまとめてみました。

尚、本記事内にあるツールはサイトを攻撃するツールとしても利用出来てしまうため、利用にあたっては許可を得ていないサイトへの接続を行わないように注意して下さい。

Javaベースの脆弱性スキャナ OWASP ZAP

Javaベースで開発されたオープンソースのWebアプリケーション脆弱性検査ツールです。利用は無料です。

OWASP ZAP
OWASP ZAP

プロキシの自動スキャン、動的・静的スキャン、スパイダーなど多くの診断が可能です。 チュートリアルビデオもまとまっていて、その内容も初心者からセキュリティ専門家までカバーしています。

最初に導入する人が迷わないような仕組みと、UIにかなり力を入れているようで、ビデオ説明からもその部分がうかがえます。Ver2.4からメニューや操作部分などの日本語化も進んでいます。 動作環境もWindows/Mac/Linuxがサポートされていますが、JDK環境が必要になります。Dockerでのインストールもサポートしているようです。

Nessusから派生した脆弱性スキャナ OpenVAS

かつてULinuxベースで開発されていたセキュリティスキャナ「Nessus」から派生したツールです。脆弱性データベースも日々更新されているようで、安心感が持てます。
Greebone Security AssistantというWebベースのGUIがあるので、利用はすぐできます。

OpenVAS
OpenVAS

参考までにセットアップまでの情報を載せておきます。

Step 1: Atomicorp のリポジトリを設定します。

$ wget -q -O - http://www.atomicorp.com/installers/atomic |sh

Step 2: OpenVASのクイックインストールコマンド

$ yum upgrade
$ yum install openvas
$ openvas-setup

Step 3: OpenVAS マネージャを起動します

service openvas-manager start

ブラウザで次のURLを開きます。

https://localhost:9392/

Perl製辞書ベースの脆弱性ツール nikto

Niktoは辞書ベースで脆弱性診断を行うツールとなっています。 辞書DBは、あまり頻繁に更新されないようですが、それでも一通りチェックするには十分だとおもいます。

Perlベースですので、Linux、Mac、Windowsでの利用が可能です。コマンドラインツールですが、利用方法も簡単で、出力結果もテキストベース、CSV, HTML, XMLなど実用十分です。 必要であれば、HTMLのカスタマイズも可能です。

以下は、参考までにローカル環境でテストしてみた結果です。

$ perl nikto.pl -h http://localhost

- Nikto v2.1.6
---------------------------------------------------------------------------
+ Target IP:          xxx.xxx.xxx.xxx
+ Target Hostname:    localhost
+ Target Port:        80
+ Start Time:         2015-07-29 18:12:37 (GMT9)
---------------------------------------------------------------------------
+ Server: Apache/2.4.6 (CentOS) PHP/5.6.10
+ Retrieved x-powered-by header: PHP/5.6.10
:::
::: 脆弱性対象があれば項目が表示されます・・・
:::
+ 9159 requests: 0 error(s) and 36 item(s) reported on remote host
+ End Time:           2015-07-29 18:25:26 (GMT9) (769 seconds)
---------------------------------------------------------------------------
+ 1 host(s) tested

Googleが開発した脆弱性ツール skipfish

skipfishは、辞書ベースのWebアプリケーションの脆弱性ツールです。 Linux, FreeBSD, MacOS X, and Windows (Cygwin)環境をサポートしています。

プロジェクトページの説明だと少々不親切ですので、簡単にCentOS環境でのセットアップから起動までを紹介しておきます。

1. 事前準備

libidn と libpcre3が必要とのことですので、予めインストールしておきましょう。

$ yum install openssl-devel
$ yum install pcre-devel
$ yum install libidn-devel

skipfishのビルド

次にプロジェクトページからskipfishをダウンロードして解凍し、makeで実行ファイルを作成します。

$ tar xvzf skipfish-2.10b.tgz
$ cd skipfish-2.10b
$ make

3. コマンド実行

次のコマンドは、-S オプションで辞書にcomplete.wlを利用し、-W- オプションで新しく辞書ファイルを作成しない場合です。

$ ./skipfish -S dictionaries/complete.wl -W- -o <出力ディレクトリ> <チェックするURL>

実行すると出力ディレクトリにHTMLで結果が生成されます。以下は実行結果のサンプルHTMLです。

skipfish
skipfish

辞書ファイルも最初に幾つか用意されていますので、すぐに試す事が可能です。こちらも非常に簡単に脆弱性の確認ができますし、CLIベースですのでプロジェクトのCIに組み込んでも良さそうです。

ウェブサーバのアクセスログから攻撃を検出 iLogScanner

IPA(独立行政法人情報処理推進機構)から提供されているツールで、Webのアクセスログから攻撃を検知するツールです。オンライン版はJavaアプレット、オフライン版はJavaSDKが必要です。サポート対象はWindowsのみとなっておりますが、MacOSX 10.10.4 でも動作確認ができました。

以下は、オフライン版の画面です。

iLogScannerオフライン版
iLogScannerオフライン版

実行すると検知結果が表示されます。

iLogScannerの検知結果
iLogScannerの検知結果

アクセスログの痕跡を元に攻撃を検知するアプローチで、運用時の未知のアクセスにも、いち早く攻撃を確認する指標になると思います。運用後に大変有効なツールになるのではないでしょうか。

脆弱性体験学習ツール AppGoat

最後はセキュリティの学習ツールの紹介です。IPA(独立行政法人情報処理推進機構)から提供されている、学習体験用のWebアプリです。Windowsアプリとなっていて、実行するとローカルサーバが立ち上がります。

基本的な脆弱性体験やその対策が学べるのはもちろんですが、上記でご紹介した脆弱性ツールの確認としても使えると思います。

最後に

開発するWebサイトは、悪意のあるアタッカーからの攻撃で常に危険にさらされています。その攻撃手法も複雑化していますが、脆弱性ツールもそれに合わせて進歩していますので定期的な実行を行っておくと安全性を保てるでしょう。

日頃から脆弱性に対して注意払うことが、Webアプリケーションを少しでも堅牢にすることに繋がります。ぜひ記事中で取り上げたツールを使い、Webサーバのセキュリティ診断を行ってみてください。

banner_02

チャートライブラリの使い方(3)「データを追加する」

前回のグラフの基本形を使って、今回はデータを追加する方法を紹介します。

実際に描画すると次のようになります。コードはこちらにあります。

3つのデータ系列を表示しています。

シリーズデータを追加する

元々シリーズは配列で与えていましたが、これを追加します。

引数としてグラフの色を変えるようにしています。 _createNewSeries もこれに合わせて変更します。

データ系列の名前をユニークにする

大事なのは、nameプロパティをユニークにしておくということです。今回はnameプロパティに指定した色名を加えています。

後はcolorプロパティに対して色を指定するだけです。

これだけで複数のデータをグラフに描画できるようになります。


nameプロパティをユニークにすることさえ注意すればhifiveのチャートライブラリを簡単に使いこなせるでしょう。ぜひサンプルで確認してください。

banner_02

チャートライブラリの使い方(2)「データを塗りつぶす」

前回のデモをベースに今回はデータに塗りつぶし処理を加えてみたいと思います。累積グラフなどを作る際に利用できるでしょう。

サンプルはこちらにあります。実行した際の画像は下記の通りです。

基本になるグラフは前回のものになります。今回はそれに加えた変更ポイントについて紹介します。

系列データの種類を変更

系列データを line から stacked_line に変更します。これでデータ範囲が塗りつぶされます。

fillColorプロパティを追加

fillColorに対して色設定(色名またはRGB)を指定します。これで塗りつぶす色が設定されます。

修正後は次のようになります。

これだけで塗りつぶされたグラフになります。


とても簡単な指定でグラフの種類を変更できます。ぜひサンプルで確認してください。

banner_02