技術者ブログ – dandelionS Blog

2026年6月24日

Engineer’s Blog: New Features in WordPress 7.0 and How to Use Them

I’m oz, and I’ll be writing this edition of the Engineer’s Blog.
Since WordPress has recently been updated, I’d like to introduce some new features that should be useful for actual website management, along with how to make the most of them.

Release Notes: WordPress 7.0 – WordPress.org (English)

1. Responsive Display Control Features

In WordPress 7.0, you can now configure which devices each block is displayed on.

Display on PC only
Display on tablet only
Display on smartphone only

You can configure settings like the ones described above. Previously, you had to write CSS or install a dedicated plugin, but this is now available as a standard feature.

For example, you can hide images on smartphones to improve page load speed, or switch large tables designed for desktop computers to a different layout on smartphones.

2. Adding an Icon Block

WordPress 7.0 also includes a feature that makes it easy to place icons.

Until now, you couldn’t place icons without installing the Font Awesome plugin.

For example,

Display a phone icon next to the phone number
Display an email icon next to the email address
Display a warning icon next to the notes

You can create visually intuitive websites, such as these.

Note

Summary

In this post, we’ve highlighted some of the new features added in WordPress 7.0 that are likely to be useful for actual website management.

The “responsive display control” and “new icon blocks” we’ve introduced here are relatively easy to use even without specialized knowledge, and they help improve the readability and usability of your website.

WordPress is updated regularly, with new features being added all the time. Even if you use it without giving it much thought on a daily basis, taking this opportunity to try out the new features might help you manage your site more efficiently.

There are still many features I haven’t fully mastered myself, so I plan to continue trying out new features and learning how to make the most of them.

That’s all for this post.
Thank you for reading this far.
Stay tuned for the next Engineer Blog post!

2026年6月24日

技術者ブログ：WordPress 7.0の新機能と活用方法について

今回の技術者ブログを担当します、ozです。
今回、Wordpressがアップデートされたということで、実際のサイト運用で役立ちそうな新機能と、その活用方法について紹介します。

リリースノート：WordPress 7.0 – WordPress.org 日本語

1.レスポンシブ表示の制御機能

WordPress 7.0では、ブロックごとに表示する端末を設定できるようになりました。

例えば、

PCのみ表示
タブレットのみ表示
スマートフォンのみ表示

上記のような設定が可能です。これまではCSSを記述したり、専用プラグインを導入したりする必要がありましたが、標準機能として利用できるようになりました。
活用例としては、スマートフォンでは画像を非表示にしてページの表示速度を改善したり、PC向けの大きな表をスマートフォンでは別のレイアウトに切り替えたりすることができます。

2.アイコンブロックの追加

WordPress 7.0では、アイコンを簡単に配置できる機能も追加されました。

今までは、Font Awesomeプラグインを導入しないとアイコンを配置できませんでした。
例えば、

電話番号の横に電話アイコンを表示する
メールアドレスの横にメールアイコンを表示する
注意事項に警告アイコンを表示する

など、視覚的に分かりやすいサイトを作成できます。

メール

注意

まとめ

今回は、WordPress 7.0で追加された新機能の中から、実際のサイト運用で役立ちそうな機能を紹介しました。
今回紹介した「レスポンシブ表示の制御機能」や「アイコンブロックの追加」は、専門的な知識がなくても比較的簡単に利用でき、Webサイトの見やすさや利便性の向上につながります。
WordPressは定期的にアップデートが行われ、新しい機能が追加されています。普段何気なく利用している方も、この機会に新機能を試してみることで、より効率的なサイト運用ができるかもしれません。
私自身もまだ使いこなせていない機能がたくさんあるので、今後も新しい機能を試しながら活用方法を学んでいきたいと思います。

今回は以上になります。
ここまで読んでくださり、ありがとうございました。
次回の技術者ブログもお楽しみに！

2026年5月20日

技術者ブログ：生成AIの種類や使い方について

皆さんこんにちは！業務開発部所属「プリン🍮」です。
今回は、日々進化を続ける生成AIの種類や上手な使い方について紹介します。

私たちは、「DandelionsJapan」という海外向けECサイトを運用しています。
そのSNS運用や動画制作において、AIを積極的に活用しています。
例えば、投稿内容のアイデア出しや文章作成にはAIを使用し、効率的に魅力あるコンテンツを作成しています。また、画像や動画の素材についてもAIを活用することで、これまで時間がかかっていた作業を短縮しながら、高品質なビジュアルを実現しています。

生成AIの種類

一口にAIといっても、その種類はさまざまです。
文章生成AI、画像生成AI、動画生成AI、音楽生成AIなど、用途ごとに特化したツールが次々と登場しています。それぞれ得意分野が異なるため、目的に応じて使い分けることが重要です。

例えば、文章作成には文章生成AI、ビジュアル制作には画像生成AIといったように、適切なツールを選ぶことで、より効率的に成果を出すことができます。

具体的には、文章生成AIとしてはChatGPTが代表的で、アイデア出しや文章作成、要約など幅広い用途に対応しています。

次に、画像生成AIとしてはMidjourneyがあり、テキストで指示を出すだけで高品質なイラストや写真風の画像を生成することができます。
また、動画制作の分野では、画像やテキストから映像を生成する動画生成AIが活用されており、制作の効率化に大きく貢献しています。

さらに、音楽生成AIとしてはSunoがあり、文章で雰囲気を指定するだけでオリジナルの楽曲を作ることが可能です。

このように、それぞれのAIには得意分野があるため、目的に合わせて適切に使い分けることで、より質の高いコンテンツ制作が実現できます。

上手なプロンプトの書き方

生成AIを活用するうえで特に重要なのが「プロンプト（指示文）」の書き方です。生成AIは入力された内容をもとに結果を生成するため、指示が曖昧だと期待通りの成果は得られません。例えば、画像生成において「着物の女性、かわいい」といった簡単な指示では、具体性に欠けるためイメージ通りの画像にならないことがあります。

一方で、「浅草の仲見世通りで、赤と白の着物を着た20代の日本人女性が笑顔で立っている。日中の自然光で、写真のようにリアルな表現」といったように、被写体・場所・状況・雰囲気などを具体的に書くことで、より理想に近い結果を得ることができます。

では、このようなプロンプトはどのように考えればよいのでしょうか。
実は、先ほどの例は以下のような要素に分解して考えることができます。

・主題／被写体（Who / What）
　最も描きたいものを具体的に指定する（例：20代の日本人女性）

・行動／状況（What）
　主題が何をしているかを明確にする（例：笑顔で立っている）

・場所／背景（Where）
　シーンの舞台を指定する（例：浅草の仲見世通り）

・画風／芸術スタイル
　どのようなタッチで描くかを指定する（例：写真のようにリアル）

・写真／写実性
　リアルさのレベルを強調する（例：自然光、フォトリアル）

・カメラ／アングル
　視点や構図を指定する（例：クローズアップ、広角など）

・不要な要素の指定
　生成してほしくない要素をあらかじめ除外する（例：ぼやけ、低品質、文字、透かしなど）

さらに重要なのが語順です。プロンプトは前に書いた要素ほどAIへの影響が強くなる傾向があるため、最も重要な要素（被写体など）を最初に書くことがポイントです。

最近では、生成AIの精度も上がってきているため、ある程度簡単な指示でもそれなりの結果は得られるようになっています。しかし、よりクオリティの高い成果や自分のイメージに近いアウトプットを得るためには、こうした要素を意識してプロンプトを設計することが重要です。
少し手間をかけて具体的に指示を書くことで、生成AIの能力を最大限に引き出すことができます。これらを意識すると、想像していたような画像が生成できるようになります！

まとめ

生成AIは非常に便利なツールであり、使い方次第で作業効率や表現の幅を大きく広げることができます。しかし、ただ使うだけでなく、適切なツールの選択やプロンプトの工夫が重要です。
私たちもこれらのポイントを意識しながら生成AIを活用し、より良いコンテンツ制作に取り組んでいきます。
本内容が、これから生成AIを使ってみたい方の参考になれば幸いです。

今回は以上になります。
ここまで読んでくださり、ありがとうございました。
次回の技術者ブログもお楽しみに！

2026年4月22日

技術者ブログ：Excelのマクロ作成（A1セルに移動して倍率を１００％にする）

こんにちは！今回の記事を担当しますひろとまるです。
今回は、Excelマクロを使って「A1セルに移動し、表示倍率を100%に戻す方法」をご紹介します。
スクロール位置や表示倍率がバラバラのまま保存されてしまい、次回開いたときに見づらいと感じることがあると思います。1クリックでこの操作をできるようになるのでとても便利です。

マクロショートカットボタンを作るまでの手順を説明していきます。

開発タブを表示する

まずはマクロを使用するために、開発タブを表示します。

1.左上の「ファイル」をクリック
2.「その他」→「オプション」を選択
3.「リボンのユーザー設定」を開きます
4.「開発」にチェックを入れます

マクロを作成する

1.「開発」タブから「マクロの記録」をクリック

2.マクロ名を入力して、マクロの保存先(I)で「個人用マクロブック」を選択し「OK」を押します

3. 何も操作せず「記録終了」をクリック

コードを貼り付ける

開発タブの「Visual Basic」を開き、標準モジュールところに以下のコードを貼り付けます。
元から入っている文字はすべて消して、一行目の「Subマクロ名()」には作成するときに入力したマクロ名を入れます。
貼り付けたら保存して閉じます。

Sub A1ショートカット()

‘ 画面更新を停止（画面のちらつきを防ぐ）
Application.ScreenUpdating = False

Dim ws As Worksheet

‘ すべてのシートを順番に処理
For Each ws In Worksheets

' シートを選択
ws.Select

' A1セルに移動
Range("A1").Select

' 表示位置を左上にリセット
ActiveWindow.ScrollColumn = 1
ActiveWindow.ScrollRow = 1

' 表示倍率を100%に設定
ActiveWindow.Zoom = 100

' シートを選択

ws.Select

' A1セルに移動

Range("A1").Select

' 表示位置を左上にリセット

ActiveWindow.ScrollColumn = 1

ActiveWindow.ScrollRow = 1

' 表示倍率を100%に設定

ActiveWindow.Zoom = 100

Next ws

‘ 1枚目のシートに戻る
Sheets(1).Select

‘ 画面更新を再開
Application.ScreenUpdating = True

‘ 完了メッセージ
MsgBox “処理が完了しました”

End Sub

今回の場合は標準モジュールのModule7にコードを貼り付けました。

ショートカットに登録する

このままだと１クリックでマクロを実行できないので、クイックアクセスツールバーに登録してすぐに実行できるようにします。
1.クイックアクセスツールバーの設定を開きます
2.マクロを選択します
3.作成したマクロ（A1ショートカット）を追加してOKを押します

左上のボタンから１クリックで実行できます。

まとめ

今回ご紹介したマクロを設定しておくことで、シートごとの表示位置や倍率を簡単に初期状態へ戻すことができます。ボタン一つで実行できるため仕事の効率化にもつながると思います。ぜひ活用してみて下さい。

次回の技術者ブログもお楽しみに！！

2026年3月18日2026年6月4日

Engineer Blog: Sending Emails in OutSystems

In this engineer blog, I introduce the topics I study and work on in my daily learning.

Today’s Topic: Sending Emails in OutSystems

In OutSystems, you can send emails from screens or batch processes by using your own mail server.
In this post, I’ll walk through how to configure the environment and how to create a test screen.

Preparation: What You Need to Have Ready in Advance

OutSystems alone cannot send emails.
You need to prepare an email server in advance and make note of the following information:
＃1.SMTP server
＃2.SMTP port number
＃3.Username (email address)
＃4.Password
Depending on the type of mail server, there may also be options such as ‘restrictions on sending from overseas.’
If such a setting exists, be sure to turn it off.
Otherwise, you may encounter errors like ‘Sender address rejected: Incorrect country code US,’ which can prevent email delivery even when your configuration is correct.

Step 1: Environment Setup

First, enter the mail server information that OutSystems will use from Service Center. In Service Studio, click the gear icon shown below to access Service Center.

After logging in, open the email server settings by selecting Administration > Email

Enter the following information as shown below:
・SMTP Server: Preparation #1
・SMTP Port: Preparation #2
・Username: Preparation #3
・Password: Preparation #4
・Default Sender Email: Preparation #3
・Redirect Emails To Test List: Optional
　＊This option redirects emails to the Test List Addresses even if the logic specifies a different recipient.
　　Enable this for testing purposes.
・Test List Addresses: Optional
　＊Specify the email address to which messages will be redirected.

After entering all the information, click the ‘Save and Apply Settings to the Factory’ button to apply the configuration.
　＊Note: Simply clicking ‘Save’ does not activate the email settings.
　　Also, the Password field will appear blank after saving, but as long as the configuration is correct, emails will still be sent without any issues.

Step 2: Creating the Logic

This time, we will create a simple test screen and the logic for sending emails, as shown below.

**① Test Screen: Enter the recipient, subject, and message body, then click the** **SendMail** **button to send an email based on the entered values.**

**② Email Body Screen: The value received through the** **InBody** **input parameter is displayed directly as the email body.**

**③ Client Action: This action is triggered when the** **SendMail** **button is clicked. It calls the server action responsible for sending the email.**

④ Server Action: This action is called from the Client Action. It sends the email according to the layout created in step ②

Testing the Functionality

Once the 1‑Click Publish completes successfully, open the screen and try running it.

**Example Input: To verify the redirect behavior, enter an email address in the top recipient field that is** **different** **from the one configured in Test List Addresses.**

The email that was actually received at the address specified in Test List Addresses.

The top section shows the value of the Default Sender Email.
You can also see that the recipient field contains the address entered on the screen (which is different from the one specified in Test List Addresses), confirming that the redirect feature is working as expected.

From Monitoring > Email, you can check the subject, sender/recipient email addresses, email size, and status.
In particular, the status may show Sent (success), Pending (waiting), or Error (failed). When an error occurs, you can click the Detail link to view the error information, which helps identify the cause.

Conclusion

With the above steps, you are now able to send emails from OutSystems.
However, one important point to keep in mind is that the actual email‑sending mechanism ultimately depends on the mail server.
Be sure to review the mail server settings carefully to ensure they meet your requirements—for example, limits on the number of emails that can be sent per hour, or restrictions on sending or receiving emails from specific addresses.

Stay tuned for the next developer blog…

2026年3月18日

技術者ブログ：（Outsystems）メールを送信する

技術者ブログとして日ごろ取り組んでいる学習内容を紹介します。

今回のテーマ：（Outsystems）メールを送信する

Outsystemsでは、各自で用意したメール送信サーバを用いることで、画面・バッチよりメールを送信することが出来ます。
今回は、環境設定と、テスト用画面の作成方法について紹介します。

準備：予め用意しておくもの

Outsystems単独ではメールを送信することはできません。
予め、メール送信サーバを調達し、以下の情報をメモしておきましょう：
#1.送信サーバ（SMTP）
#2.送信サーバのポート番号
#3.ユーザー名（メールアドレス）
#4.パスワード
また、メール送信サーバの種類にもよりますが、気を付けるべき点として「海外からの送信制限」のようなオプションがある場合、Offにしておきましょう。
“Sender address rejected: Incorrect country code US”のようなエラーが発生し、設定が正しいのにメールが送信できない場合があります。

手順1：環境設定

まず、ServiceCenterより、Outsystemsが使用するメール送信サーバの情報を入力します。
ServiceStudioより、下記歯車アイコンを押下し、ServiceCenterへアクセスしてください。

ログイン後、メニューよりAdministration＞Emailとリンクを押下することで、メール送信サーバの設定画面が開きます。

それぞれ、次のように入力します：
・SMTP Server：準備#1
・SMTP Port：準備#2
・Username：準備#3
・Password：準備#4
・Default Sender Email：準備#3
・Redirect Emails To Test List：任意
　※ロジックで宛先を指定しても、後述するTest List Addressesへメールをリダイレクトする機能です。
　　動作確認のため、有効化しておきます。
・Test List Addresses：任意
　※リダイレクト先のメールアドレスを設定します。

一通り入力し終えたら、Save and Apply Settings to the Factoryボタンを押下し、入力した設定値を反映しましょう。
　※Saveするだけではメール設定は有効になりません。
　　また、Save後Password欄は空欄になりますが、正しく設定できていればメールは送信できますので問題ありません。

手順2：ロジック作成

今回は、下記のようなシンプルなテスト画面、およびメール送信機能のロジックを作成します。

①テスト画面：宛先、件名、本文を入力し、SendMailボタンを押下することで入力値に基づきメールが送信される。

②メール本文画面。引数InBodyで受け取った値をそのままメール本文に表示する。

③ClientAction：SendMailボタン押下時に呼ばれる。メール送信用サーバアクションを呼び出す。

④ServerAction：ClientActionから呼び出される。②で作成したレイアウトに従い、メールを送信する。

動作確認

1-click publishが正常終了したら、画面を開いて動かしてみましょう。

実際にTest List Addressesに記載のメールアドレスにて受信したメール。

最上段にはDefault Sender Emailの値が記載されています。
また、宛先欄には画面で入力した宛先（≠Test List Addressesに記載のメールアドレス）が記載されており、リダイレクトが期待通りに機能していることが読み取れます。

Monitoring＞Emailより、件名・送信元/先メールアドレス・メール容量・ステ―タスが確認できます。
特に、ステータスはSent（送信完了）・Pending（待機中）の他にError（送信失敗）になる場合があり、この時表示されるDetailリンクからエラー内容を確認できるため、原因の特定に役立てることができます。

まとめ

以上の手順にて、Outsystemsよりメールを送信することができるようになりました。
ただし、一つ気を付けておかなければならないのは「あくまでメール送信の仕組み自体はメール送信サーバに依存している」ことです。
時間当たりの送信可能メール数や、特定のメールアドレスから/へのメール送受信を許可しない設定など、要件に合わせたカスタマイズが送信サーバ側の設定をよく確認しましょう。

それでは、次回の技術者ブログをお楽しみに…。

2026年2月18日2026年2月18日

Engineering blog – 5 Useful Java Features in Modern Java

Java has evolved significantly over the past decade. While many developers still associate Java with verbose syntax and heavy boilerplate, modern Java versions (Java 8 and beyond) introduced powerful features that make development cleaner, safer, and more expressive.

In this article, we’ll explore five useful Java features that every developer should know and start using today.

1. Lambda Expressions

Lambda expressions allow you to write concise, functional-style code. They eliminate the need for anonymous classes and make your code easier to read.

Before Java 8:

Runnable r = new Runnable() {
    public void run() {
        System.out.println("Hello World");
    }
};

Runnable r = new Runnable() {

public void run() {

System.out.println("Hello World");

}

};

With Lambda:

Runnable r = () -> System.out.println("Hello World");

1	Runnable r = () -> System.out.println("Hello World");

Why It’s Useful:

Reduces boilerplate code
Improves readability
Encourages functional programming

Lambda expressions are widely used with Streams, collections, and event handling.

2. Stream API

The Stream API allows you to process collections in a declarative and functional style.

Example:

List<String> names = List.of("Alice", "Bob", "Andrew");

names.stream()
     .filter(name -> name.startsWith("A"))
     .map(String::toUpperCase)
     .forEach(System.out::println);

List<String> names = List.of("Alice", "Bob", "Andrew");

names.stream()

.filter(name -> name.startsWith("A"))

.map(String::toUpperCase)

.forEach(System.out::println);

Benefits:

Clear and expressive data processing
Supports parallel execution
Encourages immutability

Streams make complex data transformations readable and maintainable.

3. Optional Class

Optional helps avoid NullPointerException by explicitly representing a value that may or may not exist.

Example:

Optional<String> username = Optional.ofNullable(getUsername());

username.ifPresent(System.out::println);

Optional<String> username = Optional.ofNullable(getUsername());

username.ifPresent(System.out::println);

Why It Matters:

Encourages null-safe coding
Makes APIs clearer
Reduces runtime errors

Instead of returning null, methods can return Optional<T> to express uncertainty.

4. Records (Java 16+)

Records provide a concise way to create immutable data classes.

Example:

public record User(String name, int age) {}

1	public record User(String name, int age) {}

The compiler automatically generates:

Constructor
Getters
equals() and hashCode()
toString()

Advantages:

Less boilerplate
Immutable by default
Ideal for DTOs

Records are perfect for modeling simple data carriers.

5. Switch Expressions

Modern Java allows switch to return values and use arrow syntax.

Example:

String dayType = switch (day) {
    case "Sat", "Sun" -> "Weekend";
    default -> "Weekday";
};

String dayType = switch (day) {

case "Sat", "Sun" -> "Weekend";

default -> "Weekday";

};

Why It’s Better:

More concise syntax
No need for break
Fewer bugs

Switch expressions improve readability and reduce accidental fall-through errors.

Modern Java focuses on: Cleaner syntax, Safer code and Better developer experience.

If you’re still using older Java patterns, upgrading your style to include these features can dramatically improve your productivity and code quality.

Stay tuned for our next article!

2026年2月18日

技術ブログ – モダンJavaの便利な機能5選

Javaはこの10年で大きく進化しました。多くの開発者はいまだに、冗長な構文や大量のボイラープレートコードを連想するかもしれませんが、モダンJava（Java 8以降）では、よりクリーンで安全、そして表現力の高い開発を可能にする強力な機能が導入されています。

この記事では、すべての開発者が知っておくべき5つの便利なJava機能を紹介します。

1. ラムダ式（Lambda Expressions）

ラムダ式を使うことで、簡潔な関数型スタイルのコードを書くことができます。無名クラスを使う必要がなくなり、コードの可読性が向上します。

Java 8以前:

Runnable r = new Runnable() {
    public void run() {
        System.out.println("Hello World");
    }
};

Runnable r = new Runnable() {

public void run() {

System.out.println("Hello World");

}

};

ラムダ式を使うと:

Runnable r = () -> System.out.println("Hello World");

1	Runnable r = () -> System.out.println("Hello World");

メリット:

ボイラープレートコードの削減
可読性の向上
関数型プログラミングの促進

ラムダ式は、Stream APIやコレクション操作、イベント処理などで広く利用されています。

2. Stream API

Stream APIを使用すると、コレクションを宣言的かつ関数型スタイルで処理できます。

例:

List<String> names = List.of("Alice", "Bob", "Andrew");

names.stream()
     .filter(name -> name.startsWith("A"))
     .map(String::toUpperCase)
     .forEach(System.out::println);

List<String> names = List.of("Alice", "Bob", "Andrew");

names.stream()

.filter(name -> name.startsWith("A"))

.map(String::toUpperCase)

.forEach(System.out::println);

メリット:

明確で表現力の高いデータ処理
並列実行に対応
イミュータブルな設計を促進

Streamを使うことで、複雑なデータ変換も読みやすく保守しやすいコードになります。

3. Optionalクラス

Optionalは、値が存在するかどうかを明示的に表現することで、NullPointerExceptionを回避するのに役立ちます。

例:

Optional<String> username = Optional.ofNullable(getUsername());

username.ifPresent(System.out::println);

Optional<String> username = Optional.ofNullable(getUsername());

username.ifPresent(System.out::println);

重要なポイント:

null安全なコーディングを促進
APIの意図が明確になる
実行時エラーの削減

メソッドがnullを返す代わりに、Optional<T>を返すことで、値が存在しない可能性を明確に表現できます。

4. Records（Java 16以降）

Recordは、不変なデータクラスを簡潔に作成するための機能です。

例:

public record User(String name, int age) {}

1	public record User(String name, int age) {}

コンパイラが自動的に生成するもの:

コンストラクタ
Getterメソッド
equals()とhashCode()
toString()

メリット:

ボイラープレートの削減
デフォルトでイミュータブル
DTOに最適

Recordは、シンプルなデータ保持用クラスのモデリングに最適です。

5. Switch式（Switch Expressions）

モダンJavaでは、switchが値を返せるようになり、アロー構文（->）も使用できます。

例:

String dayType = switch (day) {
    case "Sat", "Sun" -> "Weekend";
    default -> "Weekday";
};

String dayType = switch (day) {

case "Sat", "Sun" -> "Weekend";

default -> "Weekday";

};

優れている点:

より簡潔な構文
breakが不要
バグの減少

Switch式は可読性を向上させ、意図しないフォールスルー（fall-through）によるエラーを防ぎます。

モダンJavaが目指しているのは、よりクリーンな構文、より安全なコード、そして優れた開発者体験です。

もしまだ古いJavaの書き方を使っているなら、これらの機能を取り入れることで、生産性とコード品質を大きく向上させることができます。

次回の記事もお楽しみに！

2026年1月21日2026年6月4日

Setting Up a Vue 3 Development Environment on Windows Using Cursor

As a tech blog, I’d like to share what I’ve been learning recently.
This time, I’ll walk you through how I set up a Vue 3 development environment using Cursor, a code editor with built-in AI features.

Requirements

・Node.js
・Cursor
・Vue3
・Vue Router

Installing Node.js

Download the installer from the official website
The latest version at the time of writing is 24.12.0 (LTS)
Download the Windows installer

Follow the installation wizard. If you don’t have any specific preferences, just clicking ‘Next’ through all the steps is fine.

You can basically keep clicking ‘Next’ here as well, but if you plan to use various Node.js modules in the future, it’s a good idea to check this option.
However, it’s not necessary for this setup.

That’s it! Node.js is now set up and ready to go.

Installing Cursor

Download the installer from the official website.
The latest version at the time of writing is 2.2.44.
If you don’t have any specific preferences, you can proceed with the default settings during installation.
After installation, you’ll be prompted to log in, so it’s a good idea to create an account on the official website beforehand for a smoother setup.

Adding Extensions to Cursor

Add the following extensions to Cursor

Japanese Language Pack for VS Code
・Japanese localization
npm
・Support for npm
Npm Intellisense
・Auto-completion for npm modules in import statements
Vue (Official)
・Support for Vue
Vite
・Support for Vue development server

Creating a Vue 3 Project

Go to File > Open Folder and open the location where you want to create your project.

Open the terminal with [Ctrl + @]

Run the following command in the terminal to create the project

npm create vue@latest

1	npm create vue@latest

Type ‘y’

Enter your preferred project name and package name.

Select the packages you want to add.

Give it a try

TypeScript
・Must be added
JSX Support
・Enables writing Vue in JSX/TSX syntax. Add this if you prefer a React-like style.
・Turned off for this setup.
Router
・Essential for page navigation
・Must be added
Pinia
・State management library
・Add if you need to manage login info, user data, or shared state
Vitest
Add if you want to automate unit testing
End-to-End Testing
・Add if you want to automate tests that include browser interactions
ESLint
・Linting tool to check code style
・Must be added
Prettier
・Automatically formats your code
・Must be added