エキスパート卒業!

f:id:katsuodashisp:20180909154150p:plain

どうもアマツチです。

途中から書けなくなってごめんなさい。最終課題にのめり込んだことや体調不良等が重なり手が出せずにいました。

 

では気を取り直しての報告です。この度8月から取り組んでいたスクールですが、10月末を持って最終課題の発表、及び卒業させていただきました。

あっという間の10週間でした。同期の協力もありモチベーションはかなり高めで取り組めたように思います。本当に感謝です。

 

最終課題ではPairsのクローンサイトを作りました。理由としては、そういったマッチングアプリのヘビーユーザーだった同期がいて、ユーザーとして知っている動作を読み取りやすいのではないか思い、候補に上がった時に推しました。

 

後で聞いた話によると、Pairsは高難易度に位置づいてて、マッチングしてやりとりできるまでに至った生徒は数える程しかいないとのことでした。実際そこはモデルだけでも相当難しいところでした。

例えばこちらのコード。

--
# フォロー
has_many :active_relationships, class_name: "Relationship",
foreign_key: "followed_id",
dependent: :destroy
has_many :passive_relationships, class_name: "Relationship",
foreign_key: "following_id",
dependent: :destroy
has_many :followings, through: :active_relationships, source: :following
has_many :followerds, through: :passive_relationships, source: :followed

 

# ユーザーをフォローする
def follow(other_user)
active_relationships.create(following_id: other_user.id)
end

# 現在のユーザーがフォローしてたらtrueを返す
def following?(other_user)
followings.include?(other_user)
end

--

このコードはマッチング、つまりフォローとフォロワーの関係を表現するためのコードとなっています。誰がフォローして、誰がフォローされたか、それがユーザーテーブル間のみで起こっているので仮想のユーザーテーブルと多対多の関係を示す必要があるということです。

 

これはrails チュートリアル11章の記述を参考にしていますが、まあはっきりいって初見で理解しろというのは難しい話です。試作して動きは理解するだけでも1週間はかかりましたし。

 

それでもチャットでやりとりできなければそれはマッチングサイトではないので、絶対そこまでは実装するという取り組みでやってきました。

 

http://13.113.37.82/

その最終課題のアプリがこちらになります。

課金要素等は今回は実装していないので気軽に遊んでみてください

次回は最終課題の説明をしようかなと思います。

ではまた。

エキスパート6週目、そして完成へ

どうも、アマツチです。今日も進捗報告させていただきます。

f:id:katsuodashisp:20180909154150p:plain

 

gyazo.com

長かったエキスパートコースもようやく終わりを迎えようとしています。

そして嬉しいお知らせがあります。

chatspace完成!そして本番環境のデプロイに成功しました!

いええええええええええええええい!!!

最後の方のプルリクエスト3問が非同期通信、プルリクエスト、自動更新のためのjs実装が本当に鬼門でした。だってノーヒントな上にメンターさんがクソコード認定してしまうようなブログばっかりだったので。

この三つに関しては後輩のためにブログ書いたほうがいいのではと思ったので、時間が空き次第別の記事にあげることにします。

今回はどんなことができるようになったのか、ご覧ください。

 

まずは非同期通信。

https://i.gyazo.com/c102a3b290f9cec30224cb6ba8ccf332.mp4

 

プルリクエストでメンターさんに確認してもらうため、Gyazoでgifを取っています。無料枠で7秒なので収まるように工夫しましょう。

見ての通り、jsで非同期通信機能を追加したことにより画面を読み込まずにメッセージを追加することができるようになってます。追加したメッセージを元にどんどんHTMLを差し込んでるようなイメージです。

同時にDBにもデータを保存していますのでご安心を。

次にインクリメンタルサーチです。

https://i.gyazo.com/631208db75357d1c7b209fa21fbff091.mp4

サインアップが終わったユーザーを部分一致で一覧を表示できるようになりました。

検索結果を元にHTMLを生成、検索結果に変更がある際は生成した結果を一旦消去しています。要素名に気をつけてください、名前が一致していると意図しないところまで消えることがあります。カリキュラムでは検索結果とチャットメンバーが同じ名前なので油断していると自分を消去してしまいます。生成したHTMLでさらに追加、削除のコマンドも実行できるのが面白いところですね。慣れると結構楽しいです。

 

最後に非同期通信です。

https://gyazo.com/7e77e5f979bc1b43e8e173a85bcae49e

LINEをイメージするとわかりやすいと思うのですが、メンバーが新規メッセージを送っていたら、5秒おきに反映するように自動更新機能をつけています。

これは初めの非同期通信と似ているのですが、あくまであれはメッセージを送信した人のみの話です、HTML生成処理は使い回しつつ、他メンバーの画面の最新とDBのIDを比較し、足りない分を足していく必要があります。

これのヒントがなかなか見つからなかったので、できれば自分がヒントになるような記事を書いておきたいなと思います。

 

次週は最終課題に向けてラストスパートになると思います。みんなも完走目指して無理せず取り組めるようにしましょう。

ではまた。

 

 

エキスパート5週目

f:id:katsuodashisp:20180909154150p:plain

どーも、アマツチです。今日も今日とて進捗報告をさせていただきます。

早いもので、10週間短期集中コースの折り返しの時期になりました。振り返りのタイミングですね。

さて、ruby,haml,rails,js,jp,gitを中心にこの5週間やってきました。

ものになったかどうかといえば、まだわかりません。

おそらく何度か触って簡単な操作ならできるようになったぐらいの理解度ではないでしょうか。

自身が思い描く理解度ってのが、ゲームのコントローラ、あるいはスマホの操作で説明できて、例えば初めてのスマホ、あるいはコントローラを触る時って、説明書を読むことすら億劫になる人って多いと思います。じゃあなんでみんな操作できるようになってるかって、とにかく触りまくったからなんですよね。数こなすだけでもホーム画面に戻るための操作なんて見なくても覚えれるもんなんです。とにかく数をこなして、簡単な操作を反射的にできれば理解度1到達です。

次は複雑な操作の理解です。コントローラをガチャガチャしてたら偶然波動拳を撃てたとします。普通はこう疑問を持ちます、今どうやった?どうやったらさっきのかっこいいやつできるんだ?って。あるいは他人の操作が衝撃的だった時、あれはどういったコンボなんだって思いますよね。これが浮かぶようになれば、全部わからないじゃなく、明確にこれがわからないと疑問点が絞れるわけです。これで調べる、あるいは人に訪ねることができます。これを突破できたら理解度2到達です。

最後、これ大事だと思っているのが、人に説明できるかどうかだと思っています。

人に説明するには、そこに行き着くためのロジックを理解してなくてはいけません。

ただなんとなくこうすればこうなるんだでは説明になりません。あとで恥ずかしい目にあいます。お恥ずかしながら経験済みです。

なぜそうなるのかまで説明して、相手が理解した時、自身の記憶の定着を実感することができます。これで晴れて理解度3到達です。

 

こんな感じにイメージしていますが、僕自身はまだ全体的に見れば理解度1だと思います、まだまだ実践には程遠いなと肩を落とさずに入られません。

それでも成長できたなって実感できたことがありまして、メンターさんの趣向でrailsエラー問題をみんなで解いてみようって企画の時です。

本試験ではなかなか解けなかったエラー問題が、エラー内容を見ただけでおおよその予測がつくようになり、サクサク解けるようになってたことです。メンターさんは遅い遅いと煽りまくってましたが、それでも僕には確かな成長でした。ぱっと見ではわからなくても、確かに少しずつ前に進めていたようです。今後も自身の信じる道に向かって、前に進もうと思います。

 

それでは、また。

 

エキスパート4週目

f:id:katsuodashisp:20180909154150p:plain

どうも、まだまだ情報発信の力が無いなあと悩みつつも週一で投稿を続けているアマツチです。

今日も今日とて進捗報告をさせていただきます。

 

 

 

https://i.gyazo.com/909225ff59b2629258aa2f357712e209.png

この辺から内容もかなり難しくなっていってなかなか進まない!

とはいえ残り4分の1、9月下旬には一通り終わらせて反復練習したいところ。

難しさってもありましたが、今週は台風による休校や停電もあり時間が取れなかったってのが響いてます。

 

ちなみに大阪在住なので先週の台風に直撃してしまいました。皆様はご無事でしょうか?こちらは鉄骨マンションが風で揺れ、窓の隙間から雨と木の葉が入り込み、停電が起きて復帰しての繰り返しで2時間くらいは生きた気がしませんでした。この夏一番の恐怖体験ありがとうございました、吐きそうです。

 

 

 

さてchatspaceの進捗ですが、見た目はこうなっています。

https://i.gyazo.com/002e6429cd20ca4cbb6f8f3e55708358.png

 

少し自分でもびっくりしております。写真アップロードで貼ってみると意外に様になってますね。

 

とはいえここまで自力で作れたかといえばそういうわけではなく、半分以上は問題の回答を参考にしたり、どうしても無理な時はメンターさんにヘルプを出したりしました。

 

特にここの問題は問題としてもかなり不親切な内容になってました。(意図したものなのかは今の所不明。)

僕は基本的にパッと浮かばない、調べようとしても言葉が浮かばないものに関しては、きっぱり諦めて答えを見ます。ただ諦めるのではなく、何が起こるのかを視覚的に確認し、次思い出せるようにするためです。なのですが、この辺り、左側のグループ機能の実装に関しては答えに書いてるだけの記述だけで成功するわけでは無いってのがザラです。右上のグループ情報に至っては、編集するタイミングが一通り実装するまで見つか利ませんでした。メンターさんに確認してカリキュラムに存在しないのは確認済みです。もしこれからエキスパートやっててこれ実装するよって人は注意してください。メンバー一覧以外は難しく無いので、自力で実装するのもありです。

 

 

あと今週からチーム開発がスタートしました。僕はバックエンド部門のリーダーとして立ち回ることになり、課題の一つとしてherokuのデプロイの方法を調べてました。

 

jp.heroku.com

サーバやOS、データベースなどの「プラットフォーム」と呼ばれる部分を、インターネット越しに使えるようにしてくれるサービスとのこと。

 

これに関しては、以前作成したミニアプリをgithubに登録し、以下のブログで試した結果成功しました。

qiita.com

ただ、チーム開発でクローンしたアプリではうまくできませんでした。gemが足りない?バージョンの違い?正直時間が足らなくて試行錯誤の余裕がない。

今週は仕方なくデプロイを断念し、ローカルでの機能実装に注力していきますが、体力が残っていれば家で自主的に調べたいところですね。

 

 

とはいえ少しずつ終わりが見えてきました、とはいえ応用に関しては自主的にもう一周したいところですがね。

メンター曰く僕らの期のメンバーはかなり進捗早いそうなので、この調子でみんなでゴールしたいですね。

 

ではこの辺りで、またね。

エクスパート3週目

f:id:katsuodashisp:20180819234642p:plain

どうも、アマツチです。

3週目の進捗報告をさせていただきます。

 

tech-camp.in

 

まず進捗はこちら。

f:id:katsuodashisp:20180902174154p:plain

先週と比べると少し伸び悩んでいますが、全体の7割は超えました。

 

さて今週はミニアプリの実装も平行して行いました。

railsの理解がどれだけできているかの確認と、自分で一から実装することで自身をつけることが目的のようです。ちなみにビューについては、Materializeのテンプレートを使い実装しています。

archives.materializecss.com

ここに載っているテンプレートを使えば誰でも一流のデザイナーの見た目を使うことができるそうですが、その代わりcssで一部いじれなくされてるので思ったような形になってくれないのが玉に瑕ですね。

 

そんなこんなで出来上がったのがこちら。

f:id:katsuodashisp:20180903091630p:plain

ある程度railsのカリキュラムに準じたものが出来上がりました。

ログイン機能、投稿機能、詳細機能、投稿者には編集機能と削除機能のボタンが表示されるようにしています。ヘッダーとフッターは画面端で固定しています。

 

これだけではミニアプリの最低基準を満たしているだけなので二つほどアレンジを入れました。

一つはHTMLではなく、Hamlでの実装です。ちなみに投稿の中はこうなっています。

f:id:katsuodashisp:20180903092428p:plain

chatspaceをhamlマークアップをしろって課題が難しく感じたので、ミニアプリで練習しようと思い実装しました。

序盤は変換サイトにたより、どう変わるのかを見ていました。途中からhamlの違いはカッコがないのと、それをインデントで表現していることに気づきボタンの機能もいじることができました。

もう一つはこれ。

f:id:katsuodashisp:20180903093649p:plain

画像アップロード機能をついに実装することができました!

これいろんなところで画像アップロードのことを聞かれたので、どうしてもおさえて起きたかった機能で、ほんと嬉しかったです。

carrierwaveってgemを使いました、使い方の一例を載せて起きますので、きになる方は参考までに。

qiita.com

ミニアプリの後に再度マークアップにチャレンジしてみると、一から組み上げ他とは思えないくらい結構サクサク進み、

f:id:katsuodashisp:20180903093856p:plain

はい!綺麗な見た目ができました!

これを作る上でポイントだなと思ったのは、右側のメッセージ欄およびフォームの幅は可変させなければならないところと、フォームの上に画像アップロード用のアイコンを配置させなければならないというところでしょうか、今回はあえて隠しますがうまくいくとiphoneとかでも形が崩れなくなります。

 

次週からchatspaceとチーム開発を同時進行で行う必要が出てきました。僕はその副リーダーとして全体の成果物を繋げる役回りになるかと思います。正直難しい・・・。

 

では、今週も頑張ります。またね。

エキスパート2週目

f:id:katsuodashisp:20180819234642p:plain

どうも、アマツチです。今日も経過報告として書かせていただきます。よろしくお願いします。

 

今週の任直は以下の通りです。

f:id:katsuodashisp:20180827111636p:plain

全体の2/3に差し掛かってるって感じですかね、自身の戒めのために毎回乗せてきます。

 

 

さて今回もどんな言語を学んでってのを書こうと思ったのですが、思いの外種類が多かったので、それより先の開発についてをメインに書こうと思います。

 

エキスパートのカリキュラムに突入すると、なるべく検索を用いて解決しようというスタンスが強くなってきます。時間をいくらでもかけていいのであればいくらでも試行錯誤をしますけれども、しかし短期集中のみなのでそこまでかけるわけにはいきません。

じゃあどうしてるかと言いますと、問題ならば10分悩んで解けなければ普通に答えを見ます。

 

プログラマーは暗記をする仕事ではないと認識していますので、どうしてもいけそうになければ答えを見て、Keynoteを使って資料として突っ込みます。こうしておくだけでも似たようなコードを打つ必要があった時に引っ張り出すことができますし、数をこなせばこれはこうと判断する時間も短くなり、最終的に使えるようになってきます。今使えなくても、次使えるようにすればいいのです。

因みにこの1週間で出てきた言語は以下の通り。

javasprictとjqueryは視覚的に面白い動きをしてくれます。画面を更新せず、画面に変化を与えたりしてくれます。twittewならツイートボタンを押したら暗転して投稿フォームが出てくるあれだと思います。覚えやすいかな?と考えてたら解かす気がない問題がどっさり出ましたね。部分一致の検索とインクリメンタルサーチの問題はもう探してもいい答えが浮かばなかったんで早々に答えを見ました。使用頻度は明らかに高いので極力使えるようにしたいところ。

SQLは仕事で使ってたってのもありましたが、そもそもそこまで難しくありません。

見方さえわかれば一瞬です。

で問題が下の3つ、現在進行形で止まっている問題です。

HTMLとCSSをより効率よく書けるように作られた言語とのことですが、それらを使って開発中のチャットツールの画面を作ろうとしています。

正直なところHTMLCSSはまだ苦手意識があり、Railsを習ってた時はほとんどテンプレのファイルが用意されていたので、一からの作成ではマジモンの初見です。まずルーティングすることすらも頭から抜けてて、helloworld出すのにもエラーを吐きつつ数時間。正直今どこにいるのかもわからないような心境でした。

それでもようやく出力できるに至り、スタートラインに立てることができました。

次週はミニアプリの作成と並行してやるとのことなので、そろそろ本腰を入れて取り組もうと思います。

ではまた。

 

エキスパート1週目

f:id:katsuodashisp:20180819234642p:plain

どうも、アマツチです。

10週間のコースということなので、1週間ごとの経過報告という形で書かせてもらいます。

 

tech-camp.in

 

まず現時点の大雑把な進捗報告をさせていただきますと、こうなってます。

 

f:id:katsuodashisp:20180819200606p:plain

1週間で事前学習は完了、本番に一歩踏み出せたといった感じです。

実は事前学習の間にテストがあって、これに合格しないと先に進めなくなっています。

ちなみに僕はどうだったかというと、

 

 

 

 

キックオフ5日目で一発合格!やったぜ。

しかもそこのメンターさん曰く

 

 

 

進捗速度は歴代TOP3!!

 

はじめにcampコースで少し齧ってたとはいえ、そういう人も少ないとは考えにくいのでこの知らせは本当に嬉しかったです。

 

一位は元エンジニアさんで初日合格だそうで、もはや伝説レベルですが、未経験では無いので実質2位でしょうかね、どうせなら色々塗り替えれるようにやってみたいものです。

 

さて喜びの舞はここまでにして、事前学習で何をやったかは書かないといけませんね。

以下の通りです。

HTML CSS

 Webサイトの見た目に関わる言語といったところですかね、HTMLで大まかな枠組みを決め、CSSでヘッダーの固定、背景色などを定義していくってところを学びました。これらは暗記というよりは本当に数こなさないと覚えていかないので、中間テストでつまずいたところをメンターさんに教えてもらいながら覚えてないところを潰していきました。

 

Ruby

計算、クラス、メソッド等を駆使して簡単なアプリを作りながら覚えて行くといった感じです。例えば本の情報を配列に格納して行き、一覧をリストに表示し、選択した本の詳細を表示させます。

VBAを齧ったおかげか、Rubyは意外にすんなり覚えられた気がします。VBAでいうとこのファンクションがメソッドにあたるんだろうなといった形で。どの言語でも何回も使う式を呼び出せる形にしようとする考え方は変わらないんだなと感じました。

 

Rails

ツイッターもどきなるものを作りながら、上記の言語も組み合わせて覚えて行くといった感じです。正直まだ苦手意識はありますね。理由は二つ。

1つ目は、まだ複数のファイルを跨いだファイルを作ったことがないこと。

VBAで一つのファイルのなかにいくつもファンクションを作った、あるいは外部のエクセルにXMLを流し込むボタンみたいなものはあるんですが、複数のファイル前提だと処理がどこに飛んだか見えにくい、VBAならブレークポイントを打って、少しずつ動かすことができても、Railsbinding.pryで止めたらそこまでしか見れないってのが難しいところですね。

二つ目はある程度フォルダ、ファイルが自動生成されてしまうこと。

確かに便利なことには違いないのだけれども、一から作った仕組みではない以上なぜそうなるのかってのが理解しにくいです。こういった理由から確かにRailsは初心者向けだけど、理解する点では初心者向けではないって気がします。これも数をこなすしかないですね。

 

本編ではJavascript,Jquery,GitHubあたりから入るそうです。全部初見ですね。

次週はその辺の感想について書こうと思います。

 

ではまた。