Docusで知り合い向け学習サイト作ってみた

Slide 1

Slide 1 text

Docus で知り合い向け学習サイト作ってみた IIHARA 議長/ 株式会社メタップスホールディングス

Slide 2

Slide 2 text

目次 01 自己紹介 02 動機 03 Docus について 04 Learch 05 今後 2

Slide 3

Slide 3 text

IIHARA 議長大学2 年の終わりの２月から週4~7 日フルタイムで働き、メタップスHD に23 新卒で入社後、re:shine 開発を担当 Vue/Nuxt Rails Lit を主に書きます X: https://twitter.com/iihara_gityo 自己紹介 3

Slide 4

Slide 4 text

メタップスホールディングス「UNLEASH THE WORLD( 世界を解き放つ) 」をビジョンに re:shine とSRE:shine の二つのサービスを展開自己紹介 4

Slide 5

Slide 5 text

動機

Slide 6

Slide 6 text

これまで対面やDiscord などでプログラミングを教える機会が多々あった。サークルなどで教えた際に書いていたメモ等を一つのサイトにまとめようと思い立った。動機 6

Slide 7

Slide 7 text

自分自身も独学でプログラミングを学び始めた当初は全てを暗記しようとして上手くいかず、知識が定着して学習が安定して進められるようになるまで時間が掛かったそのため、初学者向けに要点のみをまとめたサイトにすることにした動機 7

Slide 8

Slide 8 text

Docus について

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

そもそも、Docus はnuxt/content の拡張テーマでnuxt/content にはない構築済みコンポーネントやuseDocus といったcomposable が利用可能になっている。 nuxt/content からコアライブラリを辿っていくと、nuxt- modules/mdc→remark というライブラリまで辿れる nuxt-modules/mdc はMarkDown Components というmarkdown でprops や slot の概念を持ったコンポーネントを記述・展開するためのライブラリである Docus について 10

Slide 11

Slide 11 text

Learch

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

作り方

Slide 17

Slide 17 text

1. chatGPT にフレームワークを網羅的に学習できる教材を作らせる 2. obsidian に写す 3. 実際に触ってみながら、誤った部分を修正していく 4. md ファイルにコピペ 5. push 6. 完了！作り方 17

Slide 18

Slide 18 text

今後

Slide 19

Slide 19 text

とりあえず主要フロントエンドフレームワーク網羅したい 19

Slide 20

Slide 20 text

ご清聴ありがとうございました