エンジニア プログラミング

【テックエキスパート】チャットアプリの画面実装に必要な知識〜 30日で学んだことを語る!プログラミングスクール「TECH::EXPERT」体験報告〜

更新日:

どうも、てぃかしです。

プログラミングスクール「TECH::EXPERT」受講30日後の経過報告をしていきます。

----------------------------------------------
〜最大2万円OFF!&無料相談キャンペーン〜
てぃかしの紹介でTECH::EXPERTを受講される方で、無料カウンセリング前にご連絡いただいた場合、受講料が1万円OFFとなります。無料カウンセリング当日のお申し込みの場合は、さらに1万円OFFとなり、合計2万円OFFとなります。TECH::CAMPを受講される方は受講料が5%OFFとなります。詳細は本記事の最後に記載しています。
----------------------------------------------
今回は、テックエキスパートの受講30日で学んだことや読者からの質問について書いていきます。

※本記事の内容は2019年10月中旬にYouTubeで公開した内容とほぼ同じです。

今回は困難がありました。おいおい説明していきます。

内容としては、下記のようなことです。

テックエキスパート受講30日で学んだこと

データベース設計

必要なテーブルを考えました。

チャットアプリならメッセージを保存するテーブルが必要です。

それをmessagesテーブルとして、そのテーブルに、誰が送ったか、どのグループで送ったか、いつ送ったか、メッセージの内容といったデータを保存します。

そのように考えた、DBの設計をREADMEにマークダウン記法記載していきました。

DB設計に関して、READMEに記載する内容はこちらです。

  • テーブル名
  • カラム名
  • カラムの型
  • カラムのオプション(null false制約など)
  • アソシエーション

知らない単語があって、気になる場合は、調べてみるといいんじゃないかなと思います。

マークダウンで記述すると以下のようになります。

1

 2

 3

 4

 5

 6

 7

 8

 9

10

## groups_usersテーブル

|Column|Type|Options|

|------|----|-------|

|user_id|integer|null: false, foreign_key: true|

|group_id|integer|null: false, foreign_key: true|

### Association

- belongs_to :group

- belongs_to :user

Sass

sass

SassとはCSSの機能を拡張した言語で、活用すれば、CSSを効率的に書けるようになります。

主な特徴としては、CSSの中で変数を使ったり、計算したりすることもできます。

sassのファイルで主流になっている拡張子は、.scssです。

BEM

BEMとは、多くの開発者が取り入れているCSS設計で、クラスの命名規則が特徴です。

BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。

メリットは以下の2点です。

  • クラスの命名が簡単になる
  • 要素の再利用がしやすくなる

このメリットの理由は、専門的な話になるので、今回は割愛します。

チャットアプリ制作

DB設計と画面の実装はメンターに見てもらって、LGTMをもらわなければいけません。合格しなければ前に進めないってことです。

DB設計は比較的難なくクリアしました。

画面実装は、Sass、BEM、hamlの書き方だけカリキュラムに書いてあるので、それを読んで理解して、どう作るかは自分次第って感じですが、サンプルのサイトがあるので、そのサイトを参考にして作っていったという感じです。

正直、最初の1日は、Sass、BEM、hamlをどう使うか、を考えただけで終わってしまいましたが、なんとか2日〜3日くらいで完成して、LGTMをもらうことができました。これがわかっている人だと1日足らずで完了してしまうのだなと思います。

で、画面の実装のあとは、カリキュラムに沿って、ユーザー管理、グループ作成をしていきました。

完成したのがこちら。

チャットスペース

やってる最中はもう詰んだかもと思いながらやってましたけど、なんとかできましたね。

単体・統合テスト

ここでいうテストは、「プログラムが意図した通りに動くことを確かめる」ことです。そのテストもまたプログラムによって行います。

Ruby on Railsにおいては、基本的にはモデルとコントローラのファイルに対してテストコードを作成します。その際にRSpecという独自の言語を利用します。

独自の言語で、使い方が独特っていう感じで、正直、まだその言語の扱い方を理解しきれていないのですが、おいおい復習して使いこなせるようになりたいですね。

画面実装の試験

画面実装の試験とはチャットアプリの画面の試験です。

画面の見た目が書かれていて、それを見て、HTMLとSCSSを書いていきました。

読者からの質問

質問

同期との関わりについて

以前の記事でも書きましたが、11時に朝礼があります。

そこでドリル(プログラミングの問題)について話し合います。

チーム面談というのもありまして、そこではそれぞれのエンジニアへの想いを語りました。

話を聞いているとみんな色んな想いをもってエンジニアを目指していることがわかって、とても親近感を感じました。ご飯も行ったりしましたね。

あと、受講生は全員、Slackのグループに招待されて、そこでチームとのコミュニケーションも取れます。

そして、チーム以外の受講生の進捗も見ることができるようになっています。

他の受講生の進捗を見ると、やる気に火がつきます。基本負けず嫌いなので。

親睦会もありましたね。

20代〜50代、元の職業も様々でした。元飲食店の店長、元寿司職人、元警備会社社員、50代弁護士などなど。

刺激をもらえました。

挫折しそうな場面について

質問された方が気にしていたのは、ビューや非同期通信の実装は難しいので、それをどう乗り越えたかということです。

ビューというのは、ウェブページにおいて、見た目を担当する部分です。

非同期通信というのは、リクエストを投げた直後からブラウザ側での操作ができるような通信のことです。

ビューは確かに作ってみて、1から作るのは大変だなと思いました。大変ですが、テックエキスパートのカリキュラムには、ちゃんと模範解答があるので、最終的にそれを見れば理解できます。もちろん、つまったときはメンターや同期に相談できる環境があるのでそれを駆使して乗り越えることができます。

非同期通信は、まだこの時点ではやってないので、次回以降の記事でご紹介したいと思います。

では、今回はここまで。次回は40日後の経過報告です。お楽しみに!

動画でご覧になりたい方は、ぜひYouTubeの方もチェックしてください。

〜最大2万円OFF!&無料相談キャンペーン〜
てぃかしの紹介でTECH::EXPERTを受講される方で、無料カウンセリング前にご連絡いただいた場合、受講料が1万円OFFとなります。無料カウンセリング当日のお申し込みの場合は、さらに1万円OFFとなり、合計2万円OFFとなります。TECH::CAMPを受講される方は受講料が5%OFFとなります。又、私の紹介で受講決定された方限定で受講最初(2週間)悩むことがあれば、LINE@で相談乗ります。
TECH::EXPERT、TECH::CAMPのどちらかを受講をお考えの方は下記のいずれかの連絡先に、「受講コース」、「フルネーム」、「受講地域」をご連絡ください。

LINEでのご連絡は下記をタップしてください。
友だち追加
LINE ID検索はこちら→ @rfh1332u (@も入れて検索してください)

TwitterのDMでもOKです。
Twitter→ https://twitter.com/engineer_sakai

お申込み後にご連絡頂いた場合、割引が適用できない場合があります。必ず無料カウンセリングお申込み前にご連絡ください。

----------------------------------------------

YouTubeでも役立つ情報を配信しています!

ボタンをクリックしてチャンネル登録お願いします!

-エンジニア, プログラミング
-, , , , ,

Copyright© てぃかしのブログ , 2020 All Rights Reserved Powered by AFFINGER5.