2018-03-25

AFTER CODEBASE School 1week

今週からRubyの勉強を始めた。Slimアプリ修正も少しづつ進めるなど。（今週の学習時間25時間）

f:id:shimabukuromeg:20180325214851p:plain

AFTER CODEBASE School 1week

Progate Ruby
Ruby 環境構築
Sinatra/Rails 環境構築
Sinatra ドットインストール
Slim Moaiアプリ修正

Ruby 環境構築

$ brew update
$ brew install rbenv ruby-build
$ brew list
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc
$ source ~/.zshrc
$ rbenv --version
$ rbenv install -l
$ rbenv version
$ rbenv versions
$ rbenv install 2.5.0
$ rbenv versions
$ rbenv global 2.5.0
$ rbenv version
$ ruby -v
$ gem install bundler
$ bundler -v

local, global コマンドでバージョンを固定する
- ルート（/Users/username）に local 設定しちゃうとlocalだけどglobalっぽい動きになるので注意
versionsで手元に入っているRubyのバージョンを確認出来る
それぞれのバージョンごとにgemをインストールするのでバージョンを変えると再度インストールする必要がある
~/.rbenv フォルダにrubyのruntimeとgemがインストールされる
- プロジェクト毎にインストールするgemの場所を指定したい場合は bundle install --path=vendor/bundle とする
- こうすることで、全体（global）に影響しないようにできる
bundle install でGemfileに書いてあるgemがインストールされる
gem の依存関係もチェックしてくれてインストールされる。（依存関係が考慮されたものはGemfile.lock）
あと、rbnev install ができない問題解決せず。。。

qiita.com

Sinatra 環境構築

コマンド（以下二点がポイントでrubymine使いやすくなるらしい）
- rubyのバージョンをローカルで指定する
- gemのインストール先を --path=vendor/bundle で指定する

$ cd ~/Development/ruby/sinatra-sample
$ rbenv local 2.5.0
$ bundle init
$ vi Gemfile
$ bundle install --path=vendor/bundle
$ vi app.rb
$ bundle exec ruby app.rb

Gemfile

source 'https://rubygems.org'

gem 'sinatra', github: 'sinatra/sinatra'
gem 'sinatra-contrib'

app.rb

require 'sinatra'
require 'sinatra/reloader' if development?

get '/' do
  'Hello world!'
end

Sinatra

Sinatra dotinstall

とりあずドットインストール sinatra入門チュートリアルはやってみた。データの登録とか削除とかざっくりできるようになった。もう少しやってみて、細かいところ理解できるようにする。

「@」から始まってる変数は特殊な変数。ビューファイルでも使える
共通したViewの記述を views/layout.erb で記述できる
yieldとは？
ざっくり色々わかってない（RubyMine 定義元に飛ぶやつ、いまいち使いこなせてない）
- ActiveRecord::Base.establish_connection
- use Rack::Session::Cookie,secret: "thisissomethingsecret"
- use Rack::Csrf, raise: true

github.com

Rails 環境構築

gem install rails でインストールしたrailsコマンでrails new してて、
rails new で作ったディレクトリで--path=vendor/bundle にインストールしたrailsコマンドでrails立ち上げてる（rails server）

$ cd ~/Development/ruby/rails-sample
$ rbenv local 2.5.0
$ gem install rails
$ rails
$ rails new --skip-bundle sample
$ cd sample
$ bundle install --path=vendor/bundle
$ bin/rails server
※ $ bundle exec rails server

一番小さなRailsアプリづくり

その他メモ

RubyMineの設定とか

qiita.com

まとめ

今週からrubyやってる。「文系から半年でRuby（Sinatra, Rails）を学んだら人生変わった」をやってみようと思ってて、目標はここ300時間ぐらいで、Rails かけるようになりたい（スタートラインに立てるようになりた）。

speakerdeck.com

これは実際そうですね。
一番おすすめなのは

1, ProgateのRailsコースを2週
2, rails チュートリアルを2周（https://t.co/VPQJg0FWeM ）
3, 自分のプロダクトを作ってみる

ですね。自分で作りたいプロダクトがない人はインスタグラムとか有名なサービスの模倣を作ってみるといいです。 https://t.co/NLGCjfOwer
— むらい（Progate） (@wyvernMurai) 2018年2月10日

Progate Railsの修了時間の合計が30時間、チュートリアルがざっくり2倍ぐらい時間かかるとして60時間、それぞれ2周したとして計算すると180時間。これに自分のプロダクト作ってみる時間をざっくり120時間で計算すると300時間。なるほど。
— shimabukuromeg (@20092014) 2018年3月24日

2018-03-17

これからプログラミングをゼロから学び始める人たちへ（0〜200時間編）

CODEBASE School

2018年 1月16日（火）から 3月16日（木）の２ヶ月間、CODEBASE主催のプログラミングスクールに通っていました。この２ヶ月間で、本当にたくさんのことを学んだので、僕のように、これからプログラミングを0から学んでいこうと思っている人たちに向けて、このスクールで学んだことを紹介できればと思います。ここでの話は、僕がプログラミングスクールに通い学んだ体験が前提となりますが、ゼロからWebアプリケーションを作れるようになるまでの知識やスキル、それらを学んでいく順序などが、この講義の中ではすごく考慮されていていたので、プログラミング未経験者がスタートラインに立つまでに（プログラミング経験0〜200時間までに）やるべきことの参考になるのではと思い、講義内容を整理してまとめてみました。独学で勉強している/独学で勉強しようと思っている人たちにも参考になっていただけるといいなあと思います。

これからプログラミングを0から学び始める人たちへ

この２ヶ月間でやったこと（学習時間/CODEBASE School講義）
プログラミングを学ぶ前と今とでどう変わったか
今後どうしていきたいか

この２ヶ月間でやったこと（学習時間/CODEBASE School講義）

総勉強時間

普段の業務をこなしながらの勉強だったので、平日に1日2時間〜3時間、週末に7時間〜10時間の学習時間を確保するのが限界でした。２ヶ月間で総勉強時間はだいたい200時間ぐらい程度です。（この200時間って言ってるのはコードを書いてない時間も含めてて、講義を受けてる時間や環境構築だったりツールの使い方だったりを調べてる時間も含んでます）

第1, 2回オリエンテーション・Webの仕組み

まずは、プログラミングを学ぶための環境作りとウェブのしくみを学ぶ。自分のコンピューターでプログラムを動かせるようにする準備、Webサイト（Webアプリケーション）がどうやって動いているのかっていう概要を知る。ちゃんとプログラムを動かせる環境を用意できないと、プログラミングの勉強を始められないっていうのと、ウェブの仕組みを知らないと自分が書くプログラムって何してるんだっけ？ってなると思うので、このあたりを最初に学ぶのは重要だと思いました。

shimabukuromeg.hatenadiary.jp

第3, 4回 HTML, CSS, Bootstrap

HTML, CSSは、Webサイト/アプリケーションのページを表示するのに使うものなので、Webアプリケーションを作るために必須となる知識です。概念的にはわかりやすいので、ざっくり理解するのは難しくないと思いますが、実際手を動かしてデザインするってなるとすごく難しいです。個人的には、ここでたくさん手を動かして、少しでも理解を深めることが重要だと思います。（Progate HTMLのコースを２周ぐらいしたらいいかも）まあまあ慣れたらBootstrapのサンプルページのコードを読んだり、コピペで動かしてみたりするのも、理解深めまると思います。

shimabukuromeg.hatenadiary.jp

第5, 6回オリジナルサイト制

HTML,CSSにまあま慣れてきたら、実際にオリジナルのサイト制作をやってみる。テーマはなんでも良いのですが、自分でオリジナルのものを作ってみることで、ワイヤーフレームを考えたり、他のサイトがどうなっているのかをみてみたり、今までインプットしたものをアウトプットするにはどうすればいいかを考えるようになるので、すごく勉強になると思います。

shimabukuromeg.hatenadiary.jp

第7, 8回 JavaScript, jQuery

JSは今回の200時間で一番時間使えてなかったなと思っている部分ですが、最低限 ProgateのJavaScriptとjQueryのコースは一通りやるのをオススメします。あんまり意味がわかってなくてもBootstrpとかを使うと、いい感じに動いてくれたりしますが、JSやjQueryを使うときのリンクの貼り方や基本的な仕組みは、理解しておいたい方が良いと思います。（たまに動かなくなった時に、知識なさ過ぎたら、調べることもできなくなるので、それはまずいです）

shimabukuromeg.hatenadiary.jp

第9, 10回 PHP入門

ここからがサーバーサイドです。今回はPHPを勉強しました。ここでも手を動かすのがすごく重要です。ProgateのPHPのコースを２周ぐらいするのと、詳細！PHP 7+MySQL 入門ノートっていう本のサンプルコードをとりあえず１周写経する。理解が浅いところを繰り返すっていうのがおすすめです。あと今回PHPを学ぶにあたってPHPStormっていうエディタを使ったんですが、補完機能だったり、色々多機能で、初心者な人ほどこのエディタを使うべきだと思います。学習効率がめっちゃ上がります。

shimabukuromeg.hatenadiary.jp

第11, 12回 Slim入門

マイクロフレームワークを使ってWebアプリケーションを書いていきます。マイクロフレームワークは最低限のHTTPの実装をしているプログラムなので、マイクロフレームワークを使うことでHTTPが何なのかを知ることに繋がっていきます。ここから、MVCという概念も出てきます。ただ、個人的にこのMVCをちゃんと理解するのは難しい気がしてて、ざっくりどういうものか理解しておいて、これから先リッチなフレームワークを使うタイミングで手を動かしながらちゃんと理解するのがいいのかあと感じてます。ここでも手を動かすことが重要なので、nunulk さんがqiitaにあげているSlimチュートリアルを全部やりましょう。このチュートリアルはほんとわかりやすかったです。めちゃめちゃおすすめです。

shimabukuromeg.hatenadiary.jp

第13, 14回 DB、DB設計、アプリケーション設計、セキュリティ

アプリケーションをゼロから作っていくためにはどうすれば良いのか、何を考えれば良いのか、っていう設計の話をまとめてます。Webアプリケーションの設計プロセスはすごく重要で、これからWebアプリケーションを作ろうと思った時に、ここに書いてあることを振り返るようにしたいと思っています。ただ、設計についていきなり考えるのは難しいので、すでに世の中に出ているサービスがどうなっているのか、ER図とかURLとか想像してみるのが、理解を深めるのに取っ掛かりとしておすすめです。

shimabukuromeg.hatenadiary.jp

第15, 16回自作アプリケーション開発

これまで学んできたことHTML,CSS,JS,PHPを使っての集大成。特に13,14回週で学んだことを意識しながら、作るものを考えるのが重要だと感じました。個人的には、この時点で、自分が持ってるスキルを使ってできる最低限のものをまず作ってみて、そこから少しづつ改良していくようなやり方が良いかなと思っています。（ちょっと最初から難しことやっちゃうと、手が止まっちゃうのであんまりよくない感じがしてて、例えばnunulkさんのチュートリアルをベースに、改良を加えていくなどしたら、良いのではと思います）

shimabukuromeg.hatenadiary.jp

第17 Git入門/GitHub入門

これまでの学習である程度コードがかけてきたら、Git/GitHubでソースコードを管理していきましょう。単純にソースコードを管理するだけじゃなくて、普段自分がどれだけコードを書いているかを見える化できたり、チームでコードを書いていく際には、必須の知識だったりするので、普段から使っていくことをオススメします。取っ掛かりとしてはチュートリアルをやってみたりして、あとは実際にどんどん使っていって、色々ハマって、調べて上達するのが良いかなと思っています。

shimabukuromeg.hatenadiary.jp

プログラミングを学ぶ前と今とでどう変わったか

２ヶ月間（200時間）プログラミングを勉強してみて、個人的には成長できたと思っています。卒業制作でそれなりに動くものを作れたのはものすごく感動でした。ですが、対外的には正直これと言って語れる成果を出せてないの現状です（笑）そんな中、この2ヶ月間でプログラミングを学びながら、大きく影響されたこと、自分の意識が変わったことが２つあるのでぜひ紹介させてください。

1000時間を積むこと

講義の中で、プログラミングを習得するのに必要な時間についての話があって、それがだいたい1000時間らしいです。プログラミングはセンスとか才能とか全然不要で、本当に取り組んだ時間に比例して上達するので、自分がプログラミングに対して1000時間投資するためにどうやって時間を抽出して、計画するかが重要という話でした。やっぱり才能だったり、始めるタイミングだったりが重要だったりするだろーなって、少なからず思っていたので、めちゃめちゃ励みになりました。何か新しいことを学びたいと思った時に、プログラミング以外のことでも同じことが言えると思います。

やる気ってあんまり重要じゃない

講義のなかで「何かあたらしいことを身につけようと思ったときに、やる気ってあんまり重要じゃなくて、いかに自分を中毒状態にできるかってのが大事」って話がありました。個人的にも、なんかやる気が出ないなーとか思うことがよくあったので、やる気だけで何かを乗り換えていくって結構大変なことなのでは？と思ってました。なので、自分を中毒状態にする仕組みを、これから意識していきたいなあと思いました。

ぼくは何か学習したいと思ったら、毎日それを習慣にして、無意識に耳に入れたり、それをやってる人と何度もあったり、それに関するtweetを頻繁に目にするようにしたり。結構外的トリガーを整理して環境を作ると内的トリガーに切り替わりやすいという自分の中の実体験、自分の脳の仕組みを少し理解してるつもりなのでそういう感じで仕向けます

やる気って過大評価されますけど、やる気ってあまり関係なくて、脳を中毒症状に持っていければ勝手に自動的に学習する習慣がつきます(たぶん

saboyutaka.hatenablog.com

今後どうしていきたいか

まずは1000時間を積んでいきたいと思っています。この1000時間積むために、中毒性っていうのがすごくポイントだと思っていますが、それに加えて、適切な目標設定をできるかってのも重要だと思っています。1000時間積むために何をやればいのか？が見えなくなってきたら要注意な気がするので、自分の立ち位置とゴールを見誤らないようにしたい（多分、実務をこなすってのが一番だと思うけど、、、この辺りはもう少し考えないとなー）
もうちょっと長期的なふわっとした目標設定なんだけど、ソフトウェアエンジニアリングで課題解決できる能力を身に付けたいと思ってます。あとは、身近な人が喜んでくれるようなものを、作っていけたらなーって思ってます。

スタートラインに立つまでに1000時間
— さぼ@ギークハウス沖縄 👨‍💻☕️🎹🎧🐈 (@saboyutaka) 2018年3月16日

まとめ

今回のCODEBASE School で学んだプログラミング0から200時間までにやったことを書きました。参考になれば嬉しいです
とは言っても僕も初心者から200時間勉強しただけなので、まだまだ1000時間までは長いです。挫折しそうになってたら助けてください笑

終わりに

最後にこのCODEBASE School の二期生を募集してるとのことです！！！現役のフリーランスエンジニアの [twitter:@saboyutaka] さん、[twitter:@kanbo0605] さんを講師に迎えて、現場感のある情報を講義の中で触れれるのはものすごく良かったなーと感じてます。まじでめちゃめちゃ学びが多いので、プログラミングをこれから始めたいと思っている人やWEBの世界に興味がある人はぜひ応募して見てください。

peraichi.com

2018-03-16

CODEBASE School Last week（3月12日週）

CODEBASE School

最後の週は、Gitについての講義と卒業制作に取り組んだ。最終日は卒業制作発表会でした。

CODEBASE School Last week

Git入門/GitHub入門
卒業制作/発表会

Git入門/GitHub入門

f:id:shimabukuromeg:20180316164632p:plain

ファイル操作については、基本的に３つの状態を行き来する unmodified -> modified -> staged
- ステージから下げる reset
- ステージに上げる add
- 変更ない状態にする checkout 　
GitHubに卒業制作アプリをあげてみた（まだ途中）

github.com

Git ドキュメント

Git - Recording Changes to the Repository

GIT チートシート

https://services.github.com/on-demand/downloads/ja/github-git-cheat-sheet.pdf

卒業制作/発表会

作ろうと思ったもの

模合アプリ
- 作ろうと思ったのは、地元のお友達と模合をしてるのでそのメンバーに使ってもらえるアプリを作りたかったっていう感じ
- 取り入れたいと思った機能としては、思い出共有/スケジュール共有ができるなど
- Prottでワイヤーフレームをかいてみた（※イメージです。実際はこんな感じで作れませんでしたw）

f:id:shimabukuromeg:20180316162752p:plain

prottapp.com

やったこと

インプット

私家版 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

Google Maps API

https://developers.google.com/maps/web/?hl=ja

blog.daisukekonishi.com

PHP: urlencode - Manual

PHP: getenv - Manual

アウトプット

以下作業の繰り返し

表示させたいページを考える
htmlを書く
route.phpに処理追加（情報を追加したかったらテーブル追加&フォームページ追加）

振り返り（卒業制作）

基本的に講義で教えてもらったことは最低限取り入れるように心がけた
フロントはテンプレートを使っちゃって怠けたのでHTML&CSS&JSもう少し頑張らないと
テンプレートのおかげだけど、見た目がよいとテンションあがるので、作業進むと思った
DBが適当すぎたのでアプリケーションをどう作るかって講義を復習しよう

今後やろうと思ってること

routes.php をもう少し見やすくする。（繰り返し同じことやってるやつはまとめるなど）
ざっくり作ったので細かい部分をなおす（掲示板アプリ→Twitter風アプリ→モアイアプリって流用しまくったので、記述内容がめちゃめちゃなのを直す）
追加したい機能リストつくる
毎日commitするようにする
デプロイ（今回作ったものはローカルにしかないので、世の中に公開できるようにしたい）

今回のCODEBASE School を振り返ってまとめ

この２ヶ月を振り返ると、ほんと学び多い２ヶ月でした。ただ、やんなきゃいけないことはまだまだあって、これでようやくスタート地点に立てたのかなあというの実感です。（立てたかどうかも不安だけど）あとは、これからどれだけ時間を積んで成長できるか、続けていけるかってとこが大事だと思っています。講義のなかで「何かあたらしいことを身につけようと思ったときに、やる気ってあんまり重要じゃなくて、いかに自分を中毒状態にできるかってのが大事」ってさぼさんが話してたのがすごく印象に残ってて、この技術（つまり1000時間積む技術）習得できたらほんと勝ちだなあって思います。あと学生さんがたくさんいて、みんなでわいわいしながら勉強するってめっちゃ楽しいなーと改めて思いました。やっぱり一緒に学ぶ仲間がいるっていいですね（笑）

saboyutaka.hatenablog.com

最後に、今回の講義を提供していただいた皆様ほんとにありがとうございました！！！この講義が無料ってほんとに凄いと思います。またどこかでお会いしたさいには、何卒よろしくお願いします！！！あとこの講座の2期生を募集しているとのことです。ほんとめちゃめちゃ学び多いのでWebに興味があってエンジニアになりたいと思っている人はめちゃめちゃお勧めです。

peraichi.com

2018-03-16

CODEBASE School 8week（3月5日週）

CODEBASE School

これまで学んだ知識をもとに、Slimを使って、掲示板アプリとTwitter風アプリを作る。これが終わったら卒業制作。基本的に各自のペースで製作を進めて、わかんないとこを随時相談するってスタイル。

CODEBASE School 8week

掲示板アプリ製作/Twitter風アプリ製作/卒業制作

掲示板アプリ製作/Twitter風アプリ製作/卒業制作

Slimを理解するために以下のnunulkさんのチュートリアルがめちゃめちゃ勉強になった。このチュートリアルでは、チケット管理アプリを作っているけど、一通りこのチュートリアルをやってみたあと、チケットアプリを直して掲示板アプリ、Twitter風アプリに変えてみる。

qiita.com

ログイン機能については、ISUCON5 のPHP実装とPHP本のセッションの章を読んで実装

github.com

パスワードをハッシュ化してDBに保存する方法は、セバさんに教えてもらった。以下の関数を使えばOK
- password_hash — パスワードハッシュを作る
- password_verify — パスワードがハッシュにマッチするかどうかを調べる

PHP: password_hash - Manual

PHP: password_verify - Manual

まとめ

実際にアプリケーションを書き始めたところから、楽しくなってきた反面、難しいと思うところもめちゃめちゃ増えた。どれだけコードを書く時間を確保できるかどうかがポイントだな。PHPのマニュアルとvar_dump()をめちゃめちゃ見たし、めちゃめちゃ使うー

2018-03-16

CODEBASE School 7week（2月26日週）

CODEBASE School

この週は、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アプリケーションの設計プロセス（講義資料がわかりやすかったので引用。備忘）

要件定義
- どんなシステム作りたいか
- どんな価値を利用者に提供したいか
- 何を解決したいか
基本設計
- ハードウェア、データベース、ソフトウェアの選定
  - クラウドサービス使うか？(AWS, GCP, Azure)
  - データベース何にするか？
  - アプリケーション、なんの言語で書くか？
    - PHP?
    - Ruby?
    - Java?
- データベース設計、テーブル設計
  - ER図
  - テーブルのカラム設計
- システムの機能概要の設計
- 外部システムとの連携方法の検討
  - 自分たちのサービスのコアビジネス、コアロジックはどこか
  - 外部サービスを利用して実装出来ないのか
詳細設計
- 画面のレイアウト及び機能設計
  - UIデザイン
  - 画面遷移
  - URL設計
コーディング
- コーディング
- テスト

身近なサービスを例に設計を考える

アプリケーションを作るときの流れの話。twitterっぽいアプリを作ることを例に。

ER図（基本設計）

f:id:shimabukuromeg:20180316142703j:plain

URL設計、ワイヤーフレーム、画面（詳細設計）

f:id:shimabukuromeg:20180316142233j:plain

新規登録できること
- Post /register
ユーザーはログインできること
- Poost /login
ユーザーはツイートできる
- ログインしてるユーザーの情報をみて色々取ってくる
- Post /tweet
ユーザーは全体のツイート一覧を見ることができる
- Get /
ユーザーは任意のツイートにLikeできる
- Post /tweat/{twiteid}/like
ユーザーは任意のユーザーをフォローできる
- Post /follw/{userid}
個別のツイートページ
- GET /tweet/tweetid
ユーザーページ
- フォロー・フォローワーの情報
- GET /user/userid
アプリケーション作成の流れ
- 基本設計（基本的な機能など）
- 画面レイアウトを考える
- URLを設計する
- ER図を考える（DBの設計）

まとめ

この回の講義はめちゃめちゃ内容濃かった。０からアプリケーションを作るまでの流れはとても勉強になった。これから自分でアプリケーションを書くときに、またこの講義のことを振り返るようにする。

その他

PHPでのPDOの使い方はPHP本などの自己学習だった。その際、以下ページがわかりやすかったのでメモ

qiita.com

2018-03-16

CODEBASE School 6week（2月19日週）

CODEBASE School

この週から軽量フレームワークSlimを使ってWebアプリケーションを作る。まず、MVC、フレームワークの概念、Slimについての講義があって、Slimのチュートリアルを手を動かしながら進めていく感じ。

CODEBASE School 6week

フレームワークとは
MVCについて
composerについて
Slim Tutorial

フレームワークとは

例えば以下のような機能を提供する

ルーティング
プロジェクトひな形作成
セキュリティ
テンプレートエンジン
ログ出力
認証

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等役割分担考えたけどまだ人雇ってない感じ？

www.slimframework.com

MVCについては、Railsの教科書にわかりやすく説明されてる

一番小さな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本をちゃんと予習せなば！！！

2018-02-24

CODEBASE School 5week（2月12日週）

CODEBASE School

今週からサーバーサイドのPHPのお勉強。PHPの基本的な構文などの話はProgateでやってる前提で、開発を進めていくにあたっての環境構築、ツールの使い方、PHPの歴史の話などをメインに講義。

CODEBASE School 5week

MAMP インストール
Webおさらい
PhpStorm使い方
PHPについて
- 2000年代に流行っていて、PHPを使えるユーザー数は多い
- PHP7になって、これまでたくさんあった罠がなくなり、今風の言語になってる。Laravelとかフレームワークとして、すごくよくできているらしく、PHPは今後の注目度高い。
- 公式ドキュメント。PHPは公式ドキュメントがしっかりしているので、ドキュメントさえ読めればPHPかける。とのこと。

PHP: PHP マニュアル - Manual

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 アプリ自作

developer.mozilla.org

www.slimframework.com

github.com

まとめ

マニュアルを読みながら、定義元に飛ぶを繰り返していくのが、コードを理解できるようになるので成長しやすいとのこと。（PhpStormめっちゃ便利！！！）エディタはすごく重要で、プログラミングする際の生産性がものすごく変わるので、初心者ほどちゃんと環境を整えたほうがよい。来週からは軽量フレームワークSlimを使ってWebアプリケーションをかく。

感想

今日はものすごくインプット多くて消化できていないことも多いけど、しっかり復習しよ。やっぱり手を動かさないと理解できないことは多いよなーと思いました。

AFTER CODEBASE School 1week

Ruby 環境構築

Sinatra 環境構築

Sinatra dotinstall

Rails 環境構築

その他 メモ

まとめ

これからプログラミングを0から学び始める人たちへ

この２ヶ月間でやったこと（学習時間/CODEBASE School講義）

プログラミングを学ぶ前と今とでどう変わったか

今後どうしていきたいか

まとめ

終わりに

CODEBASE School Last week

Git入門/GitHub入門

卒業制作/発表会

作ろうと思ったもの

やったこと

インプット

アウトプット

振り返り（卒業制作）

今後やろうと思ってること

今回のCODEBASE School を振り返ってまとめ

CODEBASE School 8week

掲示板アプリ製作/Twitter風アプリ製作/卒業制作

まとめ

CODEBASE School 7week

テーブル設計・ER図

アプリケーション設計

身近なサービスを例に設計を考える

まとめ

その他

CODEBASE School 6week

フレームワークとは

MVCについて

composerについて

Slim tutorial

まとめ

CODEBASE School 5week

PhpStormの使い方

オブジェクト指向について

PHPでWebアプリケーションを学習する TODO

まとめ

感想

その他メモ