Javascriptで単語帳アプリを作った feat.ChatGPT

tymikii.github.io

まずはこちらをごらんください。（スマホ非対応です）

ここ最近JavaScriptの勉強をやってまして、基本文法を一通りやってごく簡単なアプリケーションを作成するところまでできるようになりました。ふと思い立ちチュートリアル で作成した単語帳をめくるミニアプリに機能追加をChatGPTと一緒にやってみました。ChatGPTと一緒に書いたのは以下の機能です。

主な機能

• LocalStorageの活用 難易度 ☆☆☆★★
  • ユーザーが登録した単語をブラウザに保存できるようにしました。アプリを再起動しても登録した単語を保持します。
  • デフォルトで用意していた配列と切り離しが上手くいった時、すごいうれしかった...。
• 登録単語のテーブル表示 難易度 ☆☆☆☆★
  • 登録した単語を表形式で見ることができるようになりました。
  • trとtdと...という感じでたくさんの変数を用意しないといけないのが面倒。実装自体はまあまあぐらいの難易度だったけど、ふとした瞬間によく壊れた。
• 単語削除機能 難易度 ☆☆☆☆☆
  • 不要になった単語を削除できるようにしました。
  • これが一番難しかった...。消せなかったり、消しても戻ってきたりして何度も何度も書き直しました。
• 英語・日本語の区別 難易度 ☆☆☆★★
  • 単語を登録する際に、英語と日本語を区別して弾く機能を追加しました。
  • 正規表現をChatGPTに提案してもらったおかげでだいぶすんなりかけた。正規表現なんて一生覚えたくないので、そういうのを任せられるのは本当にありがたい。
• 空白の登録防止 難易度 ☆★★★★
  • 空の単語が登録されないようにする機能を実装しました。
  • 意外に簡単。
• 単語の重複防止 難易度 ☆☆☆☆★
  • 同じ単語が連続して出題されないようにしました。
  • 思ったより難しい。前回のindexと今回のindexと...と変数が一気に増えて意味がわからなかったし、正直あんまりよくわからないまま書いた。
• 正解・不正解の記録 難易度 ☆☆★★★
  • 学習者が単語の意味を正しく答えたかどうかを記録して表に反映させました。
  • 難しそうで身構えていたけど、表さえ出来上がっていれば追加するだけなので意外に簡単。

feat.ChatGPT

ChatGPTのサポートを得て上の機能たちを実装しました。コードの提案からエラーの解消、さらにはリファクタリングのアドバイスまで、開発プロセス全体を通じていい感じの活躍をしてくれてます。私はどんどん質問してコードを吐き出させて読みながら写し書きして、動かしてみるみたいな感じで使ってました。 上手くやるコツは細かくコミュニケーションを取ることな気がします。コードをコピペしてこれをどうしたらいいですか？リファクタリングしてください。という感じでとにかく具体的に指示していくと精度高くやってもらえるな〜という印象です。ぶっちゃけ書いたものすべてをきちんと理解してかけてるわけではないけど、他のもの勉強してる時もそんなもんかとも思う...。

今回のハイライト。ChatGPTに言われるがまま正規表現を書く場面

このエントリも50%ぐらいChatGPTに書いてもらいました。文章の硬さがやっぱりあるなとおもうけど、まあ何度か使えば馴染んでくるかな。これで味を占めたのでこれからもっとどんどん頼っていきたい。

コードに興味のある方はこちらへどうぞ。遠慮なくご意見をお聞かせください。GitHub - tymikii/ankikun

Youtube見るのをやめた

Youtubeを見るのをやめると決めて２ヶ月が経とうとしてる。

Youtubeがやめられない

YouTubeを見るのがとにかくやめられなくて1日2時間〜4時間くらいみてた。ストレスが溜まってるとき、体調が悪いときが特にひどくて1日4時間とか平気で見てしまう。
何を見てるって配信者の切り抜きだとか、元気に過ごす5つの方法みたいなハウツー、人気のガジェットレビューだったりとかでとにかく中身がない。 なんかボーッとスマホをスクロールし続ける猿みたいだな。実験室でなんらかの刺激を求めてボタンをカチカチ押してる猿。あれと同じだなと思った。それに気づいて本当に自分が嫌になった。脱Youtube猿ということで真剣にやり始めた。

悪癖のやめ方

ついやってしまう場面を特定して１つ１つ対応する

つい見てしまう場面を特定して都度直していく。お風呂に入っている時に1時間くらいスマホを見ながら脳死してるのをまずなんとかしようと思った。とりあえずスマホを持ち込まない、読みたい漫画をたっぷりKindle Oasisに入れてそれを読んで良いということにした。 次はトイレにスマホを持ち込まない。トイレには必ず手ぶらでいくようにする。その次は寝室にスマホを持ち込まないという感じでついついやってしまう場所とスマホを切り離していく。

YouTubeを見ていた時間を別の行動に入れ替えていく

体調が悪くて横になってる時にYouTube漬けになる癖があったのでとりあえずNetflixならみてOKということにした。YouTubeを見ていた時間を別の行動に入れ替えていくイメージでやる。YouTubeよりつまんないと当然挫折するのでちゃんとお金をかけて面白いものを用意しておく。Netflixにしていいなら雑誌でもいいんじゃない？恋愛小説でもいい？という感じでどんどん交換していった。

程よい距離感の人に監視役を頼む

整体の先生に「YouTube断ちするので1ヶ月続いたらめちゃくちゃ褒めてください！」と言っておいた。整体の先生っていうのがミソで、程よくよそゆきの人間で、定期的に会うってことが必要。整体の先生に報告できたら良いブランケットを買っていいことにしていた。

ホーム画面を空っぽにする

空っぽっていうところがミソで、1つとか2つとか入れておくとダメ。Dockに本当に使うのだけ（私はSlackとGooglemap）入れる。アプリを消すのでは不十分で、ふとした瞬間にまたアプリを入れ直して戻ってきてしまう。おく場所もない、みたいな状態にしておく。

何度もやる

1度でやめられると思わずに何度もやめるのをやる。

失敗したやり方

スクリーンタイム

1時間ですよ〜と言われても完全に無視してしまう。全く効果がなかった。お風呂でみるYoutubeを0時間、ベットで見るYoutubeを0時間という感じで進めるべきで、ざっくり全体の時間を計るのでは歯止めとして効果がない。1時間見たら絶対に2時間見てしまうので、0時間にする必要があった。

家族に監視役を頼む

またあいつ挫折したのか...みたいな感じで監視役として意味がなかった。

アプリを消す

ふとした瞬間にアプリを入れ直して元の木阿弥

誇張じゃなく10回くらいやめようと思って挫折し続けていたので、ようやく成功しつつあり嬉しい。活字を読む力も戻ってきたようで、本を読んで過ごすことができた。また私がYoutubeを見るのを見かけたら注意してほしい。よろしくお願いします。

■

以前1on1でこんな仕事はやりたくない、あれは嫌、これも嫌、という話をした。聞いてもらいたかっただけで会社員だから嫌でも仕事は仕事やしという気持ちだったけど「じゃあこれは辞めよう、やらないようにするよ」という提案がシュッとでてきてびっくりした。

仕事が大好きなタイプではないから、仕事せずに怠けてずっとYouTubeを観ていたいなと思うけど、それもいつか飽きるし、時間をかけたものが何らか成果になって残っていることは嬉しい。

脱線したけど怠けていたいという気持ちと嫌だからやりたくないという気持ちは一見すると似ているけど結構違う。嫌だからやりたくないことは例えば全く興味がないとか自分のポリシーにそぐわないとか嫌いな人間がいるからとかそういう感じで、何らか気持ちに引っ掛かりがある状態なんだと思う。気持ちに引っ掛かりがある状態で無理やりなにかをやってるとある日突然気が狂ったりする。

気持ちに引っ掛かりがあること自体は自分一人ではどうすることもできない。避けて通ることはできるかもしれないし、できないかもしれない。そういう時に人の助けが必要なんだと思う。1on1って雑談に何の意味が？とおもってたけど、そういうことを言えるように定期的に話して関係をあたためておく行いなんだということが今更わかった。

2023年の目標は「自分から誘う」です

リモート下で入社してもう2年経つんですが、ぶっちゃけま〜ほんとに誰からも誘われないんですね。みんなそれぞれやってんなあ〜と思いながらやや不貞腐れてました。

誘う側の立場に立ってみればそりゃそうという話で、会ったこともないよくわからない人間誘わないですよね。どこからくるのかがわからないし、好きな食べ物もわからないし、酒好き（tymikiiはほぼ下戸です）というわけでもなさそうな人をどう誘ったらいいのかわからないですよね。

というわけでまずは自分から誘ってみるか〜ということで2023年の目標は「自分から誘ってみる」ということにしました。月1回自分から誘ってどこかに行くのが目標です。誘われたら「あぁ、こいつの個人的な目標に付き合ってやろう」ぐらいの気持ちで応じてくれると嬉しいです。

とはいえなんとなく乗っかってれば人間関係がそこそこできるという感じじゃなくなったのもなんかしんどい時代になったなぁ...

おすすめ日記本をおしえてください

tofubeats氏の難聴日記を読んでいる。読めば読むほどtofubeats氏はtofubeats氏なんだな、一貫しているなと思う。この本は割とタイムリーだし個人ブログでネタバレするのもいまいちな気がするので読んだ人で感想言い合う会やりませんか？

黙々と読んでると他にも人の日記を集めた本が読みたいなと思って浅野いにお氏の漫画家入門を買ってみた。最近YouTubeの配信を聞いてます。ちょこちょこ酒場に顔を出すものの下戸なのが大変好感が持てる。私も同じです。

本棚を見ると写真家の植本一子氏が書いた働けECDもあった。1日の始まりにその日の出費が書いてあるのが好き。植本一子氏の写真が挟まってるのが良い。前後の文脈がわかると写真も味わいが増す。

SNSをやってるとみんなが人生の主人公で比べて私は...という気持ちになってくるけど、日記本を出版している才能のある人たちでも大抵普通の日常を送っているということがわかってホッとする。人生で結婚しただとか車や家を買っただとかというライフステージが変わる瞬間もただ日常の一幕で、翌日はただ日常に戻っていくだけというタイムラインが感じられるのが良い。

これは余談だけどちょこちょこ悪口が書いてあるのがよりいいですね。出版するまで微妙に間があるおかげでぼやかされているのがいいと思う。

というわけで日記本色々読みたいんですけど他おすすめありませんか？リコメンドをお待ちしています。

トーフビーツの難聴日記

漫画家入門 (単行本)

働けECD わたしの育児混沌記

買い物大好き

翌日、普通にベッドを買った話をしたら思いの外自分のテンションが上がらなくてびっくりした。「まぁ…はい…いやいろいろ選ぶのマジ面倒くさいっすよ」みたいな感じで23万も出して一通りのものを揃えたのにどうしてこんなにテンション下がってるんだろう、本当はMacBook買ったぐらいの興奮が自分にあってもいいはずなのに、と思った。

そもそも買い物は大好きで、意味わからないくらい高いものをポンと買ってたりする。どんな感じかというと旅行前に買ったサングラスは4万円で、なにかと理由をつけてポンと買ってしまった。旅行で大いに役立ったし後悔はしてないけど、あんなに高いものが必要だったかは不明。

高ければ高いほど、必要なければ必要ないほど、そして造作が美しいものに燃えるタイプなので危険だと思う。4000円のなんとなく必要なものはグズグズいつまでも買えないし、40000円の特に必要ないものは燃えるタイプ。物欲が減っている時は大体元気がないし、なんかバリバリものを買っている時は元気な時、というバロメータにもなってる気がする。

実は今回ベッド代金の半分は夫の転勤特別手当で支払われていたという点で身銭を切る感じではなかったし、生活必需品を買っているという点でもテンションが下がるし、そしてなにより予算の都合で化粧板のわけわからん角丸がついた家具を買わなくてはいけなくなったのがテンション下がりポイントだと思う。

買い物するために働いているという節があって夫からは白い目で見られている。いい加減この感じやめたい。一方一生ハァハァ息荒く買い物をし続けたいという気持ちもある。

でかいベットを買った

実家時代からずっと洋間に布団で寝ていてそれが当たり前だと思ってた。ずっと薄いマットレスを敷いて寝ていたけど、夫の布団が使い込みすぎてぺちゃんこになっていて、体が痛いと訴えていて、布団をまた買うのもな〜という気持ちで重い腰を上げてクイーンサイズのベッドを買った。

ベッド使ったことないし何を買ったらいいかもわからないし予算にも限りがあるし、ということでニトリにいって一通り寝てみて一番良さそうなものを見繕って買ってきた。7月中旬に届くらしい。

なんでこんなにグズグズし続けていたかというと、実家時代からずっと布団を敷いて寝ていたので、家族で同じ布団で寝るというのに生理的な嫌悪感があって、いわゆる新婚っぽいかんじがなんか無理だなと思っていた。とはいえ洋間にずっと布団が積まれている状態はとてもカッコ悪いし、世の中のひとたちは大きいベッドで2人で寝るというのが主流らしいし、夫の布団はなんとかしないといけないしというのでまあ一旦やってみるかと思った。

というわけでベッドを購入するのは割とどうでも良かったんだけど、枕をえらぶ段になって2つ重ねて試してみたらふかふかでホテルみたい！というのでテンションが上がり、結果的には結構楽しみになっている。インテリアをそれっぽくすることでテンションを上げて変化を乗り切りたいと思う。