エンジニア夫婦の技術日記
エンジニア夫婦の技術日記 > 技術 > アプリ開発における学びpart6

アプリ開発における学びpart6

2023年10月24日
Posted by 
向日葵

こんにちは。向日葵です。

今回は前回に引き続き開発における学びpart6ということで、設計中？におぉーとなった話を紹介します。

学び

今回の学びはずばり

  • 実際に手を動かすと見えてくることもある
  • ディスカッションをすることでわかることもある
  • javascriptモジュールを読み込むときはdistフォルダを読み込む

です。

経緯

今回は3つともTODO作成ツール作ってみようpart2で残作業となっていた検証作業を行っているときでした。3つの学びの詳細をそれぞれ紹介します。

実際に手を動かすと見えてくることもある

納期が過ぎているものの検知方法として「ステータスで管理する」という案をあげていました。こちらのイメージはこういうのでした。

ただ実際に手を動かしてみるとこんなことを思いました。

  • 縦に並べるんじゃなくてタブが横に並んでタブを選択するとタブにあった内容が表示されるみたいな見せ方もある
  • むしろそのほうがいいんじゃないか

上記より「実際に手を動かすことで見えてくることもあるんだな」と気づきました。

ディスカッションをすることでわかることもある

納期が過ぎているものの検知方法としてメールを送信するという案をあげていました。そして実際に手を動かそうとしたときに気づきました。「メールで飛んできたとしてもメール見ないな」と。この話を何気なく夫にしていた時にアドバイスもらったのが「lineで通知するようしたらいいんじゃないの」でした。メールは思いつきましたがlineという発想はありませんでした。ディスカッションをすることで得られることもあるんだなと思いました。

javascriptモジュールを読み込むときはdistフォルダを読み込む

1つ目の学びの「実際に手を動かすと見えてくることもある」の経緯となったタブで表示する方法を模索していた時でした。UIkitのtabというメソッドを使用するとそれっぽいことができることがわかっていたため使ってみることにしました。モジュールなのでインストールするだけではだめで読み込む必要がありました。その際htmlファイルに以下のように<script>タグで読み込んでいました。

<script type="module" src="node_modules/uikit/src/js/uikit.js"></script>

この状態で実行すると以下のエラーが起きました。

Cannot use import statement outside a module

こちらの記事によるとtype属性に「module」を指定するとよいそうです。試してみるとエラーは消えていました。ただUIkitは機能していませんでした。そしてここで夫からの一言。

それどうやって読み込んでんの？src?distじゃね？

確かにdistというフォルダが存在しました。そしてdistに変えたらエラーもなく無事表示されました。聞いたところによるとjavascriptのモジュールはdistフォルダを読み込むんだそうです。今まで使っていたものはそれが当たり前だったため何も考えたことなかったのですが一般的にdistフォルダらしいです。これは大きな収穫でした。

まとめ

今回得た学びは

  • 実際に手を動かすと見えてくることもある
  • ディスカッションをすることでわかることもある
  • javascriptモジュールを読み込むときはdistフォルダを読み込む

でした。
最後まで見ていただきありがとうございます。今回出てきた内容は一部TODO作成ツール作ってみようpart4?あたりで改めて記事になると思います。

次回

次回はデバッグの重要性についてです。

コメントを書く