Zenn
🐕

React/Next.jsに触れてみる Vol.2

2025/01/04に公開
Next.js
React
googleclone
tech

Googleドキュメントクローン制作

・参考教材：Code With Antonio（Youtube）
https://www.youtube.com/watch?v=gq2bbDmSokU

進捗

  • googleドキュメントを複製する中でReactとNext.jsを学ぶ　２回目
  • 本日の進捗(Timestamps)
    03:00:03 Font size tool (custom extension)
    03:19:40 Line height tool (custom extension)
    03:32:55 Margin ruler component
    03:59:42 Navigation bar component
    04:23:57 Navigation bar tools

思ったこと

  • 少しずつ形になっていくファイルを見ていくと達成感が得られる
  • 模写の効能はまだわからないが、２日間見よう見まねで触るだけでも慣れは感じる
  • 暗記は(もちろん)無理だが、もし何か今後ToolBarを作りたいと思った際に参考にできるかもしれないと思った
  • 「nbsp;(ノーブレークスペース)」で空欄確保
    ※特殊文字を表示させる方法がわからないので今度調べてみます。
  • ⌘マークをShortcutに使うと見た目Good
  • onClick={() => editor?.chain().focus()." "().run()}>
    クリックすると効果が発動される機能

Discussion