双生日記開発経験の共有

こんにちは、私は双生日記の創設者兼開発者である Airing です。このプロジェクトのミニプログラムは、2018 年 C4-WeChat Mini Program Application Development Competition で一等賞を受賞し、iOS 版は 2018 年 C4-Mobile Application Innovation Competition で一等賞を受賞しました。現在、登録ユーザー数は 1 万人以上であり、引き続き開発とメンテナンスが行われています。

この記事では、私たちのチームが製品の開発プロセス全体で行った作業を簡潔にまとめ、製品の開発とチームの管理方法に重点を置いて紹介します。

私は製品の開発を以下の 4 つのステップに分けています：

プロジェクトの立ち上げ
デザイン
開発
メンテナンス

プロジェクトの開発プロセス図

上記の 4 つのステップがプロジェクトプロセスのループを形成し、製品の健全な発展を可能にしています。次に、これらの 4 つのステップの内容について具体的に説明します。

1. プロジェクトの立ち上げ#

プロジェクトの立ち上げはすべてのプロセスの最初の部分であり、私にとっても最も重要な部分だと考えています。この作業内容は「プロダクトマネージャー」の責任に似ています。私は創設者ですが、製品の議論はみんなで共有しています。具体的には、このステップには 2 つの内容があります：

ブレインストーミング
ドキュメント整理

1.1 ブレインストーミング#

まず、私はチームでアイデアを出し合い、ディスカッションのためのディスカッションエリアを作成します。私たちは非常に大きな興味グループです。双生研究に参加しているのはわずか 3 人ですが、ブレインストーミングの際には、チームのメンバーがそれぞれの意見や提案を出します。例えば、以下の図は、私たちがチームで議論した内容です。

私たちのチームは「语雀」というプロダクトを使用していますが、ツールは自由に選ぶことができます。私はテンセントドキュメントも非常に便利だと思いますが、重要なのは電子版の記録資料を作成することです。ただ微信グループで議論したり、オフラインで簡単に話したりするだけでは、効率が低くなり、議論したことを忘れる可能性があります。

1.2 ドキュメント整理#

2 番目のステップでは、ブレインストーミングのドキュメントを整理し、関連する開発ドキュメントを作成します。具体的には、要件ドキュメント、製品ドキュメント、モデルドキュメント、インターフェースドキュメントなどが含まれます。

PS. これは私たちのチームのドキュメントライブラリで、参考にしてください：零熊 | 语雀

2. デザイン#

私たちは Sketch を使用してデザインツールを作成していますが、ソースファイルを直接開発者に送ることはありません。ライセンスのある Sketch は高価であり、mac システムのみをサポートしています。ここでは、蓝湖というツールを使用しています。最初は语雀のボードを使用していましたが、使いづらいことがわかりました... また、蓝湖のデザイン稿は共有することができ、チームのメンバーにコメントを求めることができます。

デザイン稿には、以下の内容が含まれます：

ガイドライン
プロトタイプ
UI
画像の切り出し

ガイドラインは、色のガイドライン、コンポーネントのガイドライン、フォントのガイドラインに重点を置いています。プロトタイプは主にインタラクションの説明です。ここでは、UI に対して注釈を付けて、インタラクションを詳細に説明していますが、Flinto を使用して直接作成することもできます。Flinto の利点はより直感的ですが、開発者がデザインの全体像を把握することは必ずしもできません。

3. 開発#

このセクションでは、製品開発の中核的なプロセスであるプロジェクト開発について共有します。このセクションでは、少し詳しく説明しますが、いくつかの内容が散在しているため、主に 3 つの内容が含まれます：

プランニングの記録
開発ツール
アドバイス

3.1 プランニングの記録#

開発の前に、私は自分自身でプロジェクトの各要件ポイントや技術ポイントをリストアップするために todolist を作成することが習慣になっています。全体的には、開発タスクを計画し、自分の開発タスクを計画しやすくするために、重要なモジュールごとに製品を分割しています。ここで使用しているツールはNotionです。重要なモジュールごとに製品を 8 つの部分に分割し、各部分に todolist を書きます。

もちろん、todolist は単なるタスクリストだけでなく、開発日記の役割も果たしています。私は開発中に遭遇した困難な問題や解決策、または使用したリソースを手軽に記録しています。開発は学びと成長のプロセスであり、単にビジネス要件を満たすだけではありません。 手軽に記録することで、後でブログに整理したり、同様の問題に再び遭遇した場合に迅速に特定することができます。記録しないとすぐに忘れてしまう可能性があるためです。したがって、開発日記を作成することは、学習効果に非常に大きな影響を与えます。

3.2 開発ツール#

WeChat Mini Program の開発には、開発に精通している人は VS Code + 拡張機能 + リアルデバイスモードを使用して開発することをお勧めします。個人的には、このフローは効率的でエラーが発生しにくいと思います。 "効率的" は VS Code 自体の効率であり、"エラー" はシミュレーターの効果が実機と異なる場合を指します。

ここで、私自身の VS Code の設定を紹介します：

私はエクスプローラーを右側に配置していますが、その理由は 2 つあります。1 つは左側が人の注意領域であるため、コードエディタを配置する必要があるためです。2 つ目は、Cmd + B を押すとエクスプローラーを非表示にすることができ、同時にエディタの位置が変わらないためです。左側に配置すると、非表示にするときにエディタが移動し、目が非常に不快になります。

拡張機能には、いくつか興味深いものがあります：

Color Highlight：色の値を色自体に可視化するためのハイライト。フロントエンドのスタイル開発が容易になります。
TODO Highlight：TODO と FIXME をハイライト表示します。
miniapp：小プログラムのタグと属性を自動補完します。
Bracket Pair Colorizer：括弧の色付けペア。これは特に便利です。
Image preview：コード内で URI の画像をプレビューするためのものです。リソースパスが間違っていないか確認するために使用しています。
REST Client：HTTP テスト、開発、共有、モックが容易になります。

テーマには Winter is Coming Theme + Material Icon Theme を使用しています。個人的には、デフォルトのダークテーマも非常に魅力的だと思います。

3.3 注意事項#

共同開発の場合は、Git History + Eslint プラグインを組み合わせることをお勧めします。もちろん、個人開発でも Eslint は避けられません。Git Commit の規則は、Commit 提交规范を使用しています。

開発中には、アクセス解析やトラッキングのためにいくつかのポイントを埋め込むことも忘れないでください。プロジェクトの要件に応じて、検出する必要がある場所を決定します。たとえば、PV、UV など、小プログラムには組み込まれているものは組み込まなくても構いませんが、他のプロジェクトでは統計を行う必要があります。または、Nginx のログを計画し、ログを分析することもできます。

フロントエンドとバックエンドの分離開発の場合、フロントエンドの同僚はモック API を使用して、インターフェースドキュメントに準拠したモックインターフェースを作成できます。