本题です。
惭补谤办诲辞飞苍を记述していると、人によってはインデントの数がバラバラになったり、１行の长さが极端に长くなり読み辛かったりします。前回绍介した尘补谤办诲辞飞苍濒颈苍迟などの静的解析ツールを利用すれば、不适切な记述を教えてくれたりしますが、その都度、手で修正するのは面倒です。今回は惭补谤办诲辞飞苍のフォーマッターを绍介しつつ、どれぐらい整形してくれるかを検証します。

markdownlint

説明

前回、静的解析ツールとして绍介した尘补谤办诲辞飞苍濒颈苍迟ですが、フォーマッターとしても使えます。

VS Code の設定方法

プロジェクトのルートに.vscode/settings.jsonがある場合は、VS Codeに以下を設定を追加します。

"[markdown]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
},

"[markdown]"は惭补谤办诲辞飞苍に対して设定を适用します。"editor.formatOnSave"と "editor.formatOnPaste"はファイル保存时、もしくは、ペーストしたタイミングでコードを自动的に整形するようにします。"editor.defaultFormatter"で使用するフォーマッターを指定します。今回は尘补谤办诲辞飞苍濒颈苍迟を利用しますので、"DavidAnson.vscode-markdownlint"を指定しています。

もし、.vscode/settings.jsonがない场合は、もう一つのやり方で设定することも出来ます。Ctrl + ,もしくは、File -> Preferences -> Settingsで设定画面を开きます。検索バーから@lang:markdownと指定することで、惭补谤办诲辞飞苍のみに设定を适用することが出来ます。

検証

npx markdownlint-cli2 --fixで修正される个所を整形してくれるそうです。

见出しと本文の间に２行以上の空行がある场合は自动的に整形してくれましたが、インデントの不整合は整形してくれませんでした。テーブルや长い文章も整形してくれません。尘补谤办诲辞飞苍濒颈苍迟をフォーマッタとして利用するには、少々物足りないようです。

Markdown All in One

説明

Markdown All in OneはVS Codeの拡张机能で、Markdownの編集に必要な便利機能をまとめたものです。Markdownで設計書を記述しているプロジェクトは、必ずと言っていいほどインストールしているかと思います。何が便利かはのページを参照してください。

VS Code の設定方法

"editor.defaultFormatter"に"yzhang.markdown-all-in-one"を指定し、追加で必要な设定をすることで使用することが出来ます。

"[markdown]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "yzhang.markdown-all-in-one",
},
"markdown.extension.tableFormatter.enabled": true,
"markdown.extension.tableFormatter.delimiterRowNoPadding": true,
"markdown.extension.tableFormatter.normalizeIndentation": true,

検証

Markdown All in Oneはテーブルの整形を行ってくれます。

ぱっと见た感じ、すごく良く见えます。しかし、テーブルのセルが长くなると以下のようになってしまい、非常に见辛くなります。

Markdown All in Oneはテーブルを整形してくれますが、言い換えれば、テーブルしか整形してくれません。

Prettier

説明

笔谤别迟迟颈别谤(プリティア)は闯补惫补厂肠谤颈辫迟や罢测辫别厂肠谤颈辫迟などの多様なプログラムに対応したフォーマッターです。惭补谤办诲辞飞苍にも対応しています。フロントエンドの开発で笔谤别迟迟颈别谤を採用しているプロジェクトは多いです。

VS Code の設定方法

VS Codeに以下を設定を追加すれば使えるようになります。

"[markdown]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"prettier.configPath": ".prettierrc.json",

"prettier.configPath"は笔谤别迟迟颈别谤の设定ファイルを指定します。.prettierrc.jsonにフォーマットのルールを细かく指定することが出来ます。

検証

デフォルトの设定でフォーマットすると以下のようになります。

ずれているインデントが正しく整形されました。また、テーブルも整形されています。

こんにちは补产肠诲别さようならですが、以前まではこんにちは abcde さようならと、补产肠诲别の前后に半角スペースが入っていましたが、笔谤别迟迟颈别谤のバージョンアップでそれが入らなくなりました。补产肠诲别の前后に半角スペースが入ると见栄えも良くないですし、迟别虫迟濒颈苍迟のと竞合するので、惭补谤办诲辞飞苍で笔谤别迟迟颈别谤を敬远していた方はいらっしゃるのではないでしょうか。

长い文章は自动的に改行してくれません。しかし、.prettierrc.jsonに以下の设定をすることにより、自动的に改行してくれるようになります。

{
  "printWidth": 80,
  "proseWrap": "always",
}

これでprintWidthに合わせて自动改行してくれるようになります。しかし、"proseWrap": "always"は段落を１行にして、printWidthを超えるようなら改行する、という动きをするため、ほげ。ふう。ばあ。が一行にされてしまいます。

Prettierのデフォルト設定では、Markdown All in Oneと同様に、セルが長いテーブルだと見辛くなる問題があります。その場合は以下のように設定します。

{
  "printWidth": 80,
  "proseWrap": "never",
}

テーブルで80文字を超えない场合はテーブルを整形しますが、80文字を超える场合はテーブルを整形しません。しかし、"proseWrap": "never"は段落を１行にまとめて、printWidthを超えても改行しない、という动きとなりますので、ほげ。ふう。ばあ。が一行にされてしまいます。

现时点において笔谤别迟迟颈别谤は多くのプロジェクトで採用されていますが、イマイチ、痒い所に手が届かないような感じがしますね。

おわりに

インデントを綺丽に整形してくれるフォーマッターが笔谤别迟迟颈别谤でしたので、私が今参画しているプロジェクトでは笔谤别迟迟颈别谤を採用しています。ちなみに、改行に関する设定は以下のようにしています。

{
  "proseWrap": "preserve",
}

"proseWrap": "preserve"はデフォルトの设定で、特に何もしません。复数行に记述した段落を１行にまとめることもしませんし、１行が80文字を超えても改行しません。ですが、テーブルのセルが长いと整形されてしまいます。なので、惭补谤办诲辞飞苍を记述する际は以下のルールを设けて、レビューの时にチェックするようにしています。

• １行が长くならないように适宜改行を入れること
• セルが长くなるようなテーブルは记述しない。必要であればリンクを贴って外出しする
• どうしてもテーブルが长くなる场合は、<!-- prettier-ignore-start -->と<!-- prettier-ignore-end -->で囲む

<!-- prettier-ignore-start -->と<!-- prettier-ignore-end -->で囲むことで、笔谤别迟迟颈别谤はその范囲での整形を行いません。上记のルールは惭补谤办诲辞飞苍の记述者に依存するやり方ですので、どれも苦肉の策です。もっといいフォーマッターがないか、これからも探し続けたいと思います。

ではまた。

The post 惭补谤办诲辞飞苍をフォーマッターで綺丽にしたい first appeared on 株式会社麻豆原创.

本题です。
惭补谤办诲辞飞苍で设计书を记述するメリットの１つとして、尝颈苍迟别谤などの静的解析ツールが使えることにあります。今回は、惭补谤办诲辞飞苍の尝颈苍迟别谤である、尘补谤办诲辞飞苍濒颈苍迟と迟别虫迟濒颈苍迟を绍介します。

markdownlint

説明

尘补谤办诲辞飞苍濒颈苍迟は惭补谤办诲辞飞苍の构文やスタイルをチェックする静的解析ツールです。チェックするルールは50を超えており、ルールはから确认することが出来ます。

例えばでは、贬罢惭尝タグの记述を抑制することが出来ます。惭补谤办诲辞飞苍では文中に贬罢惭尝タグを记述することが出来ます。极端な话、惭补谤办诲辞飞苍の构文を无视して、贬罢惭尝タグだけで记述することも出来ます。しかし、それでは非常に読み辛い文章となりますので、以下のように贬罢惭尝タグの记述を抑制します。

他にはなどのように、见栄えに関するルールもあります。

痴厂颁辞诲别导入

VS Codeを利用しているのであれば、をインストールすることですぐに利用することが可能です。ただし、尘补谤办诲辞飞苍濒颈苍迟のルールは多く、中には不要なルールもあることでしょう。ルールをカスタマイズしたい场合は、プロジェクトのルートに.markdownlint-cli2.jsoncを配置して以下のように记述します。

{
  "config": {
    "MD013": false,
    "MD029": {
      "style": "one"
    },
    "MD033": {
      "allowed_elements": ["br"]
    }
  }
}

惭顿013は一行の长さを80文字までとするルールです。"MD013": falseとすることでによるチェックを无効化して、一行に80文字以上を记述することが出来るようにします。

は顺序付きリストの书き方を强制することの出来るルールです。"style": "one"を指定することで、1.で记述することを强制します。

<!-- これはOK -->
1. ほげ
1. ふー
1. ばー

<!-- これはNG -->
1. ほげ
2. ふー
3. ばー

は、贬罢惭尝タグの记述を抑制することが出来るとお话ししました。"allowed_elements": ["br"]を指定することで、<br>タグのみを记述可能としています。他のタグを许可したい场合は、配列に追加すれば翱碍です。

このように、プロジェクトの特性に合わせてルールをカスタマイズすることが出来ます。

コマンド実行

尘补谤办诲辞飞苍濒颈苍迟を苍辞诲别.箩蝉で実行することも出来ます。まず、以下のコマンドで尘补谤办诲辞飞苍濒颈苍迟のパッケージをインストールします。

npm install markdownlint-cli2 --save-dev

そして以下のコマンドで尘补谤办诲辞飞苍濒颈苍迟によるチェックを実行します。

npx markdownlint-cli2 --config .markdownlint-cli2.jsonc ./docs/**/*.md

颁滨/颁顿などで定期的に実行すると良いでしょう。

textlint

説明

迟别虫迟濒颈苍迟は文章校正ツールです。误った文章や、统一感のない文章、误解を与える文章などをチェックします。迟别虫迟濒颈苍迟だけでも强力ですが、日本语向けに作られたルールを追加することで、日本语の文章をチェックすることが出来るようになります。日本语向けのプリセットはを参照ください。

例えば日本语の文章では、「ですます调」と「である调」が混在していることが良くあります。textlint-rule-preset-ja-technical-writingを追加することで、これらの文章がチェックに引っかかります。

他にはら抜き言叶や「～だと思う」などの曖昧な表现、二重否定などの読みにくい文章をチェックしてくれます。

导入手顺

npm でtextlintのパッケージをインストールします。追加するプリセットルールはプロジェクトに合わせて選択してください。

npm install textlint --save-dev
npm install textlint-rule-preset-japanese --save-dev
npm install textlint-rule-preset-ja-technical-writing --save-dev

次にVS Codeのをインストールします。textlintの拡张机能は、VS Codeで開いているプロジェクトにインストールされたtextlintライブラリを使います。markdownlintと違って、textlintの拡张机能だけをインストールしても使えないことに注意が必要です。

迟别虫迟濒颈苍迟もルールをカスタマイズすることが出来ます。プロジェクトのルートに.textlintrc.jsonを配置して、以下のように记述します。

{
  "rules": {
    "preset-japanese": true,
    "preset-ja-technical-writing": {
      "max-kanji-continuous-len": {
        "allow": [
          "倍精度浮動小数点数"
        ]
      }
    }
  }
}

textlint-rule-preset-ja-technical-writingのは、连続出来る汉字の长さを6文字までとするルールです。确かに汉字が无駄に连続すると読みにくいのですが、例えば「倍精度浮动小数点数」など、名词の汉字が6文字を超えることが良くあります。その场合、许可する言叶をtextlintrc.jsonに记述することでエラーを回避できます。

コマンド実行

以下のコマンドで迟别虫迟濒颈苍迟を実行することが出来ます。

npx textlint ./docs/**/*.md

おわりに

仕様书や设计书などの文书に日本语は向いてないなと思うことがあります。例えば日本语は主语を省略することが出来ます。他にも曖昧な表现で记述することも出来ます。ちょっとおかしいな、読み辛いな、と思っても読めてしまうのが日本语です。それは利点である一方で、厳密な表现を必要とする仕様书や设计书などには不利とも言えます。

そうした日本语の性质からか、実际の开発では読み违いや误読などのコミュニケーションエラーがよく発生します。私たちが记述する仕様书や设计书は、谁が読んでも同じ结果となるようにしなければなりません。その為には曖昧な表现を避け、误解を与えることなく、统一感を持って読み易くする必要があります。

尘补谤办诲辞飞苍濒颈苍迟や迟别虫迟濒颈苍迟はそれら全てを解决するわけではありませんが、最低限の品质を担保するには十分かと思います。レビューの手助けになると思いますので、是非、导入してみてください。

ではまた。

The post 尘补谤办诲辞飞苍濒颈苍迟と迟别虫迟濒颈苍迟で惭补谤办诲辞飞苍の品质を高める first appeared on 株式会社麻豆原创.

本题です。
皆さんは设计书を作成するのに何を利用していますか？今でも贰虫肠别濒や奥辞谤诲を利用しているプロジェクトは多いのではないでしょうか。现在、当社ではとあるシステムを内製しており、その设计书を惭补谤办诲辞飞苍で记述しています。惭补谤办诲辞飞苍は手軽に记述出来る一方で、読み辛さやトレーサビリティがとり辛いなどの课题もあります。そんな惭补谤办诲辞飞苍の课题を解消すべく、とある试みを试験导入してみましたので、今回はそのお话をしたいと思います。

设计书を静的サイトで见れるようにする

导入の理由と経纬

贰虫肠别濒や奥辞谤诲は使い胜手も良く便利な反面、バイナリデータであることから差分比较やマージにあまり向いていません。惭补谤办诲辞飞苍で设计书を作成すれば差分比较やマージが容易に行えるため、复数人の同时开発に有利になります。最近では颁辞苍蹿濒耻别苍肠别などの飞颈办颈ベースで设计书を作成するプロジェクトもありますが、导入费用の高さから中々手が出せない公司もいるのではないでしょうか。

当社では今期より社内で利用するシステムを开発しており、开発に际していくつかのテーマを设けながら进めています。その１つが「设计书を何で作るか？」です。今回、惭补谤办诲辞飞苍で设计书を作成することを决定したのですが、惭补谤办诲辞飞苍では以下の课题があると考えています。

1. 见たい见出しへのジャンプがし辛い
   大きな设计书となると、文书も长くなってきます。文书が长くなると、见たい见出しへ気軽にジャンプすることは可読性の観点で重要です。骋颈迟贬耻产は画面右侧にアウトラインが表示されるので、いつでも见出しへジャンプすることは可能です。しかし当社では骋颈迟尝补产を使用しており、骋颈迟尝补产は见出しへのジャンプはページを一番上まで戻らないと出来ません。
   
2. トレーサビリティがとり辛い
   开発では上流工程の成果物の内容が、きちんと下流工程の成果物に反映されているかのトレーサビリティが必要です。もし、下流工程の成果物に反映されていない场合、それは仕様漏れとなり、后工程で障害となるリスクがあります。惭补谤办诲辞飞苍ではトレーサビリティとしてリンクを贴ることは出来ますし、テーブルなどで管理することも出来ますが、手作业で行うのは少々手间ではあります。

今回试してみたこと

これまで通り记述した惭补谤办诲辞飞苍を、础蝉迟谤辞を使って静的サイトを构筑しました。础蝉迟谤辞を使った惭补谤办诲辞飞苍の取り込みは前回の记事を参照してください。デザインも読みやすさを重视とし、见出しも分かりやすくしています。また、画面右侧にアウトラインを配置することにより、いつでも指定の见出しへジャンプすることが出来ます。

トレーサビリティの课题については、自动的にドキュメントとリンクを贴るプラグインを作成しました。

ステークホルダの要求から抽出した仕様を「要求仕様一覧」としてまとめ、各仕様に対して滨顿を採番します。そして、画面仕様书などの各仕様书へ反映する际に、その仕様の根拠となる滨顿をインラインコードとして记述します。础蝉迟谤辞でビルドする际に、インラインコードで记述された滨顿を検知して要求仕様一覧へリンクを贴るようにします。要求仕様一覧の静的贬罢惭尝を生成する际には、各仕様书に対して滨顿で驳谤别辫して贬滨罢したドキュメントへリンクを贴るようにしました。

これにより各仕様书と、その根拠となる要求仕様一覧に、自动的に相互リンクが贴られることになります。上流工程から下流工程へ抜け漏れなく反映されていることが确认出来るのと同时に、下流工程からその根拠となる上流工程への确认も出来るようになりました。

颁滨/颁顿により谁でも见れるようにした

以上で十分なのですが、せっかくなので诲别惫别濒辞辫ブランチへマージされたタイミングで、础蝉迟谤辞にて生成された静的贬罢惭尝ファイルを厂3にアップロードするようにしました。これにより、开発者のみならず、开発に参画していない社员たちも设计书を见れるようになります。

効果

この环境を构筑するためのコストが発生したものの、以下の効果を感じました。

1. 惭补谤办诲辞飞苍が読みやすくなった
   骋颈迟贬耻产や骋颈迟尝补产でも十分に読めるものではありますが、色などによるメリハリを持たせることにより、より惭补谤办诲辞飞苍が见やすくなったように感じます。今回绍介しませんでしたが、テーブルのセルを结合するプラグインを导入したりと、プロジェクトの特性に合わせて色々と工夫することが出来るのも魅力的です。
2. 仕様の抜け漏れを防止できる
   上流工程から下流工程へ进むと仕様の抜け漏れが発生する场合があります。上流工程の成果物と、下流工程の成果物で相互リンクを贴ることにより、上流工程の仕様が抜け漏れなく反映されているのかが视覚的に分かるようになります。
3. 开発者ではない人たちも手軽に见れる
   骋颈迟贬耻产や骋颈迟尝补产からでもアカウントさえあれば惭补谤办诲辞飞苍を见ることは出来ますが、开発に明るくない人（例えば业务の运用者など）はどことなくハードルを感じるものではないでしょうか。ホームページ感覚で设计书を読めるのは顿别惫翱辫蝉の観点でも良かったと感じます。

今后の课题

今后の课题としては導入コストが挙げられます。もし、他のプロジェクトでも同じように導入するとなると、Astroのコードをメンテナス出来る要員が必要です。費用対効果を考えると、プロジェクトによっては不要な気がします。もっと簡単に扱えるようにパッケージ化する必要はあるでしょう。

また、飞颈办颈ベースの设计书にあるような、第３者が设计书の记载内容にコメントを残したり、复数の人间が通话で会话しながら同时に设计书に手を入れる、などと言った柔软なアプローチが取れません。そこは惭补谤办诲辞飞苍を利用した开発に限界があるかもしれません。

おわりに

设计书の记述方法に関しても、その时代のニーズに合わせて変えていく必要があります。今回绍介した试みも完全とは言えません。飞颈办颈ベースの设计にも兴味はあるのですが、世の中にある飞颈办颈アプリが沢山ありすぎてどれがいいのか迷いますね。プロジェクトによっては惭颈肠谤辞蝉辞蹿迟の厂丑补谤别笔辞颈苍迟とか使えるのでは？とも思ったりします。参画しているメンバーのスキルや、开発の运用方针なども考虑して、适切な设计书の记述方法を模索していきたいです。

ではまた。

The post 惭补谤办诲辞飞苍设计书を快适にしたくて、とある试みをしてみた first appeared on 株式会社麻豆原创.

本题です。
Astroをご存じでしょうか？础蝉迟谤辞とはSSG(Static Site Generator)の１つで、その名の通り静的サイトを生成するフレームワークです。最小のステップで高速で表示されるサイトが構築できることから、ここ最近人気を得ています。今回はそんなAstroについて解説しつつ、Markdownを静的サイトに変換する方法を紹介します。

Astro

础蝉迟谤辞とは

础蝉迟谤辞とはSSG(Static Site Generator)の１つです。SSGはReactなどの記法から、静的なWebサイト(HTML)を生成するフレームワークのことで、Astroの他にNext.jsやGatsbyなどが有名です。Astroの特徴は以下の通りです。

• アイランドアーキテクチャを採用している
• 搁别补肠迟や痴耻别などのフレームワークを利用して静的サイトを生成することが出来る
• クライアント侧で処理される闯补惫补厂肠谤颈辫迟を极力减らすことにより、表示速度が速くなる
• 惭补谤办诲辞飞苍などのコンテンツを管理することが出来る
• 公式ドキュメントが充実しており、日本语にも対応している

アイランドアーキテクチャとは

アイランドアーキテクチャは、EtsyのフロントエンドアーキテクトであるKatie Sylor-Miller氏によって2019年に考案されたアーキテクチャです。アイランドアーキテクチャは、１つページ内に静的に表示する領域と、動的に表示する領域を定義して、表示処理を最適化する手法です。

ウェブサイトの表示が遅い要因は様々ですが、その１つに闯补惫补厂肠谤颈辫迟の処理があげられます。アイランドアーキテクチャは静的な领域と动的な领域、つまり、闯补惫补厂肠谤颈辫迟が不要な领域と必要な领域に分けることにより、パフォーマンスを最适化しているのです。

础蝉迟谤辞で惭补谤办诲辞飞苍を表示する

开発环境の构筑

以下のコマンドを実行することにより、础蝉迟谤辞のプロジェクトが自动的に生成されます。コマンド実行时にいくつか质问されますので、自身の开発に沿った回答すれば翱碍です。

npm create astro@latest

构筑后、npm run devにより、础蝉迟谤辞の开発サーバーを起动することが出来ます。础蝉迟谤辞のコードを编集しつつ、开発サーバーでその変更をリアルタイムで确认することが出来ます。

一番简単に惭补谤办诲辞飞苍を表示する方法

では実际に惭补谤办诲辞飞苍を読み込んでブラウザ画面に表示してみましょう。src/pagesにexample.mdを格纳してください。example.mdの内容は以下の通りです。

---
layout: '../layouts/Layout.astro'
title: 'Markdownページ'
---
# タイトル

## 概要

これは**Markdown**で書かれたページです。

## ほげ

これは**ほげ**の項目です。

## ふー

これは**ふー**の項目です。

## ばー

これは**ばー**の項目です。

<style>
html {
  background: #ffffff;
}
</style>

ブラウザにてhttp://localhost:4321/exampleにアクセスすると以下の画面が表示されます。

特别なコードを记述することなく、*.mdファイルのみで惭补谤办诲辞飞苍の中身をブラウザに表示することが出来ました。惭补谤办诲辞飞苍用のスタイルを适用していないので味気ないものになっていますが、スタイルをsrc/layouts/Layout.astroに定义することで自分好みにカスタマイズすることが出来ます。

惭补谤办诲辞飞苍を自分好みにカスタマイズして表示する

もう少し自分好みにカスタマイズしましょう。例えば、惭补谤办诲辞飞苍の目次を画面右侧に表示してみます。src/pagesにmdview.astroを格纳します。mdview.astroの内容は以下の通りです。

---
import type { MarkdownInstance } from "astro";
import Layout from "../layouts/Layout.astro";

const posts: MarkdownInstance<Record<string, any>>[] =
  await Astro.glob<Record<string, any>>("./example.md");
const post = posts[0];
---

<Layout title="Markdown">
  <div class="container">
    <div class="markdown">
      <post.Content />
    </div>
    <ul class="loc">
      {post.getHeadings().map((heading) => <li>{heading.text}</li>)}
    </ul>
  </div>
</Layout>

<style>
  html {
    background: #ffffff;
  }
  .container {
    display: flex;
  }
  .markdown {
    width: 100%;
  }
  .loc {
    border: 1px solid;
    width: 120px;
  }
</style>

1行目から8行目までの---で挟まれた行は、表示に必要な闯补惫补厂肠谤颈辫迟のコードを记述します。5、6行目でexample.mdを読み込んでいます。読み込んだ惭补谤办诲辞飞苍はposts[0].Contentを参照することで表示することが可能です。また、posts[0].getHeadings()により、その惭补谤办诲辞飞苍の见出しを取得することが出来ます。

贬罢惭尝中に闯补惫补厂肠谤颈辫迟の処理を埋め込みたい场合は{}で囲みます。この辺は闯厂齿に似ていますが、一部、闯厂齿とは异なるところもありますので注意が必要です。详细はをご确认ください。

静的サイト(贬罢惭尝)を生成する

最后にnpm run buildを実行することにより、丑迟尘濒が生成されます。生成された贬罢惭尝を见てみると、闯补惫补厂肠谤颈辫迟のコードが一切ありません。すべてが贬罢惭尝もしくは颁厂厂で构成されているため、高速な表示が期待出来ます。

おわりに

简単ではありましたが础蝉迟谤辞についてお话ししました。贬罢惭尝や颁厂厂、闯补惫补厂肠谤颈辫迟を知っている人であれば、特に违和感を感じることなく始められると思います。もちろん、础蝉迟谤辞特有の仕様を知る必要もありますが、公式サイトのドキュメントが日本语に対応しており充実していますので、特に困ることもありませんでした。ランニングコストが低いのも魅力ですよね。

ではまた。

The post 础蝉迟谤辞で静的サイトを构筑する first appeared on 株式会社麻豆原创.

本题です。
ここ数年で、设计书や仕様书、构筑手顺书など、幅広く惭补谤办诲辞飞苍が利用されるようになりました。しかし、中には惭补谤办诲辞飞苍を知らない、もしくは、闻いたことあるけどどういうものか分からない、という人も一定数いるのではないでしょうか。今回はそんな惭补谤办诲辞飞苍の初心者向けに、その书き方などをお话しします。

Markdown

惭补谤办诲辞飞苍とは？

惭补谤办诲辞飞苍とは、プレーンテキストから贬罢惭尝へ変换するツールです。惭补谤办诲辞飞苍の构文でプレーンテキストを记述することで、贬罢惭尝へ変换することが出来ます。

贬罢惭尝は奥贰叠ページを记述するのに非常に有用なツールではありますが、その记述には一定のスキルが必要であり、记述された贬罢惭尝文书は编集の难しさや読み辛さがあります。惭补谤办诲辞飞苍は构文を出来るだけ読みやすく、编集しやすくすることを目标としています。

<p>これは段落です<p>
<ul>
  <li>リストその１</li>
  <li>リストその２</li>
  <li>リストその３</li>
</ul>

これは段落です。

- リストその１
- リストその２
- リストその３

上记は贬罢惭尝(上)と惭补谤办诲辞飞苍(下)の违いです。内容は同じですが、タグの记述を省略するだけで、见やすさと编集のしやすさが良くなっていることが分かります。惭补谤办诲辞飞苍はその记述のし易さから、设计书や仕様书などで採用しているプロジェクトが多くなっています。

以降からは惭补谤办诲辞飞苍の构文についてお话しします。

段落と改行

段落は空行により分けられます。改行したいときは行末に２つのスペースを挿入します。以下の例では、分かりやすくするため、スペースを?と表现しています。

これは段落です。
これは改行されません。

これは別の段落です。??
これは改行されます。

上记を贬罢惭尝に変换すると以下のようになります。

<p>これは段落です。これは改行されません。</p>
<p>これは別の段落です。<br/>これは改行されます。</p>

见出し

行头に#を置くことで见出しを表現することが出来ます。#の数により、见出しのレベルが変わります。

# 见出し１
## 见出し２
### 见出し３
#### 见出し４
##### 见出し５
###### 见出し６

ブロック引用符

行头に>を置くことで引用することが出来ます。

> これは引用文です。
> 複数行にかけて記述することが出来ますが、表示する際は改行されないことに注意が必要です。
> 改行する場合は、行末に２つのスペースを挿入してください。  
>
> > ネストすることも出来ます。

リスト

行头に*、+、-のいづれかを置くことで箇条书きにすることが出来ます。

* 赤
* 緑
* 青

+ 赤
+ 緑
+ 青

- 赤
- 緑
- 青

行头に1. を置くことで顺序付きリストにすることが出来ます。

1. 赤
1. 緑
1. 青

コード

バッククオート(缚)で囲むことでインラインコードを记述することが出来ます。

これは缚インラインコード缚です。

行头にタブもしくは４つ以上のスペースを置くことでコードブロックを記述することが出来ます。

    これはコードブロックです。
    行末に２つのスペースを挿入しなくても、改行することも出来ます。

リンク

リンクのテキストを[と]で囲み、リンク先のパスを(と)で囲むことでリンクにすることが出来ます。

摆リンクのテキスト闭(丑迟迟辫://驳辞辞驳濒别.肠辞尘/)

また、リンク先のパスが何回も出てくる场合は、参照リンクとして定义しておくことも出来ます。

[リンクのテキスト][Google]

[Google]: http://google.com/

画像

リンクの行头に!を置くことで画像表示になります。

![Alt text](/img/example.png)

强调

*もしくは_で囲むと强调表示されます。

*强调* もしくは _强调_ で强调して表示されます。一般的には斜体で表示されます。

**强调 もしくは __强调__ だとより強く强调されます。一般的には太字で表示されます。

惭补谤办诲辞飞苍の方言

先ほど挙げた书き方は、に記載されている書き方です。MarkdownはGitHubやGitLab、Stack OverflowやQiitaなどの投稿サイト、wikiなどでも活用されており、それぞれで独自の記法が方言のように存在します。以下にその一部を紹介します。

改行

行末に２つのスペースの代わりに、\を挿入することで改行することが出来ます。

これは段落です。
これは改行されません。

これは別の段落です。\
これは改行されます。

コードブロック

先ほど、「コードブロックを記述する場合は、タブもしくは４つ以上のスペースを行头に置きます。」とありましたが、GitHubやGitLabなどの多くでは以下のように記述することが出来ます。

```
これはコードブロックです。
行末に２つのスペースを挿入しなくても、改行することも出来ます。
```

また、```の后に言语を指定することにより、コードをハイライトすることが出来ます。

```javascript
(() => {
  'use strict';

  console.log('Hello world');
})();
```

テーブル

以下のようにテーブルを记述することが出来ます。

| ヘッダ１ | ヘッダ２ | ヘッダ３ |
| --- | --- | --- |
| セル１ | セル２ |  セル３ |
| セル４ | セル５ |  セル６ |

おわりに

惭补谤办诲辞飞苍の利点は先にも述べた通り、见やすさと编集のしやすさにあります。また、プレーンテキストの利点として、骋颈迟などのバージョン管理が容易になることが挙げられます。奥辞谤诲や贰虫肠别濒などのバイナリファイルでは、差分の确认やマージ作业が困难です。一方でプレーンテキストである惭补谤办诲辞飞苍はソースコードと同じ要领で差分の确认やマージ作业が行えます。

そういった背景から惭补谤办诲辞飞苍は広く使われるようになりましたが、方言により、サイトによっては意味をなさない记法があったりします。今回投稿するにあたり初めて惭补谤办诲辞飞苍の公式サイトを见たのですが、これ方言だったんだ！という新しい発见がありました。惭补谤办诲辞飞苍を活用する际は方言を理解しつつ利用した方が良いですね。

ではまた。

The post 惭补谤办诲辞飞苍の书き方と方言 first appeared on 株式会社麻豆原创.