初めてJavaScriptを勉強した話

おはようございます！

せーです！昨日書こうと思ってたのですが、睡魔に襲われたので、

テックキャンプが始まる前にアウトプットしていこうと思います☺️

昨日からついにJavaScriptの学習に入りました！

名前は聞いたことあったけど実際にどんな言語なのかというところから触れていきます！

まず、JavaScriptはページの遷移無しで画面の表示を切り替えることができるのです！

これにより、ユーザー側はストレスを感じずにアプリを利用することができます！超便利です😄

JavaScriptで使われる変数は３つあります

ver、let、constです

verは再代入、再定義共に可能な変数

letは再定義ができない変数

constは再代入、再定義ができない

使い分ける理由の一つは、チーム開発の際に自分、もしくは他人がコードを見た時にこの変数は今後変更がある変数なのか？それとも変更することのない変数なのか？と疑問を持つと思います。

その時に１からコードを読み解く必要があるためとても非効率です。

さらに、大きな開発であればコード量も増えるためより非効率に😭

そんな時にlet、constを使えば、ひと目で変更のある値なのか、そうでないのかが視覚的に分かるので積極的に使うべきだと思います！

ちなみにverは基本的にはほとんど使わないそうです💦

最後関数に関してざっくりアウトプットしていきます！

関数はJavaScriptで使うメソッドのようなものです。

関数にもいくつか種類があるので紹介していきます☺️

関数宣言、関数式には無名関数、即時関数、アロー関数があります

関数宣言はfunctionを使い、関数を定義します。(rubyのメソッドに似ている）

関数式は巻き上げが適応されません。

無名関数は名前の通り関数名を付けません。その代わりに変数名を定義します。

即時関数はこちらも名前の通り、関数を定義すると呼び出しを行わずに実行できます。

アロー関数はfunctionを省略した代わりに() =>　

この記述をすることで関数を定義します。

関数宣言は関数宣言前に呼び出しをしても問題無く実行できますが、関数式の場合は関数定義前に呼び出しをするとエラーになるという違いがあります。

即時関数、アロー関数はより記述量が少ないので使える場面では積極的に使った方がいいかもしれないですね😊

そんな感じでそろそろテックキャンプの朝礼の時間なので、失礼します。

また新たな気づきがあればすぐにアウトプットしていきます！

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

renderメソッドとは？の話

こんにちは！せーです！

テックキャンプ16日目　残り54日です😄

今日はrederメソッドについて学んだのでアウトプットしていきます！

renderメソッドとは、表示させたいビューを表示させることができるメソッドです😄

この時感じた疑問がredirect_toで良くない？

そう思い調べてみました！

ざっくり説明すると

redirect_toはHTTPリクエストをして新たなインスタンスを使う

renderはリクエストはせず、表示させたいビューをそのまま表示（既存のインスタンスが使われる）

これだけだとわかりにくいと思うので、実際の例を参考にしていきたいと思います☺️

rederはデータの取得や表示の際に使われることが多いみたいです！

redirect_toはデータの削除、更新、追加などに使われます！

それぞれの処理の流れをまとめます！

・render　　　　　：　controller　→　view
・redirect_to　　　：　controller　→　URL　→　route　→　controller　→　view

データの追加、削除、更新などはredirect_toを使いましょう！

それ以外は処理の数が少ないrenderを使った方が最適化されるかなと思いました☺️

最近は12時間学習にも慣れてきたので、読書時間をもっと取りたいなと思っています😄

これからはプログラミングだけでなく読書感想やテックキャンプってどうなの？っていう事まで記事にしていきますね！

それでは、また次回！

不可視文字に半日持ってかれた話

こんにちは！

せーです！テックキャンプ15日目！

rails、Git hubを使いながらの初めてのアプリ開発に取り組んでます！

と言ってもまだまだオリジナルを作れるレベルでは無いのです💦

早速ですが、タイトルににもありますが今日は「不可視文字のお話」

みなさん不可視文字って知っていますか？

フォーマット文字とも呼ばれるみたいですが、簡単に言うとtabキーやスペースキーなどを使った時に不可視文字という目には見えない特殊な文字が挿入されてしまうことなんです💦

webのトップページの見た目を作っていた時に不可視文字に出会いました☺️

justify-content: space-betweenを使ったその時、全く問題ないはずなのに左端の文字が端っこに寄らないのです！！

検証ツールなどを使って確認しましたが他の要素に問題はなかったんです💦

そこでいろいろ調べていたら不可視文字の存在を知り、もしや？

と思い片っ端からスペースを消して行ったらレイアウト崩れが直りました！

不可視文字を見つけるツールなどもあるみたいですが、精度が100％とはいかないみたいなので、最終的には今回の僕のようにスペースを片っ端から消していく作戦を試してみて下さい！

では、今日は寝不足なのでこの辺で💤

Capybara使って結合テストの話

こんばんはー！！

せーです！テックキャンプ13日目！

13日目と言っても今日はオフなのでテックキャンプとしての学習はないです😅

しかし、勉強の習慣がついて来たのか気づけばプログラミングしてました笑

そこで今日は最近苦戦してるRSpec、テストコードの結合テストのアウトプットをしようと思います☺️

Capybaraと言うgemを使い結合テストしていきます！

まず最初にテストコードにはざっくり２種類に分けられますね！

部分テストと結合テストです☺️

部分テスト→はコントローラーやモデルが各々が正しい挙動をするかのテスト

結合テスト→実際のユーザーが行う動きを想定して正しい挙動をするかのテスト

結合テストをする際にも最初に正常系と異常系に大別してそれぞれ詳しく深掘りしていくのですが、部分テストに比べて記述量も増えるので難しいですがこればっかりはもう慣れしかないかなと💦

実際に挑戦してみてこの結合テストは「実際のユーザーの動きを想定しながらやる」ことが大切だなと感じました！

例えばログイン機能のテストであれば

トップページに移動する

↓

ログインボタンがある

↓

新規登録ページに移動する

↓

以下割愛

このよくある流れをコードで表していくのですが、テストコードに使うコードの種類をある程度知っておかないと全く歯が立たないので、最近覚えたてのコードたちを紹介し抵抗と思います😄

visit→ページに実際に移動すること(getと似ていますが、リクエストのため明確に違いがあります）

fill_in→実際に文字列をフォームに入力できる

have-link→リンクの存在を確認する

find().click→実際のクリックを再現できる

find_link().click→a要素で作られるリンクをクリック

hover→特定の要素にカーソルを合わせた時の動作

今日学んだのはこんな感じです！

こうやってみてみると結構単語の意味が分かればなんとなく使えそうな感じがしました！

これらを駆使して動作テストをしていくのですが、正直まだまだです😭

でも地道にやればきっとできるはず！！

で、今日伝えたかったのは分からないコードとかあったら積極的に英語の意味を調べましょうってことです笑

僕はずっとそのまま覚えようとしていたのですが、自分で言葉の意味を調べるようにしたらグッとコードの理解できるスピードが上がったきがしました！

そんな感じで、次回もアウトプットしていきます！

RSpecについて学んだ話

こんばんは！せーです！

テックキャンプ12日目！

railsの基礎的な学習がひと段落したところで、「RSpec」について

勉強したのでアウトプットします！

改めてエンジニアはアプリ作成してるだけじゃないんだなと実感☺️

今回はざっくりRSpecの説明になります！

早速ですがRSpecとはテストコードを作るときに使うフレームワークです！

テストコードとはアプリを開発したら、その挙動をコードを使ってテストしていくことですね！

テストなんて簡単だろうと思っていましたが、知らない単語が次々と出てきて今日は

ひたすら混乱してました泣

で、なんで手動でやらないの？と思ったのですが、仕様が変わった時に変更点のみを編集することができたり、どんなテストをしたか情報が残ったりと色んなメリットがあるんです☺️

まずテストコードには

「正常系と異常系」の二つに分けることができます！

正常系→新規登録がうまくいった時

異常系→新規登録がうまくいかなかった時

でそれをさらに具体的に

保存ができる時→nameとtextがあれば保存できる

保存できない時→textがないと保存できない

このようにして細分化して実際にインスタンスを生成して

意図した挙動の条件式をコーディングして検証するって言う大まかな流れです😄

テスティングをするにはある程度の言語の意味が分からないとできないので主要なもののみ紹介して今日は寝ようと思います笑

describe - どんな機能をテストしてるのか

it - 具体的な条件式のようなもの

expect(X).to eq Y - 期待値と実際の値の比較！よく出るので大きく笑

マッチャ - 上のeqの部分をマッチャと言って実際に上の条件式の検証を行ってます！

マッチャはいろいろあるので調べてみてください！

他にもincludeとかbuildなどたくさん出てきますが疲れたので割愛泣

そんなこんなでこれらを使い必要な条件式を書き検証するってのがテストコードです！

新人一年目や駆け出しエンジニアはまずこの作業をやることが多いので、しっかり身に付けたいものです！！

もう少し知識を蓄えたらもう少し深掘りして行こうかなと思います！

では、今日も疲れたのでおやすみなさい💤

NoMethodError in Tweets#indexよくあるエラーの話

こんにちは〜☺️

せーです！テックキャンプ11日目、残り60日？ぐらいです（適当）

今日もエラーにぶち当たったのでその時のお話をしようと思います！

今日はrailsを使って画像投稿アプリを作成しました！

毎日覚えることしか無いので刺激的ですね😄

そんなこんなで早速ですがこちら！

NoMethodError in Tweets#index

エラー来ましたね😅

しかし今回はこのエラーの意味はなんとなく理解できました！

「tweetsコントローラーのindexアクションが定義されてないよ！」的な？？

なのですぐにコントローラーの確認！！

でも特に問題なかったんですよね💦

で結局またメンターさんに聞いちゃいました笑

（いつもありがとうございます🙇‍♂️）

そしたらコントローラーだけでなくそれに付随するビューやモデル、ルーティングまで確認してみてください！

とご指摘を頂きました！

そんでモデルを確認したところアソシエーションの定義を間違えていました😭

なので今回学んだことはエラーに記載されてる部分に関係してそうな部分は全部確認しようです！

①エラー文が指している部分を確認

②それに関連するビュー、モデル、ルーティングを確認

初心者にありがちだと思うのですが、「ここは絶対間違いない！」

みたいな謎の自信は捨ててとにかく自分を疑うことを忘れずに！！

こんな感じで今日は11時間頑張りました☺️

では明日も楽しんでいきましょう！

UnknownAttributeErrorに翻弄された話

こんにちは！せーです！

人生変えるためにテックキャンプに通って10日目です☺️

今日はタイトルにもある・・・

UnknownAttributeError

についてお話しします！

10日目になり、railsを使って簡単なアプリケーションの作成に入ったのですが

サインアップ機能実装のテストをしたら突然出てきたこの文字😭

でもよく読むと、「このテーブルにはこんなカラム定義されてないよ！」

みたいな感じだったのでデータベースを確認したが異常無しでした😭

前後のコードのミスやルーティング、コントローラーも確認したけど、、、

異常無し

そんなこんなでメンターさんにSOSしました！笑

テックキャンプではいつでもメンターさんに質問ができ、夜10時まで対応してくれます！

本当に感謝しかありません泣

話を戻しますが、

メンターさん「サーバーは再起動しました？」

僕「あ。。。いえ」

そうなんです、テーブルやカラムを追加する際にマイグレーションファイルをいじると思うのですが、この作業をした後は、必ずサーバーを再起動した方が良いみたいです！

テーブルに反映されないことがあるみたいなので☺️

なのでこのようなエラーが出た時は

①まずテーブルの中身を確認

②サーバー再起動

この二つを確認してみてください！

それでも治らなかったら僕にはよくわかりません！笑

って感じで今日も12時間学習で疲れたのでお休みなさい💤