【Neovim+tmux】 Reactでアプリを管理するアプリのレイアウトを作成してみる

こんにちは。ke1nyです。
Reactを独学し、簡単なCRUDアプリを作りたいなと考えていて、
開発のモチベーションを高めるため、VSCodeではなく新しいエディタ環境で開発していきたいと思い、Neovimに挑戦しています。

Neovim+tmuxの環境も構築し、簡単なCRUDアプリとしてToDoアプリを練習として開発しました。

結果として、動くアプリをVSCodeやVisual Studio以外の環境で開発できたことに達成感を感じ、ますますNeovimとtmuxを使いこなしていきたい！とモチベーションが上がりました。

次に、どんなアプリを作成しようか考えていた時に、どうせアプリをたくさん作るのなら、それをまとめて管理できるアプリを作れば、色々と勉強になって良いのでは？と思い、今回はアプリを管理するアプリを作成しようと思います。

その土台となるレイアウト（見た目の部分）を今回は備忘録として残しておきます。

まずは、React インストール

npx create-react-app アプリ名 --template typescript

srcフォルダ内の以下のファイルは不要なので削除

• App.test.tsx

• index.css

• logo.svg

• reportWebVitals.tsx

App.css内のコードを全て消し、App.tsx内のコードも消す
index.tsxで不要なimport等を削除したところで、開発前に行うクリーンアップ作業が完了！！（ここら辺の作業も自動化できれば良いな、たぶんあるよね。それかスクリプトを自作してみようかなと模索中・・・）

 <React.StrictMode>
    <App />
  </React.StrictMode>

StrictModeは残しておいて、rpm run buildをすることで、自動的に無効になると。StrictModeはコンポーネントのバグを検知したり、予期せぬ処理等を警告してくれるのでタグを削除しなくても良いと思います。

必要なコンポーネントと各リンクを繋げてゴニョゴニョコードを書いていくと・・・

いきなり完成レイアウト、ドーン！

アプリを管理するレイアウト画面

機能としては、とてもシンプルで左側に開閉できるサイドバーメニューを設置して、各メニューをクリックすると右側の画面が選択したページになるというだけです。（すごくシンプル・・・）

本当は、もっと素敵なデザインとかにしたかったのですが、凝りすぎると肝心のアプリ開発が疎かになりそうだったので、ここら辺で抑えておきました苦笑

まとめ

今回は、アプリを管理するアプリのレイアウトを書きました。
これからも引き続き、自作アプリを作成して、色々なアイデアを形にしていければ良いなと思ってます。
効率よくNeovimでコード書けるよう頑張っていきます！