最近、独自のオートローダを持つPHPプログラムを触ることになったので大雑把にnamespaceとautoloadの概要と連携を紹介します。namespace(名前空間)は1ファイルでも有効な変数名、関数名、クラス名等の区分け用の仕組みです。次の画像の様にちょっとしたスクリプトでも機能します。大雑把には各定義に接頭辞がついている様なものです。IDEのジャンプがnamespaceを元に働きますが、namespaceはファイルの読み込みに直接の関係を持ちません。Manualをいい感じに動かす機能です。autoloaderによって多数のPHPソースコードファイルの中から必要な分だけPHPソースコードファイルを読み込みます。namespaceとautoloadのそれぞれは互いに関係ありません。PSR-4で定められた規約に従ってnamespaceとautoloadは連携します。PHP-FIGPSR-4はnamespaceとファイルの配置を定義づける規約です。大雑把にいえばnamespaceの名前、階層をディレクトリ構造と一致させなさい、という規約です。新しめのフレームワーク(laravelなど)やオートローダ(composerなど)はこのPSR-4に従っているためnamespaceによってファイル読み込みをしているとも言えます。ファイルを読み込めない時はコーディングをしている人が謎namespaceを定義してしまった時が大半です。逆にPSR-4に従っていない古いオートローダはnamespaceが通じているといってソースコードが読み込めているとは限りません。いった場合、使われているオートローダのドキュメントなりソースコードなりを読み込む必要があります。【Chrome】開発者ツールNetworkタブInitiator列の紹介Chromeで開発を行う際、通信の内容を見るためにNetworkタブをよく見ます。いった時、Initiator列は全く使いませんが、この列は意外に高性能です。具体的に何ができるかというと、カーソルを合わせた時に通信の起点を元にスタックトレースを出力します。これによってどのコードのどの部分で通信、特にaxiosなどの非同期通信が走っているか分かります。これだけでも便利なのですが、強力なのはスタックトレースであるという点です。仮にサーバからブラウザに暗号化したリソースを投げたとしてもスタックトレースをさかのぼり、そこからステップ実行をすると復号処理(ページ上でリソースを使うために復号するものと仮定)の場所、引いては復号した状態を得られます。これと前回のJavaScriptの圧縮を展開する方法によって謎リソースを元にした謎処理でも案外、解き明かせます。昨今のブラウザは強力ですね。【Chrome】圧縮されたJavaScriptを圧縮されてない様に扱うChromeの開発者ツールのちょっとした機能の紹介になります。長い行に圧縮されたJavaScriptを展開する機能です。したLint、prettier的な感じで改行とインデントが入ります。使うには下一枚目の赤丸で囲った{}ボタンを押すだけです。特筆すべきはこの状態でブレークポイントを指定できる点です。これのおかげで図の様に圧縮済みのコードでも現在、どこのどの変数に何が入っているのか、ここまでのフローはどうなっているのか、今起きているEventは何なのかと様々な情報を得られます。【GitHub】目的に合ったスニペットをフレームワークの観点から探すGitHubの検索機能には様々なオプションが付いています。これはその名の通りコードファイルが置いてあるファイルパスで絞込検索をするオプションです。フレームワークには大なり小なり型にはまった作法があります。ある作法の種類に、特定の種類のコードを特定のフォルダに配置する、というものがあります。Laravelのコンソールコマンドならばapp/Console/Commands、Composerを使うなら外部ライブラリはvendor、といった具合です。Laravelこの二つを合わせると特定の種類のコードと果たしたい目的の語で検索をすることができます。次のようなことができます。FuelPHPにはコンソールコマンドoilが用意されています。oilのサブコマンドとして様々なことをコンソール上で行えます。ドキュメントoilは便利なのですがルーティングを確認する機能がありません。route:listの様にコンソールで一覧を見たいものです。GitHubで次のようにググるとそれを実現したコードが見つかります。1.xにたどり着きます。このリポジトリのtaskコードの一つにルーティングをコマンドライン上で表示する機能が入っています(残念ながらmodule以下のルーティング解析は未実装です)。このおかげで次の様にroutingの大部分をいい感じに見れるようになりました。1411月,20190著者:杉浦PlantUMLの機能が思ったより多彩PlantUMLはUML図を表現できる言語です。言語故にテキストファイルであり、変更やGit管理が楽で便利です。PlantUMLを書いていると、あまりに図が複雑になるため複数ファイルに記述を分けたい時があります。いった時、何度も同じ意味で同じ名前を宣言する記述が重複しがちです。いった問題はinclude機能で定義ファイルの読み込みのみを記述することで解決できます。ページレスポンス@endumlこうすると、あるファイルだけ違う変数名で同じものを指している、という混乱やコピペコードを防げます。デフォルトのPlantUMLでER図を書いている時、定義の記述を一行にきれいなデザインでまとめることにくたびれます。デフォルトで等幅フォントを採用しておらず、空白を使って縦を合わせるのがめちゃくちゃしんどいです。等幅フォントを使うように宣言しましょう。null,}@endumlここでは特に使うと確信した二例を紹介しましたが、公式の前処理、共通事項をはじめとしたUMLから離れた欄を隅まで見ていくと思わず教えて欲しかったとなる便利機能がわいてきます。書ける、オープンソースのツール1311月,20190著者:杉浦KISS原則のためのデザインパターンデザインパターンは今までに至るまで作られてきたコーディングの際のパターンです。大体これは複数ファイルにまたがるつくりになっており、とてもとても複雑な問題をなるべくシンプルにされたパターンを知るだけで解決できるようにします。Amazonから引用したFacadeパターンのクラス図です。stupidの略で「単純な作りを保て」という意味です。短くて意味が明確だと読み解きやすいものです。原則というだけあり、デザインパターンもとてもとても複雑な問題に対してこの原則を実現するために作られていることが多いです。Wikipediaデザインパターンの実現よりも原則の実現を優先すべきです。語弊がある文なので補足ですがコーディングで最も優先すべきは要件の実現です。動くきれいなコード>動く汚いコード>動かないきれいなコード、です。Gitのソースコードでも業務範囲でもこの二つについてのアンチパターンに本末転倒なパターンが時折見られます。簡単な作りで済むのにデザインパターンを適用したばかりに読み解くのが面倒になります。Facadeパターンなら次のようなものです。'd';}無暗にクラスを分けたせいで複雑化しています。例は極端ですがアクティブレコードのみで十分なのに、コントローラ->コマンド->リポジトリ->モデル->SQL文発行、の様な段階が過度に多いものはままあります。簡単な問題を複雑にしていないか、本当にそこまで大がかりなものを用意する必要があるのか、都度考えてコーディングしたいものです。次の様な入出力を実現する関数dictMergeをなるべく読みやすく短い関数で実現するのが目標です。dictMergeは未定義や余分な定義を含む複数の辞書から必要なカテゴリーの語のみをまとめるための関数です。辞書ですが今回紹介する配列、オブジェクト操作のようなやり方は色々な場面で使えます。['hogefuga']}*/実装したdictMerge()が次になります。コードの細部はコメントの通りです。reduce関数で配列を一つのオブジェクトに変換する。[category]で変数をキー名にする。配列の中身を一段flatにする。{});}上記の様にJavascriptに用意されている関数をチェーンするだけで少々複雑な問題も簡易な記述で解けます。この様なやり方を用いる際に注意する必要があるのはreduce関数です。reduce関数はJavaScriptの配列操作においてとても汎用的であり、書こうとさえ思えばほぼ全ての配列操作関数をreduce関数で表現できます。これを使うと次のように黒魔術的もかくやというコードを書けます。{});}なるべくreduceを使わず特化的な名前の少ない引数の配列関数を使うとわかりやすいコードになります。最初の例も正直reduceを使うまでもありません。[k]:kに関する何か}},object型引数)という構文は便利なのですが慣れない人に渡すとけっこう混乱します。注意するべきでしょう。mergedDict;}1111月,20190著者:杉浦PlantUMLをwebページ的にダンプする具体的には各UML図をハイパーリンクによってつなげたSVGファイルにしてブラウザ上で見れるようにします。目的はアクティビティ図->シーケンス図、ER図全体->ER図部分の様な関連した別UML図を閲覧者が探しやすくすることです(WWWの元ネタそのまま)。この様にできるとPUMLを一つの場所に過度に巨大に濃密に記述する必要がなくなります。実際にこれを行うための手順は、PlantUMLを記述する際に出力状態のSVGリンクを相対パスで作る、階層構造を維持したままSVGにダンプする、の2ステップだけです。これによってGIFの様にできます。PlantUMLに次のように書くことで図のようにハイパーリンク付きの文字列を作れます。使える場所はかなり広く文字列を表示する場所ならどこでもOKな印象です。今回はpumlファイルのあるフォルダと同じ場所にsvgファイルを展開するつもりなので、記述中のpumlファイルの場所からみた特定のpumlファイルへの相対パスを記述します。world]];特定のディレクトリ下にsvgとしてpumlをダンプするコマンドは次になります。utf-8現在のディレクトリ以下の.pumlファイル全てを文字コードutf-8のSVGにして.pumlのあるフォルダと同じ場所にダンプします。svgならば./svg以下にSVGファイルが出力されます。811月,20190著者:杉浦GitHubを使って一般的な変数名を選ぶ学生時代、分かりやすい論文を書くために気にするべきことの点として「一般的な語を選ぶ」という点がありました。ここでいう一般的とは、対象の界隈(論文なら学術分野)で広く使われていて共通認識が存在する、ということです。「一般的な語を選ぶ」とは、角速度センサとジャイロセンサの様な同じものを指す語の内より多く使われている方を選ぶ、といった感じの行為です。このどれが最も多く使われているかを簡易に調べる方法としてググった際のヒット件数の比較があります。Scholarまで行ったりします。先ほどの例ならばジャイロセンサの方が多く使われているので、角速度を計測するセンサを表す時は”ジャイロセンサ”を使うと判断できます。中長期の開発や機能改善の際にはいくらか忘却したコードを改めて読む必要があります。この時に変数名、クラス名などの様々な値の名前から値の意味が理解できない場合、コードを読み解くのに時間がかかります。ある機能について調べる時に値の名前から探そうとするもあり、一般的でない名前が使われているとまともに検索できません。次のツイートは極端な例ですが似たようなことは簡単に起きます。2019年6月6日この様な名前の問題を避けるためにリーダブルコードでは次の様に指南されています。名前をつけるときには、それが変数であっても、関数であっても、クラスであっても、同じ原則を当てはめることができる。名前は短いコメントだと思えばいい。短くてもいい名前をつければ、それだけ多くの情報を伝えることができる。プログラムに使われる名前というのはハッキリしないものが多い。tmpなんかがそうだ。sizeやgetみたいに一見すると問題がなさそうな名前であっても、情報が含まれていないことがある。これから情報を詰め込んだ名前のつけ方を紹介する。本章は、以下の6つのテーマで構成されている。版.共通認識の成り立っていると仮定できるくらい一般的な名前ならば、少ない文字数で「明確な単語を選ぶ」「汎用的な名前を避ける(あるいは、使う状況を選ぶ)」「抽象的な名前よりも具体的な名前を使う」の三つが満たせます。「接尾辞や接頭辞を使って情報を追加する」をした際に過度に長い名前ができあがらなくなります。論文における一般的な語の選択の様に、コーディングにおける一般的な名前を選択しようとするならば、コーディング界隈から使用されている数を調べる必要があります。この時、Googleは程々にしかあてになりません。Googleで検索できるのはweb上のコンテンツ全てでありソースコードから離れています。代わりにGitHubの様なソースコードリポジトリを用いることができます。GitHubならば言語、フレームワークでソースコードを絞り込むこともでき、より適した範囲から語の検索ができます。lngにしておくのが適切だと分かります。【Vue.js】コンポーネント外で定義した値をテンプレート内で使うVue.jsの単一ファイルコンポーネントはコンポーネントを構成するHTMLテンプレート、JavaScript、CSSを一ファイルにまとめる仕組みです。コンポーネントの構成要素全体を把握しやすい点で優秀なのですが、テンプレート部で扱うことのできる変数が若干不透明で時として直感的でない振る舞いをします。次の例ではコンポーネント内全体がスコープっぽいところで変数hogeStrを宣言してテンプレート内で使用しようとしますが、これはhogeStrが未定義扱いされます。{};</script>実際に扱うときにはVueインスタンスの内部に含まれなければいけません。変化のない定数でも必須です。そのため実際は次のようにします。},};</script>単一ファイルコンポーネントの作りではテンプレート、JavaScript、CSSがタグごとに分かれますが、結局のところtemplateタグもVueインスタンスの一部でありVueインスタンス外部を見るスコープにないようです。computedで同じ名前の値を読み込んでもVue.jsは動き続けます。外部から値を読み込むように作り替えた時に想定外の挙動が起きたならば、これが起きているのではないかと疑えます。Playerに頻繁にクラッシュする不具合が発生。現在修正済みで公開待ち状態。