{"pageProps":{"bread_crumbs":[{"name":"トピック一覧","href":"/topics","as":"/topics"},{"name":"yotteq","href":"/topics/[topic]","as":"/topics/[object Object]"}],"topic":{"id":"0u8kixg6wvs","createdAt":"2021-04-11T07:59:07.311Z","updatedAt":"2021-04-11T08:18:05.552Z","publishedAt":"2021-04-11T07:59:07.311Z","revisedAt":"2021-04-11T08:18:05.552Z","name":"yotteq","posts":[{"id":"75yl0ftunccd","createdAt":"2021-04-11T08:05:34.486Z","updatedAt":"2021-04-11T14:21:24.485Z","publishedAt":"2021-04-11T08:09:19.421Z","revisedAt":"2021-04-11T14:21:24.485Z","title":"個人メディア作った話🎉","description":"こんにちは、よしでぶです。\n構想から約3ヶ月。ようやく個人メディア yotteq(ヨテック)をリリースすることができました!\n今回はyotteqについて紹介します。","body":"

yotteqとは?


yotteq(ヨテック)は私よしでぶが、web系の話や日常話をざっくばらんに発信する個人メディア&ブログです。

デザインは最近私がハマっている ニューモーフィズム 基調で作りました。


なんで作った?


よしでぶがyotteqを作った経緯について

開発経験を増やしたかった


yotteqのバックエンド側はAWSを使用しています。

これまでAWSを使用したことがなかったのでAWSを使って何か開発・デプロイしてみたいという願望をかつてから持っていました。

自分の好きなデザイン・機能を追加したかった


個人のテックブログとして、Qiita、はてなブログ、noteというサービスを利用する方法もあるかと思います。

私もはてなブログのページを持って情報を発信していました。

しかし、 自分の好きなデザイン・機能の拡張が難しい と感じていました。

なので今回自作でブログを作ろうと考えました!

ざっと開発スケジュール


構想からデザイン・実装までリリースまでに約3ヶ月かかりました。

休日や隙間時間に作業して、ようやく最低限の機能が完成したと思ったのでこのタイミングでリリースします。

  1. 9月~ デザインモック:こちらはSketchを使ってデザインしました
  2. 9月中旬~ バックエンドの構築:CMSのシステムはヘッドレスCMSでOSSのstrapiを使ってAWSで稼働させています。
  3. 10月~ フロントエンドの構築:画面はNext.jsで開発しました。
  4. 11月~ デザイン、バック、フロントの微修正の繰り返し:デザインが気に入らなかったら修正の繰り返し。一番時間がかかる作業でした。。
  5. ~12月5日:Google Analyticsやその他の設定


この辺の話は別途できれば良いなと思っています。

終わりに


今回はよしでぶが開発したyotteqについてご紹介しました!こんな感じでゆるく投稿を続けていきたいです。

また、いろんな微修正や機能を追加できたら良いなと思っています。

ではでは。

ご指摘、ご意見などがあれば お問い合わせページ からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0b7bcd5fe9254e2abbb4a65b7e4a98a6/about.png","height":630,"width":1200},"topics":[{"id":"0u8kixg6wvs"}],"category":{"id":"886tq3q6t-4j"}}],"path_name":"yotteq"},"posts":[{"id":"ojqihik3jsj","createdAt":"2021-04-11T14:32:06.885Z","updatedAt":"2021-04-11T14:33:07.796Z","publishedAt":"2021-04-11T14:32:06.885Z","revisedAt":"2021-04-11T14:33:07.796Z","title":"Markdown Parserについて調べてみた","description":"こんにちは、よしでぶです。\n今日はMarkdownのParserのライブラリについて調べたのでいくつか紹介します。\nそもそもMarkdownって何?Parserって何?ってところから軽く触れたいと思います。","body":"

Markdownって何?

Wikipediaの説明を引用します。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

Markdownは一種のテキスト形式です。 ブログの多くはこのMarkdownで書かれることが多いです。
QiitaZennの記事も元はMarkdownで書かれていて、その記事を解析してhtmlを生成しています。
この解析のことを Parse といいます。

Markdown例

Markdownはこんな感じで書きます。

# これは見出し1です\n見出し1は大きい文字サイズになる\n\n## これは見出し2です\n見出し2はそこそこ大きい文字サイズ\n\n- リスト1\n- リスト2\n- リスト3

Parse結果

Parse結果はこんな感じ。

ただのテキストファイルだったモノがhtmlに変換されるのはブログを書く上でとても楽です。

Markdown Parserライブラリ比較

今回はNode.jsのMarkdown Parser ライブラリを3つ調べたので紹介します。

markdown-to-jsx

markdown-to-jsx は MarkdownをReactのコンポーネントに変換してくれるライブラリです。
ダウンロード数も多く、2020年12月現在も活発にメンテナンスされているライブラリです。
Parse結果を直接 renderできるのが特徴で直感的に使えます。
2020年12月現在、yotteqはmarkdown-to-jsxを使っています。
拡張性も高く、Markdownではなく 直接jsx形式でコンポーネントを書けたりもします。

markdown-it

markdown-it も大変人気なライブラリの一つです。
こちらもダウンロード数が多く、2020年12月現在も活発にメンテナンスされているライブラリです。
markdown-itは最近話題の技術共有サイト Zenn のMarkdown Parserに使われているようです。
Zennを支える技術とサービス構成|Zenn
こちらも拡張性が高く、さまざまなプラグインが揃っているそうです。

remark

remark は私がこの中で 一番注目しているライブラリです。
公式のGitHubのページでは

remark is the world’s most popular Markdown parser!

と言ってるほどです!
実際、画像のようにmarkdown-to-jsx、markdown-it、remarkの中だと一番トレンドがあるライブラリのようです(参考)

また、Next.jsを作ってる会社のVercelがスポンサーとして付いていることからも、 Next.jsとremarkの相性はこれからもっと良くなってくるのかなと勝手に想像しています。
Next.jsの公式サンプルコードにも remarkが使われているのでこれは期待大ですね!!

まとめ

Node.jsのMarkdown Parserライブラリを3つ紹介しました。

Next.jsとの相性やプラグインの豊富さやトレンドを鑑みて yotteqはmarkdown-to-jsxからremarkに乗り換えを検討しています。
また使ってみた感想を紹介できればと思います。
ではでは。
ご指摘、ご意見などがあれば お問い合わせページ からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/c104d8d83d1847ec92f40f96f9da42f0/markdown_parser_library.png","height":630,"width":1200},"topics":[{"id":"h9u0d9fbzvb","createdAt":"2021-04-11T07:58:42.197Z","updatedAt":"2021-04-11T07:58:50.208Z","publishedAt":"2021-04-11T07:58:42.197Z","revisedAt":"2021-04-11T07:58:50.208Z","name":"markdown","posts":[],"path_name":"markdown"},{"id":"0u8kixg6wvs","createdAt":"2021-04-11T07:59:07.311Z","updatedAt":"2021-04-11T08:18:05.552Z","publishedAt":"2021-04-11T07:59:07.311Z","revisedAt":"2021-04-11T08:18:05.552Z","name":"yotteq","posts":[{"id":"75yl0ftunccd"}],"path_name":"yotteq"},{"id":"b0op_zddt","createdAt":"2021-04-11T07:59:39.164Z","updatedAt":"2021-04-11T07:59:39.164Z","publishedAt":"2021-04-11T07:59:39.164Z","revisedAt":"2021-04-11T07:59:39.164Z","name":"Node.js","posts":[],"path_name":"nodejs"}],"category":{"id":"6tg5du2jx","createdAt":"2021-04-11T07:55:46.137Z","updatedAt":"2021-04-11T07:55:57.125Z","publishedAt":"2021-04-11T07:55:57.125Z","revisedAt":"2021-04-11T07:55:57.125Z","name":"Web開発","path_name":"web-develop","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/90ef5ba6a28045f8a80261a594973d43/web_develop.svg","height":85,"width":111},"description":"プログラミングや開発設計、フロントエンドやバックエンド、データベースやネットワークのインフラ等、分野問わず私が経験したWeb開発の話を発信していきます。","posts":[]}},{"id":"75yl0ftunccd","createdAt":"2021-04-11T08:05:34.486Z","updatedAt":"2021-04-11T14:21:24.485Z","publishedAt":"2021-04-11T08:09:19.421Z","revisedAt":"2021-04-11T14:21:24.485Z","title":"個人メディア作った話🎉","description":"こんにちは、よしでぶです。\n構想から約3ヶ月。ようやく個人メディア yotteq(ヨテック)をリリースすることができました!\n今回はyotteqについて紹介します。","body":"

yotteqとは?


yotteq(ヨテック)は私よしでぶが、web系の話や日常話をざっくばらんに発信する個人メディア&ブログです。

デザインは最近私がハマっている ニューモーフィズム 基調で作りました。


なんで作った?


よしでぶがyotteqを作った経緯について

開発経験を増やしたかった


yotteqのバックエンド側はAWSを使用しています。

これまでAWSを使用したことがなかったのでAWSを使って何か開発・デプロイしてみたいという願望をかつてから持っていました。

自分の好きなデザイン・機能を追加したかった


個人のテックブログとして、Qiita、はてなブログ、noteというサービスを利用する方法もあるかと思います。

私もはてなブログのページを持って情報を発信していました。

しかし、 自分の好きなデザイン・機能の拡張が難しい と感じていました。

なので今回自作でブログを作ろうと考えました!

ざっと開発スケジュール


構想からデザイン・実装までリリースまでに約3ヶ月かかりました。

休日や隙間時間に作業して、ようやく最低限の機能が完成したと思ったのでこのタイミングでリリースします。

  1. 9月~ デザインモック:こちらはSketchを使ってデザインしました
  2. 9月中旬~ バックエンドの構築:CMSのシステムはヘッドレスCMSでOSSのstrapiを使ってAWSで稼働させています。
  3. 10月~ フロントエンドの構築:画面はNext.jsで開発しました。
  4. 11月~ デザイン、バック、フロントの微修正の繰り返し:デザインが気に入らなかったら修正の繰り返し。一番時間がかかる作業でした。。
  5. ~12月5日:Google Analyticsやその他の設定


この辺の話は別途できれば良いなと思っています。

終わりに


今回はよしでぶが開発したyotteqについてご紹介しました!こんな感じでゆるく投稿を続けていきたいです。

また、いろんな微修正や機能を追加できたら良いなと思っています。

ではでは。

ご指摘、ご意見などがあれば お問い合わせページ からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0b7bcd5fe9254e2abbb4a65b7e4a98a6/about.png","height":630,"width":1200},"topics":[{"id":"0u8kixg6wvs","createdAt":"2021-04-11T07:59:07.311Z","updatedAt":"2021-04-11T08:18:05.552Z","publishedAt":"2021-04-11T07:59:07.311Z","revisedAt":"2021-04-11T08:18:05.552Z","name":"yotteq","posts":[{"id":"75yl0ftunccd"}],"path_name":"yotteq"}],"category":{"id":"886tq3q6t-4j","createdAt":"2021-04-11T07:57:29.060Z","updatedAt":"2021-04-11T08:33:48.375Z","publishedAt":"2021-04-11T07:57:29.060Z","revisedAt":"2021-04-11T08:33:48.375Z","name":"制作物紹介","path_name":"product","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/70949266f2654f289e055d5402f45db9/product.svg","height":103,"width":111},"description":"私が開発したWebアプリやそのアーキテクチャを紹介していきます。また、LTで発表した資料なども公開していきます。","posts":[{"id":"75yl0ftunccd"}]}}],"service_url":"https://yotteq.net"},"__N_SSG":true}