著者アーカイブ 杉浦

著者:杉浦

JetBrains製IDEの機能検索、実行ショートカット

 最近laravelを使う事になり、laravel関係の機能が優秀なJetBrains製のPhpStormにIDEを乗り換えるどうか迷い試用中です。JetBrains製のIDEは他にもPyCharmを元々使っておりJetBrains社の手先になってきています。この記事はPhpStorm、PyCharmを使っていて分かったJetBrains製IDEのショートカットを呼ぶショートカットの紹介です。
 WindowsしかりMacしかりショートカットによる命令はPCのアプリケーションにつきものです。便利な動作を簡単に実行できますが、すべてを覚えている人はそうそういないでしょう。IDEのIはintegrated、統合です。様々なアプリケーションを統合した上にあれもこれも簡単にやりたがるプログラマを相手にするため、そのショートカットと機能の数は膨大なものになっています。JetBrains製のIDEは覚えることすら楽させようとしてきます。
 実行できる事を簡単に知りたい使いたいという要望に応えているのが、下画像のアクションの検索です。

 これ自体はCtrl+Shift+Aで実行できます。画像の様に文字列を打ち込んで実行できる機能を検索、選択でそのまま実行します。IDEに備え付けられた機能のみならず、npm scriptsなどの自作命令もここから実行できます。この他にもファイル名検索(Ctrk+Shift+N)、パス内検索(Ctrk+Shift+F)、3つ合わせたどこでも検索(Shift2連打)が備わっています。


著者:杉浦

IDEによる補完入力、外部ファイル参照

 IDE(Integrated Development Environment)は統合開発環境と呼ばれる便利な機能を多く備えたエディタです。エディタの上にはコンパイラ、バージョン管理、実行環境、などの機能が搭載されています。私見ですが数多くの機能を備えていようと、一番の基礎はコーディングを行うエディタです。IDEは補完入力と外部ファイル参照によって素早く快適なコーディングを実現してくれます。
 これらの機能が有効に働く顕著な言語がhtmlです。htmlのコードを記述する時、手打ちでいちいち行っていては非常に長い時間がかかります。例えば、aというタグを表す時、多くはを記述します。必須の属性hrefがあるため、’a’に比べて長い文字数が必要になります。IDEはこの開きタグ、閉じタグ、属性を含めた完成系を’a’,補完入力実行とするだけで記述してくれます。
 
 大体、補完入力実行という命令はctrl,tab,spaceあたりのキーに繋がっています。上の動画はa,tabキーの2打のみの動作です。
 開きタグ、閉じタグに同じ文字列を使用しているということは同じ修正を二度行う必要があるということです。IDEはこれも省略してくれます。
 
 上の動画でdivと入力した後にいくつか候補が出ています。この候補にカーソルを合わせて補完命令を実行するとその候補が記述されます。divがdivergenceになる感じです。よく使うものであればスニペットも標準で登録されています。
 
 外部ファイル参照が良く役に立つのはcssライブラリ関連です。styleがclassに紐づいているのですがclassの種類があまりにも多く、ページをめくる様な調べ方はいちいちしていられません。IDEの外部ファイルの参照で今そのclassがどのstyleに紐づいているかがわかります。

 html以外の言語にもこれらの機能が対応しています。PHPDocもこの系統の機能で容易に参照できます。

著者:杉浦

Pythonの紹介

 Pythonは次の謳い文句で宣伝されているプログラミング言語です。

Python is a programming language that lets you work quickly and integrate systems more effectively.

 Pythonは膨大なライブラリと短く単純な文法が特徴の言語です。lets you work quicklyという部分は、素早いコーディングを実現させる、という訳が適当だと思います。
 現在の最新安定版である3.7の標準ライブラリのリファレンスはPython 標準ライブラリ — Python 3.7.1rc1 ドキュメントです。標準ライブラリとある通り、Pythonには最初からこれらの40章近くからなる幅広い関数が用意されています。この関数には高級なものが多くあり、この標準ライブラリを使うだけで簡単にコードを記述できます。例えば、あるurl(src_url)に置いてあるデータを取得して、ファイル(dst_file)に保存する動作は次の三行で記述できます。

data = urllib.request.urlopen(src_url).read()
with open(dst_file, mode="wb") as f:
    f.write(data)

 この様に何か簡単な課題を解決するためにちょちょいとプログラミングするという目的にpythonは非常に適しています。また容易にコーディングが可能という利点は、機械学習関連の学者、研究者の様なプログラミングが必須であるが、プログラミング以外の部分を主に考えたい人達にも人気の様です。少なくともユーザは増えています。スクリプト言語をいくつか比較したgoogle trendが次の画像です。

 標準ライブラリのみでは足りない時はPyPI – the Python Package Index · PyPIを参照しましょう。このサイトには数多くの外部ライブラリがアーカイブされています。
 便利なpythonですが、実行速度が遅いという欠点もあります。ループ速度の比較がヒットする様にググるとpython敗北の記事はいくつも出てきます。

著者:杉浦

javascriptの関数定義と巻き上げ

 javascriptの関数定義は、関数宣言を行う方法と変数に関数式を格納する方法の二種類に大別できます。

//こちらは関数宣言
function hoge(){
	console.log('hoge declare');
}
//こちらは関数の式を変数に格納
hoge = function(){
	console.log('hoge expression');
};

 関数宣言を行った場合に起きる動作が巻き上げです。巻き上げは関数宣言を行った場所に関係なくプログラムの最初で関数を定義します。このため

hoge();

function hoge(){
	console.log('hoge declare');
}

は実行したい関数の中身が実行され、

hoge();

hoge = function(){
	console.log('hoge expression');
};

は実行したい関数の中身が実行されません。
 関数を先に書いて主となる実行部分を後に書くことが必須ないし推奨の言語は少なくない(python、シェルなど)ですし、関数式による定義の使用はそうそう問題にならないでしょう。むしろES6で追加されたconstを用いれば再定義を防げるので良いくらいです。問題になるのは関数宣言と関数式による定義を混在と関数の再定義が合わさった場合です。そうそう起きない事態ですがこれが起きた場合、非常にわかりにくいソースコードができます。

function hoge(){
	console.log('hoge declare 1');
}
hoge();
hoge = function(){
	console.log('hoge expression 1');
};
hoge();
function hoge(){
	console.log('hoge declare 2');
}
hoge();
function hoge(){
	console.log('hoge declare 3');
}
hoge();
hoge = function(){
	console.log('hoge expression 2');
};
hoge();

 実行結果が一瞬でわかる人はそういないでしょう。読み解き方は最後の関数宣言を記憶して、関数式の代入の度に再定義する、というものです。実行結果は次の通りです。

著者:杉浦

PHPのコメント形式のPHPDoc

phpDocumentor
PHPDoc reference — phpDocumentor
PHPDoc リファレンス — phpDocumentor
 PHPDocはphpには関数を表すためのコメントの形式として用意されているフォーマットです。PHPDocの形式に対応したコメントはIDEの様な多機能エディタでPHPファイルを編集する際に、読みやすい形になって出力されます。例えば次の様になります。

 関数の説明、引数の型と名前と説明、返り値の型と説明、どのファイルから呼ばれているかが整理されて記述されています。リンクを埋め込むこともできます。下図の様に、関数を呼び出すところでも同じ説明を出力できます。

 エディタによっては下図の様にPHPDocで指定された型と引数の型が異なる場合、警告を出力してくれます。
 
 PHPDocと認識されるフォーマットは次の様に/**と*/で括られ、各行頭に任意の数の空白文字と*がついたフォーマットです。

/**
 *
 */

 この中に説明と@から始まるタグを入れることで肉付けします。ここまでに上げた画像の様に関数に対してPHPDocを記述する場合、まず必要なのは@paramと@returnでしょう。それぞれ引数と返り値の説明です。関数内部の動作が正しいと仮定した場合、中身を読む必要はありません。適切な説明と引数、返り値がわかればそれだけで十分です。組み込み関数と同じですね。@paramと@returnの形式は

@param [型] 変数名 説明
@return [型] 説明

で、半角スペースは任意の空白です。ここまでの形式に従って、例えば次の様に記述します。

/**
 * 緯度経度を平面座標(測地座標)に変換
 * @link http://landhere.jp/docs/gis_phplib.html 引用元:地理情報関連 PHPライブラリ - LANDHER
 * @link https://vldb.gsi.go.jp/sokuchi/surveycalc/surveycalc/algorithm/bl2xy/bl2xy.htm 検証元:平面直角座標への換算 計算式
 *
 * @param int $K 19座標系の系番号
 * @param float $Lp 経度の度点
 * @param float $bp 緯度の度点
 * @return float[] array形式のXY座標
 */

 詳しい記述できるタグ、型は冒頭のリファレンスにあります。

著者:杉浦

javascriptの関数の扱い

 javascriptの関数は第一級オブジェクトとして扱われています。 
 wikipediaから引用した第一級オブジェクトの性質は次の通りです。

言語によって異なるが、第一級オブジェクトは概ね次のような性質をもつ。

  • 無名のリテラルとして表現可能である。
  • 変数に格納可能である。
  • データ構造に格納可能である。
  • それ自体が独自に存在できる(名前とは独立している)。
  • 他のものとの等値性の比較が可能である。
  • プロシージャや関数のパラメータとして渡すことができる。
  • プロシージャや関数の戻り値として返すことができる。
  • 実行時に構築可能である。
  • 表示可能である。
  • 読み込むことができる。
  • 分散したプロセス間で転送することができる。
  • 実行中のプロセスの外に保存することができる。

  •  javascriptの関数は第一級オブジェクトです。プロシージャや関数の戻り値として返すことができます。
     このためjavascriptの関数の定義は似たような二種類の書き方が出来ます。一つはただ関数の宣言を行う処理が起きる書き方、もう一つは関数を変数に格納する処理が起きる書き方です。

    function a(){console.log('hoge')}//関数の宣言のみを行う。変数aの中に名前aの関数が格納される。
    a = function(){console.log('hoge')}//変数aの中に名無しの関数を格納する。
    

     それぞれ実行すると次の様になります。

     またES6で追加されたアロー関数を使うと次の様にも書けます。関数を定義した感じがあまりしません。この書き方が浸透したような場所でない限り、本来の目的通りコールバックに使うべきでしょう。

    a = () => {console.log('hoge')}//変数aの中に名無しの関数を格納する。
    

     本来の目的に沿った書き方は次の様な書き方です。

    //イベント付与では元々コールバックとして関数式、関数オブジェクトを渡していた。引数無しならばこのように書ける
    function console_log_hoge(){
        console.log('hoge')
    }
    $('p').on('click',console_log_hoge)
    
    //アロー関数による引数渡しは短くわかりやすく書ける
    //また$('p').on('click',console_log_innerText(e))とした場合,その場で関数が実行されてしまう
    function console_log_innerText(e){
        console.log(e.target.innerText)
    }
    $('p').on('click',e => console_log_innerText(e))
    

     最後にこんなこともできるがするべきではない書き方をひとつ。

    function a(){
    	return function b(){
    		return console.log('c');
    	}
    }
    a()()
    


     関数を実行した返り値の関数を実行しました。

    著者:杉浦

    様々な言語の表を生成するwebサービスTables Generator

    Tables Generatorは表を生成するwebサービスです。
     表は何かと便利な表現ですが言語によっては表を表現するための文字列が煩雑なことが有ります。HTMLは最低限

    で括る必要があります。texは&で区切るうえ左揃えと縦線の記入を表すと|l|l|l|l|l|と並び、大変見難いです。
     Tables Generatorは簡単にそれらの表を作れます。下図の赤丸の部分で作りたい表の形式を指定、してFile,Edit等で表を操作することで表を作り、Generateすることでコードが出力されます。

     おすすめはあらかじめcsvファイル化した上でFileからimport csvして、微細な加工を手作業する事です。csv形式は様々な場所で使えます。
     テーブルの操作は基本的にマウスで行います。複数のマス選択はドラッグかctrl+クリックです。

    著者:杉浦

    画像を扱う多機能なCLIツールimagemagick

     imagemagickは画像を扱うソフトです。imagemagickの特長は多彩な動作と多様な対応形式にあります。以下は最近使ったコードです。

    magick convert -density 200 *.pdf -set filename:src %t %[filename:src].png //pdfファイルをpngファイルへ変換
    magick convert -crop 128x128 x.jpg output.jpg//x.jpgを128x128サイズで切り分けてoutput-n.jpgへ出力
    magick convert output-0.jpg -resize 256x256 ..\output\out.jpg//output-0.jpgを256x256サイズへ拡大してoutput以下へ保存
    magick convert -size 128x128 -gravity center -font "Meiryo-&-Meiryo-Italic-&-Meiryo-UI-&-Meiryo-UI-Italic" -pointsize 60 label:%%i -transparent white %%i.png//batchでiをイテレーターにループ。中央に数字のiを描いた128x128の画像を生成
    magick convert base.png %%i.png -gravity center -compose over -composite icon_%%i.svg//base.pngを背景にして↑で作った画像を重ね合わせ、svg形式で出力
    magick convert -append 137.715136_*.gif output.gif//縦に結合
    magick convert +append output*.gif all.gif//横に結合
    magick convert +adjoin ss.gif pic.gif//gifをフレームごとに分解
    

     もちろん、この他にも様々なことができます。
     大変便利なimagemagickですが、ベクトル形式の画像の扱いは苦手です。imagemagickは知る限りbitのmapとして画像を扱います。このせいかsvgを生成する際もドットをラッピングするという手法を取っており、拡大してもジャギーが出ないというベクトル画像の利点が死にやすいです。

    著者:杉浦

    SQLを試すwebサービスSQL Fiddle

     SQL Fiddleは様々なSQLを簡単に試せるオンラインサービスです。下図の様な画面で、任意のSQL環境を選び、テーブルを定義し、SQLを実行する、といったものです。
     
     左の赤丸は実行環境、右の赤丸はテキストからData Definition Languageへの変換機能です。下図の様に、ヘッダ、データを用意するとテーブル作成とそのテーブルにデータを入れる構文が出力されます。
     
     この図では半角スペースで区切っていますが、様々な区切り方に対応しています。詳しくはDDLBuilder/fixture.html at master · jakefeasel/DDLBuilder · GitHubを参照です。入力したデータはBrowserボタンから開くと見やすいです。
     データを入力したら、任意のSQLを右側に入れて実行、下側に出力される結果を見るだけです。

    著者:杉浦

    簡単な置換を簡単に書く

     置換と言えば正規表現ですが、正規表現の処理は複雑です。複雑さ同様、正規表現による置換は往々にして純粋な文字列のみの置換より重くなりがちです。PHP: str_replace – Manual にも

    (正規表現のような) 技巧的な置換ルールを必要としない場合、 preg_replace() の代わりにこの関数を常用するべきです。

    とあります。
     この技巧的な置換ルールを必要としない置換でよく行いたい置換は、AをB,CをDに置き換える、といった1対1の置換です。複数の置換の記述例は次の通りです。

    $str = '置換対象';
    $arr = [
    	'置換' => 'ちかん',
    	'対象' => 'taisyou'
    ];
    $str_replaced = str_replace( array_keys($arr), array_values($arr), $str);
    

     上の書き方で$str中の’置換’を’ちかん’、対象を’taisyou’に置き換えた$str_replacedができあがります。
     str_replace,preg_replaceは引数の置き換え対象のパターン、置き換え後の語に配列を指定できます。またarray_keysは引数の配列のキーを格納した配列を、array_valuesは引数の配列の値を、配列にして返します。これらを組み合わせることで、置換対象と置換後の文字列を一つの配列内に格納できます。延々と同じ変数を対象にreplaceを繰り返すよりすっきりします。
     実行速度もこちらの書き方の方が高速です。私の環境では、aをaaに置換するという動作を’a’に対して100000回繰り返す動作にかかる実行時間はstr_replaceの重ね書きがおおよそ1*1e-3秒、上記の書き方が7*1e-6秒でした。雑な計り方ですが、ここまで極端な差があるので高速と言っていいでしょう。
     余談な上、勘ですがこの速度差はおそらく関数呼び出しによるオーバーヘッドです。計算コストの異なりそうな違いはstr_replaceの呼び出し回数、文字列変数をどこに保存するかの扱い、あたりにあります。