{"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(ヨテック)は私よしでぶが、web系の話や日常話をざっくばらんに発信する個人メディア&ブログです。
デザインは最近私がハマっている ニューモーフィズム 基調で作りました。
よしでぶがyotteqを作った経緯について
yotteqのバックエンド側はAWSを使用しています。
これまでAWSを使用したことがなかったのでAWSを使って何か開発・デプロイしてみたいという願望をかつてから持っていました。
個人のテックブログとして、Qiita、はてなブログ、noteというサービスを利用する方法もあるかと思います。
私もはてなブログのページを持って情報を発信していました。
しかし、 自分の好きなデザイン・機能の拡張が難しい と感じていました。
なので今回自作でブログを作ろうと考えました!
構想からデザイン・実装までリリースまでに約3ヶ月かかりました。
休日や隙間時間に作業して、ようやく最低限の機能が完成したと思ったのでこのタイミングでリリースします。
この辺の話は別途できれば良いなと思っています。
今回はよしでぶが開発したyotteqについてご紹介しました!こんな感じでゆるく投稿を続けていきたいです。
また、いろんな微修正や機能を追加できたら良いなと思っています。
ではでは。
ご指摘、ご意見などがあれば お問い合わせページ からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。
Wikipediaの説明を引用します。
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
Markdownは一種のテキスト形式です。 ブログの多くはこのMarkdownで書かれることが多いです。
QiitaやZennの記事も元はMarkdownで書かれていて、その記事を解析してhtmlを生成しています。
この解析のことを Parse といいます。
Markdownはこんな感じで書きます。
# これは見出し1です\n見出し1は大きい文字サイズになる\n\n## これは見出し2です\n見出し2はそこそこ大きい文字サイズ\n\n- リスト1\n- リスト2\n- リスト3
Parse結果はこんな感じ。
ただのテキストファイルだったモノがhtmlに変換されるのはブログを書く上でとても楽です。
今回はNode.jsのMarkdown Parser ライブラリを3つ調べたので紹介します。
markdown-to-jsx は MarkdownをReactのコンポーネントに変換してくれるライブラリです。
ダウンロード数も多く、2020年12月現在も活発にメンテナンスされているライブラリです。
Parse結果を直接 renderできるのが特徴で直感的に使えます。
2020年12月現在、yotteqはmarkdown-to-jsxを使っています。
拡張性も高く、Markdownではなく 直接jsx形式でコンポーネントを書けたりもします。
markdown-it も大変人気なライブラリの一つです。
こちらもダウンロード数が多く、2020年12月現在も活発にメンテナンスされているライブラリです。
markdown-itは最近話題の技術共有サイト Zenn のMarkdown Parserに使われているようです。
Zennを支える技術とサービス構成|Zenn
こちらも拡張性が高く、さまざまなプラグインが揃っているそうです。
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にでもご連絡いただけたらと思います。
yotteq(ヨテック)は私よしでぶが、web系の話や日常話をざっくばらんに発信する個人メディア&ブログです。
デザインは最近私がハマっている ニューモーフィズム 基調で作りました。
よしでぶがyotteqを作った経緯について
yotteqのバックエンド側はAWSを使用しています。
これまでAWSを使用したことがなかったのでAWSを使って何か開発・デプロイしてみたいという願望をかつてから持っていました。
個人のテックブログとして、Qiita、はてなブログ、noteというサービスを利用する方法もあるかと思います。
私もはてなブログのページを持って情報を発信していました。
しかし、 自分の好きなデザイン・機能の拡張が難しい と感じていました。
なので今回自作でブログを作ろうと考えました!
構想からデザイン・実装までリリースまでに約3ヶ月かかりました。
休日や隙間時間に作業して、ようやく最低限の機能が完成したと思ったのでこのタイミングでリリースします。
この辺の話は別途できれば良いなと思っています。
今回はよしでぶが開発したyotteqについてご紹介しました!こんな感じでゆるく投稿を続けていきたいです。
また、いろんな微修正や機能を追加できたら良いなと思っています。
ではでは。
ご指摘、ご意見などがあれば お問い合わせページ からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。