Skip to content

ESLintをプログラミングエディタで使う「Visual Studio Code編」

ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。

そこで今回は人気のプログラミングエディタ、Visual Studio CodeとESLintを組み合わせた使い方について紹介します。

プラグインについて

Visual Studio Codeでは多数のプラグインを提供しています。その中でもESLintで使うのはESLint – Visual Studio Marketplaceになります。これをVisual Studio Codeのプラグインインストーラーからインストールします。

ESLintについて

このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストールする場合は次のようにコマンドを打ちます。

プロジェクト以下でだけ使う場合には次のようになるでしょう。

ESLintの設定

幾つかの設定があります。今回は主なものについて紹介します。

  • eslint.autoFixOnSave
    保存時に自動的にエラーを修正します。有効で良いでしょう。
  • eslint.run
    いつのタイミングでESLintを実行するか設定します。デフォルトはonTypeでキー入力時に実行されます。
  • eslint.validate
    検証する言語です。デフォルトではJavaScript,JavaScriptReactとなっています。
  • eslint.nodePath
    Node.jsのパスを設定します。あらかじめパスが通っている場合は設定しなくとも大丈夫です。

ファイルを開く

後は .eslintrc を配置したJavaScriptプロジェクトを開くと自動的にESLintによるチェックが行われます。赤い波線があるところがチェックに引っかかった部分になります。そして、マウスオーバーで指摘事項が表示されます。

eslint.autoFixOnSave が有効になっていると保存時、自動的にエラーを修正してくれます(修正できないエラーもあります)。


基本的には指摘事項に合わせて修正を行っていくだけです。指摘のメッセージを見て修正していくのですが、Atomのように詳細ページへのリンクがないので分かりづらい指摘の時にどう修正すべきかが分からないかも知れません。

JavaScriptのコードをより高品質にしていくためにもLintツールの力を借りるのは良いことです。Visual Studio Codeを使っている方はぜひESLintを使ってみましょう。

ドロップダウンをリッチ化するライブラリまとめ

HTMLのドロップダウンリストはよく使われるUIコンポーネントです。しかし標準のデザインでは使い勝手が良いとは言えません。一つ選択する際にも長くスクロールしなければならなかったり、複数選択では途中で解除されてしまったりします。

そこで今回はドロップダウンリストを便利にしてくれるライブラリを紹介します。

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

フィルタリング機能、複数選択対応、選択済みアイテムのハイライト表示、グルーピングなど多機能にしてくれます。左寄せだけでなく、右寄せにもできます。

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

Dropdown Check List

複数選択のドロップダウンリストにチェックボックスが追加されます。常にキーを押しておく必要がなくなるので便利です。

Dropdown Check List

highrisehq/lufo: Tracks the most recent options chosen on a <select> element and displays them at the top of the list

最近選んだ項目を上に表示してくれます。地味な機能ですが、同じフォームを何度も使う機会がある場合に便利です。

highrisehq/lufo: Tracks the most recent options chosen on a <select> element and displays them at the top of the list

Fabianlindfors/multi.js: A user-friendly replacement for select boxes with multiple attribute enabled

複数選択可能なドロップダウンがかなり大きくなります。選択するとグレーアウトし、選択項目が右側に移る仕組みになっています。

Fabianlindfors/multi.js: A user-friendly replacement for select boxes with multiple attribute enabled

ddSlick – a jQuery plugin for custom drop down with images

ドロップダウンの項目にアイコンと説明書きが付けられます。かなり派手な表示になるので、用途は限られるかも知れませんが便利なライブラリです。

ddSlick – a jQuery plugin for custom drop down with images

matrushka/Dropp: A replacement for html dropdowns

クリックすると表示状態を維持してくれるようになり、複数選択もキーボードの補助なしでサポートされます。選択された項目はカンマ区切りで並べて表示されます。

matrushka/Dropp: A replacement for html dropdowns


使い勝手の悪い機能でもJavaScriptの力で一気に便利に変身させられます。業務においても使い勝手の悪いまま使うよりもよっぽど生産性が向上するでしょう。UIが大きく変わるので操作性に慣れる必要がありますが、一度慣れてしまえば手放せないライブラリになりそうです。

Web標準の技術でデスクトップアプリケーションを作るフレームワークまとめ

今やJavaScriptはあらゆる場所で動作するようになっています。Webブラウザはもちろん、サーバサイド、IoTなどの小さなデバイス機器など一度覚えてしまえば多くの環境におけるアプリケーション開発で利用できるでしょう。
そんなWeb技術を使ってデスクトップアプリケーションを開発できるのが今回紹介するフレームワークたちです。WindowsやmacOSで動くアプリケーションが作れれば業務で大いに役立つことでしょう。

alexflint/gallium: Build desktop applications in Go and HTML.

GoでHTMLファイルなどをラッピングし、デスクトップアプリケーションを開発できます。JavaScriptの中でGoが使える訳ではありません。メニューやタスクバーなどの処理をGoで記述できるようになっています。

alexflint/gallium: Build desktop applications in Go and HTML.

electron/electron: Build cross platform desktop apps with JavaScript, HTML, and CSS

この手のフレームワークとしては最も有名です。HTMLファイルを開き、そこからNode.jsの機能も呼び出せるようになっています。ローカルのファイルなども操作できます。レンダリングエンジンを内包するのでバイナリファイルのサイズが大きくなるのが欠点です。

electron/electron: Build cross platform desktop apps with JavaScript, HTML, and CSS

pojala/electrino: Desktop runtime for apps built on web technologies, using the system’s own web browser engine

Electronとほぼ変わりませんが、Webレンダリングエンジンを内包せず、OS標準のブラウザのものを使います。そのためバイナリファイルのサイズが小さくて済みます。その代わりにブラウザの互換性によって動作しない場合があります。

pojala/electrino: Desktop runtime for apps built on web technologies, using the system’s own web browser engine

NW.js

既存のWebサイトをアプリ化するのがとても簡単です。実行ファイルもElectronに比べるとシンプルな構成になっています。通常のWebサイトに加えてNode.jsの機能を呼び出すことも可能です。

NW.js

BrentNoorda/slfsrv: Create simple, cross-platform GUI applications, or wrap GUIs around command-line applications, using HTML/JS/CSS and your own browser.

Webサーバとして立ち上がり、ローカルのファイルを扱うためのAPIが幾つか追加されます。最終的にバイナリを生成することもできますので、ごく簡単なWebアプリケーションファイルで、その結果をファイル出力すると言った目的に使えそうです。

BrentNoorda/slfsrv: Create simple, cross-platform GUI applications, or wrap GUIs around command-line applications, using HTML/JS/CSS and your own browser.

jyapayne/Web2Executable: Uses NW.js to generate “native” apps for already existing web apps.

WebアプリをExeファイル化するソフトウェアです。特定のWebサイトをそのままラッピングし、同じドメインではないURLをクリックすると通常使っているブラウザに飛ばせるようになります。

jyapayne/Web2Executable: Uses NW.js to generate “native” apps for already existing web apps.

mozilla/qbrt: CLI to a Gecko desktop app runtime

コマンドラインでURLを渡してあげるだけでパッケージングされたアプリケーションが立ち上がります。エンジンがこの手のソフトウェアでよく使われるWebKitではなく、Geckoエンジンなのが一つの特徴です。コマンドラインなしで起動できるようにすることも可能です。

mozilla/qbrt: CLI to a Gecko desktop app runtime

mozilla/positron: a experimental, Electron-compatible runtime on top of Gecko

Electronとの互換性を重視しつつ、エンジンをGeckoにしたのが Positron です。Mozillaの下で開発されているので期待が持てるプロジェクトになっています。HTML5の実装状況もWebKitとGeckoで異なりますので、Geckoでしか実装されていないものを使う際には便利そうです。

mozilla/positron: a experimental, Electron-compatible runtime on top of Gecko


業務要件によってはWebブラウザではなくデスクトップアプリケーションでないと難しい場合もあるでしょう。そうした時にC#やSwiftなどに行くのでなく、JavaScriptでまとめて提供することで開発リソースの低減や管理の一本化が可能になります。ぜひお試しください。

WebAssemblyをRustで試す

Webでより高速なWebアプリケーションを実行するための仕組みとして注目されているのがWebAssemblyです。バイナリファイルであり、あらかじめコンパイルされていることでソースコードを簡単に見られてしまうJavaScriptの欠点を補うことができます。

現在、CやC++で書くことが多いWebAssemblyですが、Rustも着実に対応が進んでいます。ついに Rust単体でWebAssemblyをコンパイルする(Emscripten無し) にあるようにRustだけでWebAssembly向けにコンパイルができるようになりました。

今回はそちらのレビューになります。

RustはC/C++に比べると分かりやすい言語だと思います。型推測もあり、スクリプト言語のように書けます。今回はJavaScriptとの速度比較用に、以下のようなコードにしてみました。時間をかけるため、あえてループを繰り返しています。

これをコンパイルします。

その結果 main.wasm というファイルが生成されます。

呼び出し方

WebAssemblyは script タグで呼び出せる訳ではありません。Ajaxで取得する必要があります。以下の処理で sum という関数が使えるようになります。

sum 自体は Native Code と判断されます。実行は普通の関数と変わりません。

JavaScriptとの速度比較

JavaScriptでは以下のようなコードで試しました。

それぞれ3回繰り返した平均値です(単位は ms)。

回数 Rust JavaScript
100 190 513
1,000 165 3979
2,000 163 36593
5,000 172 337251
10,000 209 1427188

WebAssemblyの実行結果は回数に殆ど関係しませんでした。10,000回繰り返した時にも275/176/177msといった数字で、もっと回数の少ない時と変わりません。逆にJavaScriptは処理回数によってリニアに処理時間が延びている印象です。

WebAssemblyの欠点

現状のWebAssemblyはDOMやWeb API、GCに対応していません。そのため利用範囲が限られてしまうでしょう。将来的にはこれらのAPIにも対応が予定されています。


Rust自体は学習しやすい言語だと思います。それによって現状のWebを高速化できるので今後に期待した技術です。現状についてはJavaScriptから呼び出される補助的な技術ですが、将来的にはC/C++/Rustをはじめ、多くの言語でWebアプリケーションが開発できるようになるでしょう。

プログラミング言語 Rust

hifiveのUIコンポーネント紹介「タブ切り替え」

hifiveは業務システム開発用とあって、Bootstrapと組み合わせて使われることが多いのですが、Bootstrap側の制限が動作に影響を及ぼしてしまうことがあります。その一つとして今回はタブ切り替えを行うUIをhifive風に実装する方法を紹介します。

今回のデモはこちらにあります。

使い方

HTMLの記述

HTML側の記述は次のようになります。特徴としてはBootstrap標準ではidを使わなければならないところをクラスだけで指定しているところが異なります。

JavaScriptの記述

そしてJavaScriptはタブをクリックした際のイベントを取得して、コンテンツの表示/非表示を切り替えます。

さらにタブのグループ毎にコントローラを適用することで、各タブを独立させた状態で扱えるようになります。


この方法であればBootstrapのJavaScriptを使わずにタブ機能が実装できます。Bootstrapは便利なライブラリですが制約も多くなっていますので、カスタマイズしやすい形を目指すのであればこうした実装がお勧めです。

タブ切り替え

Webシステムの印刷が容易、多機能になるライブラリまとめ

Webに限りませんが、業務システムで常に問題になるのが印刷です。多くの場合、PDFを生成して印刷しますが、それもコードが難解で分かりづらくなってしまいます。

今回はWebシステムにおいて使える印刷ライブラリを紹介します。印刷機能をより便利に、使いやすいものにしてくれることでしょう。

Print.js

表示されているHTMLではなく、全く異なるコンテンツを印刷できます。PDFを印刷したり、画像一つだけを印刷すると言ったこともできます。テキストを追加することも可能です。

Print.js – Javascript library for HTML elements, PDF and image files printing.

Gutenberg

印刷をより細かく制御するためのCSSを提供しています。クラスを使って指定することで、文字の大きさや改ページなどを決まった場所で行えるようになります。より印刷に適した表示に整えられるはずです。

BafS/Gutenberg: Modern framework to print the web correctly.

jQuery-printPage-plugin

異なるコンテンツを印刷できるjQueryプラグインです。iframeにコンテンツを流し込んで、それを印刷する仕組みになっています。URLを指定してその内容を印刷することもできます。

posabsolute/jQuery-printPage-plugin: A plugin that print any linked pages without loading a popup

PrettyPrintGmail

Gmailの印刷をスマートにしてくれます。ヘッダーのコンテンツが削除されるので印刷スペースが増えたり、カラー印刷になったりすることで余計なインク消費を防げるようになります。

ShivanKaul/PrettyPrintGmail: 🖨 Pretty print emails. Chrome Extension.

Inky-Linky

印刷時にリンクの上にQRコードを追加してくれるライブラリです。紙ではリンクが使えませんので、URLを手入力するのではなく、QRコードから行えるようになります。

rooreynolds/inky-linky: Inky-Linky: a bookmarklet that turns links on a web page into QR Codes in the margins, ready for printing.

IE Print Protector

レガシーなIEにおいて印刷機能をサポートしてくれます。例えばsectionタグのようなIEが使えないタグを適切にサポートすることで印刷が乱れるのを防いでくれます。

Google Code Archive – Long-term storage for Google Code Project Hosting.


これらのライブラリを使えばちょっとした画面の印刷が手軽になります。余計な情報がたくさん表示されていたり、逆に必要な情報が入らなかったりするのを防げるようになるでしょう。引いては紙資源の節約にもつながるはずです。

Web/HTML5勉強会 in 横浜を開催しました

11月20日、横浜のアトラシアン社にてWeb/HTML5勉強会 in 横浜を開催しました。横浜界隈でHTML5やインターネットサービスにコミットしている各社が揃い、その取り組みを発表するものです。今回は以下の4社に登壇いただきました(発表順)。

今日から始めるVISUAL TESTING FOR HTML5 by 新日鉄住金ソリューションズhifiveチーム

hifiveチームの石川はビジュアルテスティングや、その周辺サービスなどについて発表しました。ビジュアルテスティングは画面のスクリーンショットを使って、正しいとした結果と差異があるかどうかでテストの成否を決めるものです。完全一致のみ、その差異の率を指定するもの、さらに一部を除外などといった検出法があります。

周辺ツールも増えており、クラウドサービスも登場しています。自社でシステムを立ち上げて自由度高くビジュアルテスティングを行うことも、クラウドサービスで素早く導入することもできるようになっています。

エンタープライズでのチーム開発環境の秘訣 by アトラシアン

アトラシアンの長沢さんからは大規模プロジェクトにおける情報HUBの重要性が紹介されました。アトラシアンの各種サービスはカンバンを中心に情報が集まるようになっています。ドキュメントからタスクを起こし、ソースコードのコミットやデプロイによって自動的にステータスが変わるようになっています。

メールやチャットなど様々なコミュニケーションツールがある中で、情報HUBによって一元管理されるのが必須になっています。かつ、各システムが自動連携することによって何度も繰り返し入力する手間が省けたり、更新洩れが防げるようになります。

HTML5とIoT by カヤック

カヤックの君塚さんからはカヤック社でのIoT事例の紹介がありました。IoT案件では動作するブラウザが限られたり、カヤック社の案件ではキャンペーン系の短い期間度動作すればいいものが多いため、先進的な機能を積極的に取り入れられているそうです。

プレゼンではスマートフォンを動かすことでサーボモーターが動くデモが紹介されていました。PCとArduinoを連携させ、HTML5で受け取ったスマートフォンの動きをArduinoに伝えています。モノが動くというのはインパクトが強く、参加者の目を引いていました。

継続する自動テスト by ヒューマンクレスト

ヒューマンクレスト社の浅黄さんからはデバイステストについて紹介がありました。ブラウザのテストは自動化が進められていますが、スマートフォンデバイスにおいては実機が必要なのが現状で、社内に百台以上のデバイスが並べられているそうです。

ブラウザレベルのUIに関係するテストは作成、運用コストが高いテストであり、網羅的に行うのは難しいと言います。ユニットテストなどをきちんと作り込んだ上で、必要な部分に対してのみ適用することで効率的なテスト運用が実現できるとのことです。


この後、参加者の皆さん交えて懇親会が行われました。今回は初回ということもあり、手探り感の強かったイベントでしたが、参加者は様々なナレッジが吸収できたと好評いただきました。横浜開催となると、会社帰りの参加が可能になります。興味がある方は hifive の connpassにてグループ参加しておいてもらえると、新しいイベント開催時にメールが送信されます。今後も繰り返し開催していきますので、ぜひご参加ください。

hifive – connpass