デザイナーもAIのサポートでコードを覚える
こんにちは、Spinnersの元山@kudakurageです。
先日、料理研究好きのためのレシピメモアプリ『COOKY』というiOSアプリをリリースしました。
これは私の趣味プロジェクトですが、個人的にそういうツールが欲しかったというのと、AIエージェントを使って新しいなにかを個人的に試したかったという経緯で誕生したものです。
『COOKY』の特徴があるとすれば、レシピの変更履歴を閲覧できて差分表示をみられるのと、料理の作り方のレシピの書き方が「概要」「調理条件」「手順」の3種類の方法で記述できるというところでしょうか。
それ以外に関してはオーソドックスでシンプルなレシピメモアプリだと思います。 もし料理の研究をしている物好きな方がいましたら使ってみてください。
『COOKY』についても少し触れますが、本題はそこではないので興味のない方はセクションを飛ばして読んでください。
本題はAIを使った開発に関することではありますが、今の時代AIに関する具体的なノウハウの話はすぐに古いものとなってしまうので、個人の日記レベルの割とふわっとした内容になっております。
INDEX
COOKYについて
個人的な料理趣味の経験から、材料の分量を微妙に変えて「このときはあーだったな」などと感想を心のなかで言いながら酒を呑み、また次の改善につなげるなどということをしていたので、レシピ変更の履歴と各バージョンへのコメントができるというのは最初から決めていた仕様でした。
実際に基本的な仕様をClaudeと相談しながらも決めて、iOSアプリとして自分の端末で動かせるようになるまではそんなに時間がかかりませんでした。
早速、自分で使ってみていたのですが、正直レシピの作り方の手順なんていちいち書いていられないわけですね。
別に誰かに見せるわけでもないし（後々は誰かに共有することもあるかもしれないけど）自分が分かっていればいいので、作り方について書くとしてもメモ書き程度で良いというか。
そういうわけで作り方の欄に「概要」というざっくりと書けばいいだけの入力方法が誕生しました。
それからまた料理をしつつ使っていたわけですが、私は低温調理器をよく使っており、低温調理に関するレシピもたくさんメモしていたわけです。 で、低温調理において重要なパラメータが「温度」と「調理時間」なわけです。
当初は材料とか分量というパラメーターをいじることがメインだと考えていたわけですが、レシピの研究においては「温度」とか「調理時間」というパラメーターも重要だと気づきました。
そこで作り方に「調理条件」という入力方法が追加されたわけです。
別に「手順」に書いてそれを修正すれば良いとも言えるのですが、そのためにいちいち手順を書いたり編集するのも面倒ですし、変更履歴として残すことを考えると調理条件のpropertyとvalueという形式にしたほうが諸々都合が良いということもありました。
そんなわけで少し変わったアプリにはなっているのかなと思っています。 ダークモード対応や多言語対応、iPadOS向けのフレキシブルレイアウト対応、メニューバー対応、iCloud同期など基本的な機能は一通り作ったので、今後はもう少し実験的な取り組みを指定効果とも考えています。
あとAndroidアプリの開発もやってみようかと思っています。
AIのサポートでコードを覚える
あくまで私の学習スタイルの話ではありますが、過去を振り返ってみるとゼロから勉強をして少しずつイチを書けるようになっていくという学習スタイルではなかったように思います。
どちらかといえば、すでによく書かれているコードがあって「なるほど、ここはこうするためにこんな風に書いてるのね」とそれを読み解きながら自分でも書いてみて覚えるというスタイルです。
それこそWebについて何も知らない頃はDreamweaverの吐き出したコードを見ながらHTML辞典と照らし合わせて読み解いていったり、他の人が書いたPHPやPerlなどわからないコードが出てきたらその都度調べたり、地道といえば地道ですね。
とはいえ、本当に何も無いゼロの状態から基本的なことを一つずつ勉強してやっとちょっとできるみたいなのがつまらないと感じてしまう。（成功体験を詰むという意味ではそれがいいのかもしれない？ですが）
学生時代から数学の問題を解くのがスキだったので、問題を出されてそれを読み解いていることのほうが私はスキだったのかもしれません。
iOSアプリに関しても何度か自分でコードを書いて作ってみようかなーと考えていたのですが、なんとなく日々の生活に追われるような言い訳でやらないでいたわけです。
そんななか、私もAIエージェントを業務に活用していたこともあり、いよいよ試しにiOSアプリでも作ってみるかとなりました。
Web上にある他の人の知見なども参考にしつつ、Claudeとも相談しながら仕様策定・UIプロトタイピング・アプリ開発・リファクタリングなどなどやりました。
こういうことがしたいと指示するとそれに合わせた開発をAIエージェントがしてくれるので、実際にどの部分をどんな風に追加・変更したのかというのを眺めて「なるほどこういう風に書けばいいのか」とわかった気になるという感じです。
ちょっとした変更であればAIが書いてくれたコードを参考にして、自分でコードをいじって変更を加えたりして。
場合によっては「こういう感じで書くのかな」と頭の中で考えてからAIに書いてもらって、答え合わせをしてみたり。 今までのほとんどをデザイナーとして仕事をしてきたので実際にはやったことがないですが、これが「ペアプログラミングか！？」などとも感じました。
iOSアプリに関する基本的な開発を一通りAIとこなしたおかげで、ざっくりとしたコードの書き方とファイル構造が把握できたのは自分でも意外でした。
AIエージェントとの開発をやってみてわかったこととしては、Webに比べてiOSアプリの場合は特にインターフェースの開発部分が難しいということです。
これはiOSアプリはWebに比べてオープンになっている情報が少なかったり、各社が独自のインターフェースをそれぞれ開発していて、そういった部分の技術的な知見やノウハウが個人や企業の外にあまり出ていないということが原因かもしれません。
（あくまで私の勝手な予想です。今回はSwiftで開発しており、FlutterやReactNativeとかだとまた変わってくるかもしれないので、そのあたりは気になる。）
それもあって、iOSアプリのViewのとくにインターフェイスに関わる部分の書き方についてはかなり勉強になりましたし、自分で書いた部分も多くありました。
それとSwiftUI的にどんな構造だと作りやすくて、どういう感じだとめんどくさいのかといった勘所もかなり掴めたような気がします。
まとめ
今回のAIとのiOSアプリ開発で「コードの書き方を勉強しよう」などとは一切考えていなかったのですが、結果的に私にとってはそういう効果があったというのは興味深い点だなと思いました。
あとこれは前々からそうですが、デザイナーがコードの書き方を知っていることの強さを改めて感じられたので、一つのやり方として今回のようなやり方をしてみるのも面白いと思います。
