Posts

※この記事を書いているのはフロントエンドを専門にしているので、バックエンド側の「いろは」は何も知りません。 フロント専がDockerとはいったいと頭を抱えつつ、ざっくり入門する記事になります。 Dockerに入門、重い腰を上げる理由 実はというほどでもないが、nestJsもコマンド１つでローカルホストを立ち上げることができるし、公式ドキュメントもローカルホストで書かれている。つまりあえてDockerに入門する必要もないのだが、開発の参考にする記事を調べると、ことごとくDockerで作業しているし、どうやらデプロイもDockerのファイルを使って行っているようである。であれば、こちらも開発環境を合わせた方が開発がよっぽど楽になるので、この機会に入門しちゃうことにした。 なぜDockerを使うのか と聞くと、「環境を揃えたい」という回答が良く聞こえてくるが、いまいちピンと来てない。そもそもフロントエンドであればPackage.jsonで環境を揃えられるんじゃないのと言いたくなる。けどそれを言うと無知と思われるのも嫌なので、調べてみることにした。 NodeとOSを揃えられる Nodeのバージョンを共有できる 調べてみると、Nodeのバージョンアップを揃えられるというのが強みらしい。 これは確かに納得できる。 今までのプロジェクトでもNodeのバージョンが揃ってなくて苦労したことは良くある。Package.jsonの方で依存ライブラリを管理してもその大本であるNodeのバージョンが管理されていなければ意味がない。まあ、Voltaを使ってPackage.jsonにNodeのバージョンをピン止めすれば同じと思ったけど、そもそも皆が皆NodeのパッケージマネージャにVoltaを使っているわけじゃないので、そううまくはいかない。ただそれで言うとDockerもそうなので、納得できるけどこのメリットを享受するためにDockerを入れようとは正直思わない。 Volta - The Hassle-Free JavaScript Tool Manager OSを揃えられる どうやらイメージという設定ファイルでOSを指定できるらしい。 つまり今までOSごとに環境構築で苦労することがあったが、それがなくなるらしい。というのもDockerを使うことで、使っているOSに環境構築するというわけではなく、Docker上のコンテナに環境を構築するので、OSに依存しなくなるということらしい。 実際に使うことでメリットを享受するしかない なんか色々な記事を見てみたが、メリットと感じるのは上に上げた２つだけだった。導入手順を考えるとあえて使う気にもならないが、社会的にDockerを使おう的な風潮を感じるので、今回の個人開発で導入してみて、所感を述べようと思う。使わずに批判するのは一番よくないって誰かが言っていた気がするし。 あとざっと調べてみた感じ、 デプロイが簡単にできる？ 環境をそのまま渡すことができるので、譲渡しやすい？ みたいなメリットがあるのかなと感じた。 とりあえず、物は試しで手を動かして入門してみる。

ネットで見つけた方法は どうやら下記コードで目的は達成できるらしい。 new Array(10).fill(0).map(() => 0) // => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] いったい、どうしてこうなるのか。 何が行われているのか？ new Array() かっこの中に入れたLength分の配列を作成する。 つまりnew Array(10)であれば10個の値を含む配列を作成してくれる。 ちなみに値はundefinedになる [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined] fill() fill() メソッドは、開始位置（既定値は 0）から終了位置（既定値は array.length）までのすべての要素を、静的な値に変更した配列を返します。 つまり先ほど作った10個のundefinedを持つ配列のundefinedを0に変更してくれるということ？ console.log(new Array(10).fill(0)) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ということらしい。 この時点でタイトル（n個の任意の値を持つ配列を作成する）という目的は達成されている。 いったいmap()は何をしているのか？ map() このコードでいえばmap()は配列の個数分取り出して0を入れるという、まったく生産性のない動きをしている。 つまり本タイトルという目的を達成するためであれば、不要以外の何物でもない。 n個の任意の値を持つ配列を作成する方法 ということで結論は、 console.log(new Array(10).fill(0)) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] に落ち着いた。...

コンポーネントを再レンダリングさせたい 色々な状況が複雑に絡み合っていた。ある処理を行ったあと、初期表示に戻したいという要件があり、それじゃあということで、表示用にデータを作り直したりと色々手を尽くしたが、前述したように色々な状況が複雑に絡み合っていせいで、どうにもできなかった。 そこで、いっそコンポーネントをまるっと再レンダリングしちゃえ、ということにした。 で、それを実現するのが下記コード。 constructor(private router: Router) {} ~ this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => { this.router.navigate(['Your actualComponent']); }); 行われていることは、１度RefreshComponentというページに飛び、Your actualComponentに戻ってくるという処理。ただユーザーはそれに気が付かない。つまりハック的な対処方法なので、使うのは自己責任で。

状況 修正中に、どうしても取り込みたいブランチがあったけど、まだCommitはしたくない。 対応方法 stash→merge→apply git stash save で一時的に保存する git stash save 上記だと何ためにstashするのかわからなくなるのでコメントを付けることが推奨される。 git stash save "任意のメッセージ" 実行すると、変更履歴から消えるが、新規作成したファイルは削除されないので、変更履歴に残り続ける。 なお、残り続けているファイルは退避できていないということなので、安易に消さないようにした方がいい。 ※stashは未追跡のファイルを退避してくれない。未追跡のファイルも含めたいときは-uオプションを付ける必要がある。 git stash list で保存できているか確認する git stash list // => 「stash@{番号}」: On 「ブランチ名」: 「メッセージ」 上記のように表示できていれば問題ない。 作業を行う ここで本来やりたかったことに着手する。 今回であれば取り込みたいブランチをマージする。 git stash apply で保存データを復旧する git stash apply 復旧したいstash名 名前を省略すると、一番最新のstashを復旧されるので、最新のものを復旧する際は名前なしで問題ない。 復旧できたことが確認できればOK。 git stash drop で保存データを削除する git stash drop わからなくならないように適宜、削除する。

まず大前提としてWordpressの初心者である。 いや、初心者は言い過ぎだろうか、いや、そんなことない、初心者である。 自作テーマはいくつも作ってきたが、それをWordpressの公式テーマとして申請したこともなければ、プラグインの申請をしたこともない。 全て野良で行ってきた。 つまり、Wordpressに関してまったくの初心者であると言っても過言ではない。 そんな私が一からWordpressのプラグインを公式配布するまでの手順を調べてみたので、ここに残しておく。 大前提だが、プラグインは作っておく必要がある 言うまでもないと思うのだが、念には念を入れ言っておくと、プラグインは作った状態で以降進んでいく。 いやプラグインの作り方がわからないのだが、というのであればそれはまた別の記事にするので見てほしい。 ただ記事にしない可能性もあるので、気長に待つよりは他の人の作成方法を見たほうが得策かもしれない。 さて、つまりこの段階でプラグインが完成しているという前提で次の話にいく。 WordPress.orgのアカウントを作成する これはプラグインの申請に必須なアカウントになるので、まず最初にやっておくことにする。 WordPress.org ログイン ｜ WordPress.org 日本語 作成は上記リンクからできる。 何回か通信が遮断されてストレスを感じたけど、特に難しいことなくアカウントを作成できた。 しかしまったく管理するアカウントが増えて仕方ない。 が必要なのであればそれは仕方ない。 申請用にreadme.txtを準備する アカウントができたら次に進む。 「readme.txt」に書かれた内容が、公式サイト個別プラグインのページや管理ページからのインストール画面に表示されるらしい。 申請に必須かどうかわからないけど、とりあえず埋めることのできる箇所は埋めてみた。 書き方に関しては「Plugin Readme Generator」なるものがあったので、そちらを利用した。 でき上がったのが、 === Create Eye Catch For Classic === Contributors: nove2b Tags: eyecatch,ogp You can read the title of the entered blog article and automatically generate a featured image. こんな感じ。 まあ、これじゃインストールされないだろうけれど、とりあえず今できる最低限の情報は入力した。 後は無事に申請が通った後に拡張していくことにする。 ちなみに英語はできないので、Google翻訳のお世話になった。 Readme Validatorにかけ、readme.txtのバリデーションをする Readme Validator 上記公式のバリデーションに書けることで「readme.txt」の記入漏れ、記載ミスを見つけることができる。 早速、バリデーションをすると、警告が表示された。 曰く、 Tested up to フィールドを入力してください。 Stable tag フィールドがありません。ヒント: /trunk/ を安定版として扱う場合は Stable tag: trunk と入力してください。...