Plopをつかってみよう
120 Views
April 28, 25
スライド概要
【三宮】【LT会】3rd place "meet & create"@HACK.BAR (https://3rdplace.connpass.com/event/353831/ ) の発表資料です。
このスライドでは、標準的な開発を実現するためのツール「Plop」について紹介しています。
まず、単純なCRUD実装を正確かつ高速に開発させるには、実装サンプルのコピペだけでは限界があり、人的ミスやスピードの問題が起こることを指摘しています。そこで、テンプレートエンジンを活用するアプローチを提案しています。
Plopは、Node.js環境で動作するマイクロジェネレーターであり、対話型CLI（Inquirer.js）とテンプレートエンジン（Handlebars）を組み合わせた仕組みです。これにより、プロンプトに答えるだけで標準的なソースコードを自動生成でき、速度と品質を同時に確保できます。
スライド内では、
Plopの基本的な使い方
plopfile.tsにおけるジェネレーター設定
handlebarsを使ったテンプレートの書き方 などが具体的に解説されています。
また、Plopを拡張して、生成されたファイルをbiomeでフォーマットしたり、入力値に加工を加えたテンプレート生成も可能である点が紹介されています。
Yaichi 代表
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
0.9M
各ページのテキスト
Plopをつかってみよう 2025年4月25日 Yaichi 平田 恭嘉
標準的な開発をさせよう ドメイン名が違うだけのような実装をどう作らせるか Plopをつかってみよう 目次 Plopの説明 Plopのつかいかた Plopの設定ファイルとHandlebarファイルを書いてみよう。 Plopの利用例 Plopで爆速で正確で爽快な開発をしよう。
Hirata Takahiro 平田 恭嘉 経歴 2020年 神戸大学大学院 卒業 システム情報学研究科で薬剤の量子力学シミュレーションの研究をする。 2020年 株式会社オプト 20年下期に新人賞、21年上期に領域準MVPを獲得。深層学習に関するR&Dに従事。 2022年 株式会社Digeon 神戸市のベンチャー企業にてVPoEを務める。開発に関わること全部に従事。 2025年 Yaichi 設立 神戸市を中心に小売店から大手案件まで、システム開発と技術顧問をしている。 趣味 ビール スケボー ドラム
開発していただくとする 簡単なTODOアプリで用いるような、 単純なCRUDの実装は業務レベルのシステムでも存在する。 どうやって正確に開発していただくか。
標準的な開発をさせよう フレームワーク Ruby on Rails Django Laravel などを使えば爆速に実装できる。 しかし、それを実現するにはAPIスキーマとドメイン とDBテーブルを渾然一体とする必要がある。 複雑な実装をするには、これらの利用を辞めることに なりがち。
標準的な開発をさせよう 実装サンプルからコピペ 疎結合化され依存性注入が可能でテスタブルな変更容 易性の高いソースコードを実装できたとする。 実装サンプルを用意して、それを真似してもらう。 「既存実装のドメイン名を書き換えていい感じに書き 換えてくださ〜い」 簡単なようにも見えるが、変更箇所を熟知していなけ れば爆速には至らない。また、手作業によってミスが 発生することもしばしばある。
標準的な開発をさせよう テンプレートエンジン 雛形からソースコードを生成する。 複雑な要件が必要なときはドメインロジックやビジ ネスロジックに対し、都度修正や追加を行うだけで よい。 単純なものであれば10分程度で実装することができ る。 これにより、速度と品質を両方得ることができる。
Plopをつかってみよう
Plopをつかってみよう Plopのせつめい Plop (https://plopjs.com/) はテキストファイルを生成するための、micro-generator frameworkである。 Inquirer.jsによる対話的CLIと、handlerbarによるテンプレートエンジンを組み合わせたツール。
Plopのつかいかた 設定ファイルの書き方について説明します
Plopのつかいかた plopfile.ts plopfile.tsを作成し、 どのような処理をするか定義する。 setGeneratorで生成器を定義することができる。 promptsにはプロンプトを順番に設定していく。 promptsのtypeにはInquirer.jsの設定値を使うことが でき、文字列入力や選択肢が使える。 actionsのtypeは以下の4種類が使える add(テンプレートからファイル作成 addMany(複数ファイル作成 modify(既存ファイルの編集 append(既存ファイルに挿入)
Plopのつかいかた plopfile.ts setActionTypeでactionを自作することができる。 私が作成したものを右に記載する 生成結果をbiomeでフォーマットする 入力した値を埋め込んだ文字列を出力する。
Plopのつかいかた handlebar handlebar (https://handlebarsjs.com/)はシンプルな テンプレート言語である。 {{ プロンプトで入力した変数名 }} と書かれた箇所をその値で置き換えることができ る。 {{ 関数名 プロンプトで入力した変数名 }} とすることで、入力した値に変換をかけた上で置き 換えることができる。
Plopの利用例 実際にやってみた
Plopをつかってみよう まとめ 標準的な開発をさせよう ドメイン名が違うだけのような実装をどう作らせるか Plopをつかってみよう Plopの説明 人々を自由にする 開発者募集中 小売向けプロダクト開 大規模システム開発 (急募 準委任型 開発組織支援 Plopのつかいかた グリット 商魂 緻密 Plopの利用例 TypeScriptの経 ミッションクリティカルシステムの開発経 一人で要件定義からデプロイまででき プロダクト開発に興味がある Plopの設定ファイルとHandlebarファイルを書いてみよう。 Plopで爆速で正確で爽快な開発をしよう。