この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
この記事は実際にDMM WEBCAMPを受講された小島さんに体験中に書いていただきました。
DMM WEBCAMPの評判や口コミについて詳しく知りたい方はこちらの「【受講生が解説】DMM WEBCAMPの評判/口コミを実体験を元に解説!未経験から本当にエンジニアになれる?」も合わせてご覧ください。
いよいよ1ヶ月目最後の週に突入!
今週は、「ユーザー機能」を持つアプリケーションを作成しました。
できたページはこんな感じ。
前回作成した読書記録のアプリケーションに、
- ユーザ登録した人がログインして投稿する
- ユーザがプロフィールを編集する
といった機能を追加しましたよ!
イメージ的にはTwitterやFacebookなどのSNS。
まさか普段使ってるSNSの機能を自分で作れるようになるとは…驚きです。
DMMWEBCAMPではコロナウイルスへの影響を加味し、
- オンラインでの無料カウンセリング実施
- 期間限定でオンライン学習に対応
を行っています!
DMMグループだからこそできる柔軟な対応で、コロナ後の社会でもすぐにスタートを切れるDMMWEBCAMPはぜひおすすめです!
スキル習得から転職まで徹底サポート
目次
4週目:ユーザー機能を持つアプリケーションの作成
先週まで作ってきたアプリケーションと大枠は同じですが、今回違うのは、ユーザー機能をつけるということ。
Twitterのようにログイン機能をもつアプリケーションを作っていきます。
Railsの便利機能「gem」を使用してログイン機能を追加する
ログイン画面を作るには
- ログイン画面の作成
- ユーザー登録画面の作成
- ユーザー登録機能の実装
- ログイン機能の実装
- ログイン認証後の表示画面の設定
といった工程が必要になります。
ログイン画面の作成には「devise」というgemを、画像の投稿機能には、「refile」と「refile-mini_magick」のgemを使用していきます。
gemとは簡単に言うと「よく使う機能をまとめたもの」です。
自分で1から開発していると時間が掛かってしまう機能も、gemを使うことで時間の短縮になり、開発の効率を上げることができます。
今使用しているRuby on Rails 自体もgemです。
使ってみてgemは本当に便利ということをつくづく感じました…。
ゼロから自分でコードを各必要がありませんからね…。
view(画面のデザイン)についてははじめから用意されたテンプレートファイルを使い、こんな感じに。
DWW WEBCAMPの学習のしやすさは、こんな風に今学ぶべきところ以外は省略して作っていけるところですね。
このデザインまでゼロから自分で作っていたら、正直1週間でアプリケーションは完成しないと思います苦笑
コメントやいいね機能も実装してよくあるSNSの仕様へ
ログイン機能だけでなく、コメント・いいねの機能も投稿サイトやSNSにはだいたい付いていますね。
今回はそれらの機能の実装方法も学んでいきます。
これまでの機能と大きく違うことをするわけではないので、サクサク作ることができました。
ただ、設計を行う上ではそれぞれのユーザを識別した上で、一人のユーザが複数投稿できるようにしなければならないし、一つの投稿に対して複数のコメントがつけられるように設定していく必要があります。
普段TwitterやInstagramなどで、自分のアカウントから投稿したりコメントしたりできるのは当たり前と思っていましたが、裏側ではきちんとそれができるように設定されているんだな、としみじみ感じました。
自分が今後サービスを作るときには、このユーザーや投稿の結びつきについて、しっかり設計してから実装しないといけないですね!
機能追加でよりリアルなサイトへ
ページングやバリデーションといった機能を追加して、より実際に使いやすいサイトにしていきます。
ページングとは、ひとつのページに表示できる数を制限できるようにすること。
ログイン後の投稿一覧に投稿された画像をすべて表示すると、画像が多くなったときに読み込みに時間がかかってしまうため、このような機能をつけておく必要があります。
これもさっき書いたgemを使って作りました。
次にバリデーションの機能も追加していきます。
バリデーションとは、投稿の際に必須項目をつくりチェックしてもらう機能。
よく、お客様情報の入力で空欄があるとエラー表示になることがありますよね。あれはバリデーションの機能を使っていたわけです。
今回の投稿サイトでは画像を選択していないと投稿ができない設定にしていきました。
こんな感じです!
無事エラーを出せました!
4週目の感想:アプリケーションの設計を意識して、実践に向けた準備ができた
今週は、使いやすいアプリケーションにするにはどのような機能の実装が必要なのか?といった内容が中心でした。
今後自分がアプリケーションを作っていく上で、ユーザはアプリケーション上でどのような動きをするのか?を考えてサイトを設計する重要性を学べたと思います!
今回やった内容は、難易度としては高くはありませんでしたが、どれも実践的で、アプリケーションを作成する上で必要になってくる内容ばかりです。
例えば、コードの表示の順番を間違えると、どの機能がどこまで適応されるのかが変わってきてしまうことがあるので注意が必要になります。
作成時に思うような表示がされていない場合は、どこに何を記述しているのかをしっかりチェックしていくことが解決の糸口になりそうですね。
DMM WEBCAMPの1ヶ月目の受講を終えて
かなりハードなカリキュラムでしたが、まずは「1ヶ月の限られた期間でここまでできた!」という自信になりました!
DMM WEBCAMPを受講した感想をまとめると、
- プログラミングの根本について学べた
- メンターさんがいい人ばかりで、教え方がわかりやすかった
- 具体的に機能の実装方法を身につけられた
- 自分が理解できていないところを見つけ復習しやすかった
- エンジニアとして求められる「自ら考えて調べる」という姿勢を身につけられた
といったところでしょうか。
ちなみに、この1ヶ月でプログラミングに費やした時間は述べ150時間ほど。
もちろん個人差はありますし、甘くはありません。
しかし、しっかりやれば短時間でも確実にスキルは身につくということを実感しました。
さて、2ヶ月目からは、いよいよチーム開発とキャリアサポートが開始!
このまま転職まで突き進みます!
DMMWEBCAMPではコロナウイルスへの影響を加味し、
- オンラインでの無料カウンセリング実施
- 期間限定でオンライン学習に対応
を行っています!
DMMグループだからこそできる柔軟な対応で、コロナ後の社会でもすぐにスタートを切れるDMMWEBCAMPはぜひおすすめです!
スキル習得から転職まで徹底サポート
- 転職保証つきプログラミングスクール3社の無料カウンセリングを全て受けた感想【DMM WEBCAMP受講体験談①】
- Git/HTML/CSSを学ぶ1週目!!まずは転職に必須なプログラミングスキルを身につける【DMM WEBCAMP受講体験談②】
- Ruby on RailsでWEBアプリケーション開発!エラーとの格闘ばかりで果たして転職できるのか?【DMM WEBCAMP受講体験談③】
- ググり力を試された1週間!転職後も必須となるプログラミングの基礎【DMM WEBCAMP受講体験談④】
- 転職活動に必須!1ヶ月間でSNSサービス開発レベルのプログラミングスキル習得【DMM WEBCAMP受講体験談⑤】
- 転職活動が有利になる現場主義のプログラミングをチーム開発で習得!【DMM WEBCAMP受講体験談⑥】
- エンジニアの転職活動に必須!ポートフォリオとしてオリジナルサービスを作る3ヶ月目【DMM WEBCAMP受講体験談⑦】
- 未経験応募可能な求人はかなり少ない!?キャリアサポートを早期に受けることが転職への近道【DMM WEBCAMP受講体験談⑧】
- 転職面接時に話すべきこと、面接官をアッと言わせる職務経歴書の書き方を習得【DMM WEBCAMP受講体験談⑨】