著者:杉浦
説明や要約を行う変数、関数
巨大なオブジェクトを扱う時、深い場所にいる子要素を扱うことがままあります。メソッドチェーンによる処理結果を扱う時は深い子要素よりも簡単に、元の意味からかけ離れた式を作れます。例えば、
if line.split(':')[0].strip() == "root":
Dustin Boswell; Trevor Foucher. リーダブルコード (Kindle の位置No.1520). 株式会社オライリー・ジャパン. Kindle 版.
@if ($experiense->member_id == Auth::user()->id)
です。こういった式をそのまま扱うと、これから先に読み返す時、混乱のもとになります。これを意味の通る変数名にまとめるとコメントもなく、可読性が高まります。変換は例えば、
username = line.split(':')[0].strip()
if username = = "root":
Dustin Boswell; Trevor Foucher. リーダブルコード (Kindle の位置No.1522). 株式会社オライリー・ジャパン. Kindle 版.
@if (Auth::user()->owns($experiense))
//ここから別のファイル
class User
{
public function owns($experiense)
{
return $this->id === $experiense->member_id;
}
}
の様にできます。後者の例は別のファイルにロジックを複数用意した方が良かったり、owns()が何度も使われたり、という時に特に役に立ちます。
著者:杉浦
読みやすい色合いを提案してくれるwebサービスColor Safeの紹介
Color Safe – accessible web color combinations
Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Google翻訳：Color SafeはWCAGのテキストと背景のコントラスト比のガイドラインに基づいて、美しく使いやすいカラーパレットをデザイナーに提供します。
WCAGはWeb Content Accessibility Guidelinesの略称です。要はwebページの見やすさ、読みやすさをよくするためのガイドラインです。
主な使い方は下の画像の様にパラメータを指定して”GENERATE COLOR PALETTE”でパレットを作成、作成結果から好きな色を選んで色を表す文字列をコピーです。WCAG Standardの項目はAA、AAAの2種類があります。AAは十分読みやすいレベルであり、多くの場合これを達成しているだけで十全です。AAAは特別目立つ、コントラストの強い色の組み合わせです。ヘルプには一部の企業、政府がAAAに準拠しているとあります。
作成した結果、文字が十分に目立つ色が並びます。各色をクリックして見栄えチェック、色を表現する文字列の出力が出来ます。
著者:杉浦
PHPの標準勧告提案PSR
PHPの標準勧告提案PSR
PHP Standards Recommendations – PHP-FIG
PSRはPHPのコードはこのように作るべきだと推奨する提案の一つです。PSRはPHP-FIG — PHP Framework Interop Group – PHP-FIGによって策定されています。PHP-FIGはPHP Framework Interop Groupとある通り、複数あるPHPフレームワークの各関係者の集団です。その影響力は強く、いくつものフレームワークを始めとして多くのコードがPSRに準拠したコードになっています。
現在、承認済みのPSRは次の表の通りです。
Accepted
| Num | Title | Editor | Coordinator | Sponsor |
|---|---|---|---|---|
| 1 | Basic Coding Standard | Paul M. Jones | N/A | N/A |
| 2 | Coding Style Guide | Paul M. Jones | N/A | N/A |
| 3 | Logger Interface | Jordi Boggiano | N/A | N/A |
| 4 | Autoloading Standard | Paul M. Jones | Phil Sturgeon | Larry Garfield |
| 6 | Caching Interface | Larry Garfield | Paul Dragoonis | Robert Hafner |
| 7 | HTTP Message Interface | Matthew Weier O’Phinney | Beau Simensen | Paul M. Jones |
| 11 | Container Interface | Matthieu Napoli, David Négrier | Matthew Weier O’Phinney | Korvin Szanto |
| 13 | Hypermedia Links | Larry Garfield | Matthew Weier O’Phinney | Marc Alexander |
| 15 | HTTP Handlers | Woody Gilk | N/A | Matthew Weier O’Phinney |
| 16 | Simple Cache | Paul Dragoonis | Jordi Boggiano | Fabien Potencier |
| 17 | HTTP Factories | Woody Gilk | N/A | Matthew Weier O’Phinney |
この中で特に多くの出番があるのはPSR-2、コーディング規約です。インデントはスペース4個、一行はできるだけ80文字以内に最大でも120文字以内、クラス、メソッドの開き括弧は次の行、などなどコードのスタイルについての規約が羅列されています。日本語訳も既にいくつかあります。
【PSR】PHPの標準コーディング規約 – Qiita
【PHP】PSR-2 Coding Style Guide（コーディングスタイルガイド）
チェックツールにはphp_codesniffer、修正ツールには php-cs-fixerなどがあります。
著者:杉浦
Unicodeプロパティを用いた正規表現で日本語を抽出
Unicode（ユニコード）は、符号化文字集合や文字符号化方式などを定めた、文字コードの業界規格である。文字集合（文字セット）が単一の大規模文字セットであること（「Uni」という名はそれに由来する）などが特徴である。
引用:Unicode – Wikipedia
この引用文にある通り、Unicodeは非常に多くの文字を含んだ文字コードです。多種多様な文字を扱うために文字に分類付けがされています。この分類の仕方は複数あり、この記事で扱う分類はスクリプトです。スクリプトは文字体系による分類形式です。Script (Unicode) – Wikipediaにはスクリプトの一覧が載っています。
正規表現ではUnicodeプロパティを用いて文字を識別できます。日本語のスクリプト名はそれぞれ、ひらがながHiragana、カタカナがKatakana、漢字がHanと名付けられています。ちなみにこのHanは繁体字のHanです。
例えばjavascriptでは次の画像の様にUnicodeプロパティを用いた正規表現を使えます。
/\p{分類の名前=分類の中における文字集合の名前}/u
phpなら
$pattern = '/\p{Hiragana}/u';
javascriptにもphpにもついていたuはUnicodeを使うという宣言です。
import regex
pattern = r'\p{Han}'
print(regex.findall(pattern, "朝早く起きた"))
pythonはとてもシンプルな記法です。ただし3系の正規表現でもデフォルトではUnicodeプロパティ表現に対応しておらず、regex · PyPIのようなライブラリが必要です。
注意点としてUnicodeのプロパティによる分類は強力ですが、Unicodeという探索範囲がとても広いため速度はあまり優秀でありません。PHPのPHP: Unicode 文字プロパティ – Manual にも以下の様に注意書きがあります。
Unicode プロパティを使った文字列マッチングは速くありません。PCRE は 15,000 以上のデータからなるストラクチャを検索する必要が有るためです。 そのため、PCRE では、\d や \w といった 以前から有るエスケープシーケンスは Unicode プロパティを使用しないように なっています。
著者:杉浦
SVGファイルのエディタ
SVGファイルはベクトル定義によって画像を表現するファイルです。SVGファイルの形式はBMP、PNG、JPG等のファイルと異なり独特であり対応していない画像編集ソフトが多いです。そのため専用のソフトやサービスが必要になりがちです。またその特徴上、最後の微調整はベクトルの計算、数字を直に弄る方が楽です。
最近、自分が使った環境の一つはVectr – Free Online Vector Graphics Editorです。下画像の赤丸のバーから図形を配置してざっくりとSVGを作ります。
次いで使用するのはIDE、今回はPhpStormです。IDEは実行環境とテキストエディタを兼ねた開発環境です。実行環境とエディタがある以上、実行が軽いものであれば、実行しながら編集する、ということも可能です。PhpStormでは下画像の様にSVGが編集できます。こちらはテキストを変更して画像を作ります。
IDEでは同じようにいくつかの種類のファイルをプレビューしながら編集できます。例えば、マークダウンです。こちらはちょっと飾ったテキストを扱うのでIDEのままで読み書きするのに向いています。マークダウンはよく説明書に使われているので、よくお世話になっています。
著者:杉浦
Pythonやjavascriptで現れる__の通称
Double UNDERsocoreを略してdunderと読みます。発端は How do you pronounce “__” (double underscore)?らしいです。発端はどうあれ今はgoogleで`dunder __`と検索すると10万件以上ヒットするほど使われています。
Pythonやjavascriptには__で囲われた変数が現れます。
__name__
や
__proto__
などです。この__は予約された変数で、プログラムを実行した時点ですでに中身が設定されている変数です。必然、中身を調べるわけですが、検索エンジンによっては__を読み取ってくれないことがあります。dunderはそのような時に助けなってくれる呼び方です。
javascriptでは__proto__以外で__の絡んだ値をそうそう扱わないですが、pythonはまま使います。その中でもよく使うのは以下のあたりです。
class hogehoge def __init__(self, hoge, fuga): #コンストラクタ定義 if __name__ == '__main__': # メイン実行の関数呼び出し
__init__はコメントの通りclassのコンストラクタ定義。if __name__ == ‘__main__’:は直接実行(__name__ = __main__)されているか、他ファイルから呼び出されてい実行(__name__ = ファイル名)されているかで場合分けです。過去のプログラムの一部を使いたい時はよくありますので、その時に備えて書いたりするわけです。
著者:杉浦
GUIによるCSS作成webサービスLayoutIt!の紹介
CSSはウェブページのスタイルを指定するための言語です。スタイルを指定ということもありCSSとグラフィカルな画面は密接に関係しています。CSSを作るときは画面とCSSを行き来することが増えがちです。自分はブラウザの開発者ツールで仮のコーディングを行い出来上がったものをファイルへコピペする、というやり方で多少軽減していますがそれでも面倒です。
LayoutIt! – Interface Builder for CSS Grid and Bootstrapは画面を作り、画面に沿ったCSSやHTMLのコードを出力してくれます。
LayoutIt!はBootstrapのひな型構築とGridのひな型構築の二つの機能を持っています。Bootstrapはデザインテンプレートであり、classにBootstrapの用意した名を割り当てることで様々なデザイン、機能を実現します。下画像はLayoutIt!のBootstrap Builderの使用画面です。
左のサイドバーから右にパーツをドラッグして様々なレイアウトを作成できます。当然、既に配置したパーツもドラッグで再配置できます。納得いくレイアウトが出来上がったら赤丸のダウンロードからHTMLコードをダウンロード。残りの作業は手元で細かい部分を肉付けすることだけです。
Gridはその名の通り格子状のデザインのことです。LayoutIt!のCSS Grid GeneratorではBootstrap Builder同様に画面上でGridを作り、そのコードをダウンロードできます。下画像はCSS Grid Generatorの使用画面です。
例によって左のサイドバーと表のドラッグで画面をコントロールします。異なるのはGridをクリックした際の動作です。GridのAreaに名前をつけ、その中にまたGridを作ることが出来ます。完成したら赤丸のget the codeからコードをダウンロード。Gridの中身の肉付けは手元の作業です。
著者:杉浦
世界測地系と日本測地系
測地系とは位置を表すための前提条件のことをいいます。具体的には地球はどのようになっているかという定義です。技術の発展によりより正確に地球のことがわかるようになり、測地系は更新されていきます。また、グローバル社会が謳われるようになり測地系の名前も世界測地系と改められました。少々ややこしいことに、ただ名前を変えただけのローカルな測地系もあります。例えば日本測地系2011という測地系があります。幸い学術的には日本測地系2011やJGD2011の名で使われていますが、場によっては世界測地系と呼ばれます。
GNSSが使用している測地系はWGS84という世界測地系です。元々はGPS用のアメリカの規格ですがGNSSの広がり方によって本当に世界単位で使われています。
座標系という位置の表し方の定義があります。緯度経度、XYなどです。測地系は最初に述べた通り地球の形の定義づけです。位置に関する値を取り扱う時は、どの測地系に従ったどの座標系の値なのか、ということを気を付ける必要があります。特に測地系は異なってもせいぜい数メートル、数十メートル単位のずれで直感的に間違いが分かりにくいです。テストの際には先達の作ったソフト等と突き合わせて検証を行うべきでしょう。
著者:杉浦
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もこの系統の機能で容易に参照できます。