ようやくコマンドラインでしか遊べなかったオセロAIをウェブアプリ化出来たのでだらだら感想の記事。
Tipsは以下に記載↓
作っている最中
予想外に時間がかかりました。オセロのAI自体は1/12には出来ていたので、このブログを書いている3/23までに2か月はフロント側の作成に掛かっていることに。。。
とはいえ仕事が2月納期で炎上気味だったので2月は正直作業できていないから、作業時間的には1か月くらいかな？という感じ。
正直見た目がドシンプルです（笑）
どこに時間がかかったかというと、フロントの知識が全くない自分がVue.jsで作ったため最初の勉強に時間がかかった感じです。
まだVueの勉強だけなら早かったんでしょうけど、node.jsとかもちんぷんかんぷんだったので、その辺の基礎の勉強に時間がかかった感じですね。
（ちんぷんかんぷんは以下の記事参照↓
Vue.jsについて
今回のオセロアプリでは、クライアント側で自身の石の設置と、石の挟み反転処理を行っています。
やっぱりVueって便利です。というかデータ基準で表示が変わるっていうのが便利「信頼できる唯一の情報元」ってやつになるんでしょうか。
iOS開発のSwiftUIでも感じますが、宣言的にレイアウトが書けると、命令的に書くコードと比べてコード量が減ります。またコードの見通しが良くて、かなり構成が理解しやすくなりますね。
次から導入したいなVuex
今回は入門書をぱぱっと呼んで作っただけなので、Vuexを使ってません。そのため、空白マスをクリックした際の石の配置処理が空白マス→オセロ盤１列→オセロ盤全体→アプリ全体とイベントを伝播させています。
ただVueにはVuexなる追加機能があるので、こちらを使うとVuexに石の状態、空白マスをクリックしたときのアクションなどを定義して、各コンポーネントからVuex内に定義した状態、アクションを呼び出せるようになるみたいです。
つまりイベントを伝播させて、アプリ全体のコンポーネントで定義したアクションを呼んでいたのを、Vuexのアクションを呼べばいいのでイベントを伝播させる必要がないです。ほとんどのアプリで必須な気がします。
flaskについて
またフロント側だけではなくて、サーバー側の作成も初使用のflaskだったのでこちらも勉強しながらという感じですね。flaskの勉強は公式のチュートリアルがすごく勉強になった↓
特にデプロイ方法、WEBサーバーの導入まで解説しているところが良きです。（デプロイに関して調べたところ、チュートリアルでは.wheelファイルでパッケージ化してるけど、Python機能だけでデプロイしようとしているためだと思います。などで私はGitでデプロイしました。）
デプロイについてのTipsは以下↓
pythonについて
オセロAI作成時がpython初挑戦だったので、pythonのWEBフレームワークのflaskはもちろん初めてでしたが、flask自体はすごく単純でした。
が、インタープリター言語の特徴？かインポートの仕組みがちょっと分かっていない感がある。関数やクラスのインポートはJavaでもするけど、import文でインポートされたら、インポート先のグローバルに書かれているコードが実行されて、その結果、インスタンス化されたグローバルに定義されているオブジェクトのみをインポートするって事もできるっぽい？
オブジェクトのインポートはJavaではないので、かなり戸惑った。
他の戸惑った点はインポートと似てますけどパッケージ構成方法。__init__.pyとかimport aaa from bbb って時にaaaとbbbに何を書いたらいいかですね。これらは使って慣れていくしかないのかなーという感じ。
とはいえ、ちょっとしたものをパパっと作るにはpythonはすごく便利。逆にビジネスロジックがすごい複雑なものを作るとpythonだとすぐにごちゃごちゃになりそう。
機能が少ない＆単純なことが多いアプリの開発→python
機能が多い＆ビジネスロジックが複雑なシステムの開発→Java
って棲み分けになりそう。
次への課題
次への課題は、見た目ですね（笑）
正直HTML、CSSの知識が足りてないなって感じです。例えば横並びにリストを表示したいだけだったり、色を付けたいだけでどんなCSSを書くんだろ？ってなるレベルなので。
あと見た目が、適当だったらこんなにもしょぼく見えるんだ！と感じました。
これからは見た目をキレイにすることにもチャレンジが必要そう。CSSの基本をちょっと学んだらVuetifyとかも調べてみるのも良いのかな？
コメント