エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

gulpでtypescriptのコンパイル

きっかけ

職場には既にgulpがあったけど、一から入れたことがないので、勉強がてら試しにやってみた。

gulpとは?

CIのためのビルドツール。
処理は、タスク単位で書くことができる。
特徴は、ストリームを使ったメソッドチェーン的な記述で処理を書けるところ。
作ったタスクをつなげて、ビルドさせる。

似たツールにGruntというものがあるらしいが、利用したことがないので、ここでは言及しない。
また、gulpの基本は抑えているものとし、詳細な説明は省く。
気が向いたらまとめ記事を投稿予定。。。

準備

実施環境

ProductName: Mac OS X
ProductVersion: 10.12.3
BuildVersion: 16D32

npm

homebrewでインストール
コマンドは以下。nodeと一緒にインストールすれば、npmもインストールされるはず。

brew install node

使い方は下記を参照。

suzaku-tec.hatenadiary.jp

インストールが終わったら、プロジェクトを作る。
※後の話は、プロジェクトがある前提で進める

作り方は、以下。
リンク先の方が詳しく書いた気がするので、合わせてそちらも確認して貰えれば。

npm init -y

typescript

npm install typescript -g

別にグローバル環境である必要はないが、プロジェクトごとに使える/使えないのは、面倒なので、グローバルにインストールすることをおすすめする。
インストール完了後、tsconfig.jsonを作成する。
package.jsonがあるフォルダで、下記のコマンドを実行

tsc --init

gulp

npm install -D gulp

グローバルに入れるより、プロジェクト個別で管理したほうがよい気がしたので、プロジェクト単位でインストール

その他にも、利用すべきgulpプラグインがあったので、下記のものをインストールする。

  • gulp-typescript
    typescriptのインストールに必要
  • gulp-concat
    一つのjsファイルにまとめるために必要
  • require-dir
    ディレクトリ参照に必要

環境

プロジェクト直下のディレクトリ構成。
※node_moduleディレクトリは、除いてある。

├── build
│   └── gulpfile.js
├── gulpfile.js
├── index.css
├── index.html
├── index.js
├── package.json
├── path.json
├── src
│   └── index.ts
└── tsconfig.json

ここでの仕組み

gulpファイルを多段構成にしてビルドさせている。
なぜビルドファイルを分けたかと言うと、ビルド内容は時間が経つにつれて長大になりやすいので、目的に応じて分けたほうがいいと思ったから。
ビルドには./build/gulpfile.jsを使っている。
./gulpfile.jsonは、参照するgulpfileのパスを保持するだけにしている。

gulpファイルを直接指定する方法もある。
下記のような指定が可能

gulp --gulpfile ./build/gulpfile.js

./gulpfile.json

var requireDir = require('require-dir');

requireDir('./build', {
  recurse: true
});

参照するgulpfile.jsがあるフォルダを、require-dirで参照しているだけ。

./build/gulpfile.js

var gulp = require("gulp");
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');

gulp.task("build", () => {
  var pj = typescript.createProject("./tsconfig.json");

  gulp.src([
      "./src/**/*.ts",
      "!./node_modules/**"
    ])
    .pipe(pj())
    .js
    .pipe(concat("index.js"))
    .pipe(gulp.dest("./"));
});

肝になっているのは、gulp.src~以降の箇所。
ここで、ビルドまでの一連の処理を実行している。
src()では、配列の一番目に対象にするファイルを正規表現で抽出している。
その次の"!./node_modules/**"で、npmで入れたファイルを対象外にしている。
そして、それで抽出できたものを、tsconfig.jsonを元にコンパイルしている。
それで終わったら、index.jsに集約させて、プロジェクトトップに出力させて終了する。

気をつけなければならないのは、パス指定はプロジェクトトップからになっていること。
このファイルがあるディレクトリからではないので、注意が必要。

実行方法

プロジェクトトップのディレクトリで、gulp buildを実行する。

個人的には、実行はすべてnpm任せにしたほうが、コマンド集約できるので、npmコマンドで実行できるようにしている。
やり方は、package.jsonのscriptに、ビルドコマンドを追加するだけ。
下記の例では、npm run buildを実行すればgulp buildをしたのと同じになる。

{
  "name": "localink",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-typescript": "^3.1.6",
    "require-dir": "^0.3.1",
  }
}

とりあえず、基本的なことはできた!
あとは、プロジェクトとともに成長させてゆくだけ。

参考サイト

gulpタスクの分割 - Qiita

gulp タスクをファイル分割する – アカベコマイリ

Gulp 始めてみましたのメモ – 5 – コピーと削除, ファイル・ディレクトリ « イナヅマTVログ

gulp-tscとgulp-typescriptの利用方法の違いについて - Qiita

gulpでtypscriptをコンパイルする - Qiita

俺的gulpでTypeScriptをインクリメンタルビルドする - Qiita

現場で使えるgulp入門 - gulpとは何か | CodeGrid

cssファイルの外部化

HTMLへの読み込み方法

linkタグを使って外部ファイルを使う。

<link>-HTML5タグリファレンス

使用例

<link rel="stylesheet" type="text/css" href="${ファイルパス}">

参考サイト

スタイルシート[CSS]/CSSの基本/外部ファイルにまとめて設定する - TAG index

Macでのスクリーンショット

内容 ショートカット
全画面 command + shift + 3
範囲選択 command + shift + 4
アクティブウィンドウのみ 1. command + shift + 4
2. スペース
3. ウィンドウ選択

Windowsと全然違うから迷った。
ブログに画面内容を上げたいときに重宝する。

【Java9リリース前復習】不変コレクションの生成

きっかけ

前書いた記事と同じ
環境準備も以前の記事を参照

suzaku-tec.hatenadiary.jp

環境準備の補足

Kitematicの Setting > Volumes を選択して、LOCAL FOLDER をバインドさせたいフォルダに指定する。
お好みだが、自分は、~/dev/notebooks を指定した。

f:id:suzaku0914:20170320181719p:plain

指定したら、念のためにコンテナを再起動する。

そうすると、HOME > WEB PREVIEW にコンテナの内容が表示される。
クリックすると、Webブラウザが立ち上がり、コンテナのファイル操作のためのサービスが立ち上がる。

不変コレクション

やっと本題。
Javaで不変コレクションを作成する場合、かなり手間があった。
実装するとなると、下記のような実装になるはず。

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SampleList {

    public static void main(String[] args) {
        List<String> list = new ArrayList<>();
        list.add("武藤遊戯");
        list.add("遊城十代");
        list.add("不動遊星");
        list.add("九十九遊馬");
        list.add("榊遊矢");
        list = Collections.unmodifiableList(list);
        System.out.println(list);
    }
}

実行すると、下記のように表示される。

[武藤遊戯, 遊城十代, 不動遊星, 九十九遊馬, 榊遊矢]

試しに、要素を追加してみる。
ソースは下記の通り。

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SampleList {

    public static void main(String[] args) {
        List<String> list = new ArrayList<>();
        list.add("武藤遊戯");
        list.add("遊城十代");
        list.add("不動遊星");
        list.add("九十九遊馬");
        list.add("榊遊矢");
        list = Collections.unmodifiableList(list);
        list.add("藤木遊作");
    }
}

不変リストなので要素追加できるわけはなく、下記のように実行時エラーになる。
コンパイルエラーに知れくれてもいい気はするが、話を進める。

Exception in thread "main" java.lang.UnsupportedOperationException
    at java.util.Collections$UnmodifiableCollection.add(Collections.java:1055)
    at SampleList.main(SampleList.java:16)

復習はココまで。
実際に、使うことは多い。
不変のコレクションを定数として使いたい場合がたまにあるので、知らなかった人はきちんと覚えておいたほうが良い。

Java9からの不変コレクション(List/Map/Set)

不変リスト

List<String> list = List.of("abc", "def");

この一行でOK。
試しに要素を追加してみる。
下記のソースで実施。

-> List<String> list = List.of("abc", "def")
|  Added variable list of type List<String> with initial value [abc, def]

-> list.add("Wryyyyyy!")
|  java.lang.UnsupportedOperationException thrown
|        at Collections$UnmodifiableCollection.add (Collections.java:1056)
|        at (#10:1)

追加できない!
ちゃんとできている。

これで、楽に定数宣言できる。

残りのコレクションも同様に紹介

不変マップ

Map<Integer, String> map = Map.of(1, "abc", 2, "def")

不変セット

Set<String> set = Set.of("abc", "def")

感想

とても簡単になった。
Guavaに近い形らしいが、使ったことないので、分からん!

【Java9リリース前復習】jshellまとめ

きっかけ

Java9のリリースまで半年をきったので、予習。
かなり前に触ったきり、使ってなかったので、予習を兼ねてやり直す。

環境準備

docker使ってJava9のイメージを使って試す。
使ったのは、java9-notebook

https://hub.docker.com/r/satoshun/java9-notebook/

起動したらexecボタンを押す。

jshell

jshellとは、JavaのREPLツール。

REPL

  • R : Read 読み込み
  • E : Eval 評価
  • P : Print 出力
  • L : Loop readへ

javaのバージョン

java -versionで内容を確認

# java -version
java version "9-ea"
Java(TM) SE Runtime Environment (build 9-ea+102-2016-01-21-001533.javare.4316.nc)
Java HotSpot(TM) 64-Bit Server VM (build 9-ea+102-2016-01-21-001533.javare.4316.nc, mixed mode)

jshell起動

etc/alternatives/jshell を実行。
そうすると下記の内容が出力され、jshellが起動する。

|  Welcome to JShell -- Version 9-ea
|  Type /help for help

お約束のHello World

まずは、Hello Worldの出力を確認してみる。
System.out.println("Hello World") を入力してエンターを押すと、下記の内容が出力される。

-> System.out.println("Hello World")
Hello World

ちなみに、タブ補完される。
System. を入力してタブ押下すると、下記の内容が出力される。

-> System.
Logger                 LoggerFinder           arraycopy(             class                  
clearProperty(         console()              currentTimeMillis()    err                    
exit(                  gc()                   getLogger(             getProperties()        
getProperty(           getSecurityManager()   getenv(                identityHashCode(      
in                     inheritedChannel()     lineSeparator()        load(                  
loadLibrary(           mapLibraryName(        nanoTime()             out                    
runFinalization()      runFinalizersOnExit(   setErr(                setIn(                 
setOut(                setProperties(         setProperty(           setSecurityManager(    

Javaをやっているとセミコロン(;)が必要なんじゃないかと思うかも知れないが、いらない。

変数を使ってのHello World

-> String str = "Hello World"
|  Added variable str of type String with initial value "Hello World"

-> System.out.println(str)
Hello World

でけた!

jshell終了方法

/exit を入力する。

-> /exit
|  Goodbye

コマンド

コマンド 説明
/list 入力したソースを一覧表示する
/edit 名前またはIDで参照されるソースを編集する(外部エディタの設定が必要)
/drop 名前またはIDで参照されるソースを削除する
/save ファイルにスニペット・ソースを保存する
/open ソースの入力としてファイルを開きます
/vars 宣言された変数およびその値をリストします
/methods 宣言されたメソッドおよびその署名をリストします
/types 宣言された型をリストします
/imports インポートされたアイテムをリストします
/exit jshellを終了する
/reset jshellの入力内容をリセットする
/reload リセットして関連する履歴をリプレイします
/classpath クラスパスにパスを追加します
/history 入力した内容の履歴
/help jshellに関する情報を取得します
/set jshell構成情報を設定します
/retain 後続のセッションに対してjshell構成情報を保持します
/? jshellに関する情報を取得します
/! 最後のスニペットを再実行します
/< id > IDでスニペットを再実行します
/-< n > n回前のスニペットを再実行します

コマンドを試す

随時追加予定

/list

まずは、準備として下記を入力

-> String a = "123"
-> System.out.println(a)

そしたら、/list を入力する。

-> /list

   1 : String a = "123";
   2 : System.out.println(a)

今まで入力した内容が出力される。
宣言した変数名とか処理を忘れてしまった場合は、これを使って確認するわけだね。

/edit

クラスや変数を、設定した外部エディターで編集できる。
外部エディターを設定してない場合、下記のようなエラーになる。

-> /edit
Exception in thread "main" java.awt.HeadlessException: 
No X11 DISPLAY variable was set, but this program performed an operation which requires it.
    at java.awt.GraphicsEnvironment.checkHeadless(GraphicsEnvironment.java:205)
    at java.awt.Window.<init>(Window.java:535)
    at java.awt.Frame.<init>(Frame.java:422)
    at javax.swing.JFrame.<init>(JFrame.java:224)
    at jdk.internal.jshell.tool.EditPad.<init>(EditPad.java:55)
    at jdk.internal.jshell.tool.EditPad.edit(EditPad.java:118)
    at jdk.internal.jshell.tool.JShellTool.cmdEdit(JShellTool.java:1141)
    at jdk.internal.jshell.tool.JShellTool.lambda$new$23(JShellTool.java:732)
    at jdk.internal.jshell.tool.JShellTool.processCommand(JShellTool.java:550)
    at jdk.internal.jshell.tool.JShellTool.run(JShellTool.java:492)
    at jdk.internal.jshell.tool.JShellTool.start(JShellTool.java:287)
    at jdk.internal.jshell.tool.JShellTool.start(JShellTool.java:260)
    at jdk.internal.jshell.tool.JShellTool.main(JShellTool.java:250)

使い方は、以下の通り。

/edit <name>

参考サイト

[Java9 新機能] jshell入門 - Qiita

JavaにREPLがやってくる - mike-neckのブログ

MacにJava9を入れてjshellを動かすまでのメモ - SHIBUYA 3%

LaTeXまとめ

LaTeX

Windows想定で説明
Mac使える人なら、たぶん説明しなくてもいいはず。

LaTexとは

LaTeX - Wikipedia

環境準備

Tex

TeX Liveをインストール

Installing TeX Live over the Internet - TeX Users Group

install-tl-windows.exe または install-tl.zip のどちらかを落とす。
install-tl.zip を落とした場合は、解凍後 install-tl-windows.batを実行する。
インストーラが起動したら、後は指示に従えばOK。

エディタ

基本、なんでもいい。
記述は、テキストエディタでも問題ない。
オススメは、VisualStudioCodeか付属品のTeXword editorがいい。
Atomもいいが、ターミナルがwindowsだと難しいので、あんまりオススメできない。
生成のコマンドを入力するので、ターミナル入力ができるエディタがオススメ。

PDF ファイルビューア

PDFファイルをロックしないものであればなんでもいい。
多くのサイトで進められているのは、SumatraPDFみたい。

PDFファイル生成方法

platex、dvipdfmxの実行

  1. platex {ファイル名}
  2. dvipdfmx {ファイル名}

platexを経由してPDFを出力する。
PDF以外にも出力できるので、他に出力したいものがアレば、こちらを使う。

ptex2pdfの実行

ptex2pdf -l {ファイル名}

一発でPDFを出力できる。
PDF出力をするなら、こちらを優先して使ったほうがいい。

数式関連

行内数式

数式は $ で囲む。
そすると、文字列が斜めに表示される。

別行立て数式

\begin{equation}  
\end{equation}  

で囲む。
そうすると、文字列が斜めになり、行末に番号が割り振られる。

数式番号がいらない場合、

\[  
\]  

で囲む。

上付き文字

「c の2乗」のような上付きは c^{2} のように書く。 上付きが1文字だけの場合は c2 でも可

下付き文字

「a の i 番目」のような下付きは a_{i} のように書く。
下付きが1文字だけの場合は a_i としてもかまいません。

スペース

数式中では,いくら数値と単位の間に空白を入力しても無視される。

ローマン体

科学論文のルールでは,単位は斜めのイタリック体ではなく直立したローマン体で書く。
数式中の英字は通常はイタリック体になるが、\mathrm コマンドを使うとローマン体の英字を出力できる。

分数

\frac{分子}{分母}で記述する。

円周率

\pi は π

括弧

\left( …… \right)は中身に応じて大きさが変わる括弧。

積分記号

\int積分記号 ∫
\int_{下限}^{上限}

平方根・立方根 (\sqrt)

文字列がかけないので、書かない。
使い方は、\sqrt{x}

総和・総乗 (\sum, \prod)

\sum は和の記号 ∑
\prod は積の記号 ∏

無限大 (\infty)

\infty は ∞
インフェルニティ使いなら一発で覚えられる。

三角関数 (\sin, \cos, \tan)

書いたそのまま。

対数 (\log)

これもそのまま

パッケージ(拡張機能

パッケージを使って機能拡張できる。
基本的な機能は、既に容易されている。

パッケージのインストール

sty ファイルが用意されている場合

LaTeXがインストールされた配下か、パスがとおている箇所。

sty ファイルが用意されていない場合

dtx や insファイルから、sty ファイルが含まれたパッケージを生成する必要がある。

レポート

タイトル

\title{タイトル名}  
\maketitle

他にも

\author{著者}  
\date{日付} → 作成日  

といったオプション的な内容の設定も可能。

章立て

\section{章名}

番号は自動的に出力される。番号が不要なら \section*{……} にする。

段組み

二段組にしたい場合、文書クラスのオプションに twocolumn を加える。

\documentclass[twocolumn,(オプション)]{(文書クラス)}

オプションは省略可能。

箇条書き

番号を振らない箇条書き

\begin{itemize}  
  \item {アイテム名}  
  \item {アイテム名}  
\end{itemize}

番号を振る箇条書き

\begin{enumerate}
  \item {アイテム名}  
  \item {アイテム名}  
\end{enumerate}

目次の付け方

\tableofcontents

文献リスト

\begin{thebibliography}{99}
\item
  出力内容
\end{thebibliography}

リンク

\label{ラベル名}でラベリングし、\ref{ラベル名} でリンクを作成する。
\pageref{ラベル名}で、指定したラベル名の\labelがあるページ数を出力できる。

参考サイト

TeX Live/Windows - TeX Wiki

Firefox52 アップデート機能内容まとめ

https://www.mozilla.jp/static/images/firefox/logos/header-logo-wordmark.png

提供開始日

2017年 3月 7日

更新内容

公式サイト

詳しくは、公式サイト見たほうが正確

Firefox 52 for developers - Mozilla | MDN

使うだけの人は、リリースノート見たほうが分かりやすい。
※自分はこっち側なので、こっちの情報をまとめる

Firefox 52.0 リリースノート

目立った変更内容

  • WebAssembly への対応
  • HTTPSページでの入力に警告
  • タブを別の端末へ送る
  • XP/Vistaのサポート打ち切り

WebAssembly への対応

ブラウザーをネイティブ並みの速度にするための対応。
具体的には、ブラウザーでネイティブコードを実行できるようにする対応が行われた。
MicrosoftGoogleMozillaAppleなどの共同で開発に取り組んでいるWeb標準規格で、今後のWebのあり方にかなりインパクトがあると感じている。
以前に調べたことがあるので、下記を参照。

suzaku-tec.hatenadiary.jp

HTTPSページでの入力に警告

Googleの威光をかなり強く受け継いでいる。
HTTP サイトで個人情報を入力しにくくさせる対応ですね。

タブを別の端末へ送る

タブのコンテキストメニューに、「タブを端末に送る」が追加された。

f:id:suzaku0914:20170311071523j:plain

バイスの複数保持者が今後増えることを見越した対応ですね。
自分は、PC+スマホ2台持ち。
もちろん、すべてブラウザーFirefox
たまにスマホでみたサイトをPCで見たいことがあるので、嬉しい対応。

この対応が入ったので、今後は端末間の連携としての役割もブラウザが担っていきそう。

XP/Vistaのサポート打ち切り

Vitaは早すぎな気がしないでもないが、サポート打ち切りは同意。
もう、家のPCはWindows10まで移行済みなので、全然痛くない。
痛いのは企業側かな?
どっちにしろ、XP/Vita使っているようなところは、淘汰されるのも当然か。

感想

WebAssemblyが現実味を帯びてきたのを感じる。
今後の展開は、要注目。
あとは、マルチデバイスの連携が充実していくことを願う。