【week 2】今週学んだ3つのこと
こんにちは、Manamiです！
早くもスクールでの2週間目が終了しました。毎日楽しみながら苦しみながら学んでいます。
同期メンバーとも毎日顔をあわせるのですっかり仲良くなりました！学んだことを言葉で伝えあったり、分からないところを教えあったり、一緒に学ぶ仲間がいることで学びの深さもスピードもあがっていると感じます。
今週学んだこと
- JavaScript, jQueryの基礎
- Git, GitHubの基礎
- SQLでのデータ検索
- チャットアプリ作成：データベース設計、チャット画面の実装（途中）
そのなかで3つピックアップして詳しく書いていきたいと思います！
jQueryを使ったインクリメンタルサーチの実装
このようなフルーツ検索アプリを作成しました。
検索ボックスに文字を文字を入力すると、その候補の検索結果が出てきます。このように入力のたびに即座に候補が表示される検索方法をインクリメンタルサーチと言います。Twitterの検索窓にも実装されていますよね。
初めはとにかくコードを読むことから始めました。テキストの模範コードとにらめっこしながら、調べる→自分なりの言葉で説明コメントを入れるを繰り返しながら処理の流れを頭に入れていきました。
実際のコメントはこんな感じです！
ざっくりとした処理の流れ
① フルーツの名前が入った配列を定義
② フォームに入力されるごとに、入力された文字列を変数として定義
③ 文字列のあたまに「^」をつけて前方一致の正規表現として定義
④ eachメソッドを使って、正規表現とフルーツ配列の要素をひとつづつ比較
⑤ 一致するものがあれば、配列の要素を<li>フルーツ名</li> としてリストに表示する
といった具合です。
現在作成しているチャットアプリでも、「ユーザー検索」としてこのインクリメンタルサーチ を実装する予定なので、復習しつつさらに理解を深めていきたいと思います。
チャットアプリ作成開始！
10週間のカリキュラムの大枠は、基礎カリキュラム→応用カリキュラム→チーム開発 となっているのですが、チャットアプリ作成は応用カリキュラムのメイン内容になっています。今週は、データベース設計とチャット画面の実装まで行いました。
まず、見本のアプリを実際に操作しながら、どんな機能が必要か？どんなデータが必要か？考えます。そしてそれらを書き出しながら、必要なテーブル、カラム 、アソシエーションなどをまとめて記述しました。
今回は「多対多」のアソシエーションを設定するために中間テーブルを設けるというのがポイントでした。
具体的には、
・userは複数のチャットgroupを持つ/属する
・チャットgroupは複数のuserを持つ
といった関係のところに、中間テーブルとしてgroup_usersテーブルを作成しました。
そして、
・users has_many :groups, through: group_users
・groups has_many :users, through: group_users
といった具合に、membersテーブルを経由するように定義します。
こちらの記事がとてもわかりやすく参考になりました！
GitHub かっこいい。
プログラミングを勉強し始める前から、「どうやらエンジニアはGitHub（とSlack）という便利なものを使っているらしい」ということは知っていました。とうとう私もそれを使う日が来るとは…！嬉しい。
「かっこいい」って単純なんですが、自分の中ではすごくモチベーション上がります。macbookで、dark themeなtext editorで、GitHubでsmartにpull request! みたいな。笑
実際にメンターさんへのレビュー依頼はGitHubのプルリクエストで行います。コメントをいただいて、修正をして、コミット、再度プッシュしてという流れを繰り返すうちにだいぶ慣れてきました。いまは自分一人だけでアプリ開発をしているので変更点などすべて把握できる状態ですが、チーム開発や実際の就職後の業務など複数人での開発環境ではさらにGitHubの本領が発揮されることでしょう！
ツールだけではなく、使いこなす本人ももっと「かっこよく」なれるように✨
引き続き頑張ります〜！
ツイッターもやってます♪
