TECH::EXPERT 一週間目を終えての振り返り
○1日目
事前学習で少しだけカリキュラムを進めていたため、RubyonRailsのmoooviというアプリの作成からスタート。主にスクレイピングを学習し、既存のアプリケージョンに様々な機能を実装したが、ずっと漠然とした違和感がつきまとっており、それがなくならない。
その違和感は応用実装にはいった途端に現実として現れた。
RubyonRailsというものを理解していない！
今までの学習はただカリキュラムから指示をされたことをやっているだけで、理解はしていなかった。当然のように徐々に応用的な指示を受けるため、基礎を理解していないとカリキュラムの説明が理解できない。完全にそういう状況に陥っていた。
そこで学習終了。メンターの先生と相談し、Railsを最初からやり直すことに。
○2日目
ひとつひとつの理解を慎重にとテーマを掲げ、Railsの2周目をスタート。
まるで鮮やかな伏線回収のように「ああ、これはそういうことだったのか」の連続。プログラミング学習は２周目からこそ学習の本質が現れるのだと理解。
ただ、細かいところをメンターの先生に質問し過ぎたせいで、予定より学習が進まず。ページネイションとヘルパーメソッドについて一時間半もメンターの先生に質問し、理解に至った。
楽しく学習できたけど、学問としてのプログラミングを追いかけ過ぎたと反省。ここには実務的なスキルを身につけにきているのだから、あまり細かい理屈まで突き詰め過ぎないほうがいいのかもしれない。
ただ、しつこい質問に付き合ってくださったメンターの先生には感謝。メンターの方のスキルにはおそらくかなりのばらつきがあるが、今日お世話になった先生は知識の量が半端じゃなく、おそらく将来有望なエンジニアの方なのかもしれない。
○3日目
PictweetというTwitterの超簡易版のようなサービスをつくって学習を進めているが、そのツイート編集機能、ログイン機能、コメント機能の実装をフローにまとめるとかなり理解が深まった。処理の流れを線でおったので、ビュー、コントローラ、モデル、ルーディングのそれぞれの役割が結構しっかり理解できた。
２周目の学習はやはり楽しい。しかしやはり進みが遅い。ややカリキュラムを進める上で関係のない質問が多い気もする。でも、疑問が解決され、より理解が深まった瞬間がなにより楽しい。
○4日目
初日に理解できずに心が折れたmoooviの応用実装にやっと戻ってこられた。
Pictweetを２周することでそれなりに力をつけた甲斐あって、全てがすんなり理解できる！ 楽しい！
ということで、初日の絶望が嘘だったかのように学習が進みました。
ちなみに、初日にちゃんと理解できてなくカリキュラムの説明の意味がわからなくなった原因は、パスにあった。ここのボタンをクリックするとルーディングのこのURLから、ここのコントローラのアクションに行き、このビューファイルに変数が渡されて……みたいなことの理解が甘過ぎた。逆にそこがわかると、paramsの理解がやばいほど進んで、それから、form_tagとform_for、redirect_to、link_to、before_action、ネスト、binding-pryなどなどさまざまな要素がひとつのまとまりとして頭に入ってきた。
もしかして、センスあるかも？ と思った瞬間。
中間テストで２４点をとり、絶望するのは、また先の話……。
○5日目
Railsにおいていろんな流れが見えてくると、失礼を承知で申し上げますが「Gemファイルきもい！」という思考に堕落していきました。
なぜなら、便利すぎるからです。
ここではdeviceというログイン機能を簡単に実装できるGemファイルをつかっていました。これは大変便利なもので、ファイル上には現れないところでいろんなことをします。ユーザー登録をしたり、削除したり。その処理の流れを追いたくても、「君は別に詳しいことは知らなくてもいいんだよ」といわんばかりに、隠されたところで処理がなされます。
「いやいや、理解できないことを前提で教えてよ」と、メンターの先生に質問しました。「それを知るためにはC言語とかの知識が必要だね。気になるならこの転職コースの楽手が終わったらまずはJavaから勉強してみたら？」とのことです。
しばらくは便利なGemファイルにお世話になり、今後Javaを勉強します。
○6日目
Railsに時間をかけ過ぎていたので、HTML/CSSの復習。
はじめにやったときはサクサク進んだのに、これもこれで厄介でした。
なぜこうなるのか？ が全て説明できないのです。
とりあえず「floatしたら浮く」とか「親要素の大きさは小要素の大きさに依存する」とか基本的なところをしっかり押さえて終了。
○7日目
中間テストを受けたところ、なんと１００点満点中２４点。
もう絶望です。Progateとあわせて１００時間から１５０時間くらい勉強を続けているのに私の理解はこの程度でした。独学だったら多分勉強やめてたなと思うほどのショック。独学じゃなくてよかった。
学校の定期テストでいうところの赤点で、とくに低得点だった細かい原因とかはなくただの実力不足だけど、あえていうならRubyがまったくできていなかった。カリキュラムのRubyが簡単に進んでいたせいで復習をおろそかにしていたと反省。
また、Railsも理解しているつもりだっただけで、いざ「エラーを直せ！」と言われると全く手がでなかった。
プログラミングは全く甘くないと実感。
復習あるのみ。自分にはまったくセンスがないのではないかという不安を抱えながらも前に進むことを決意。
○まとめ
プログラミング楽しい！ は実務に向けての学習ではない。
楽しいは大事だけど、辛いことを乗り越えてこそ立派なエンジニアになれるのかもしれない。スポ根っぽいけど。あと、メンターの先生は若いのになんでも知っているから普通に嫉妬という感情が湧いてきました。これからもよろしくお願いします。
TECH::EXPERT 事前学習
目次
事前学習とは
事前学習の重要性
事前学習の実際
事前学習の学習時間・内容
まとめ
○事前学習とは
TECH::EXPERTでは学習開始２週間前から基礎カリキュラムが公開され、また校舎での勉強が可能になります。ここで学習する基礎カリキュラムとは、通常、学習開始から２週間でマスターする内容です。具体的にはHTML/CSS、Ruby、Ruby on Railsの基礎学習です。
○事前学習の重要性
２週間もありますので、ここでしっかりやるとやらないでは大きな差がつきます。学習が始まれば1日１０時間も勉強しますので、この２週間はかなり大きいです。あくまでも基礎学習ですがかなり難解なことをインプットするので、ここで学習予定にゆとりをつくっておくと、精神的に楽に学習を進められます。逆にここでゆとりをつくっておかないと毎日焦りながら長時間の学習をすることになり、精神衛生上よくなく、１０週間の学習をやり遂げられるか不安になります。
ぜひ、ここでまわりとの差をつけたいところです。
○事前学習の実際
では、実際はどのくらいの人がどの程度の事前学習をしているのかについてです。
私の同期ですと、平均してHTML/CSS、Rubyの途中までという人が多かった気がします。ちなみに基礎カリキュラム全体の分量でいうところの３０％から４０％くらいでしょうか。
中には２人くらいでしょうか、２週間まるまるきっちり学習し基礎カリキュラムの一周目を完了している人もいました。そういう人たちは２週間の差があるわけですから、知識や技術の格が違い、どんどん先に進んでいました。
逆にまったく事前学習をしていなかった方は、日々不安とたたかっているように見えました。そもそも２週間で終了させるには少し厳しいカリキュラムを強いられており、また一読しただけでは何をいっているのかさっぱりわからないほど難解な説明文を読みながらの学習なので、確かに焦ります。
ちなみに、私は基礎カリキュラムを全体の７割ほど完了させていました。時間にすると２週間で３８時間です。２週間みっちりやると1日１０時間×１４日で１４０時間なので、全体との割合は２７％です。こう考えるとあまり熱心にやったほうとはいえません。
ですが、精神的にはゆとりをもって学習を進められました。まわりと比べると少し進んでいた方だったと思います。また、急ぐこともなかったので、細かいところまでメンターの方に質問しながら楽しく学習できました。しかし、しっかり事前学習していた人がどんどん先にいっているのをみると、少し悔しいというか、ちゃんとやっておけばよかったと思いました。
ちなみに、ひとつ下の期の方々の事前学習状況をなんとなくみると、おそらく１４０時間もやっている人はいないかなと思います。おそらく５人くらいの方が午後２時から３時くらいから来られて、夜９時くらいまでやっているという印象です。それでも、やらない人との差は確実に広がっており、おそらく学習開始はスムーズにとりかかれるでしょう。
※ここでは私以外の他の人の傾向についても言及しましたが、あくまで印象です。朝礼と夕礼（他の生徒さんとのコミュニケーションタイム）で得た情報となんとなく教室を見渡しただけの印象ですので、私の肌感覚で得た情報になります。
○事前学習の学習時間・内容
ほとんど繰り返しになりますが、私が行った時間は３８時間、内容としては全体の７割ほど（あくまで一周目でふつう３周くらい行います）完了させました。
内容はHTML/CSS、Rubyの基本、RubyonRailsのひとつのレッスンが終わるまでです。
事前学習で行う基礎カリキュラムは学習開始後そのまま２週間行う内容です。２週間後までに完了させるテストに向けての学習になります。ですから、事前に学習を開始しカリキュラムを進めれば、進めただけまわりよりリードすることになります。
基礎カリキュラムですが、初めてプログラミングと接するので私はかなり難解に感じました。メンターの方からいただく教えやアドバイスなしにはおそらく完遂することができなかったと思います。また、テスト合格のためには行わなくていい学習内容もあります。しかし、今後学習を進める上で重要そうに知識がたくさんあるので、ぜひすべて行いたいものです。
○まとめ
結論、事前学習は少しでもやっておいたほうがいいし、やり過ぎるといったこともありません。なぜなら、学習が早く終われば早くテストを受験し、早く応用カリキュラムに進めるからです。
事前学習を行うデメリットとしては、時間を奪われることくらいでしょうか。これから１０週間かなりの学習をするから、その前くらいすこし遊んでおきたい。私はそういう邪心も少しだけあり、そこまで根詰めて行いませんでした。しかし、後悔しています。やって損はありません。これからTECH::EXPERTを受講される方にはぜひ少しでも多くのカリキュラムを事前学習で終わらせていただきたいです。
Progate Ruby on Rails学習（レッスン５まで）
内容
レッスン１
・アプリケーションの作成
$ rails new アプリケーション名
これを実行することで入力したアプリケーション名とそのフォルダが作成される。
アプリケーションには開発に必要なファイルやフォルダが用意されている。
・サーバーの立ち上げ
開発中のアプリケーションをブラウザで表示するためにはサーバーを起動する必要がある。
$ rails server で起動。
・トップページの自動生成
$ rails generate controller home top
このコマンドを実行すると新しいWebページが自動で作られ localhost:3000/home/top というURLにアクセスできるようになる。
〇コマンドだけでページができる理由
コマンドを実行すると、ページを表示するのに必要なファイルが作られていた。
railsでページを表示するためのファイル
ビュー、コントローラ、ルーディング
・ビュー べージの見た目をつくるためのHTMLファイル。
中身 $ rails generate controller home topのコマンドだと、後ろ二つのhomeフォルダとtop.html.erbというファイルが作成される。このファイルの中身は普通のHTMLのコードがある。よってページの見た目はここで変更できる。
・コントローラ
ページを表示するときの経由地点。
$ rails generate controller home top が実行されると、home_controller.rbというファイルのなかに topメソッドが追加される。このメソッドをアクションという。
アクションの役割
ブラウザに返すビュー（見た目）をviewsフォルダのなかから見つけだす。
コントローラと同じ名前のビューフォルダ（ここではhomeフォルダ）からアクションと同じ名前のHTMLファイル（ここではtop.html.erb）を探してブラウザに返す。
・ルーディング
ブラウザとコントローラをつなぐ。
送信されたURLに対して「どのコントローラのどのアクション」で処理するかを決める対応表。
ルーディング設定ファイルの中身
localhost:3000/home/topというURLが送信されたとき
Rails.application.routes.draw do
get ”home/top” => “home#top”
end
homeコントローラのtopアクションで処理。
getのあとの”home/top” を変更するとそれに応じてURLが変更される。
“home#top” がかわらない限りhomeフォルダのtopアクションに対応するファイル(top.html.erb)の内容がブラウザに返される。
まとめ
$ rails generate controller home top実行
→homeフォルダとtop.html.erbファイルを作成。
→home_controller.rbというファイルのなかにtopメソッドが追加される。
→ルーティングファイルがhomeフォルダのtopアクションで処理すると決める
→このアクションがhomeフォルダからtop.html.erbというファイルを探す。
→作成されたtop.html.erbをブラウザに返す。
・ルーティングとアクションの追加
ルーティング
Rails.application.routes.draw do
get ”home/top” => “home#top”
get ” home/about” => “home#about”
end
コントローラ
def about
end
これでabout.html.erbというファイルをつくってもOK
・CSSファイルはcss/assets/stylesheetsフォルダに入っている
このフォルダに保存されているCSSをファイルにコードを書けばすべてのビューにCSSが適応される。
・画像はpublic フォルダに配置しておくと、画像名を指定するだけで表示できる。
・リンクのつくり方
ビューファイル（HTML）のaタグのhref=” ” のURLとルーディングのURL部分を同じにする。
レッスン２
・データベース
データを保存しておく場所
・投稿一覧ページの作成
「投稿」に関するページをつくるためにpostコントローラをつくる。homeコントローラでもつくれるが目的に合わせて分けた方が良い。（homeコントローラはトップページなどに関したコントローラ）
・HTMLファイルのなかにRubyのコードを打ち込むときは<% %>で囲む。変数など。
今まででてきたerb Embedded Ruby(埋め込みRuby)の略。
埋め込むRubyコードをブラウザに表示したいときは<%= %>。変数の値など実際にページ内に表示したいときに使う。
・アクションのなかに変数定義する。
def アクション名 end のなかに＠変数を定義することで、それをHTMLファイルでも使える。（コントローラがビューに変数を渡す）
変数の前に＠をつけるのを忘れない。
・データベースはテーブルと呼ばれる表で管理されている。
表の縦（列）のことをカラム、横（行）のことをレコードと呼ぶ。
・postsテーブルの作成
データベースにデータを保存するためにテーブルをつくる。
Step1
マイグレーションファイルと呼ばれるデータベースに変更を指示するためのファイルを作成。
$ rails g model Post content:text
Postsという名前のテーブル（コマンドは単数形）のcontentという名前のカラムに長い文字列(text)のようなデータが入る。
Step2
データベースに変更を更新
$ ralis db:migrate
このコマンドを入力すると、id, criated_at, updated_atというカラムも自動生成される。
・テーブルを操作するためには、モデルと呼ばれるクラスを用いる。
rails g modelというコマンドですでにPostモデルというクラスが定義された post.rbが生成されている。
$ rails g model Post content:text
このコマンドでは、テーブルを操作するpostモデルの定義されたルビーファイルと、データベースに変更を指示するマイグレーションファイルふたつが生成される。
・rails console
ターミナルで実行することによってコンソールを起動することができる。quitで終了。
変数の定義もできる。
・postテーブルにデータを追加
Post.newとnewメソッドでPostモデルのインスタンスを作成
→post.saveとsaveメソッドでpostインスタンスをpostsテーブルに保存
・postテーブルのデータを利用
post = Post.first postテーブルにある最初のデータを取得しpostに代入
post.content 取得したデータから投稿内容を取得
posts = Post.all postテーブルにあるすべてのデータを取得。
配列で取得できるので、最初のデータを取得するときは、Post.all[0]
・取得したデータをビューに表示
コントローラのアクション内に取得したデータを変数に代入。
@posts = Post.all
ビュー（HTML）でその変数を表示。
Post.content
・views/layouts/application.html.erb に共通のHTMLを書いておくことができる。
ここに指定した変数に、各ファイルで違った値を代入すると、各ページごとに値は違うがレイアウトは揃えることができる。
・link_to aタグを生成するメソッド
<%= link_to(“表示する文字”, “/URL”) %>
→<a href=”URL”>表示する文字</a>
レッスン３
・idカラム データベースに保存されるときに数字が１から自動で入る。
・created_atカラム、updated_atカラム
保存された時刻が自動で入る。updated_atカラムはデータ更新時にも時刻が更新される。
・find_by 特定の条件に合致するデータを取得するためのメソッド。
モデル名.find_by(カラム名:値)
post = Post.find_by(id:3)
post.content
idが3のデータを取得し、表示
・ルーディングのURL部分にpost/:〇〇 と書くと「/posts/〇〇」のようなすべてのURLが該当する。
・params
ルーディングで設定したURL「:id」の値を取得することができる。その値がこの変数にハッシュ（複数の要素をまとめて管理）としてはいっている。コントローラのアクション内で実行。
def show
@id = params[:id] params（ハッシュ）のなかのidの値
end
・idカラムの値がprams[:id]と等しい投稿をデータベースから取得し、表示。
def show
@post = Post.find_by(id:params[:id])
end
<%=@post.content %>
・投稿一覧ページに各投稿の詳細ページへのリンクを作成
<%=link_to(post.content, “/post/#{post.id}”)%>
post.contentの内容で表示されたリンクをクリックすると、そのid番号へと飛ぶ。
index(一覧ページの名前)→post(詳細ページの名前)
・新規投稿ページの作成
ルーディングでURLを作成。コントローラにアクションを作成。ビューファイルを作成。
get “posts.new” => “posts#new”
def new
end
・投稿ボタンが押されrails側に送信されたデータをデータベースに保存
createアクションを用紙してその処理を行う。
フォームの値を受け取るときは、ルーディングを「get」でなく「post」にする。
・form_tag
フォームに入力されたデータを送信するメソッド。
form_tag(送信先のURL) do
・redirect_to ほかのURLに転送（リダイレクト）するメソッド
Redirect_to(転送先のURL)
・投稿内容の保存
<textarea>タグにname属性を指定すると入力データを送信できるようになり、name属性の値をキーとしたハッシュがrails側に送られる。
<textarea name=”content”>入力内容</textarea>
{content:”入力内容”}というハッシュがcreateアクションへ送られる。
def create
params[:content] paramsの中身が{content:”入力内容”}なので、入力内容を取得
end
実際の保存
def create
@post = Post.new(content:params[:content])
@post.save
end
Postクラスにcontentが入力内容のインスタンス変数をいれ、@postに代入し保存。
つまり、入力内容が@postに代入されそれが保存される。
・paramsのまとめ
get “post/:〇〇”
<textarea name =”〇〇”>
このふたつをparams[:〇〇]で取得できる。
・order
投稿一覧を並び替えるメソッド。asc:昇順、desc:降順
@post = Post.all.order(created_at: :desc)
レッスン４
・投稿データを編集して保存するとupdated_atカラムの時刻が更新される。
・destroy データベースから削除するメソッド
・投稿編集ページの作成
ルーディング どの投稿の編集かわかるようにURLにidを入れる
get “posts/:id/edit” => “posts#edit”
コントローラ
def edit end
ビュー
edit.html.erbの作成
・フォームに初期値を用意する
<textarea>タグに初期値を入れることで設定できる
・編集内容を保存
updateアクションを用意。そのなかに、フォーム内容の保存、投稿一覧画面への転送機能をつける。
このアクションはフォーム値を受け取るので、ルーディングはpostにする。
・投稿内容の更新
URLに含まれるidを用いてデータベースから投稿データを取得。
→フォームから編集内容を受け取り、投稿データを更新。
ビュー
<%=form_tag(“/posts/#{@post.id}/update)do%> updateアクションにidを飛ばす
<textarea name=”content”>入力内容</textarea> 入力内容をハッシュにする
コントローラ
def update
@post = Post.find_by(id:params[:id]) URLからidを取り出す
@post.content = params[:content] 入力内容を上書き
@post.save 保存
・削除機能
destoryアクション。機能：投稿を削除。投稿一覧画面への転送
ルーディングはpost。
・ルーディング
get データベースを変更しないアクション
post データベースを変更するアクション
・ルーディングpost用のリンク
第三引数に{method:”post”}を追加。
レッスン５
・バリテーション
不正なデータがデータベースに保存されないようにデータをチェックする仕組み。
モデルで設定。
class Post < ApplicationRecord
validates :検証するカラム名, {検証する内容}
validates :content, {presence:true} contentカラムの空の投稿を防ぐ
validates :content, {length:{maximum:140}} contentカラムの長さ制限を140文字に
検証内容の複数設定 validates :content,{検証内容１, 検証内容２, …}
・saveメソッドは保存に成功した場合はtrue、失敗した場合はfalseを戻り値として返すようになっている。
・render
別のアクションを経由せずに、直接ビューを表示できる。
Render(“フォルダ名/ファイル名”)のように表示したいビューを設定。
redirect_toと違いそのアクションの中で定義した＠定数をそのままビューで表示できる。
・エラーメッセージ
saveメソッドを呼び出した際にバリデーションに失敗すると、railsでは自動的にエラーメッセージが生成されるようになっている。
@post.errors.full_messagesの中にエラー内容が配列で入る。
・フラッシュ
ページ上に一度だけ表示されるメッセージ。ページを更新したり、別のページを移動すると表示されなくなる。
Flash[:notice] = “表示したい文字列”
感想
レッスン１
今までの言語とは違い、サーバーやブラウザなどインターネットの構造を知っていないといけない。
コマンドによって動く仕組みを学習した。
レッスン２
所要時間２時間
Rubyで学習する内容が出てくるのでそちらを先にやらないとできない。
中間は作業というか、新しいことを学んで実際にそうなっているかの確認が続く。
たくさんのファイルにそれぞれの操作をするので、正直なにをするためにどのファイルでなにをすればいいのかを把握しきれいていない。
ひとつひとつの説明を理解するのに時間がかかる。まだ完全な理解には及んでいない。
レッスン３
所要時間 ２時間２０分
ハッシュとかキーとかをしっかり覚えておかないと説明の意味がわからなくなる。
ちょくちょくRubyで学習したことがでてくる（newメソッドとか）ので、この辺をしっかり理解しておくと、さらに全体像が見えやすくなる。
ここにきてようやくビューとコントローラとルーディングの役割がわかった。
レッスン４
所要時間１時間３０分
railsの仕組みに慣れてきた感じがある。積み重ね学習ゆえ適度にレッスン３の復習にもなってよい。
ただ、転送が増えたので、インターネットのなかでどういう振る舞いをしているのか気になる。これはこのレッスンからではわからない気がする。なにかいい書籍はないか。
レッスン５
所要時間 １時間２０分
暗記事項（新しく学ぶこと）は少な目。
今までことが理解できているとスムーズに進むかんじ。
アクションを経由したり、素通りしたりすることで、アクションが変化するので、その流れを抑えることが重要。クリックするボタンによって流れが変わり、それによって表示されることも異なってくるのでひとつひとつのボタンの意味をはっきりさせておく必要がある。
Progate Ruby学習
内容
レッスン１
・put “ “ 文字列にコンソールに出力。’ ‘ でも可。
・#コメント
・計算 puts 2 + 3 5
puts 2 * 3 6
puts 6 / 2 3
puts 5 % 3 2
・文字列の連結 puts “あ” + “い” あい
・変数に代入
name = “join” 変数nameにjoinを代入
変数名は数字スタートはNG user_nameとふたつはアンダーバーでつなげる
・自分自身に代入の省略
x = x + 10 x += 10
・変数に文字列を代入
puts “#{変数名}” シングルクォーテーションNG
・数字と文字列は足し算できない
age = 19
puts age + “歳です” エラー puts = “#{変数名}歳です” 19歳です
・if文 if 条件式
処理
End
・比較演算子
score = 86
puts score < 90 true
puts score < 30 false
puts score == 86 true
puts score != 86 false
puts score != 50 true
name = “join”
puts name == “join” true
・条件分岐
if 条件式
trueのときの処理
else
falseのときの処理
end
if 条件式１
条件式１がtrueのときの処理
elsif 条件式２
条件式１がfalseで条件式2がtrueのときの処理
else
条件式１も条件式２もfalseのときの処理
End
・かつ &&
・または||
レッスン２
・配列
names = [“taro”, “ziro”, “keiko”]
puts “私の名前は#{names[1]}です” 私の名前はziroです
・each 繰り返し処理の文
配列.each do |変数名|
処理
end
ここの変数名はeach分の中でしか使えない。
each文の外につくった変数は文の中でも使える。
・ハッシュ 複数の要素をまとめて管理する方法
それぞれの値にキーという名前をつけて管理
{“キー１” => 値１, “キー２” => 値２}
{:キー１=> 値１, :キー２=> 値２}ともできる。この書き方をシンボルという。
{キー１: 値１, キー２:値２} シンボルの省略形
・nil なにもないという意味。条件分岐ではfalseと同じ扱いをできる
レッスン３
・メソッド 複数の処理をひとつにまとめたもの。
定義 def メソッド名
処理
end
呼び出し メソッド名
・引数 メソッドに与える追加情報
def メソッド名(引数名1, 引数名2)
引数名1, 2をふくんだ処理
end
メソッド名(引数1に代入する値1, 引数2に代入する値2)
・return 戻り値 呼び出しもとで受け取る処理結果 処理を終了させるのでこれ以降の処理は実行されない。
・キーワード引数 多くなった引数を管理しやすくするため呼び出し元でも名前をつける
def メソッド名(引数1:, 引数2:, 引数3:)
呼び出し メソッド名(引数1:値1, 引数2:値2, 引数3:値3)
レッスン４
・「もの」を生成する仕組み
クラス 設計図 この中でメソッドを定義できる(インスタンスメソッド)
attr_accessorクラスに情報を持たせる
class クラス名
attr_accessor インスタンス変数（シンボル:name）
attr_accessor インスタンス変数（シンボル :price）
def メソッド名(引数)
処理
end
end
インスタンス 設計図をもとにつくった「もの」
変数名= クラス名.new
クラスからインスタンスを生成し、変数に代入
変数名.インスタンス変数= 値
インスタンス変数に値をセット
puts 変数名.インスタンス変数
値を出力
変数名.メソッド名(引数に代入する値)
メソッドの出力
ステップ
クラスを用意→からのインスタンスを生成→からのインスタンスに情報を入れ込む
・self self.インスタンス変数とすることでインスタンス変数を扱える
class クラス名
attr_accessor インスタンス変数（シンボル:name）
attr_accessor インスタンス変数（シンボル :price）
def メソッド名
#{self:インスタンス変数}処理
end
end
変数名= クラス名.new
変数名.インスタンス変数= 値
変数名.メソッド名 インスタンス変数に値が代入された処理結果
・initialize インスタンスを生成した直後に処理を実行できるメソッド
クラス名.newでインスタンスを生成した直後に処理を実行
class クラス名
attr_accessor インスタンス変数（シンボル:name）
attr_accessor インスタンス変数（シンボル :price）
def initialize(引数)
処理
end
end
変数名= クラス名.new(引数) 処理結果
def initialize
self.インスタンス変数=値
end
puts 変数名.インスタンス変数 インスタント変数に値を代入した結果
このメソッドをつかうと、変数名.メソッド名をわざわざ出力しなくてよい
・require クラスを別ファイルに読み込み
クラスの生成と処理のファイルを分ける
require “./ファイル名”
・gets.chomp 入力を受け付ける。このコードが実行されるとコンソールが待機状態になり、エンターキーが押されるまで入力された文字列を変数に代入できる。
gets.chomp.to_i 文字列を数値に変換
レッスン５
・継承 あるクラスをもとにして、新しいクラスをつくること
class 子クラス< 親クラス
子クラスに追加したい処理
end
・オーバーライド 親クラスのメソッドと同じ名前のメソッドを子クラスで定義すると上書きできる。
・super オーバーライドしたメソッドのなかで親クラスと重複する要素を呼び出す
super(name: name, price: price)
・Dateクラス Rubyがあらかじめ用意しているクラスでrequireで読み込むと用意されたクラスが読み込まれる。
require “date”
date1 = Date.new(2014, 7, 31)
puts date1.sunday? false
今日の読みとり date1 = Date.today
・クラスメソッド クラス名に対して呼び出すメソッドDate.today クラス名.メソッド名
def クラス名.メソッド名 で定義できる。
def クラス名.メソッド名
真偽値で返す処理
end
感想
レッスン２
所要時間１時間
さくさく進めました
Javascriptと似ている
最後総合問題があり、理解を確かめられたのがよい
レッスン３
所要時間４０分
作業が少なくて楽
Rnbyはjavascriptとくらべてカッコやないから楽
やるならRubyからの方がいい？
戻り値などの概念がより明確になった
レッスン４
所要時間 ２時間２０分
指示されている意味がよくわからないなか、とりあえず指示通りにコードをつくる
Initializeのメリット？
最後の方は今までの知識を動員しての課題だったため難易度が高かった。
レッスン５
所要時間１時間４０分
レッスン４を理解していないとできない。逆にレッスン４の復習になる。
レッスン４のあとすぐに行うと記憶が新しいので早く終わる。
Progate jQuery学習
内容
初級
・jQueryのつかいかた
$(‘セレクタ’).メソッド(引数);
「$(‘セレクタ’).」でjQueryオブジェクトを作成し（何を）、「メソッド(引数)」でそのjQueryオブジェクトに対してメソッド（機能）を呼び出す（～する）。
セレクタ部分にはタグ名やクラス名などを指定する。指定したタグやクラスにメソッドによった動きがでる。
・hide 要素を隠すメソッド
・fadeOut 要素を隠す際に、徐々に消えていくというアニメーションを追加
$(‘セレクタ’).fadeOut(1500);
要素が消えていく速度を1500ミリ秒(1.5秒)に指定
逆に、fadeInメソッドもある。引数でslow(ゆっくり)に指定できる。
・slideUp 要素を隠す部分が下から上にスライドするアニメーション
$(‘セレクタ’).slideUp1500);
要素が下から上に消えていく速度を1500ミリ秒(1.5秒)に指定
逆に、slideDownメソッドもある。引数でslow(ゆっくり)に指定できる。
・id HTMLでタグに名前をつける方法。classと違い同じ名前のidは一度しか使えない
しかし、ひとつしかない分処理が高速化される。できるだけidを用いるのが好ましい。
CSS、jQueryで呼び出すときは、名前の前に#をつける。（classは.をつけた）
・show 隠れた要素を表示するメソッド
CSS img{display:none;}
jQuery ${‘img’}.show();
・イベント アニメーションを行うタイミングを設定できる
構文には関数を用いる
$(`セレクタ`).イベント名(function(){実行したい処理};)
・click セレクタがクリックされたときに処理を行う。
<div id = “hide-text”>テキストを隠す</div>
<div id = “text”>ボタンをクリックすると文章がかくれます</div>
$(‘#hide-text’).click(function(){
$(‘text’).hide();
});
例 $(‘p’).css(‘color’,’red’); pタグの色を赤に変更
・text HTMLの文章を変える
・html HTMLを変える。textと違うのは文字列ではなくHTMLそのもの
・this $(this)はイベントの中でそのイベントが起こった要素を取得できる
例えば、クリックされた部分だけ赤にするなど。クラス名をセレクタにするとクリックされていない同じクラス名のものまで赤になってしまう。
例 $(‘セレクタ’).click(function{
$(this).メソッド();
$(‘親要素’).hover(function{
$(this).find(‘子孫要素’).メソッド();
・オブジェクトは変数にできる var $div = $(‘div’);
・メソッドチェーン 同じオブジェクトを複数回使う時は、連鎖的にメソッドを繋げることができる
$(‘セレクタ’).メソッド(), メソッド(), メソッド(), . . . .
・find すべての子孫要素から、指定したセレクタをもつ要素を取得できるメソッド
$(‘親要素’).find(‘子孫要素’).メソッド();
・children すべての子要素から、指定したセレクタをもつ要素を取得できるメソッド
・hover マウスを乗せたとき、はすれたときに指定された処理を行うイベント
乗せたとき、外したときとで、引数がふたつ必要
$(‘div’).hover(function(){
マウスを乗せた時の処理
},
function(){
マウスを外したときの処理
}
);
中級
・jQueryの読み込み
<script src=”script.js”></script> で読み込み
</body>の直前に書くと、Webページの表示速度をより早めることができる。
・jQueryの型
$(function(){この中にjQueryを書く});
・モーダル clickイベントなどにもとづいて、表示/非表示が行われる要素
モーダルにするステップ
- モーダルをCSSで非表示にする 表示を消す display:none;
- ログインボタンにclickイベントを設定 クリックしたらアクション
- clickイベントでモーダルを表示 クリックで表示
htmlに箱をつくる（常に表示） → htmlの箱とボタンに名前をつける（複数あるものはclass ひとつのものはid） → cssで箱を消す → scriptでクリックしたら箱が表示されるようにする
・モーダルを消す
html 箱に閉じるマークを設定 → script 閉じるマークをクリックしたら消えるように設定
・アイコンにマウスが乗ったときだけ紹介文を表示
html アイコン、紹介文に名前をつける → css 紹介文を消す → script hoverを設定
・addClass 指定した要素にclassを表示できる
・removeClass 指定した要素からclassを取り除く
CSSにdisplay:none;で文を消しておく → CSSにdisplay:block;のclassをつくる → マウスを乗せたときaddClass(クラスのすり替え) none→block 紹介文が現れる → マウスを外したときremoveClass （blockのクラスが外れる）block→none紹介文消える
・アコーディオン機能 質問をクリックするとその答えがスライドして表示/非表示される
CSSで答えの文を消しておく
→質問に同じclass名をつける
→クリックしたらその文が現れるようにする
※クリックしたら表示 openクラスを設定しておき、クリックしたらopenクラスがついて文が表示される。
同じクラス名をつけているのでクリックされたものとされていないものを差別化するために$(this)を使う。
・hasClass 引数に指定したクラスをオブジェクトがもっていればtrue、いなければfalse
<div class = “answer”> $(‘answer’).hasClass(‘open’); false
<div class = “answer open”> $(‘answer’).hasClass(‘open’); true
openクラス（質問の答え）がついているか？ if文
ついていれば、質問の答えが見えているということなのでopenクラスをはずす
slideUpで文を消す ＋→− textメソッドで書き換え
ついていなければ、質問の答えが見えていないということなので、openクラスをつけ、質問の答えを表示する。
slideDownで文を表示 −→＋ textメソッドで書き換え
※addClass removeClassについて
classのつけ外しなので、最初の表示に反映させたいものはhtmlに記述しておく
クリックなどのアクションで表示を変えたいときは、CSSにつけるclassを設定しておき、クリックでCSSにあるclassが要素の上書きされる。
よって、変化後、上書き後のclassはHTMLには記述しない。
上級
・iQueryオブジェクトにはインデックス番号がある。
<li>インデックス1
<li>インデックス2
<li>インデックス3
$(‘li’)
・eq 指定したインデックス番号の要素のみを取得できるメソッド
$(‘li’).eq(‘取得したい要素のインデックス番号’)
・スライド機能
まずはすべてのスライドをdisplay:none;で見えなくする。
表示したいスライドにactiveと名付けたclassをつけ、CSSでactiveクラスをdisplay:block;にする。
・index 指定のclassをもつインデックスのみを取得できる。
<li>インデックス１
<li class=”active”>インデックス2 取得したいインデックス
<li>インデックス3
$(‘li’).index($(‘.active’)) インデックス２が取得できる
・クリックされた要素の取得
$(‘たくさんの要素’).click(function(){
var index = $(‘たくさんの要素’).index($(this));
});
クリックされた要素を取得し関数indexに代入
var clickedIndex = $('.index-btn').index($(this));
$('.slide').eq(clickedIndex).addClass('active');
index-btnとslideが対応しているので、取得したindex-btnのインデックス番号をslideに適応すると対応したslideが表示される。
ボタンと画像などを一対一対応させたいときは、それぞれ同じclass名をつけて対応させたい順に並べる。
・prev jQueryオブジェクトの同じ階層の要素からひとつ前の要素を取得
・next jQueryオブジェクトの同じ階層の要素からひとつ後の要素を取得
<li>ひとつ前
<li id =”centar”>
<li>ひとつ後
$(‘center’).prev().メソッド ひとつ前
・次へ前へボタン
前へボタンをclick → prevでひとつ前の要素を取得 → 表示
後へボタンをclick → removeでひとつ後の要素を取得 → 表示
ボタン複数の処理
ボタン複数にそれぞれclassを設定し、ifでそのclass名のボタンが押されたら処理、そのclass名のボタンが押されたら処理……とつくる。
clickのなかの関数には同時に起こしたい処理を羅列できる
・これ以上進めないときの前へボタンと後ろへボタンを消す
if slide要素のインデックス番号が０なら、前へボタンを消す
if slide要素のインデックス番号が３なら、後ろへボタンを消す
・関数をまとめる
var slideIndex =
var slideIndex =
→ function toggleChangeBtn(){
var slideIndex =
}
呼び出し toggleChangeBtn()
・attr HTMLの属性をセット
$(‘要素’).attr(‘属性’, ‘名前’) 要素に名前という属性をセット
var 関数名= $(‘要素’).attr(‘属性’) 要素の属性を取得し関数名に代入
・val inputタグに入力された値を取得するメソッド
select属性では選択されたid属性の値が取得される
$(‘select要素’).val(‘value属性’); select要素のvalue属性の値を選択
・submit ボタンやクリックされたときやエンターキーが押されたときにイベントが発生
・空文字列 中身のない文字列。’ ‘で表す。
・カスタムデータ属性 自分で作成できる属性
・animate アニメーションをつけるメソッド
$(‘セレクタ’).animate({‘プロパティ’: ‘値’}, ‘fastなど時間の指示’)
・aタグはページ内のリンクもつくることができる。
<a href = “#id名”> リンク
<div id = “id名“ > リンク先
・scrollTop ページ最上部から値pxの位置まで移動
$(‘html, body’).scrollTop(値)
アニメーションのつけかた
$(‘html, body’).animate({
‘scrollTop’:0
}, ‘slow’)
・offset 要素の表示位置を取得
$(‘セレクタ’).offset(); → {top:180, left:100}
$(‘セレクタ’).offset().top; → 180
感想
初級
HTML CSS Javascriptの応用なので、それらが完了してから行うべき
中級
３つのファイルに渡っているので、作業の流れをつかむのが大切
新規メソッド等の紹介ではなく、作業の流れをおぼえるパートなので
ここをこうしたからこうなると、因果関係を明確に
かなり難しかった
レッスン１、javascriptをかなり理解していないと難しい。というかできない。
上級
所要時間 ５時間
やはり積み重ねの部分(attrやvalの使用頻度が高かった)は理解が完全でない分難しい。
逆に新しい知識を覚えるパートはさくさく進める。
Progate Javascript学習
内容
レッスン１
・console.log(“文字列“); コンソールという画面に文字列にある文字を表示
“文字列”は’文字列’（シングルクォーテーション）でもOK
・// コメント
・console.log(2+3) 計算。コンソールに2+3の結果5が表示される。
−引き算、*掛け算、/割り算、%割り算のあまり
console.log(“2” + “3”) ダブルクォーテーションで囲うと２３と文字列がならんで表示 される。
・let 変数を定義
let name = “TOM” nameという変数にTOMを代入したという意味
console.log(name)でTOMが出力される。
変数をつかうメリット
・同じ値を繰り返しつかえる
・変更に対応しやすい（一度の変更で変数すべてが置き換わる）
・名前をつけられるので値の意味がわかりやすい
名前をつける際の注意点
数字から初めてはいけない let 1name = “TOM” だとエラーが起きる
変数の変更
途中で変数の値を変更できる。その際、letはいらない
既にある変数にある値を足したり、かけたりする
Let number = 3
number = number + 3 5と出力される
短縮系
number += 3 5
number -=3 1
number *=3 9
number /= 3 1
number %=3 0
・const 定数を定義 変数と違い、途中で値を変更することができない
定数をつかうメリット
変更できないので、意図せず値が変わってしまうことがない
・${定数・変数} 文字列の中に定数や変数を入れられる
let name = “TOM”
console.log = (`こんにちは${name}さん`) こんにちはTOMさん
文字列をバッククォートで囲うことに注意
・if 条件式
if (条件式){
処理
} もし条件式が成り立てば処理をする
・true false 真偽値
・比較演算子 a>b a>=b a<b a<=b a === b a!== b
・else else if if文で成り立たなかったときの処理を指定
if(条件式1){
条件式1が成り立った(true)ときの処理
} else if(条件式2){
条件式2が成り立った(true)ときの処理
} else{
条件式1も2も成り立たなかった(false)ときの処理
}
一度trueになるとその下が適応されないので注意
・かつ a && b
・または a || b
・swich文 ifとは違った条件分岐の文
swich(条件の値){
case 値1：
条件の値が値1と同じだった場合の処理
break;
case 値2：
条件の値が値2と同じだった場合の処理
break;
default:
falseのときの処理
break;
}
レッスン２
・while文 繰り返しの処理
・for文 while文をシンプルに
for(変数の定義; 条件式; 変数の更新){
処理
}
・計算式の省略
number += number → number++
number -= number → number—
・forとifの組み合わせ
for(変数の定義; 条件式; 変数の更新){
if(条件式){
trueの処理
}else{
falseの処理
}
}
・配列 複数の値をまとめて管理 [値1, 値2, 値3]
それぞれの値には０から始まるインデックス番号がついている
上書きもできる
let animals =[“dog ”, “cat”, “sheep”];
console.log(animals[0]); dog
console.log(animals[1]); cat
animals[0] = “pig”;
console.log(animals[0]); pig
・配列とfor文
const fruits = [“apple”, “banana”, “orange”];
for(let i = 0; i < 3; i++){
console.log(fruits[i]);
}
・配列.length 配列の要素の数を取得できる
for文の条件式を i < 配列.lengthにできる
・オブジェクト それぞれの値にプロパティ値という名前をつけてまとめて管理
オブジェクトの値を取り出すときは「オブジェクト.プロパティ名」にする
const item = {name:”手裏剣”, price:300};
console.log (item.name); 手裏剣
item.price = 500;
console.log(item.price); 500
・オブジェクトを要素にもつ配列
const item = [
{name:”手裏剣”, price:300},
{name:”忍者刀”, price:1200}
];
console.log(item[1].price) 1200
・オブジェクトの値に配列を用いることもできる
const character = {
name:TOM,
age:15,
food:[“ラーメン”, ”うどん”, ”焼きそば”]
};
レッスン３
・関数 いくつかの処理をまとめたもの
const 関数名 = function(){
まとめたいくつかの処理
}; 関数の定義
関数名(); 関数の呼び出し 処理が実行される
・アロー関数 function() の部分を () >= とシンプルに置き換えられる
const 関数名 = () >={
まとめたいくつかの処理
};
関数名();
・引数 関数の中でつかう値を追加する
const 関数名 = (引数) >={
引数をつかった処理
};
関数名(引数に代入する値); 代入された値をふくんだ処理結果
引数は複数いれることもできる
const 関数名 = (引数1, 引数2) >={
引数1, 2をつかった処理
};
関数名(引数1に代入する値, 引数2に代入する値);
・戻り値 関数に値を与え、その関数の処理によって返ってきた値 returnをつかう
const add = (a, b) =>{
return a + b;
} a, bが与えた値 a+bが戻り値
consu sum = add(1, 3); 関数の呼び出し部分がそのまま戻り値になる 戻り値は4
console.log(sum); 4
関数の中に戻り値を設定することによって、関数の外側に戻り値をつかった処理の文をつくれる。関数が多くの計算をふくんだブラックボックスになり、そこに値を代入すると計算結果が出てくる。
returnにifのような条件式を設定すると、true, falseのような真偽値を返すこともできる
const 関数名= (引数){
return 引数をつかった条件式
};
console.log(関数名(引数に代入する値)); true or false
returnは関数内の処理を終了する性質もある。したがってreturnより後にある処理は実行されない
・スコープ
関数の中で定義した定数は関数の外ではつかえない。つかうとエラーが起こる。
逆に関数の外で定義した定数は、関数のなかで使える。
定数は関数の外での定義、一択か
レッスン４
・オブジェクトの中に関数を入れることもできる
const 定数名= {
プロパティ名: () => {
処理
}
};
定数名.プロパティ名(); 関数の呼び出し
・クラス 似たようなデータを大量につくるときにその設計図になる
class クラス名{
設計図の中身
};
・インスタンス クラスから生成したオブジェクトnewクラス名() とする
class クラス名{
};
const 定数名= インスタンス;
console.log(定数名); クラス名
・コンストラクタ インスタンスを生成するときに実行したい処理や設定を追加する機能
class クラス名{
constructor(){
処理
}
}
const 定数名= インスタンス（new クラス名()） 処理
「this.プロパティ= 値」 これをコンストラクタの中にいれることで生成されたインスタンスにプロパティと値を追加することができる
class クラス名{
constructor(){
this.プロパティ= 値
}
const 定数名= new クラス名() （インスタンス）
console.log(定数名.プロパティ); 値
ひつとの定数にいくつものプロパティをいれられる。
コンストラクタには引数を受け取れる
class クラス名{
constructor(引数1, 引数2){
this.プロパティ1 = 引数1
this.プロパティ2 = 引数2
}
const 定数名= new クラス名(引数1に代入する値, 引数2に代入する値)
console.log(定数名.プロパティ1); 引数1に代入した値
・メソッド クラスにいれる動作
class クラス名{
constructor(引数1, 引数2){
this.プロパティ1 = 引数1
this.プロパティ2 = 引数2
}
メソッド名(){
処理
}
const 定数名= new クラス名(引数1に代入する値, 引数2に代入する値)
定数名.メソッド名 処理
メソッドのなかでコンストラクタのなかのプロパティの値を使いたいときは「this.プロパティ名」としていれこむ
class クラス名{
constructor(引数1, 引数2){
this.プロパティ1 = 引数1
this.プロパティ2 = 引数2
}
メソッド名(){
console.log(“こんにちは${this.プロパティ1}です”)
}
const 定数名= new クラス名(引数1に代入する値, 引数2に代入する値)
定数名.メソッド名 こんにちは[引数１に代入する値]です
メソッド内で「this.メソッド名」とすることで同じクラスの他のメソッドをつかうことができる。
class クラス名(){
メソッド名1(){
}
メソッド名2(){
this.メソッド名1();
}
・継承 既存のクラスの機能をすべて引き継いで新しいクラスを作成すること
class 子クラス（新しいクラス）extends 親クラス（既存のクラス）{
}
継承したクラスにメソッドをいれることもできる
継承したクラスは親クラスと子クラスの両方のメソッドを使える
同じメソッド名の場合、子クラスが上書きされるので子クラスのメソッド優先（オーバーライド）
・コンストラクタのオーバーライドは一行目に「super()」が必要
オーバーライドすると親クラスの引数も消えてしまう。
そのため、super(親クラスの引数) で親クラスの引数を引き続きつかえるようにする。
レッスン５
・ファイルの分割 コードの量が増えるとひとつのファイルでまとめるのが大変になる
・ファイルの関連付け それぞれのファイルに必要な値を渡す
export
export default クラス名 クラスの定義の最後にこれを打つとそのクラスがエクスポートされ他のファイルに値を渡すことができる
import
import インポートしたいクラス名 from “./インポートしたいクラスのあるファイル名”
ファイルの先頭にこれを打つと、エクスポートされたほしい値をインポートできる。
import,exportできるのはクラスだけでなく、どんな値、定数、関数、文字列でもできる
・デフォルトエクスポート
そのファイルがインポートされると自動的にexport default 値 の値がインポートされるため、インポートの値とエクスポートの値が違っていてもよい
エクスポートできる値はひとつのファイルにつきひとつまで
名前付きエクスポート 複数の値をインポートするとき
エクスポート export {値1, 値2};
インポート import {値1, 値2} from “./ファイル名”;
・相対パス “./ファイル名”のこと 記述されているファイルからみた位置関係
./DogData ./ 同じディレクトリの DogData.js を指定
./date/DogData ./data/ 同じディレクトリのdataディレクトリに移動 DogData.js を指定
../class/data ../ ひとつ上の階層に移動class/ classディレクトリに移動data.jsを指定
・パッケージ 誰かがつくった便利なプログラム。自分のコードにインポートできる
パッケージ例 chalkコンソール出力の文字に色をつけられる
import 定数名from “パッケージ名”
chalkパッケージの使い方
console.log(chalk.yellow(“Hello World”));
readline-syncパッケージの使い方 コンソールから値を受け取れる
import readlineSync from “readline-sync”
readlineSync.question(“名前を入力してください:”);
コンソールに入力された値は定数や変数に代入できる
const name = readlineSync.question(“名前を入力してください:”);
console.log(`${name}が入力されました`)
整数を入力してほしいときは readlineSync.questionlit
レッスン６
・push 配列の最後に新しい要素を追加するメソッド
const numbers = [1, 2, 3];
console.log(numbers); [1, 2, 3]
numbers.push(4);
console.log(numbers); [1, 2, 3, 4]
・forEach 配列の中の要素をひとつずつとりだして、すべての要素に繰り返し同じ処理を行うメソッド
配列= [要素1, 要素2, 要素3]
配列.forEach ((引数) >= {処理});
(引数) >= {処理} 部分はアロー関数
引数に要素1が代入され、それによって処理が実行。次は、要素2が…の繰り返し。
配列された要素が順番に関数のブラックボックスに入り、処理や計算された値がそれぞれ出てくる。
・find アロー関数の処理部分に記述した条件に合うひとつ目の要素を配列の中からとりだすメソッド。条件にあった要素が見つかった時点で終了するのでひとつの要素しか取り出せない。要素がオブジェクトの場合もつかえる。
const numbers = [1, 3, 5, 7]
conrt findNumber = numbers.find((number) => {
return number > 3;
});
console.log(findNumber); 結果 5
・filter 記述した条件に合う要素のみを選んで新たに配列をつくるメソッド
findはひとつだけだが、filterはすべてを選べる
find同様、配列がオブジェクトでもつかえる
const numbers = [1, 3, 5, 7]
conrt findNumber = numbers.filter((number) => {
return number > 3;
});
console.log(findNumber); 結果 [5, 7]
・map 配列内のすべての要素に同じ処理を行い、その戻り値から新しい配列をつくるメソッド。find, filter同様、配列のオブジェクト要素にもつかえる。
const numbers = [1, 2, 3]
conrt doubledNumber = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumber); 結果 [2, 4, 6]
forEachと異なるのは、それぞれの値を配列にできるところ
感想
レッスン１
このレッスンは文の基本なので丸暗記しないといけない印象
難しいところは特になかった
レッスン２
条件式によって導かれるtrueとfalseの概念についての理解が大事。
この二つに分かれることで、処理が分岐する。
また、配列をつかってよりスマートな文を書けるようにするのが大事。
かっこが多くなるので、おのおのの処理がどこに属しているのかを常に把握する必要がある。
レッスン３
今回は関数についての学習
値があちこちにいったりきたりするのでそれを追うのが大変
代入した値がどういうルートをとおって処理され表示されるのか、
その道筋を追うのが大切。逆にそれが追えないと理解できていないかもしれない。
レッスン４
所要時間２時間
クラスはプロフィールのテンプレみたいなもの
名前や歳のような値から、値を代入して計算した結果までプロフィールにいれられる
クラスの中には、プロパティと関数を入れられる
定数名、プロパティ名、クラス名ととにかく自分で設定する名前が多いので、それぞれを見失わないように管理するのが大変そう。わかりやすいコードを心掛けなければいけない
レッスンを追うごとに思うが、完全に積み重ね学習なので前回の内容が理解できていないとさらに訳がわからなくなると思う。つくづく、一回一回の理解が大切。できるだけわからないところをそのままにしないほうがいい。
※レッスン４の途中におこった疑問と解決
結構複雑だけど何のためにあるんだ？
オブジェクトの概念がわからない
どちらもいろんな処理を詰め込めるけど、関数とコンストラクタの違いってなんだ？
→ 過去のレポートから確認
コンストラクタはプロパティと値をいれる役割。処理を入れるメソッドと分ける
クラスの役割
ひとつのクラスのなかに、情報をいれるコンストラクタと処理をいれるメソッドをいれられる。つまり、ひとつの定数に情報と処理の両方をしっかり部屋（コンストラクタとメソッド）を分けていれられる。
;が必要なときといらないときの違いって？
${ }はいってる分のバッククォート忘れがち
同じクラスのなかでそのクラス内の他のプロパティやメソッドを使う場合はthisをつける
クラスは値や処理のテンプレートになる
クラスを継承することでテンプレートに値の違った処理を行わせることができる
プロパティ プロフィール項目みたいなもの
レッスン５
所要時間 一時間
レッスン４までとは打って変わって、定数や代入がでてこない
複数ファイルどうしの移動方法や、便利なコードを取り込む方法
コードはほとんど書かない
積み重ねがなくてもいける
定数の設定や代入がない
レッスン６
今回は定数や引数、関数を存分につかったので積み重ねがないと難しかったと思う。
forEach, find, filter, mapとすべて形が同じなので、それぞれ少し形を変えるだけで覚えることが少なかった。
javascriptコースを終えて
基本的にひとつの関数やメソッドなどが紹介され、それについてのみの演習問題を行うかたちなので、無理なくさくさく進むことができた。でも、理解していなくても進んでいけるきらいがある。
基本的に役立てる方法としては、紹介される技術を知り、手を動かしてなんとなくできていることを実感するところまで。
覚えた関数やメソッドの組み合わせてより高度なコードを作成するためには書籍がいいかもしれない。プロゲートはあくまでの紹介された技術を知るにとどまる。
また、道場コースがほしい。頭をつかった演習がないので、理解のアウトプットができない。
あと、HTML、CSSとの組み合わせの機会がなかったのでそれもしたかった。
ただ大事な知識がたくさんあるので、入門編としては超おすすめ
Progate HTML/CSSの学習
内容
初級
HTML
・<h>要素 見出し hが最大、h6が最小
・<p>要素 段落 見出し以外の文
・<--! --> コメント ブラウザに表示されないのでメモとして使用
・aタグ リンク
href属性 リンクの飛ぶ先 <a href = “url”>としてurlにリンクの先のURLを入れる
・<img>要素 画像の表示 <img src=”url”>としてurlに画像のリンクを指定
テキストをのせないので終了タグはいらない
・<li> リスト <ul>で囲むと先頭に・と黒点、<ol>で囲うと連番がつく
・class 要素に名前をつける <h1 class=”名前”>
・<head> ページに関する情報
文字コード <title>ページタイトル
<link rel=”stylesheet” href=”stylesheet.css> CSSの読み込み href属性で読み込むCSSファイルを指定
・<body> 実際にページに載せたい内容
・<div>要素 要素をグループ化
header、main、footerのclass名をもつ３つの<div>要素でレイアウトを分割する
・<span> 囲った文中の一部にCSSを適応可能
・ブロック要素 改行される 親要素の横幅いっぱいに広がる <div> <h> <p>要素など
・インライン要素 改行されない テキスト部分のみ <a> <span>要素など
・<input>要素 一行のテキスト入力を受け取る要素
submitというtype属性を設定するとテキスト入力欄でなく送信ボタンになる
value属性でボタンに表示されるテキストを指定
例 <input type=”submit” value=”保存”>
・<textarea> 複数行のテキスト入力を受け取る要素
・colorプロパティ 色を指定
・/* */ コメント
・font-size 文字の大きさの指定
・font-family フォントの種類を指定
・background-color 背景色の指定
・width height それぞれ要素の横幅、高さの指定
・.クラス名でCSSを指定 （タグにはドットをつけない）
・list-style:none; リスト先頭のマークを消すことができる
・float 指定した要素を横並びにする float:left;で要素が左から順に並ぶ
・padding 要素に余白をつくるpadding:値;で上下左右にその値の大きさの余白ができる
padding-top bottom left rightでそれぞれを指定
padding:上下 左右; padding:上 右 下 左; と省略も可能
・.header-list li このようにすると「header-list」の中の<li>要素にのみCSSを適応可
・float:left;で左寄り、float:right;で右寄り これらの組み合わせで左右に要素を配置可能
・border 要素にボーダー（枠線をつける） boder:太さ 種類(solid) 色;
border-方向 で特定の場所のみ枠線をひける
・margin 要素の外側の余白 （paddingは内側の余白）
・複数のセレクタを「,」で区切ることによってそれらに同じCSSを適用できる
中級
・background-image:url(); 背景画像の指定
・background-size:cover; 一枚の画像で表示範囲を埋めつくす
・opacity 文字の透明度
・letter-spacing 文字の間隔
・display
aタグなどのインライン要素はhigh width上下のmarginを指定できない。
displayプロパティはブロック、インライン、インラインブロック要素を指定できる
インライン要素→インラインブロック要素にする
display:inline-block;
・複数クラスの指定 class = “① ②”
・ボタン設定
・hover カーソルを乗せたときの色を変える
・border-radius角を丸くする
・text-align インライン要素、インラインブロック要素の配置の指定
margin:0 auto containerのような大きい要素を中央に
text-align テキストやボタンなど小さいものを中央に
・Font Awesome アイコンの調達
・rgb 色の指定（三原色）
・rgba指定した色のみを透明に （opacityは全体を透明にする）
・transitionアニメーション。変化の対象や変化にかかる時間を設定。
・line-height 行の高さを設定。行間を調整する際に使用。設定すると文字が中央にくる。
・aタグ インライン要素→ブロック要素
範囲がテキスト部分から親要素全体に広がるのでクリックできる面積が大きくなる。
・font-weight 文字の太さ h1～h6まではbold
・ボックスのwidthやheightをpxでなく%にすると、親要素に対してどれくらいの幅や高さにするか設定できる。
・position:absolute; HTMLの要素を重ねる。基準位置はサイト全体の左上部。
基準としたい親要素にposition:relativeを指定すると、その親要素の左上部が基準になる。position:relativeは要素を本来の位置からずらすためにも使う。
.parent{
position:relative;
}
.child{
position:absolute;
top:;
left:;
}
・box-shadow：水平方向 垂直方向 色； ボックスに影をつくる
・cursorカーソルが要素にのったときカーソルの形を変える
aタグなどは初期状態から設定されている
・active要素がクリックしてあるときのみCSSを適応
セレクタ：active
・box-shadow:none; 影を消す
多くのプロパティはnoneを設定し消すことができる
・position：fixed；指定した要素をつねに画面の同じ位置に固定する
・z-index 要素の重なりの順序を決める
・background-image:url(); 背景画像の指定
・background-size:cover; 一枚の画像で表示範囲を埋めつくす
所要時間
正確に計測していませんでしたが、ほぼ目安時間と同じだったと思います。
難易度
ひとつひとつ指示通りにやれば難しくなかったです。
が、道場コース中級で完全に手がとまり挫折しました。
このレッスンは道場コースができてはじめて人並みにマスターできたといえると思います。
