フロントエンドの世界2024: Qiita CLIを利用した執筆環境 (おまけ)

npm install @qiita/qiita-cli --save-dev

npx qiita init

npx qiita login

以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli

発行したトークンを入力: <発行したトークン>

ログインが完了しました 🎉
以下のコマンドを使って執筆を始めましょう！

🚀 コンテンツをブラウザでプレビューする
  npx qiita preview

🚀 新しい記事を追加する
  npx qiita new (記事のファイルのベース名)

🚀 記事を投稿、更新する
  npx qiita publish (記事のファイルのベース名)

💁 コマンドのヘルプを確認する
  npx qiita help

qiita preview

qiita publish <記事ファイル名>

# 例: qiita publish document-1

---
to: public/<%= filename %>.md
---
---
title: '<%= name %>'
tags:
  - 入門
  - チュートリアル
  - Svelte
private: true
updated_at: '<%= new Date().toISOString();%>'
organization_url_name: null
author: nuinteedev
id: null
slide: false
ignorePublish: false
---

## はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Svelte に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Svelte に少しでも興味のある方は、ぜひご覧ください。

## フロントエンドの世界 2024 について

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

1. xxx
2. yyyy


## おわりに

<!-- TODO: 振り返りコメント -->

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の<%= index %>記事目です。
次の記事はこちら <!-- TODO: 📃 次記事のハイパーリンク -->

{
  "name": "qiita-cli-articles",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "new": "hygen generator new"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@qiita/qiita-cli": "^1.6.1"
  }
}

npm run new -- --filename article-1 --name "記事1" --index 1

---
title: '記事1'
tags:
  - 入門
  - チュートリアル
  - Svelte
private: true
updated_at: '2024-12-21T11:19:43.654Z'
organization_url_name: null
author: nuinteedev
id: null
slide: false
ignorePublish: false
---

## はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Svelte に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Svelte に少しでも興味のある方は、ぜひご覧ください。

## フロントエンドの世界 2024 について

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

1. xxx
2. yyyy


## おわりに

<!-- TODO: 振り返りコメント -->

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の1記事目です。
次の記事はこちら <!-- TODO: 📃 次記事のハイパーリンク -->

{
  ...
  "markdown.extension.toc.levels": "1..2"
}