LoginSignup
0
0

この記事ではStarlightというドキュメント作成フレームワークについて解説していきます。Starlightは日本では少し知名度が低いものの、とても使いやすく非エンジニアの方との共同作業もしやすいのでこの記事を読み終えたらぜひ実際に使用してみてください!

Starlightとは?

StarlightはAstro.jsというJavaScriptフレームワークをベースにして作成されたドキュメント作成ツールです。他のドキュメント作成ツールのSphinxやMkDocsと比べるとまだ知名度は低いですが、今後少しずつ普及していくと思います。

StarlightではMarkdownとMDX(Markdown±JSX)ファイルでドキュメントを書いていく事ができます。MDXファイルでも書けるため、JavaScriptが分かるのであればドキュメントに独自のコンポーネントを使用したりすることも可能です。

個人的にありがたいStarlightの機能

  1. デザイン力がないプログラマー(筆者も含む)でも洗練されたドキュメンテーションを作成する事ができる
  2. アイコンがデフォルトで入っているのでわざわざアイコンを入れるために無駄なパッケージをインストールする手間が省ける
    3. カスタマイズする方法などもStarlight公式ドキュメントに載っているため、学習コストが低く扱いやすい

の三つです。

個人的なプロジェクトのドキュメント以外にもFontAwsomeのドキュメントにもStarlightが使われています。

スクリーンショット 2024-06-09 21.41.53.png
Starlightを使用すると奇麗なドキュメンテーションを簡単に作成する事ができる

Starlightを実際に使ってみよう!

深く説明するとこの記事の趣旨から大きく外れてしまうので詳しい説明は割愛しますが、ここで簡単な使い方を解説したいと思います。

初めに、Starlightのプロジェクトを作成する方法を解説していきます。作り方はカップラーメンを作るより簡単です。Starlightのドキュメントにあるコマンドをコピペして実行するだけです。

npm create astro@latest -- --template starlight

すると下に貼り付けてある画像のような画面になると思うので、参考にしてください。
スクリーンショット 2024-06-09 21.53.03.png

英語ですが、聞いていることは単純でどこに****どんな名前のプロジェクトを作成したいか?ということだけです。僕は./Sampleと入れました。

スクリーンショット 2024-06-09 21.54.52.png
次に聞かれるのがTypeScriptの方が良いかです。ここは個人の好みで選んでください。(Noを選ぶとシンプルなJavaScriptでコードを書きます)
スクリーンショット 2024-06-09 21.57.23.png
TypeScriptを使用すると答えた方のみ(Noと先ほど答えた方は飛ばしてください!)
TypeScriptを使用する場合TypeScriptをどれほど厳格にしたいのか聞かれます。僕はStrictにしました。
スクリーンショット 2024-06-09 21.58.42.png
次に依存しているパッケージをインストールするか聞かれます。ここは絶対にYesと答えましょう。
スクリーンショット 2024-06-09 22.00.03.png
最後にGitレポジトリーを作成するかどうかも聞かれます。インターネット上に実際に公開する場合Github上でファイルなどがあると便利なのでYesと答えておくと楽です。
これらの質問に応え終わってEnterを押すとプロジェクトが作成されます。

スクリーンショット 2024-06-09 22.00.24.png
スクリーンショット 2024-06-09 22.02.14.png
プロジェクト作成が成功するとマスコットのHouston君が次にできることを教えてくれます。これでプロジェクト作成は完了です。
ここから先のステップに関しては以下のリンク先の公式ドキュメントをお読みください。

最後に

今回はStarlightについて短く解説しました。続この記事の改善点や続編や書いてほしい記事の希望などについてはコメント欄で丁寧に教えていただけると助かります。
最後まで読んでいただきありがとうございました😊

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0