Next.js & ElectronでTodoアプリを作る

5分間社内LT資料

Transcript

1. Next.js & ElectronでTodoアプリを作る Kobayashi Yuta
2. Electronとは HTML CSS JavaScript等のWeb技術を使⽤して、 クロスプラットフォームのデスクトップアプリを構築することができる オープンソースフレームワークです。
3. プロジェクトを作成・ビルド実⾏ $ npx create-next-app --example with-electron-typescript todo-app $ cd todo-app $ npm run build $ npm run start yarnが⼊ってなかったら⼊れておきます $ npm install -g yarn buildで作成されるファイルをgitの管理外にするために.gitignoreに追加します。 # .gitignore main dist renderer/out renderer/.next
5. 画⾯を追加する 通常のNext.jsで新しいページを作成するのと同じように、 /pages配下にtodo.tsxを作成し、/components/Layout.tsxに作成したtodoへのリンクを配置 します。 import Link from "next/link"; ... <Link href="/todo"> <a>Todo</a> </Link>
6. 実装の前に… 少しでも⾒た⽬をリッチに仕上げるためにmaterial-uiを⼊れます。 $ npm install @material-ui/core
7. Todoを実装する const [inputValue, setInputValue] = useState(""); const [todoList, setTodoList] = useState<String[]>([]); const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); setTodoList([...todoList, inputValue]); setInputValue(""); }; return ( <Layout title="Todo"> <h1>Todo</h1> <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit}> <TextField id="task" label="Task" onChange={(e) => { setInputValue(e.target.value); }} value={inputValue} /> </form> <List component="nav" aria-label="secondary mailbox folders"> {todoList.map((todo) => ( <ListItem> <ListItemText primary={todo} /> </ListItem> ))} </List> </Layout> );
8. 実際に動かしてみる
9. 配布可能な状態にビルドする $ npm run dist 実⾏するとdist配下にdmgファイル等が⽣成されます。
10. まとめ 社内プロダクトで採⽤しているNext.jsの知識だけでデスクトップアプリを簡単に作るこ とができた。 production環境だとnext/linkの遷移がちゃんと⾏えなかったので改めて確認したい。
11. ご静聴ありがとうございました 参考 Next.js + Electron がとても簡単になっていた | Zenn https://zenn.dev/erukiti/articles/933fc127f751aef45b4f