3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ZEN Study (旧 N予備校) プログラミングコースAdvent Calendar 2024

Day 17

架空のファミレスを作って商品を無限に注文したい!

Last updated at Posted at 2024-12-16

みなさまこんにちは! アクピリンと申します!

私は趣味でプログラミングや3Dモデリングでいろいろな作品を作っている学生です!

今回は私が作った作品の一つである『Restaurant-ACT』の紹介をしていきたいと思います!

『目次』

・作品紹介
・製作時の環境
・まとめ
・振り返り
・最後に

『作品紹介』

まずは一度、完成品であるこちらで遊んでみてください!

いかがでしょうか?

自分で言うのも恥ずかしいですが、それっぽくないですか?

いやーそれっぽくないと困りますよ本当に

ファミレスっぽさの研究のために何度有名チェーン店のHPを見たことか......

そんなことは置いておいて

この『Restaurant-ACT』は「ZEN Study 動くWebページコンテスト2024 夏」への応募を目的として制作しました。

実は今まで私は、プログラミングで本格的に作品を作ったことがなかったんですよね。

自分のHPなどいろいろなモノを作ってたりはするんですけど、なかなか完成しなかったり、アイデア止まりの作品も多かったりします。

なので、今回の企画の参加にあたっては優秀賞を狙うだけでなく、自分が作りたいものをちゃんと作りきろうと考えました。

全部とは言いませんが、次の「製作時の環境」にてその作り方について少し書いていきたいと思います。

『製作時の環境』

・Restaurant-ACTはHTML、JavaScript、CSSのみで制作しています。
・作品の制作には、バージョン1.93.1にインストールした VS code を使用しています。
・作品の公開には、バージョン18.0.1にインストールした GitHub を使用しています。

Restaurant-ACT-image.png

この『Restaurant-ACT』はHTML、JavaScript、CSSの3を使って制作していますが、

主にHTMLしか使っておりません。

画像のやボタンの並びなどはすべてHTMLで設定しており、

Javascriptはラジオボタンの設定、CSSは色だけとかなりシンプルな内容になっています。

商品画像に関してはいらすとやさんのイラストを使用しています。

↓さらに詳しく知りたい方はこちらから↓
https://github.com/AkuPilin/Restaurant

『まとめ』

・本格的にサイトを作ること
・プログラミングコンテストに参加・応募すること
・Qiitaで記事を書くこと
・アドベントカレンダーへの参加

その全てが初めての経験だったのですが、全て非常に楽しかったですし、とても勉強になるいい経験になりました!

『振り返り』

・パソコンで見たときに、画面が真ん中にこない
・選択取り消しができない
・効果音が鳴らない

※ ここからは言い訳です。

上記以外にも、本当はラジオボタン以外のスイッチを使ったり、商品画像を押して選択できるようにしたり、効果音を鳴らしたりなどもう少し凝りたいところもあったんですけど、時間がなくてできませんでした...。

私自身が、いまだにJavaScriptを使いこなせていないため、作りたくても作ることができない部分も多かったです。

しかし、時間がないながらもかなり理想通りのサイトを制作できたため、個人的には非常に満足しています!

いつか改良版を作る予定ですので、完成するそのときまでしばしお待ちください!

『最後に』

いかがでしたでしょうか?

最後に、この記事を閲覧いただいたうえで、もう一度『Restaurant-ACT』で遊んでいただきたいです。

いかがですかね?

よいと思った部分や改善点、感想等があればSlackなどで教えてください!
 
 
また、この『Restaurant-ACT』のほとんどはZEN Studyで学んだ知識だけで制作しています。

初心者でも上級者でも、プログラミングを楽しく学べるZEN Studyをみんさんも使いましょう!

※ 宣伝や案件ではありません。本当にオススメです。

私はQiitaで記事を書くのが初めてなので、読みずらい部分も多かったと思います!

なので、文章や構成について何かアドバイス等ありましたらぜひ教えてください!

また、コードなどに関しても何かアドバイスがありましたら教えてください!

それでは、最後までご閲覧いただきありがとうございました!

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?