request: Nuxt + Electronに関する記事

[shinGangan]

概要

Nuxt + Electronについて書いてほしい

詳細

Nuxt + Electronを用いてデスクトップアプリを作る記事は軒並みNuxt2時代のものである。そのため、Nuxt3以降のものが市場にない。

現在、Electron用のNuxt Moduleが存在している。

• https://nuxt.com/modules/electron

そこでNuxt + ElectronについてのHow to記事を書いてほしい。
Nuxtを用いてデスクトップアプリ開発、モバイルアプリ開発など、Nuxtの可能性を広げるためにもNuxt3 + Electronの記事は市場に公開されてほしい。

備考欄

No response

[petaxa]

Nuxt Moduleを利用したElectronの導入記事を書く

ターゲット

• 英語の公式ドキュメントを読むのを億劫に感じる人
• Nuxtのプロジェクトを作るにあたって、Nuxt + Electronという選択肢を持っていない人

記事のゴール

ターゲットに該当する人が、記事を見ながらNuxt Moduleを用いたElectronの導入を行い、開発にスムーズに入れる。

書きたい要素

• 作ったばかりのNuxtプロジェクトにElectronを導入する方法
  • 完成済みのプロジェクトに導入する方法も軽く拾いたい
• Configの設定方法
• 代表的なConfigの紹介とその設定方法
• 存在するConfigの調べ方
• 作った後どうすればいいのか
  • ビルドの方法とその結果
  • ビルド後の選択肢

[shinGangan]

Note

レビューコメント

@petaxa

ターゲット、ゴール、書きたい要素について問題ないと思いますー🙆
Config設定はボリュームが出やすい内容だと思いますので、
アコーディオンを使いながら「最低限必要な人」と「詳細も気になる人」向けを可変させるとさらに読みやすくなると思います。

[shinGangan]

@petaxa

My Opinion

現在の状態を踏まえた上での執筆は以下の3パターンが考えられると思います。

1. 正常に動くバージョンでまずは記事を書く
2. ローカルで修正する方向で記事を執筆 -> PRマージ後に記事内容を更新する(ローカル修正版もv1ですとしてアコーディオンで残す)
3. PRがマージされるまで待機する

Nuxt3 + Nuxt Electronの記事が市場に公開されていないため、まずケース1の記事が有用になります。
ケース1の記事中で「Nuxt v3.x.yでは以下のようなエラーが出ている。このエラーの解決方法はこちらです」のようなセクション　or 別記事を紐付ける

1番理想なのではケース3ですが、これはあまり現実的ではなありません。
理由は「Repoの開発サイクルを考えた時にいつレビュー・マージされるか分からない」からです。現状のサイクル速度ではいつマージされるか分からないです。
そのため、Nuxt3 + Electronを開発したいユーザーが迷子になる可能性が高いです。
この迷子となったユーザーに対して「ケース1なら暫定的に動くよ」を提示するのも1つの策と思います。

---

もし @shinGangan が執筆者だった場合は以下のような執筆スケジュールを組みます。

1. 動くNuxtバージョンでの記事を執筆する
2. 1項と合わせて「最新バージョンでこんなエラーが起きてるよ、解決策は暫定的にこれだよ」という記事を公開する
3. PRの通知をsubscribeし、いつPRがマージされても良いように下書き記事を準備しておく
4. PRがマージされた段階でケース3の記事を公開する → ケース2の記事の先頭にケース3記事の誘導動線を用意する

example

上記フローで実際に執筆したのが以下の記事です。

https://zenn.dev/comm_vue_nuxt/articles/pinia-autoimports

https://zenn.dev/comm_vue_nuxt/articles/pinia-stores-dirs-autoimports

本モジュールはPRの流れを観測する限りbreaking changeの恐れがありました。
そのため、

• 現バージョンですぐに利用したい人向け
• breaking change後に利用したいユーザー向け

という目的で2つの記事を書きました。

[petaxa]

1. 動くNuxtバージョンでの記事を執筆する
2. 1項と合わせて「最新バージョンでこんなエラーが起きてるよ、解決策は暫定的にこれだよ」という記事を公開する
3. PRの通知をsubscribeし、いつPRがマージされても良いように下書き記事を準備しておく
4. PRがマージされた段階でケース3の記事を公開する → ケース2の記事の先頭にケース3記事の誘導動線を用意する

この方針を頂こうと思います、ありがとうございます！

[shinGangan]

1. 動くNuxtバージョンでの記事を執筆する
2. 1項と合わせて「最新バージョンでこんなエラーが起きてるよ、解決策は暫定的にこれだよ」という記事を公開する
3. PRの通知をsubscribeし、いつPRがマージされても良いように下書き記事を準備しておく
4. PRがマージされた段階でケース3の記事を公開する → ケース2の記事の先頭にケース3記事の誘導動線を用意する

この方針を頂こうと思います、ありがとうございます！

記事なんて何本書いてもええですからね🙆
どんどん書いて執筆の知見増加、ハードルの低下をさせていきましょう〜

[shinGangan]

関連する情報整理

• 問題が解決するPR

  • Fix Reload loop on dev mode and support Nuxt 3.11.2 without --no-fork option caoxiemeihao/nuxt-electron#80

• 私の実験結果

  • ERROR [unhandledRejection] write after end  caoxiemeihao/nuxt-electron#71 (comment)

[petaxa]

進捗

本文は一通り書き終え、下書きで公開しました。

Nuxt Moduleを使ってNuxt3にElectronを導入しよう！
最新のNuxtでnuxt-electronの無限リロードを回避する

方針

• Vue, Nuxtの存在と概要を知っている人がnuxt-electronを導入できることを目指す
• ハンズオン形式で進められるようにする
• devモードでの起動方法、ビルド方法に内容を絞る
  • 便利、頻出なオプション等の説明は行わない
• 判断の根拠や出典へのリンクをなるべく明記する

TODO

• 手順を上から辿り、不備がないか確認
• topicsを設定
• emojiを設定
• もっといいタイトルを思いついたら変更する

[shinGangan]

ハンズオン形式で進められるようにする

ボリュームが大きいならばZennのbookも合わせて公開すると良さそうですね🙆
Bookのハンズオンは軒並み読まれているので、ハンズオンはありかもです。

---

[確認]
@petaxa
記事はどちらもレビューした方がいいですか？
それとも特に不要であり、体裁整えてそのまま出されますか？

[petaxa]

@shinGangan

記事はどちらもレビューした方がいいですか？

お願いしようと思っていますが、「手順を上から辿り、不備がないか確認」が完了したあとが良いかなと考えています。
完了しましたら改めてご連絡しますので、その際はよろしくお願いします。

[petaxa]

@shinGangan
手順の確認が完了し、すべての修正を反映しました！
それぞれの記事について、お時間あるときにレビューいただけると幸いです！！

[shinGangan]

@petaxa

以下レビューコメントです！

Note

Qから始まるやつは疑問です。不要だったらスルーしてください。

Sから始まるやつは提案です。採用については一任です。

prefix無しのものはレビュー指摘です

全体通じて

• ,と、、.と。、versionとvなど文章中で利用する句読点、用語はどちらかに統一した方が良いです
• 利用する用語の表記揺れは気をつけた方が良いと思います。正しい表記を使うことで読み手の混乱を防げますね
• 所感：textlintを導入して表記揺れや句読点の散らばりを抑える選択肢があります。早めにZenn + textlint環境を整備してみるのはアリです🙆

導入記事

はじめに

• 「はじめに」の項にバージョン情報が欲しい
  • 現時点や最新バージョンなどの用語は読み手のタイミングによって可変するパラメータです。そのため、「本記事が想定するバージョンは以下の通りです」みたいに明記する方がユーザーライクでしょう (私の記事参照)
  • はじめに記載することで不具合の解決策を求めていたユーザーがすぐに離脱できるため

Nuxt Electronの導入

• S. npmを利用するのであれば--packageManagerオプションを利用しても良さそうですね。いかがでしょうか。

無限ループ記事

これでDevモードで正常に起動するはずです。

タイトルが「回避する」と断定しているので、これは断定した表現が適切だと思います。

[petaxa]

ありがとうございます！

レビュー、すべて取り入れさせていただきました！
textlintも導入し、日本語の修正も行いました。

---

記事の公開も行いました！
https://zenn.dev/comm_vue_nuxt/articles/0c4725404b040e
https://zenn.dev/comm_vue_nuxt/articles/cbaf30c7054c40

アドバイスにレビュー、本当に勉強になってます、ありがとうございます。

[shinGangan]

投稿完了したのでこのイシューをクローズ