Recursionユーザーの成果物を紹介(2022年5月分)

いつもRecursionをご利用いただいてありがとうございます。運営のShinyaです。

先月もたくさんの方が、Disocordコミュニティのプロジェクトシェアチャンネルに、成果物をシェアしていただきました。

プロジェクトに挑戦すると「一気に自分の実力がアップしたのを感じる」と多くの方におっしゃっていただいてます。コーディング問題だけでなく、プロジェクトにもぜひ挑戦してシェアしてくださいね。

5月は大型連休がありましたので、チーム開発は実施しておりません。Discordのシェアチャンネルにシェアしていただいた成果物のみをご紹介します。

普段はMetaの現役ソフトウェアエンジニアJeffryもコメントしてますので、ぜひ最後まで読んでくださいね!

それでは2022年5月の成果物を紹介します。

シェアチャンネルよりユーザーの成果物紹介

Recursionのコミュニティでは、成果物を紹介できるチャンネルがあります。コンテンツ内のプロジェクトや、個人で開発したものなど、ぜひチャンネル内でシェアしてください。

2022年5月中にシェアされたものの中から、今回は5つ紹介します。

Angularコース Number Guessing Game | m2mt_lさん

m2mt_lさんのプロジェクトはいつも完成度が高く、完成までの速さも含めて驚かされています。今回はAngularでは初めての成果物シェアで、m2mt_lさんが一番乗りでした。また次の成果物も期待しています。

シェア日:2022/05/24

Project概要/遊び方:Player1の入力した数字をPlayer2が推測するゲームです。Player1の入力値は見えないようになってます。Player2が入力をしたあとどれだけ正解に近いか画像とヒントが出ます。5回まで予想できます。

作業時間(最終課題): 約10時間

苦労した点 : Angularの使い方

疑問点 : 

  • gameのテンプレートが重複している部分もあり、もう少し良い書き方がある気がします。
  • コンポーネント内では直接データの取得を行うべきではないとチュートリアルに記載がありましたが、テンプレートからサービスを参照するとconstructorをpublicにしないといけないため、コンポーネント内でサービスを参照してます(編集はサービス内のメソッドで実施)。あまり一貫性がなくどのやり方がよいのかいまだによくわかってません。
  • enter.inputでボタンのEnterと併用しようとしたのですが、validationがうまく動かないためボタンだけにしてます。

Github URL:https://github.com/m2mt-l/Number_Guessing_Game

Github URL Project :https://m2mt-l.github.io/Number_Guessing_Game/

運営からのコメント

Jeffry

I used Angular quite a lot around the time it was released, and I it has grown into its own framework and front end development architecture. This is a nice quick project to practice angular and many of its features. Its important to also get its enviroment setup correctly as well. Great work.

Vue.jsコース Task Management App | はるたすさん

Vueコースを着々とすすめているはるたすさん。シンプルで使いやすいタスク管理アプリが完成しましたね。ドラック&ドロップ機能の実装を入れたいとのことですので、リファクタリングしてまたぜひシェアしてください。

シェア日:2022/05/03

Project概要/遊び方:タスク管理アプリです。

  1. Section名を入力し、「ADD SECTION」ボタンで新しいセクションを作成します。
  2. 各セクションの「+」ボタンとゴミ箱ボタンでタスクの追加、削除ができます。
  3. 各タスクでテキストの編集、完了登録、お気に入り登録、削除ができます。

作業時間: 1~2か月(一時期、行き詰ったので寝かせていました…)

苦労した点:props, emitの使い方。終盤までVuetifyの存在を知らず、Bootstrapで頑張ってました…。

疑問点:

データをどこに持たせるのが良いのかいまだによくわかってません…今回はApp.vueにすべてデータを持たせたので、コードが煩雑になってしまったと思います。また、今後の課題としてVueDraggableなどでドラック&ドロップ機能の実装をしたいなと思っています。

Github URL:https://github.com/harutas/Task_Management_App

Github URL Project:https://harutas.github.io/Task_Management_App/

運営からのコメント

Jeffry

Tasks Management projects are a nice way to output a new GUI framework. They cover the basics, and you follow CRUD to allow users to interact with an application and its storage. Looking at the source code, you divided each part into reusable components and followed a good structure, which is in part a key point of Vue so nice job.

プロジェクト2 Vending Machine | あむにすさん

ファンにはたまらないアプリが完成しましたね。今後の変更に備えた設計に気を付けたという点も素晴らしいと思います。Javaを学習中とのことですが、プロジェクトにも挑戦して次の成果物もぜひシェアしてくださいね。楽しみにしています。

シェア日:2022/5/22

Project概要/遊び方:ボタンを押すと歴代のモンスターハンターシリーズが表示されるアプリです。各作品のパッケージ画像とともに作品名・発売日・売上本数が表示されます。

所要時間:25~30時間

工夫したところ:今後作品が増えても良いようにしたところ。具体的にはボタンの数を作品数の分だけ用意するのではなく、電卓のように任意の数を入力できるようにして、対象範囲外の番号にはエラーメッセージを出すようにしました。あと、レスポンシブ対応もやりました。

苦戦したところ:

  • clearボタンを押したあとにシリーズの情報を消すところ。既にある変数を関数の中で再定義してしまったために発生したバグでした。変数のスコープの重要性を思い知りました。
  • HTMLにJavaScriptが反映されなかったところ。JS初心者なので、scriptタグを入れてないとか入れる場所(順番)が違うとかで数時間は溶かしました。。。

改善したいところ:

  • prevボタンとnextボタンの実装。毎回clearボタンを押すのが煩雑なので、連番の画像をみたい場合はprevとnextを押せば参照できるようにしたい。
  • PC版でsliderを呼び出すとき、プルプルするところ

Github URL Project:https://amnis333.github.io/Monster-Hunter-Series-Gallery/

Github URL:https://github.com/Amnis333/Monster-Hunter-Series-Gallery

運営からのコメント

Jeffry

Every time I see users create Vending machines, they bring their own uniqueness to it. I am also a fan of this series. At this stage, your code is fine. I look forward to seeing how your code will evolve as you tackle other projects and start designing other apps.

Project3 Clicker Empire Game|Hirotada🐈さん

Recursionのプロジェクト課題の中でも、最初の山場とも言えるClicker Empire GameをシェアしていただいたHirotadaさん。苦戦される方が多いプロジェクトですがGitHubを上手く使ってスムーズに開発されたんですね。途中のコメントに実装内容が書いてあってわかりやすかったです。また次の成果物もシェアしてくださいね。

シェア日:2022/05/11

Project概要/遊び方:ハンバーガーをクリックしたり、投資や不動産等でお金を稼ぐ「Burger Clicker Game」というシミュレーションゲームです。またアカウントごとの総資産ランキングを見ることができます。

作業時間(最終課題):

全体の構想:約 4 時間

作成:約 20時間

苦労した点:最初にどこから手を付けるか悩みました。途中から、GitHubにメモを取りながら、必要な機能に分解して作るようにしました。それによりスムーズに開発を進めることができました。

GitHub Project URL:https://hirotada-t.github.io/ClickerEmpireGame/

GitHub URL:https://github.com/hirotada-t/ClickerEmpireGame

運営からのコメント

Jeffry

This project showcases a users skills, how far they have grown, and gives them a canvas to output. The src is well organized, and the code within main.js is structured well. You are making good use of classes, encapsulation and reusability.

Project1 Emotion Onomatopoeia Dictionary|Kai10さん

よく自習室にいらしてコツコツと学習を続けていらっしゃるKai10さん。5月はプロジェクト1の成果物を2つシェアしていただきました。プロジェクトに取り組んでみてどうだったでしょうか。また次の成果物もぜひシェアしてくださいね。

シェア日:2022/05/09

Project概要/遊び方:感情のカテゴリを表示するアプリケーションです。カテゴリをクリックすると、その感情の擬音カードのセクションにジャンプします。

作業時間:5時間

苦労した点:JavaScriptを書くときに、うまく反映できずに少し詰まりました。CSSの理解も少し深まりました。

スニペットURL:https://recursionist.io/share/Kai10/lessoncode/564/htmlRunner2

運営からのコメント

Jeffry

I hope you had fun with this project as its a good first intro for dynamically manipulating a GUI. The code looks solid for this stage.

【有料ユーザー限定】チーム開発に参加しよう

Recursionでは、いくつかの条件を満たしたユーザーのみが参加できるチーム開発プログラムがあります。Discordコミュニティで定期的に募集の案内をしていますので、ご興味のある方はぜひご参加ください。参加条件など詳しくはDiscordのチャンネルを確認してください。