CODEBASE School Last week（3月12日週）
最後の週は、Gitについての講義と卒業制作に取り組んだ。最終日は卒業制作発表会でした。
CODEBASE School Last week
- Git入門/GitHub入門
- 卒業制作/発表会
Git入門/GitHub入門
ファイル操作については、基本的に３つの状態を行き来する unmodified -> modified -> staged
- ステージから下げる reset
- ステージに上げる add
- 変更ない状態にする checkout
GitHubに卒業制作アプリをあげてみた（まだ途中）
- Git ドキュメント
Git - Recording Changes to the Repository
- GIT チートシート
https://services.github.com/on-demand/downloads/ja/github-git-cheat-sheet.pdf
卒業制作/発表会
作ろうと思ったもの
- 模合アプリ
- 作ろうと思ったのは、地元のお友達と模合をしてるのでそのメンバーに使ってもらえるアプリを作りたかったっていう感じ
- 取り入れたいと思った機能としては、思い出共有/スケジュール共有ができるなど
- Prottでワイヤーフレームをかいてみた（※イメージです。実際はこんな感じで作れませんでしたw）
やったこと
インプット
- 私家版 Slim Framework チュートリアル (1) 〜 (5)
https://qiita.com/nunulk/items/4b5c15f13ade660cafbc
- セッション（ログイン）
ISUCONのPHP実装のやつ
https://github.com/isucon/isucon5-qualify/blob/master/webapp/php/index.php
- 画像アップロード
Slimのチュートリアル
https://www.slimframework.com/docs/v3/objects/request.html#uploaded-files
- フロント（HTML/CSS/JS）
bootstrap無料テンプレート
https://freehtml5.co/preview/?item=air-free-html5-bootstrap-template-for-portfolio-and-landing-pages
https://developers.google.com/maps/web/?hl=ja
アウトプット
以下作業の繰り返し
- 表示させたいページを考える
- htmlを書く
- route.phpに処理追加（情報を追加したかったらテーブル追加&フォームページ追加）
振り返り（卒業制作）
- 基本的に講義で教えてもらったことは最低限取り入れるように心がけた
- フロントはテンプレートを使っちゃって怠けたのでHTML&CSS&JSもう少し頑張らないと
- テンプレートのおかげだけど、見た目がよいとテンションあがるので、作業進むと思った
- DBが適当すぎたのでアプリケーションをどう作るかって講義を復習しよう
今後やろうと思ってること
- routes.php をもう少し見やすくする。（繰り返し同じことやってるやつはまとめるなど）
- ざっくり作ったので細かい部分をなおす（掲示板アプリ→Twitter風アプリ→モアイアプリ って流用しまくったので、記述内容がめちゃめちゃなのを直す）
- 追加したい機能リストつくる
- 毎日commitするようにする
- デプロイ（今回作ったものはローカルにしかないので、世の中に公開できるようにしたい）
今回のCODEBASE School を振り返ってまとめ
この２ヶ月を振り返ると、ほんと学び多い２ヶ月でした。ただ、やんなきゃいけないことはまだまだあって、これでようやくスタート地点に立てたのかなあというの実感です。（立てたかどうかも不安だけど）あとは、これからどれだけ時間を積んで成長できるか、続けていけるかってとこが大事だと思っています。講義のなかで「何かあたらしいことを身につけようと思ったときに、やる気ってあんまり重要じゃなくて、いかに自分を中毒状態にできるかってのが大事」ってさぼさんが話してたのがすごく印象に残ってて、この技術（つまり1000時間積む技術）習得できたらほんと勝ちだなあって思います。あと学生さんがたくさんいて、みんなでわいわいしながら勉強するってめっちゃ楽しいなーと改めて思いました。やっぱり一緒に学ぶ仲間がいるっていいですね（笑）
最後に、今回の講義を提供していただいた皆様ほんとにありがとうございました！！！この講義が無料ってほんとに凄いと思います。またどこかでお会いしたさいには、何卒よろしくお願いします！！！あとこの講座の2期生を募集しているとのことです。ほんとめちゃめちゃ学び多いのでWebに興味があってエンジニアになりたいと思っている人はめちゃめちゃお勧めです。
CODEBASE School 8week（3月5日週）
これまで学んだ知識をもとに、Slimを使って、掲示板アプリとTwitter風アプリを作る。これが終わったら卒業制作。基本的に各自のペースで製作を進めて、わかんないとこを随時相談するってスタイル。
CODEBASE School 8week
- 掲示板アプリ製作/Twitter風アプリ製作/卒業制作
掲示板アプリ製作/Twitter風アプリ製作/卒業制作
- Slimを理解するために以下のnunulkさんのチュートリアルがめちゃめちゃ勉強になった。このチュートリアルでは、チケット管理アプリを作っているけど、一通りこのチュートリアルをやってみたあと、チケットアプリを直して掲示板アプリ、Twitter風アプリに変えてみる。
パスワードをハッシュ化してDBに保存する方法は、セバさんに教えてもらった。以下の関数を使えばOK
- password_hash — パスワードハッシュを作る
- password_verify — パスワードがハッシュにマッチするかどうかを調べる
まとめ
実際にアプリケーションを書き始めたところから、楽しくなってきた反面、難しいと思うところもめちゃめちゃ増えた。どれだけコードを書く時間を確保できるかどうかがポイントだな。PHPのマニュアルとvar_dump()をめちゃめちゃ見たし、めちゃめちゃ使うー
CODEBASE School 7week（2月26日週）
この週は、DB、テーブル設計・ER図、アプリケーション設計について講義。Twitterとか食べログとコンビニのレシートなど実際に身の回りにあるものを例にとって学ぶスタイル。凄くわかりやすかったです。（SQLの基本的な書き方とかPHPでのPDOの使い方はProgateとPHP本読んで各自頑張りましょうスタイル）
CODEBASE School 7week
- テーブル設計・ER図
- アプリケーション設計
- 身近なサービスを例に設計を考える
テーブル設計・ER図
講義ででてきた単語メモ。（あんまり体系的に整理できてないけど、、）
- 一つのオブジェクト = 一つのテーブル
- 人とか物を一つのエンティティっていう。
- ユースケース図
- エンティティがどんな感じで使うのか、使われるのかユースケースを考えた図
- アクティビティー図
- 状態遷移図
- ECサイトを作るとして、買う、お金入金する、配送する、キャンセルする、などの流れ。
- クラス図。ログインfunctionとか、ログアウトfunctionとか、を図にする
- シーケンス図。とかもよく使う
- UML
- DBって多対多っていう関係性を持つことができないので、間に別の関係性（リレーション）を入れることで多対多を解決できる。多対多のリレーションが発生する場合は、間にその関係性がわかるテーブルを入れなきゃいけない。
- データベースを作るときは、まずER図をかく。そしてデータベースで表現する
- many to many
- モデルとオブジェクトとエンティティって似たようなワードが出てきたけど、意味同じ？
- 意味ほぼ同じ。世界観が違う
- モデルは、MVCモデルで話してるときの呼び名
- オブジェクトは、オブジェクト志向についての話をしている場合の呼び名
- エンティティはER図を書いているときの呼び名
- 意味ほぼ同じ。世界観が違う
アプリケーション設計
Webアプリケーションの設計プロセス（講義資料がわかりやすかったので引用。備忘）
要件定義
- どんなシステム作りたいか
- どんな価値を利用者に提供したいか
- 何を解決したいか
基本設計
詳細設計
- 画面のレイアウト及び機能設計
- UIデザイン
- 画面遷移
- URL設計
- 画面のレイアウト及び機能設計
コーディング
- コーディング
- テスト
身近なサービスを例に設計を考える
アプリケーションを作るときの流れの話。twitterっぽいアプリを作ることを例に。
- ER図（基本設計）
- URL設計、ワイヤーフレーム、画面（詳細設計）
- 新規登録できること
- Post /register
- ユーザーはログインできること
- Poost /login
- ユーザーはツイートできる
- ログインしてるユーザーの情報をみて色々取ってくる
- Post /tweet
- ユーザーは全体のツイート一覧を見ることができる
- Get /
- ユーザーは任意のツイートにLikeできる
- Post /tweat/{twiteid}/like
- ユーザーは任意のユーザーをフォローできる
- Post /follw/{userid}
- 個別のツイートページ
- GET /tweet/tweetid
ユーザーページ
- フォロー・フォローワーの情報
- GET /user/userid
アプリケーション作成の流れ
- 基本設計（基本的な機能など）
- 画面レイアウトを考える
- URLを設計する
- ER図を考える（DBの設計）
まとめ
この回の講義はめちゃめちゃ内容濃かった。０からアプリケーションを作るまでの流れはとても勉強になった。これから自分でアプリケーションを書くときに、またこの講義のことを振り返るようにする。
その他
CODEBASE School 6week（2月19日週）
この週から軽量フレームワークSlimを使ってWebアプリケーションを作る。まず、MVC、フレームワークの概念、Slimについての講義があって、Slimのチュートリアルを手を動かしながら進めていく感じ。
CODEBASE School 6week
フレームワークとは
例えば以下のような機能を提供する
- ルーティング
- プロジェクトひな形作成
- セキュリティ
- テンプレートエンジン
- ログ出力
- 認証
MVCについて
MVCとは？についてさぼさんのたとえが凄くわかりやすかったので以下そのまま引用
MVCもオブジェクト指向が出来た成り立ちと同じく、こうやって役割分担すると人間が理解しやすいよねで出来てるプログラミングの設計の概念ですねー
飲食店一人で経営してたけどそろそろ人雇おうかーってことで、ウェイターと料理人一人ずつ雇おうみたいな、人に役割を与えて決まった事をやってもらうのとにてて
ModelとViewとControllerにそれぞれ役割を与えて実装する、すると１つずつのクラスの役割が明確なので実装しやすいのと、MVCを知ってる人同士で開発するときに同じフレームワークで開発できるので議論しやすい
更にSlimのトップページにあるHello,World的なコードはMVCなのか？？ってい疑問があったので、この場合は飲食店一人で経営になります？？？って聞いてみた
slimに乗っかればとりあえずMVCの土台の上には居る感じ。ModelとViewまだ出てきてないですけど app.phpがControllerの役割します MVC、基本的にあと1人Routerが居て MVC(R) なんですけど app.phpはRouter, Controllerの役割します Router... 来たリクエストのURLと対応するControllerを決める Controller...受け取ったリクエストの窓口、処理と、ModelとVIewの呼び出しを担当 Model... データ層とのやり取りを担当。PDO, ORM, DataMapper 等(複数デザインパターンあり) View... HTMLやJSONの表現を担当。生php、twig, blade等 役割分担考えたけどまだ人雇ってない感じ？
MVCについては、Railsの教科書にわかりやすく説明されてる
composerについて
- プロジェクトが必要とするライブラリやパッケージを管理。 各ライブラリのインストールやバージョン管理や依存関係の管理
- インストール（Mac）
$ curl -sS https://getcomposer.org/installer | php $ mv composer.phar /usr/local/bin/composer
Slim tutorial
- Slim 環境準備（MAMP）
$ composer create-project slim/slim-skeleton [my-app-name]
- Routingを覚える
- GETでクライアントがサーバーに渡せる情報はURLとqueryだけ
- POST Requestを扱う
- 画像アップロード
- Sessionを扱う
- Twigでテンプレートを効率的に書く
以下来週
- DBアクセス
- RequsestとResponseのHeaderを確認してみる 第14回
- セキュリティ
- 掲示板を作る 課題形式
- blogを作る 課題形式
まとめ
なんとなく動くものが簡単に準備できたのでおお！ってなった。来週からはDBも使うのでPHP本をちゃんと予習せなば！！！
CODEBASE School 5week（2月12日週）
今週からサーバーサイドのPHPのお勉強。PHPの基本的な構文などの話はProgateでやってる前提で、開発を進めていくにあたっての環境構築、ツールの使い方、PHPの歴史の話などをメインに講義。
CODEBASE School 5week
PhpStormの使い方
PhpStormは色々多機能でシステムキッチンだけど、最初から使いこなすのは難しいので、まずは以下３つを使えるようにする。
デフニションジャンプ（定義に飛ぶ）
- コマンド + B
- コード読んでてよくわからんってなったら、そのメソッドとかオブジェクトとの定義元に飛んで調べたりするのはよくあるで頻繁に使う
コマンドパレット
- メニューバーとかから探すのがめんどくさい時に使える。
コード整形
オブジェクト指向について
- クラスの設計とDBの設計の関係性がいまいちよくわからなかった。Progateで食べログ的な口コミ情報を表示するページを作成するっていうPHPのコースがあるんだけど、その際にFoodクラスとかMenuクラスとかを色々作る。作りたいサイトがあって、そのサイトに必要なクラスってどうやって考えるものなのかっていうのが謎だった。ポイントとしては、実際に作ってみて手を動かして慣れる、DBの本読むなどのアドバイスをもらったので、もう少し調べていこうと思う。おすすめ本 ->達人に学ぶDB設計 徹底指南書
PHPでWebアプリケーションを学習する TODO
PHPで初学者がWebアプリケーションを学ぶ時の流れは以下のような流れがおすすめで、まずは軽量のフレームワークであるSlimを触ってみて、Webアプリケーションで何ができるのか、HTTPで何ができるのかのを学ぶことが重要。（マイクロフレームワークは最低限のHTTPの実装をしているプログラムなので、マイクロフレームワークを使うことでHTTPが何なのかを知ることができる）Slimのドキュメントを見てよくわかないワードがあったら、MDNのHTTPの章を読むなど。あとはisuconの出題問題もPHPはSlimで書かれているので、読んでみると良いかも。
- Progate 2週
- PHP本 2週
- slim アプリ自作
- Laravel アプリ自作
まとめ
マニュアルを読みながら、定義元に飛ぶを繰り返していくのが、コードを理解できるようになるので成長しやすいとのこと。（PhpStormめっちゃ便利！！！）エディタはすごく重要で、プログラミングする際の生産性がものすごく変わるので、初心者ほどちゃんと環境を整えたほうがよい。来週からは軽量フレームワークSlimを使ってWebアプリケーションをかく。
感想
今日はものすごくインプット多くて消化できていないことも多いけど、しっかり復習しよ。やっぱり手を動かさないと理解できないことは多いよなーと思いました。
CODEBASE School 4week（2月5日週）
今週は JavaScript について。JavaScript 基本的な構文、フレームワーク、歴史、昨今のJavaScriptを取り巻く環境についての講義があって、そのあとjQueryの雛形を参考に手を動かしながらサイトに動きをつけて学習した。
CODEBASE School 4week
- JavaScriptとは
- JavaScript のメジャーなライブリやよく参照されるドキュメントについての記事。
- jQueryとは
- JSの書き方
- jQueryの書き方
- SPAとは
- SPAでは、ページ全体をレンダリングする代わりに、変更する部分だけ書き換えます。それによってサーバー内でのデータ結合における負 荷軽減、クライアントへの通信量削減、ブラウザでのレンダリングの 負荷軽減が実現し、相当のスピードアップが可能になるのです
- SPAいまいちよくわからなかった。
- Webpactとは
- Ajax通信とは
- JSのデバック方法
JavaScriptが出来ること
- フロントエンド、PC web, mobile web
- サーバーサイド Node.js
- デスクトップアプリ(Windows, macOS, Ubuntu) Electron
- ネイティブアプリ(iOS, Android) ReactNative, Ionic, Weex
SPAフレームワーク勉強
今回の講義では細かく触れなかったけど、SPAフレームワークが気になった。オススメの勉強方法が共有されてたので備忘メモ。
- プロゲートやドットインストールでJavaScriptの文法などを理解する
JavaScriptの概念を理解する →開眼JavaScriptという本がオススメです。 https://www.amazon.co.jp/s/?ie=UTF8&keywords=%E9%96%8B%E7%9C%BC+javascript
SPAやAjax通信の仕組みを理解する →主に下記の単語はSPAで開発するにあたって、事前に調べて意味を理解しておくと良いと思います。 ・npm ・node.js ・gulp ・webpack ・コンポーネント志向 ・SPA(シングルページアプリケーション) ・Ajax通信 など
Vue.jsのチュートリアルをやる →いきなり、Railsと合わせて開発し始めると、そもそも、Vue.jsで何をやっているのかわからなくなるので、まずは、Vue.jsだけで簡単なものを作る事をオススメします。
- Vue.js + Rails(Laravelなどでも可能)でSPAのアプリを作成する
まとめ
フロントエンドの技術は進化のスピード早い、あと色々と登場人物（BowerとかGulpとかWebpackとか）が多くて、それらがどいう役割を持っていて、どんな感じで使うのかなど、いまいち理解できなかった。使うレベルに達していないから、説明してる記事を読んでもピンと来ないのかもしれないけど、理解できるようしたい。今週でフロントエンドのお勉強は終わりで来週からはサーバーサイドのお勉強。
CODEBASE School 3week（1月29日週）
今週は先週学んだ HTMLとCSSとBootstrapを使ってオリジナルサイト制作をした。
CODEBASE School 3week
- オリジナルサイト制作
- gulpでコーディングを効率化
- これはめっちゃ便利だった。
- CDNの話
ワイヤーフレーム作成
サイトを作るときにはまずはワイヤーフレームを書いて、どんな感じのものを作るか考えるのが大事。ふわっとしたまま進めると、何作ろうとしてたんだけ？？？みたいな感じになるので要注意。ワイヤーフレームを書いたりするのにオススメのサービス->Prott
オリジナルサイトを公開してみた
今回の講義で作ったサイトは、家族に作って欲しいと言われたのがきっかけだったというのもあって、世の中に公開してみた。個人でドメインとって、公開するのは初めてだったのでよい経験。
1000時間積む話
講義の中で、プログラミングを習得するのに必要な時間についての話があった。だいたい1000時間。プログラミングはセンスとか才能とか全然不要で、本当に取り組んだ時間に比例して上達するので、自分がプログラミングに対して1000時間投資するためにどうやって時間を抽出して、計画するかを考えるのが重要とのこと。例えば、月に100時間プログラミングの勉強したとすると習得するのに10ヶ月かかるし、月に50時間だと20ヶ月かかる。計画して時間を積んでいくのが重要。ただ、時間ベースだとどれぐらいのスキルがあるかどうか不明なので、目安としては、400〜500時間で、世の中に自作のWebアプリケーションを公開できる技術を持っているのが目標設定として良くて、このWebアプリケーションを世の中に公開できるっていうのは、
が担保されるので評価される感じとのこと。今までコードを書くことにすごく苦手意識があったので、めちゃめちゃ励みになる。
まとめ
簡単なサイトだけど自分で作って誰かが喜んでくれる体験は嬉しいなあと思った。もっとできる範囲を広げていきたい。あとは1000時間を積むためちゃんと計画するっていうのはかなり重要だな思った。
