読者です 読者をやめる 読者になる 読者になる

簡単なノートアプリのフロントエンドを作る

ノートアプリを作ります。 一気に全部作ろうとしても挫折してしまいそうなので、さくっと作れそうなところから取り掛かることにします。

重要なこと

  • とりあえず作り上げるのが目標
    • すでにある道具はどんどん使う

構想

  • マークダウン形式で文章を入力すれば、HTMLとして修飾された文書が生成されるものを作る
  • とりあえずGithub Pagesに置けばそれで動くものを作る
    • 文書1つ分であれば、ブラウザのWeb Storageに保存できるだろう

見た目はこんな感じです。まんまAtommarkdown-previewですね。 f:id:dulltz:20170422114446j:plain

情報収集

Markdown形式の文章を解釈してレンダリングする部分

Markdownの解釈とレンダリング部分は自前で実装しなくても、ネット上にいろんなライブラリやコンポーネントが転がっていそうなので探してみます。 (自前で作ったほうが勉強になりそうですが、あまり手を広げていると完成しなさそうなので今回はスルーします)

スター数が多く今も開発されているこれを使ってみることにします。

github.com

コード書く部分

textareaをそのまま使えば良いかとも思ったのですが、せっかくなのでエディタっぽい見た目にしたい。 しかしCSSについて大した知識もないのでとりあえずネット上にあるものを使います。

github.com

環境構築

create-react-appを使います github.com

設計

Thinking in React - React にしたがって、上述のポンチ絵をコンポーネントヒエラルキーにします。

  • App
    • Header
    • Editor
    • Preview

普通。(こんなんでいいんだろうか…?)

できたもの

Markdown Note

感想

  • Web上の資産を組合せたらそれっぽいものができた…
    • プログラミングをした感じが全然しない

今後の展望

  • 文章データをWebStorageではなく、サーバのDB上に保存するようにしたい。なので次はノートアプリのデータを保存するサーバサイドを書こうと思います。