Fractalを使ってみよう！（環境構築編）
この記事では、Fractalというスタイルガイドジェネレータの環境構築方法を紹介します。
Fractal使うメリットは？
以下のように、コードを管理できるようになります。
コンポーネントを管理するならFractalがおすすめ！
— いちくん@25歳独学未経験でWeb制作エンジニアになったひと (@ichikun0000) August 16, 2020
✅動画みたいな感じでコンポーネント単位で、HTML,CSS(SCSS),JSなど管理できる
✅実際の動きもわかる点もよい🌟
✅検索できるからコンポーネントが増えても大丈夫#駆け出しエンジニアと繋がりたい pic.twitter.com/hrT24FqAG3
私は普段、Boostnoteというツールを使って、コードを管理していたのですが、デメリットとして、実装後のイメージがつきにくいということがありました。
しかし、Fractalを使えば、そのデメリットを解消することができます。
また、共同開発する際に使うことで、サイトに一貫生が保たれるようになるのでおすすめです。（というか本来はその使われ方がメインな気がする）
Fractalを始めよう！（環境構築編）
Node.jsをインストールする
以下の記事などを参考にNode.jsをインストールしましょう。
MacにNode.jsをインストール
Node.js環境構築(Windows版)
なお、FractalにはNode.js4.4.7以上が必要です！！
デスクトップなど適当な場所にフォルダを作成
mkdir fracatalDemo
プロジェクトを開始
fractalDemoにcdで移動し、以下コマンドを実行します。
npm init
適当にエンターキーを押していくとpackage.jsonが作成され、その中身は以下のようになります。
{
"name": "fractaldemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Fractalをインストール
以下コマンドを実行してFractalをインストールします。(少し時間かかります)
npm install --save @frctl/fractal
この段階でpackage.jsonの中身は以下のようになっています。
dependenciesに"@frctl/fractal": "^1.3.0"が追加されましたね。
{
"name": "fractaldemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@frctl/fractal": "^1.3.0"
}
}
FractalのCLIツールをインストール
以下コマンドを実行してFractalのCLIツールをインストールします。(少し時間かかります)
npm i -g @frctl/fractal
これで準備完了です🌟
ここまでで、フォルダ構造は以下のようになっているはずです。
fractalDemo/
├ node_modules
├ package.json
├ package-lock.json
Fractalのひな形を作成する
以下コマンドを実行してFractalのひな形を作成します。
fractal new 好きな名前
今回は好きな名前をstyleGuideとします。
fractal new styleGuide
そうすると、いくつか質問されるのでエンターキーを押していきます。
▼以下質問内容
? What's the title of your project? (Style Guide) ⇒エンター
? Where would you like to keep your components? (components)⇒エンター
? Where would you like to keep your docs? (docs)⇒エンター
? What would you like to call your public directory? (public)⇒エンター
? Will you use Git for version control on this project? (Y/n)⇒Gitで管理するならyを入力してエンター
そうすると、Generating project structure...となるのでしばらく待ちます。
すると以下のようなフォルダ構造になると思います。
fractalDemo/
├ node_modules
├ styleGuide
├ components
├ example
├ example.hbs
├ example.config.yml
├ docs
├ 01-index.md
├ public
├ package.json
├ package-lock.json
これでひな型は完成です。
ブラウザと同期する
次に、cdコマンドで先ほど作成したstyleGuideディレクトリに移動し、
以下コマンドを実行します。
fractal start --sync
すると以下のような表示がされますので、Local URLをクリックしましょう。
クリックすると以下のような画面になります。
これで初期構築は終了です！
おつかれさまでした！
Author And Source
この問題について(Fractalを使ってみよう！（環境構築編）), 我々は、より多くの情報をここで見つけました https://qiita.com/ichikun0000/items/5895eb3bd7dbe95b6e34著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .