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

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

梅雨が明けていよいよ本格的に暑さが増してきましたね。体調管理など気を付けてしっかり学習を続けていきましょう。

4月、5月は大型連休があったのでチーム開発をお休みしていましたが、6月は実施することができました。今度の成果物もかなりの出来栄えで、なんとGoogle Play Storeで公開されています。後ほど紹介しますが、ゲームとしても面白いのでぜひダウンロードして遊んでみてください。

この記事では、シェアチャンネルに投稿されたRecursionユーザーの成果物とチーム開発での成果物を紹介します。それぞれにMetaの現役ソフトウェアエンジニアJeffryがコメントしてますので最後まで読んでくださいね!

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

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

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

Vue.js To Do List | Koheiさん

3月の記事で紹介した旅の思い出写真を見ることができるVebding Machineなど、与えられた要件だけでなく独自の工夫を入れたアプリを作成されていたKoheiさん。今回もなかなか面白いものが完成しましたね。プログラミング学習での疑問をストックしたり、英単語を覚えるために使ったり、いろいろな使い方ができそうでとても面白かったです。また次もひと味違う切り口の成果物を楽しみにしていますね。

シェア日 : 2022/6/18

Project概要/遊び方 :「SHiRiTai」あなたの「しりたい」をカードにしてストックできるアプリです。

(使用例)

「どうして空は青いの?」と考えた時、

  • カテゴリ名 >> 気象
  • カテゴリカラー >> 水色
  • タイトル >>「どうして空は青いの?」

のように入力してカードを作成します。

答えが分かったら、カードの編集ボタンを押して答えを記入できます。また、お気に入りチェックをつけたり、疑問が解決したら解決済みのチェックをつけたりもできます。

(検索機能)

画面上部のフォーム入力から、カードを条件で絞り込んで表示させることができます。絞り込み条件は以下の通りです。

  • カテゴリ
  • 解決済みか未解決か
  • お気に入りかどうか
  • キーワード

(円グラフ)

各カテゴリの割合をグラフで確認できます。

(データ保存)

localstorageにデータを保存できます。

作業時間(最終課題): 10日くらい

苦労した点 :

navbarのdropdownが動かずに数日過ごしましたが、popper.jsとbootstrap.jsのscriptを貼っていなかったことに気づきました。

カードのリストを両端キューで作成しましたが、VueでObject.assignを使ってもデータをリアクティブにできなかったので、仕方なく配列に格納し直しました。

localstorageにデータを保存する際、JSONで両端キューを扱えなかったため、配列に格納し直しました。

疑問点 :

  • 連想配列や両端キューなどのオブジェクトをVueでリアクティブにする方法はありますか?
  • Object.assignを使っても上手くいきませんでした。
  • メールアドレスでログインできるようにしてみたいのですが、中級の知識では難しいのでしょうか?

Github README : https://github.com/khkmgch/ShiRiTai/blob/main/README.md

Github Project : https://khkmgch.github.io/ShiRiTai/

運営からのコメント

Jeffry

Great work on this todo list on vue.js, and its storage. For login and permanent storage on servers, you will need quite the setup in the backend. While you could do this with just Intermediate knowledge, I highly recommend to do the OOP course and then pickup a full stack (or backend) framework.

Angularコース Book Recommender | m2mt_lさん

先月、最初のAngularでの成果物を紹介させていただきましたが、もうAngularコース最後の課題を完成させたんですね。最速でAngularを終わらせて次はどのコースに挑戦されるのか楽しみです。またぜひシェアしてください。

シェア日:2022/06/22

Project概要/遊び方:ユーザーに関する情報(性別、国、年齢)を入力するとユーザーにマッチする本をレコメンドします。手動で入力することも、ランダムのユーザー情報を取得することも可能です。

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

苦労した点:

APIで取得した情報をテストする際、最初ngOnInitから呼び出していましたが、変数に代入することができず気づくまで時間を使いました。そもそもこのような目的で使うものでないのでちゃんと別でテストを書けばよかったです。

疑問点:HTTP clientのエラーハンドルがあまりよく理解できてません。

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

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

運営からのコメント

Jeffry

Thanks a lot for sharing this Angular project! This is a good initial project to kick off angular knowledge. Modern Angular is quite strict which makes it a good fit for scalable projects.

Vue.jsコース Calculation App | Hirotadaさん

4月にシェアしていただいた「YouTube動画を見ることができるVending Machine」がとても面白い視点のアプリケーションだなと思いましたが、今回はデザインにこだわった計算機が完成しましたね。ボタン押下の際のアニメーションや、計算機のデザインにもこだわりが感じられました。また次も楽しみにしていますね。

シェア日 : 2022/6/28

Project概要/遊び方 :電卓アプリです。キーボード入力は下記のように対応しています。

  • Esc >> CLボタン
  • Backspace >> BSボタン
  • Enter >> =ボタン

数値、演算子キーはボタンアイコンと同じものに対応しています。負の数の計算も可能です。

作業時間 : 32時間

苦労した点 :

①最初は文字列にした数式を使って計算していました。最低限の計算はできますが、どうしてもバグの対処が難しいケースがあり、うまくいきませんでした。処理を配列で行い、結果を文字列にするようにして、狙っていた処理を行うことができました。

②数式を入力する上で、色々なケースを試してバグが出ないようにするのに苦労しました。

課題:スマホだとバグが出るようです。(処理がうまく走らない、CSS崩れ)

Project URL : https://hirotada-t.github.io/CalculationApp/

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

運営からのコメント

Jeffry

Very impressed with the quality of this application, from the design to the animations. It feels smooth and responsive, and it pops. I see you are making use of transform functions which I also recommend over writing frames, unless what you are going for is very specific or needs calculations through js.

Angular Number Guessing Game | レイナさん

Angularコースの最初の課題に挑戦されたレイナさん。Angularコースの成果物をシェアしてくださったのはm2mt_lさんに続いて2人目です。お子さんが使われるということで、可愛らしい画面のアプリケーションができましたね。Angularはまだ他にも課題がありますので、ぜひ挑戦してまたシェアしてください。楽しみにしています。

シェア日 : 2022/6/30

Project概要/遊び方 : プレイヤー1が入力した数字をプレイヤー2があてるゲームです。息子が遊べるように子供用の見た目にしました。1人でプレイするときには、「プレイヤー1のすうじをみえなくする」を選択してください。プレイヤー2が選んだ数字が、どれくらい正解から離れているか画像とメッセージで教えてくれます。

作業時間 : 約10時間(Angularを理解するのに2か月以上)

疑問点:

  • 親コンポーネントから子コンポーネントへのデータの渡し方がよくわかりません。EventEmitterを使うらしいが、要勉強
  • アニメーションを入れる方が良いと公式にありましたが、今回は断念。
  • StackBlitzで作ったのでbuildの仕方が不明。プロジェクトの容量が大きすぎるので、PC買い替えたら何とかします。

StackBlitz URL:https://stackblitz.com/edit/nunber-guesser?file=src/app/guess/guess.component.ts

StackBlitz URL Project:https://nunber-guesser.stackblitz.io/

運営からのコメント

Jeffry

The design looks exactly like something designed by you Reina, fun guessing game. I do agree that angular has a steep learning curve, from typescript to transpiling to dependency injection. I do recommend that you dive into how to build angular projects but only if you are planning to dive more deeper into Angular.

チーム開発で作成した成果物

Recursionでは、未経験でも実務に近い環境を体験できるチーム開発プログラムを行っています。ユーザーは1か月間、チームメンバーとともに1つのプロジェクトを完成させます。

今回のチーム開発での成果物はなんとGoogle Play Storeで公開されています。ダウンロードしてぜひ遊んでみてください。

Blockee – Apps on Google Play

Blockee |Group P

URL : Blockee

Project概要/遊び方 : Blockeeは、ブロックスという人気ボードゲームを元に作成した陣取りゲームです。プレイヤーが順に自分の色のブロックを並べていき、最後に残っているブロックが少ない人が勝ちです。ブロックはいろいろな形があって、接点を合わせるように並べていきます。

チーム開発に参加したユーザーのコメント

Aさん:

このプログラムを通して

  • Vue/Quasar での開発の仕方
  • CanvasAPI
  • ボードゲームなどのCPUの実装法

などを学びました。今後はExpress、Socket.ioなどを学び、オンラインでのプレイヤー対戦の実装にも挑戦してみたいです。

チーム開発は二回目でしたが、今回もチームメンバーからたくさんの刺激を受ける事で個人では得られない学びがあり、プログラミングだけではなく、チームメンバーとしてももっと成長したいというモチベーションになりました。

一ヶ月間本当にありがとうございました!

Bさん:

現状の立ち位置として、力不足を実感しました。今後の取り組む姿勢として、焦らず地道に学ぶ中で、できることを増やしていければと思います。できることは少なかったですが、良い刺激になりました。 />カリキュラムだけだと、受け身だったり、自分の枠内でしか発想できなかったりしていました。

今後も定期的にチーム開発に参加して、スキルアップしていきたいと思います。

Cさん:

1ヶ月とても楽しくて充実していてあっという間でした。一人で勉強していては得られない刺激をみなさんからたくさん受け「もっと頑張ろう」と思えました。もしまたご一緒できたらその時はよろしくお願いします!

メンターをしてくださったKwonさん。いつも早朝(というかほぼ深夜)にもかかわらずMTGしてくださりありがとうございました!コードレビューをいただくのも今回が初めての経験で、いつもたくさんの学びがありました。

運営からのコメント

Jeffry

This project went above my expectations, I made a whole video on it. It was fun playing and seeing how this team created the CPU logic. For those who have yet to watch the video, go take a look as I do full coverage on this team project. Hope this encourages others to join the team development program. There is no need to worry about the level of completion, what matters is the output.

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

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