WordPressの記事管理に頭を悩ませてきた。 で、行きついた先が、今後のことを考え、WordPressの記事をGitで管理しGithubに一元管理することにしただったのだが、色々運用を決めていくとどうにも面倒で仕方なくなってきた。 Githubでの運用方法 書きたい題材が見つかった時にIssueをたてる Issueからブランチをきり、記事を作成する プルリクを作成する 記事をWordPressにコピペ 公開 プルリクを承認する という手順を自らに課したせいで、更新が億劫で仕方なかった。 そんなときに救世主であるWordPress PostというVSCodeの拡張機能にであった。 WordPress Postとは？ この Visual Studio Code 拡張機能は、WordPress に記事を投稿するアクションを提供します。これは、人々が Visual Studio Code を使用して Markdown で WordPress 記事を作成するのに役立ちます。 簡単に言うと、VSCodeで記事を書き、WordPressの管理画面を開くことなく、公開まで持っていける。 という最強の拡張機能！ 使い方は作者のブログに詳しい。 これにより先ほどの手順が驚くほど簡略化された。 WordPress Postを使った公開手順 記事を下書き設定で書く WardPressからカテゴリ・タグ・アイキャッチ画像を選択 公開 WardPressからカテゴリ・タグ・アイキャッチ画像を選択 は個人的に独自の手法を使っているのでまあ仕方ない。 管理画面に行かなくてはいけないものの、相当簡略化された。 さらに当然Git管理も問題ない。 来世でも使うと思われるVisual Studio Codeの拡張機能をまとめてみた間違いなく、こちらの記事に更新をかけ、追加するべき拡張機能である。 だがしかし、過去にこれで管理してないファイルはどのように対処する必要があるのか…? たぶん、過去のは二元管理になるかしら。 とは言え、この拡張機能が素晴らしいことは間違いない。

依存関係をインストールする npm install --save @nestjs/swagger main.tsを編集する async function bootstrap() { const app = await NestFactory.create(AppModule); // Swaggerの記述 const config = new DocumentBuilder() .setTitle('Cats example') .setDescription('The cats API description') .setVersion('1.0') .addTag('cats') .build(); const document = SwaggerModule.createDocument(app, config); SwaggerModule.setup('api', app, document); await app.listen(3000); } bootstrap(); 後は上の記述を編集し、http://localhost:3000/api/を開けば作成されている。 非常に楽なので活用していきたい。 APIをグルーピングする これだとcatsというタグができるがその中は空になり、すべてがdefaultにグルーピングされる。 任意のグルーピングを作りたい時は、hoge.controller.tsを下記のように変更する。 import { Controller } from '@nestjs/common'; import { ApiTags } from '@nestjs/swagger'; @Controller('hoge') @ApiTags('hoge') export class HogeController { constructor(private readonly sService: HogeService) {} これで意図した形になる。

環境変数化とDB接続のモジュール化 綺麗にって漠然と書いたが、 環境変数化 DB接続のモジュール作成 を行っていく。 DB接続のモジュール作成 まずは外部モジュール化する。 nest g mo database で、データ接続用のモジュールを作成する。 import { Module } from '@nestjs/common'; import { TypeOrmModule } from '@nestjs/typeorm'; @Module({ imports: [ TypeOrmModule.forRootAsync({ useFactory: () => ({ type: 'mysql', host: 'localhost', port: 3306, username: 'username', password: 'password', database: 'database-name', entities: [], synchronize: true, }), }), ], }) export class DatabaseModule { } 次に、app.module.tsの方を編集する。 @Module({ imports: [ DatabaseModule, ], 設定をべたでimportしていたので、それを外部モジュールに変換する。 これで外部化は完了。 環境変数化 次に環境変数化していく。 npm install @nestjs/config で、環境変数から読み込むためのパッケージをインストールする。...

プルリク時の記述を共通化する プルリク時に各々違うフォーマットで書かれるとレビューする人が大変なので、テンプレートを使用し共通化を図ることにした。 基本的にリポジトリ用のプルリクエストテンプレートの作成を参考にすれば間違いないが、ここでは最もシンプルな方法を共有する。 共通用テンプレートの作成 cd project-root まずはプロジェクトのルートに移動する。 mkdir .github 次に.githubフォルダを作成する。 touch PULL_REQUEST_TEMPLATE.md でPULL_REQUEST_TEMPLATE.mdという空のファイルを作成する。 そこでにテンプレート内容を書けばok。 どんなテンプレにすればいいか 正直プルリクの運用は迷うことばかりなので、プルリクのレビューを効率的に進めるためにルールを作ってみた話を参考にした。 テンプレート内容 上記リンクから内容を拝借する。 ## チケットもしくは概要 <!-- close #XX or ログイン機能の実装 --> ## やったこと <!-- - Hoge コンポーネントに props を追加 - Fuga コンポーネントを実装 --> ## 特に見て欲しいところ <!-- - 新しいライブラリを追加したが、他に妥当な物があるか - テストケースがこれで十分かどうか --> ## 動作確認手順 <!-- 1. ログインフォーム(/login)にアクセス 1. メアドとパスワードを入力してログインを実行する 1. ログインが成功してユーザー一覧ページにリダイレクトされること --> ## TODO（できればIssueを立ててリンクを貼りましょう） <!-- - [ ] バリデーション - [ ] エラーメッセージ --> ## その他情報 <!...

そもそもER図とは？ ER図とは「データベース設計における代表的な設計図のこと」らしい。そして「作成したER図がそのまま物理データベース上に変換できることから、データベース設計手法におけるデファクトスタンダード」とのこと。 つまりたぶん、ER図を書くという技術は必要不可欠っぽい。 データモデル ER図はシステムの上流工程の中で段階的に設計するらしく、各工程で作成するER図の状態のことを「データモデル」というらしい。 概念モデル 要件定義工程で作成するデータモデル。 最初にシステム全体における「もの」や「できごと」をエンティティ、リレーションシップとして洗い出し、概要を表したもの。 論理モデル 基本設計工程で作成するデータモデル 特定のデータベースに依存しないレベルで具体化した状態を表したもの。 物理モデル 詳細設計工程で作成するデータモデル Oracle Database等の特定の物理データベース向けに論理モデルの変換をする。 例えばデータ型を追加したり、物理データベースに即したアルファベットに変換する。 ER図の最終形態がこの物理モデル。 と色々書いたけどほとんどER図とは？書き方やテクニックをわかりやすく解説を参考にしたので、こっちを参考にした方がよっぽど良い。 どう書くか で、ここからが本題になる。 じゃER図は何を使って書くべきなのか。 参考までに会社のバックエンド担当に聞くと「A5:SQL Mk-2」を使っているとのこと。 なるほど、それを使うかと思ったけど、自宅のパソコンはパフォーマンスが良くないので、出来れば開くソフトを少なくしたい。 ということで、どうせ開いている「VS code」で書ける拡張機能を探してみた。 Draw.io Integration This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. Mentioned in the official diagrams.net blog. ↑が本家の説明文。 詳細はVSCodeでDraw.ioが使えるようになったらしい！に詳しい。 そこから引用すると、 Draw.ioとはdraw.ioにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。 Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。 このサービスがVS codeで使えるようになったらしい。 .dioファイルを作成する 拡張子を.dioに設定したファイルを作成することで利用が開始される。 ちなみに、 .drawio.pngとかdrawio.svgでファイルを生成すると、importやexportの必要なくそのまま画像として利用できたり、編集することが可能らしい。 ファイルを作った瞬間、編集画面が表示されたすごい。 あとはdiagrams.net(draw.io)でER図を描く方法　※画像つき解説とかの通り、draw.ioでER図各サイトを参考にすれば問題ない。