プログラミング TECH CAMP(テックキャンプ) エンジニア エンジニア転職 プログラミングスクール プログラミングスクール体験記

【テックキャンプ】チャットアプリの画面実装に必要な知識〜 プログラミングスクール「TECH CAMP」体験報告〜

TECH CAMP 30日後体験報告

どうも!テックキャンプ受講生のてぃかしです。

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

前回の記事はこちら

テックキャンプ20日後体験報告
【テックキャンプ】プログラミングスクールのテスト・就活&フリーランスセミナー内容(TECH CAMP)

プログラミングスクール「TECH CAMP」受講20日後の経過報告をしていきます。(当時は「TECH::EXPERT」という名称でしたが、修正しています。) 前回の記事はこちらをご参照ください。 〜当 ...

続きを見る

〜当サイト限定!最大6万円分お得!〜

テックキャンプの特典2種類あるので、どちらかをお選びください。

<特典①>テックキャンプアンバサダー紹介特典=5万円分のAmazonギフト券

こちら①の特典の場合は、私、てぃかしにご連絡ください。(紹介コードは①用に別途お伝えします。)

<特典②>紹介コードからの特典=1万円

こちら②の特典の場合は、テックキャンプエンジニア転職申し込みページで紹介コードm0t2kiをご入力ください。

※TECH CAMPアンバサダーからの紹介が最もお得です。アンバサダーから紹介してもらいたい方はこちらのアンバサダー特典の記事をご確認ください。(下記特典より4万円分お得)

アンバサダー経由ではなく、紹介コードを使って割引にしたい方は、紹介コード【m0t2ki】を入力してください。TECH CAMP エンジニア転職を受講される方は、現金1万円がもらえます。無料カウンセリング当日のお申し込みの場合は、さらに1万円OFFとなります。「TECH CAMP プログラミング教養」を受講される方は受講料が5%OFFとなります。

紹介コードを利用する方は以下から登録ページに移動し、紹介コード欄に「m0t2ki」をご入力ください。

テックキャンプ紹介コード入力ページはコチラ>>

紹介コード:m0t2ki
※紹介コードの 0(ゼロ)の入力間違いにご注意ください。o(オー)ではありません。コピーして貼り付け推奨。

上記割引とは併用できませんが、TECH CAMP アンバサダー経由の紹介なら5万円分のAmazonギフト券がもらえます。無料カウンセリング当日のお申し込みの場合は、さらに1万円OFFとなります。

TECH CAMPアンバサダーの詳細は下記の記事をご確認ください。

テックキャンプアンバサダーから紹介してもらって5万円分お得に受講する手順
テックキャンプアンバサダーから紹介を受けてAmazonギフト券5万円分もらう手順

今回は、このような希望を持っている人向けの記事です。 テックキャンプ(TECH CAMP)受講を検討している方に朗報です。 この記事を読んでいる人は、テックキャンプを最もお得に受講することができます! ...

続きを見る

今回は、テックキャンプ の受講30日で学んだことや読者からの質問について書いていきます。

この10日間、困難がありました。困ったこと、難しかったことなどについてお伝えします。

内容としては、下記の通りです。

テックキャンプ 受講30日で学んだこと

データベース設計

データベースに必要なテーブルを考えました。

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

そのテーブルをmessagesテーブルとします。

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(サス)とはCSSの機能を拡張した言語で、活用すれば、CSSを効率的に書けるようになります。

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

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

SassやSCSSについては下記の記事で詳しく解説しています。

SASS・SCSS の書き方
【入門】SCSS・SASSの書き方と違いは?環境構築とコンパイル方法を解説!

広告 今回はこのような疑問・願望を持っている人向けの記事です。 僕は、2019年にプログラミングスクールに通ったのち、Webサイトやシステムを構築するITエンジニアに転職しました。 最近、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から作るのは大変だと思いました。

大変ですが、テックキャンプ のカリキュラムには、ちゃんと模範解答があるので、最終的にそれを見れば理解できます。

もちろん、つまったときはメンターや同期に相談できる環境があるので、それを駆使して乗り越えることができます。

ちなみにプログラミング学習における挫折のポイントは下記の記事をご参考ください。

プログラミング学習の挫折原因
プログラミング学習の「心構え5つ」と「挫折原因4つ」

エンジニア歴5年の てぃかし です。 今回は、プログラミング学習の心構えと挫折原因について話していきます。 以前の記事で、tech boostにインタビューをしました。 その中で、プログラミングの独学 ...

続きを見る

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

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

TECH CAMPの次の記事はこちら

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

〜当サイト限定!最大6万円分お得!〜

紹介コード【m0t2ki】を入力して、TECH CAMP エンジニア転職を受講される方は、現金1万円。無料カウンセリング当日のお申し込みの場合は、さらに1万円OFFとなります。「TECH CAMP プログラミング教養」を受講される方は受講料が5%OFFとなります。

紹介コードを利用する方は以下のボタンから登録ページに移動し、紹介コード欄に「m0t2ki」をご入力ください。

テックキャンプ紹介コードを入力する>>>

紹介コード:m0t2ki
※紹介コードの 0(ゼロ)の入力間違いにご注意ください。o(オー)ではありません。コピーして貼り付け推奨。

テックキャンプ申込

TECH CAMPアンバサダーから紹介してもらって5万円分のAmazonギフト券がほしい方は、上記コードは入力せずに下記のお問合せボタン先のフォームからお名前をご連絡ください。

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

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

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

  • この記事を書いた人
てぃかし プロフィール画像

てぃかし

当ブログの運営責任者。 エンジニア、プログラマー、YouTuber、ブロガー、Webマーケター。 1987年生まれ。 滋賀県出身。 同志社大学 工学部 エネルギー機械工学科 卒業。 滋賀に18年、京都に4年、大阪に3年半、東京に7年ほど移り住む。 その後、滋賀に戻り、これまでの経験をもとにフルリモートで様々な仕事をこなしている。 経験した仕事は、数学の塾講師、マーケティングコンサルタント、エンジニア、SEOコンサルタント。個人では、ブログ運営、YouTubeの企画・撮影・動画編集を1人で行なっている。 YouTubeでは主にプログラミングスクールの体験談やエンジニア転職の方法を実体験をもとに配信することから始め、人生で役立つハウツーを発信。 blogでは、YouTubeでは話さない役立つ内容やお得情報を執筆。 プログラミングスクール「テックキャンプ」のアンバサダーに認定され、テックキャンプアンバサダーとして、テックキャンプ関連の情報発信や相談も行なっている。

-プログラミング, TECH CAMP(テックキャンプ), エンジニア, エンジニア転職, プログラミングスクール, プログラミングスクール体験記
-, , , , , , ,