Ajaxがきつい

こんばんは。今日もすでに日付は超えてまーす。

昨日のやつも含めて今日もアウトプットという名の雑談をしたいと思います。

ほんとはいかにも情報発信！みたいなやつがやりたいんですけどね、時間もなければまだまだ語れるほど知識もないのでご勘弁くださいm(._.)m

まず昨日のやつを簡単にまとめますねー。

こんな配列を用意しました。

んでフォームに文字を入れて検索ボタンを押したらヒットする単語が出てくるっていう簡単なアプリケーションを作るトレーニングというかなんというか。

一度に全て作り上げるのは難しいんで、少しづつ付け加えて行きました。

まずは入力された単語と配列の中身に一緒のものがあれば表示する、

一致しないものがあれば「ありません」と表示する、

入力しかけの文字でも検索できるようにする（前方一致）、

スペースで区切り、二つの複数検索できるようにする、

ただのシフトキーでも処理が発生するので文字が入力された時だけ処理が行われるようにする、

こういう感じでやっていって最終的に仕上げます。

模範解答を見てどの行は何をしているってのはわかるんですがいざこれを書くとなるとまだ時間がかかってしまうので何回か繰り返さないとダメですね。

そして今日やったのは主にjQueryなんですが、入力フォームに入力された値をval()で取ってきてアラートで表示させたりしました。

find( )、val( )、prop( )、preventDefault( )、thisが出てきました。

そして今日最大の敵、Ajax！

同期通信ち非同期通信が何なのかっていうところから調べました。

非同期通信っていうのは完全にページが切り替わる移動じゃなくて、地図アプリとかで操作しながら足りない部分の地図情報を得たり更新したりする感じのイメージ。

HTTPリクエストっていうのが出てきてその中身をサラーっと確認したり。JSONだとかjqXHRオブジェクトだとか。

あ、でも確実に覚えたのはdone( )には非同期通信が成功した時、fail( )は失敗したときの条件を書くってこと。

このJSとjQueryのところの確認テストをやって全然分からないかなとも思ったんですが以外にも手は動いた方なのでもう少しじっくりやりたいです。

明日は区役所と職安行って来ないとダメなのでスクールにはいけませんが、空き時間作って復習は必ずしようとおもいます。

めっちゃ眠い、おやすみなさい。

関数

こんばんは、気づいたらもう日付が変わってます。

今日は丸一日jQueryをやりました。

foodっていう配列を用意してその中に50個くらい料理名を入れてそれを検索する、フォームに入力して検索ボタンを押してもしその料理名が配列の中に入ってれば料理名を表示する、なければ「ありません」って表示する、っていう感じのアプリケーションを作ってみるカリキュラムでした。

正直、課題形式で出されたんですが全く分からず。

答えを見て流れを追う、というおなじみの作業になりました。

コード量としてはそんなに無いんですが少しづつ機能を追加していったので書いちゃあ消しちゃあの繰り返し。filter()、split()、join()などなど。この間つまづいた正規表現も出てきました。

本当は今日のブログで色々アウトプットしたいんですがまだあんまり分かってないってのと、眠いってので今日はこれで終わります。

おい！！！！

今日やった分は明日にでも詳しくやれたらいいなと考えてるので期待しないで待ってください。

おやすみなさい。

JavaScriptとjQuery

こんばんは、今日も朝から晩までプロクラミングの勉強でした。

主にやったのは正規表現、JavaScriptとjQueryです。

まず正規表現。正規表現っていうのは、文字列にある特定の文字や単語が含まれているかどうか確認したり、指定した文字を取り除いたりすることです。例えばハイフン付きで入力された郵便番号からハイフンを取り除いてデータベースに保存したり、＠が入ったちゃんとしたメールアドレスかどうか確かめたり…。

正規表現で重要なのがreplaceメソッドとmatchメソッド。replaceメソッドは文字を置き換えるメソッドです。対してmatchメソッドその名の通りマッチングする文字を探してくれるメソッドです。

郵便番号や電話番号のハイフンを取り除くのはreplaceメソッドを使ってハイフンを「　」（スペース、空白）に置き換えることで実現できます。

matchメソッドはパスワードに英数字や文字数の制限をつけるときに使われますね。メールアドレスのドメイン部分だけ持ってきてくれることもできます。

ではどうやるのかというと、

・[a-z]　…aからzまでのどれか一つとマッチ

・\d　…数字とマッチ

・{n, m}　…少なくともn回、多くてもm回はマッチ

・.（ドット）　…どの一文字にもマッチ

・+　…直前の一文字の一回以上繰り返しにマッチ

・g　…グローバルマッチ、文字列にある全ての指定文字にマッチ

・i　…大文字小文字を区別しません

こういったものを組み合わせて使います。

正直、まだ私はわかっていません。もちろん一つ一つの意味はわかるのですが、一度組み合わさると？？？となってしまいます。言われてみるとわかるんですけどねぇ。また明日にでも復習します。本当に意味わからんかった。

意味わからんかったと言えばJavaScriptとjQuery。

そもそも書き方がわからずただの記号の羅列にしか見なくてカリキュラムにも書いてなくてこの文字が一体何を指しているのかわからずかなり時間を無駄にしてしまいました。さすがにやばいと思ったのでProgateをやりカリキュラムをやってみると「わかる！」となったのでProgateさまさまです。どちらかというとわかるっていうよりか何を意味しているのかがわかるようになりました。

jQueryでfunctionっていうのがいっぱい出てきて、最初にfunctionって書いてるのにどうしてまた関数ごとにfunctionって書くの？と不思議でスクールの人に聞いたところ、どうやら最初に書くfunctionと途中いっぱい出てくるfunctionは同じfunctionでも中身は違うらしいんです。最初のfunctionは即時変数ってやつでした。結局たどり着いた答えがfunctionはスイッチだ、ということです。

これがないと動かないし。

jQueryはRubyとかと違ってすぐ反映されて目に見えるからそれはそれで嬉しいですよね。

今の所手を出したのはJavaScriptとjQueryですが、RubyやRailsに慣れてしまっているのかすごく見づらく難しく感じました。しょっぱなからこれだと先が心配です。ただの「慣れ」で終わってくれればいいんですけど。

とりあえず明日は午前中にProgateをやって、あとはノート取りながらカリキュラムを進めていきます。最近のモットーは「じーっと見てるくらいなら手を動かして書く！」です。

大丈夫！私は向上心の塊！

それではおやすみなさい、また明日。

ついに応用編突入！

こんばんは、相変わらず私です。

早速ですがテストに合格して応用編に入りました！

ただ昨日受けたテストでは不合格だったので今日再試験を受けての合格です。どうやら昨日のテストで私がエラー問題の解答方法を少し勘違いしてたみたいで解決方法は合ってるけど原因が何かを文章で書いてないから三角になったみたいでした。別に答えが合ってるなら何も心配することは無いはず！すぐ試験用意できるようだったのですぐ受けて合格です。

しかしながら間違えた問題もあるのでそこは確実に潰していきます。

今日のアウトプット項目はこちら！

・first_or_initializeメソッド

・スクレイピングの手順

・box-sizing: border-box;

・letter-spacing

・border-radius

・text-decoration:none;

・背景画像の設定

・エンジニアとして一番重要な「検索力」

・jQuery

・Unicorn

お！目新しい感じがワクワクしますね(・∀・)

・first_or_initializeメソッド

まずスクレイピングとは外部のサイトから情報を取ってくるっていうやつなんですけど、このメソッドはすごく重要です。このメソッドはwhereメソッドと一緒に使うことでwhereで指定した条件のレコードがあればそのレコードを返り値として、もし無ければ新しくインスタンスを作ってくれます。具体的にどういうことかというと、最初にスクレイピングをしてレコードを取得しますよね？そのあとに新しくレコードを追加する時にもう一度スクレイピングしちゃうと前回に得たレコードとは別に新しく丸々レコードができちゃうんです。同じレコードが2つある状況ですね。それを防いでくれるんです。こいつは！重複防止に使います。一つ重要なのはこのメソッドだけではデータベースに保存まではしれくれないんです。だから.saveをつけて保存は確実にしましょう。

・スクレイピングの手順

スクレイピングをするにあたって流れを整理します。頭ではスムーズに考えられてもいざコードを書くときはちょっとやることが多いです。例えばあるページのなかのあるリンク先の2ページ目の情報が欲しいってなったらグンとややこしくなります。

まずスクレイピングをするためにMechanizeクラスのインスタンスを生成。これはもう必須。取ってきた情報を入れるカゴ用意したよって感じで受け取ってください。

そしたらそのインスタンスにどのURLから情報を取ってきていいか指定して変数にいれる。

そのURL内の欲しい情報をHTMLタグごと取得。

あとはそれぞれメソッドを使って、文字だけを取り出すとか、URLを取り出すとか…

一度紙か何かに書いて整理してからあるのがいいかな。

・box-sizing: border-box;

これはCSSです。ある要素（箱）の内側に余白を取りたいときに使います。paddingでしてすると余白の分大きくなってしまいます。要素そのものの大きさを変えたく無いときに使えます。

・letter-spacing

文字を書いたとき間隔を調節するプロパティです。

・border-radius

これは箱の角を丸っこくしてくれるプロパティです。

・text-decoration:none;

文字を装飾するのに使います。今回はリンク部分に下線入るのを消すためのnoneとしました。

・背景画像の設定

いろいろやりました。画像の大きさはbackground-sizeで指定します。auto、contain、cover、長さ（px）の指定や%で指定します。

・エンジニアとして一番重要な「検索力」

もう応用編に入ってしまったので今まで基礎編でしていたように質問はできません。なぜなら毎回教えてくれる人が近くにいるとは限らず一人でも問題を解決できるようにしないといけないからです。自分の欲しい情報を確実に素早く手に入れるには、キーワードを絞り精度が高い情報を選び抜く力が無いといけません。１、２年前の情報ですら古い情報で使えないってザラにありますからね。なるべくエンジニア専門のサイトを利用した方が情報の信頼性はあがります。これらを存分に駆使して調べます。

・jQuery

javascriptを使いやすくしたもの。様々なブラウザに対応しててページに「動き」をつけることができるのが特徴です。ただ10年ほど前にできたものなので最近のウェブサイトの複雑化により手に負えないって言われていて人気は下降気味です。

・Unicorn

サーバーとRubyアプリケーションを繋ぐ役割をしてくれているRackwebサーバーと呼ばれるものです。Nginxという優秀なサーバーとセットにして扱われることが多々あります。

基礎編をやってたときも薄々感じてはいましたが、可読性って本当に大事。たった１行でめちゃくちゃ分かりやすくなったり。「コードで伝える」これ重視で応用編を進みます！

それではおやすみなさい☆

テスト終了！けども…

こんばんワシントーーーン！

お気付きですか？そう！地味にブログのテーマ変えました。

今日はいよいよテストの日。HTML、CSS、Ruby、Railsの基本的な流れやエラー解決問題、簡単なプログラムが組めるかとか、知識的な事とか。これを突破しないことには応用カリキュラムに進めません。応用編ではチーム開発だとかもあるので、付け焼き刃の知識とかでチームメンバーの足を引っ張りたくないんですよね(*_*)

かと言ってテスト対策に力を入れたところで実力が付いたと言えるかどうかってのもあってテストもカリキュラムも手は抜きたく無かったんですよ。…と言いつつもカリキュラムがまだ終わってないところがあるんですけどね（笑）明日と明後日でコツコツやりがら終わらせます。

肝心のテストの結果がどうなったかと言うと！なんと！

まだわーかりーませーーん！！！

今から採点するっていう連絡は晩飯時にあったんですけど、思ったより時間がかかっているのか忘れているのか。こっちはずっとソワソワしててカリキュラムが思うように進めないんだyo！７５点以上が合格ラインで、一応激甘自己採点で８４点だったけど、ほんとに自分に甘く他人に厳しく、のウルトラミラクルクルファイナルアルティメットスウィート（元ネタはわーすたのうるチョコ）な自分が一番可愛いんだよ採点なんでFGK（不合格）の可能性はアリ。

心配だったエラー問題は全部解けたつもりなので合格してることを祈ってます。

今回のテストではっきり分かったのが「CSS勉強してなさすぎぃぃぃ！」ってことです。

昔ちょっとかじってたことがあるのと、Railsのエラー問題が配点高かったってのと、Railsがおもしろくて深く掘り下げすぎてしまったってので、サササーっと調子こきながらやってしまったのでそこがモロに分かっちゃいました。難しくは無いはずなのでCSSの強化は忘れずにしていきます。

午前中には結果がでるといいな…

それではいつもより早めにおやすみなさい。

明日はいっぱいアウトプットできるといいな(｀・∀・´)

エラー！エラー！エラー！

こんばんは、おやすみなさい。

今めっちゃ眠いんです。だから大したことは書けないけど何かは書きたいと思います。

今日やったことはRubyで簡単なプログラムを作ってターミナルで動くか確かめてみるってのと、Railsのエラー問題のドリルです。一番手こずったのはエラー問題ですね。

私がやってるレベルのRailsのエラーって大体パターンが決まってて、エラー画面にも書いてる（もちろん英語で）からちゃんと読めばエラーの解決はできる訳ですよ。

endのつけ忘れだとか、スペルミスだとか、ルーティングエラーだとか、定義されてないメソッド呼び出してたりだとか。お決まりのエラーだったりもあります。これが解けないと流れが理解できてるとは言えないんだなぁ、これが。

今回はカリキュラムとは別にエラー問題の勉強会ってのをやってくれてみんなで意見出しながら自分がどこまで理解できてるか、みんながどこを見てエラー解決してるのとかすごく参考になりました。

中にはクッソ意地悪な問題とかあっていちゃもんつけまくりでしたけど大方問題は解けたし、流れも理解できないことは無かったので自分としては合格点をあげられるかなと勝手に思ってます。ただ答えは何となく見てわかるけどそれがどんな道筋で引っ張ってきてるのかとかまだまだ曖昧なところもありました。

明日はいよいよ本テストなので朝はじっくり復習して挑みます！

話変わるんですけど、最近ターミナルでbundle installする時とかrake db:migrateだったかな？する時にエラー出まくってなかなか勉強がスムーズに行ってなかったんですよ。RubyだかRailsだかのバージョンが違うとかでねぇ。今日スクールの中でもかなり詳しい人にいろいろやってもらって原因と対処法を教えてもらいました。っつっても次同じエラー出たところで一人じゃ出来んですけどね（笑）

私のパソコンにはRailsがバージョン違いで３つ入ってるんですけど、どうやらその一つがぶっ壊れてるらしくて、gitで落としたファイルがそのぶっ壊れてるバージョンでしか使えないからファイルの方をバージョン上げてもできなかったようです。

原因はおそらくインストールする時になんかミスってるらしくてこうなったみたい。ただ私と同じようなエラーの人が他にもいて、おそらくカリキュラムが更新されてそこに載ってたやり方でやったらそうなったっぽいです。それがカリキュラムがおかしい（わかりにくい）のか単に我々がおかしかったのかはまだ分からないです。

ま、結局どうしたかっていうとGemFileにぶっ壊れたバージョンのRailsに一番近い安定したRailsを持ってきてください、みたいなコマンドを書いてbundle updateしてbundle installしたらイケました。詳しいやり方は知らないけど大体こんな感じ。

根本的な解決策は、そのぶっ壊れたバージョンのRailsをアンインストールしてもう一回入れ直すのがいいらしいです。ただそのやり方がマイナーすぎてネットでいくらか探しても載ってなかったんですね。もっと詳しく探せば見つけられると思うんですけど。今日対応してくれたなかなか表に出てこないめっちゃ詳しい人も珍しいって言ってて「ははー、やべぇな」って反省。ただ自分で開発する時は新しいバージョンですればいいし、やり方も他にあるので大げさに捉えなくてもいいって。ちゃんと原因とかどうやればいいかとかが分かったのそれはそれで良しとしましょう！

こういうのも勉強しなきゃなって、したいなって思った次第です。

それでは、おやすみなさい。

Railsメインの復習

こんばんは、奥さん。今日もロマンティックなシャングリラ。

（君の瞳に乾杯、みたいなことを言ってみたかっただけなんです。）

今日は松屋で朝ごはん食べて、お昼はコンビニおにぎり食べながらパソコンとにらめっこして、夜は丸亀でぶっかけうどん。この流れが一番コスパが良い。

そして相変わらず埼京線は遅延。もうこれが通常なんですね。自分は朝はそんなに時間に縛られてる訳じゃないからいいけど、サラリーマンの人とか大変ですね。

はい、では世間話もそこそこにアウトプットいってみましょう！

今日も昨日の続きでツイッターの簡易版アプリケーションを作りました。今までももしかしたら書いてたワードがあるかもしれませんが我慢してください。なぜならこのブログは個人的なアウトプットようなので。そして私はすぐ忘れるんです、だから、ね？

・MVC（エムブイシー）

これはいわずもがなRailsでは基本のやつですね。コントローラ、モデル、ビューの流れです。ルーティングからきたリクエストにコントローラが反応してアクションを呼び出す→アクションの中でモデルとあれやこれやしてデータベースからデータを引っ張ってくる→引っ張ってきたデータをビューに渡してページに表示する！これは大丈夫。だんだん覚えてきてる！

・params（パラムス）

これはもう忘れもしないparamsちゃん。ハッシュ形式のデータでビューから送られた情報（パス、入力されたフォームの中身だとか）が入ってるやつ！最初これが何なのか？どこにあるのか？全然ピンと来なくてスクールのお兄さんが頭ぐしゃぐしゃするほどに聞きまくって困らせた、そうあの思い出のparams。別のお兄さんはparamsはビューから始まって、ルーティング、そしてコントローラで情報を落とす、って考えてるって言ってました。確かにそのほうがしっくりくるかも。

・ストロングパラメータ

paramsから情報を受け取るときに自分が指定した情報以外を受け取らないようにするための、…やつ！まだ具体的にイメージがわかないけど、たまーに悪い奴が変な情報とかを入れるからそれを防ぐためとかなんとか。備えあれば憂いなしって言いますもんね！（違う？）

・binding.pry（バインディングプライ）

こいつはpry-railsっていう Gem（ジェム）のデバッグツールの一部。プログラムにストップかけてくれるんです。こいつを書いたら、書いたところでプログラムが中断してくれます。だいたいこいつでストップかけてparams出して（コンソールでparamsって打ったら中身見れる）使うのがほとんどですね。

・ページネーション

これはWebサイトの下の方とかに次ページとか番号でページ振ってあるあれです。ページネーションしなかったら1ページがめっちゃ長いですしね。Railsでは<%= pagination %>ってやったら表示してくれるkaminariっていうGemがあるんですよ。こういう便利なGemとかがいっぱいあるからRails人気なのかな。

・devise（デバイス）

これも大事なお助けアイテムのGemです。こいつはログイン機能を一式用意してくれるめちゃくちゃ有能なやつです。一から作るってなるともう何をどうすればいいのやら。Railsの良さの代表的なものだと思ってます！

・マイグレーションファイル

コマンドを使ってモデルを作るときに生成されます。こいつを編集してカラムを追加したり消したりします。大事なのは編集したら必ずrake db:migrateで実行すること！これやらないと意味ない！他にも消しちゃダメだとか、一つのファイルで消したり追加したりできないとか諸々…

・user_signed_in?

もう見たまんまです。ifとかと一緒に使って「もしユーザーがログインしてるなら…」って感じで、ログインしてる時だけ〇〇できて、してないときは「ログインしてください」って出るようにするってのもできます。

・n+1問題

たしかデータベースからデータ取り出すときにSQLってのを発行するらしく、それが取り出すデータの分だけ発行するから処理が大変だよね、だからいちいち発行せずまとめますよー的なことだと。例えるとA地点からB地点に100個の物を移動させるときに、1往復してB地点まで持って行ってさらにまた1往復してさっき持ってった物の詳細を聞きに行く、だったら持って来るときについでに詳細聞けばよくない？的な感じかな。1個や2個ならいいけど1億2億だったらやばい、マジ卍！私もはっきりとは断言できないけどこんなもんって思ってる。

・resourcesメソッド

ルーティング書くときに代表的な7つをまとめて一気に書けるようにしてくれてます。onlyやexceptを使って限定することもできます。

・ネスト

ルーティングの入れ子構造のこと。例えばインスタで写真アップしたらコメント来るやん？コメントはただコメントがあるって訳じゃなくて最初にアップされた写真ありきのコメントやん？だから大元のルーティングの中に一緒に書いて関連付けよう、な感じのイメージです。うん、だいたい合ってる！

・部分テンプレート

ビューの一部（同じようなことを繰り返してるとか）をもう一個別のファイル作って分けてコード見やすくしよう的なこと。他にも編集する時に手間が少なくて済むとかいうメリットもある。

ほんとは今日エラー問題のドリルを解く予定だったんですけど私のパソコンにエラーが出て問題が解けない事態に( ；∀；)明日の朝にまた出直します。

あとRailsについて明日は特別にミニ勉強会をやってくれるそうなのでそこでちょっと鍛えてもらおうかと思ってます。自分の理解度を知れるチャンス！

明日は金曜日です。私には関係ないけど土日休みのみなさん、ふんばりどころですよ！

おやすみなさーい（＾◇＾）