初めに 実務中にuseEffectを使用してコードを記述したのですが、コードレビュー時にuseEffectをなるべく使わないでほしいとのことで依頼された。 私自身useEffect自体そこまで理解していなかったし、なぜ使わないでほしいかわからなかったので、調べてまとめ…

初めに 実務中に躓いた部分を中心にアウトプットして学習効率を上げてくためにブログを書きます useMemoとは Reactにおけるパフォーマンスの最適化フックの１つ 無駄な再計算や再レンダリングを防ぐためのもの function Example() { console.log("レンダーさ…

初めに Reactのチュートリアルを進める中で、「これは良いパターンだ！」と気づいたコードがありました。 三項演算子を変数に抽出するだけで、JSXの見通しが驚くほど良くなります。 同じように学習中の方の参考になればと思い、記事にまとめました。 参考コ…

初めに 学習中に何度も検索や調べることをアウトプットすることで知識の定着を図ります。 普通のオブジェクトを分割代入で取り出す 通常の書き方 const person = { name: "太郎", age: 25, city: "東京" }; // 普通の取り出し方 const name = person.name; /…

初めに Udemyのガチで学びたい人のためのJavaScriptメカニズム を学習しています。 関連問題で間違い箇所を復習を兼ねてアウトプットしていいます。 問題 const person = { name: "Tom", hello: function() { setTimeout(function() { console.log("Hello " …

初めに 初学者である私が、JavaScript Primer - 迷わないための入門書を読んでの感想やわかったこと、難しかったことなどを記述していこうと思います。 良かったこと 体系的に学べる Javascriptの基礎（配列操作・イベントリスナー・関数定義など）を学び、…

初めに 学習中にうまく言語化できなかった部分について自分が納得いくまで考えて言語化したものを備忘録がてらに書いていきます。 名前空間インポートとは あるモジュールから名前付きエクスポートされている機能を１つにまとめてオブジェクトにしてそれをイ…

初めに javascript primerを読んで躓いた部分をアウトプットしていこうと思います。 非同期処理を同期処理のように書く Async functionやawaitを使用することで非同期処理を同期処理のように実行順に処理を行うことができる。 デメリット 非同期処理を同期処…

初めに JavaScriptで複数のボタンのテキストを変更しようしたときに上手く変更できない原因がHTMLCollectionとtextContentの理解不足によるものだったのでアウトプットすることによって整理していこうと思います。 HTML Collectionとは 複数のHTML要素をまと…

初めに 今回RSpecのシステムスペックにてフォーム入力を簡略化するためにフォーム入力用のメソッド(fill_sign_up_form)を作成した。 しかし、このままだと柔軟に値を変更できないのでキーワード引数を利用して値を柔軟に返ることができるようにしてみた。 問…

初めに privateを使用することで外部からメソッドを呼び出すことができなくなります。 しかし今回自分がインスタンスメソッドとクラスメソッドのprivateの挙動について躓いたのでブログに記述していこうと思います。 privateメソッドの基本ルール 外部から直…

初めに 今回、Everyday Rails - RSpecによるRailsテスト入門を読み終えて、 良かったこと、学んだこと、難しかったことに 分けてアウトプットしていきます！ 良かったところ 体系的にRSpecを学べる 今まで学習してきた中でRSpecを最初から最後まで体系的に学…

初めに 学習した内容を効率よく整理するためにアウトプットしていきます。 学習中に遭遇したマッチャの具体例と解説 it {is_expected.to validate_presence_of(:name).scope_to(:use_id)} マッチャ名 検証する内容 使用例 validate_presence_of(:name) name …

初めに RSpecを学習中に例外処理を行うためにfetchが出てきたのだが、 役割がイマイチわからなかったので今回思考整理のためにまとめていきたいと思います。 前提 params[:name]として値を取り出そうとした時に #キーと値があり、存在するキーを取り出すとき…

初めに twitterクローンを作成中使用したメソッドを中心にメモがてら残していきます。 group_byメソッドについて 配列の要素を指定した条件でグループ化するメソッド。 グループ化するとは？ users = [ {name: 'メッシ', country: 'Argentina'}, {name: 'テ…

初めに 学習して躓いた部分をアウトプットすることでエラーや問題の共有を行うとともに、思考の整理のためにアウトプットしていきます。 前提 twitierクローンのアプリケーションを作成している。 ツイートに画像を添付するためのアイコンにマウスカーソルを…

初めに 学習中に遭遇したエラーを共有するとともに思考の整理をしていきたいと思います。 背景 twitterのクローンアプリを作成しています。 今回エラーに遭遇したのが、プロフィール編集画面にて内容を編集していざ更新をしようとしても更新されないというエ…

初めに！ 学習内容をアウトプットすることで思考の整理を行っていきます！ 背景 twitterクローンを作成しています。 ユーザーのプロフィールにある、いいねタブを開くといいねしたツイート一覧を表示させたい。 ER図の確認 実装手順 1.思想設計 対象リソース…

初めに 学習した内容をアウトプットすることで思考の整理をしていきます。 背景 twitterのクローンを作成している。 自分がツイート、リツイート、いいね、コメントした内容一覧の切り替えを行うためにタブを使用しようとしています。 実装手順 1.ルーティン…

初めに！ 学習した内容をアウトプットすることで思考の整理を行なっていきます。 やること seeds.rbにてフォロー関係を作成していく。 今回は全ユーザーが他のユーザーをランダムに最大10人フォローするという条件の下に作成していく。 作成する。 1.Userモ…

初めに 学習した内容をアウトプットすることで思考の整理をしていきます。 背景 Twitterのクローンを作成しています。 seeds.rbにてあるユーザーの投稿に対してコメント、ツイート、いいねを作成する処理を書いていく。 手順 ユーザーの作成 user = User.cre…

初めに 学習中生じたエラーをアウトプットすることで思考の整理をしていきます！ 背景 本番環境でActve _Storageの画像を表示させようとS3を使用しました。 データはseedファイルを使用して作成し、herokuへpushして後にheroku run rails db:seedを行いまし…

初めに 学習した内容をアウトプットすることで思考を整理していきます。 フォロー機能の概要 ユーザーとユーザーがフォローし、フォローされる関係を表したのがrelationshipsとする。 つまりrelationshipsテーブルはフォローするユーザーとフォローされるユ…

初めに 学習中に遭遇したエラーをアウトプットすることで思考の整理をしていきます。 問題 ユーザーのプロフィール画面を作成するためにuser/showの作成とコントローラの作成とルーティングを行った。 その後indexページを開こうとするとエラーが生じた。 id…

初めに！ 学習内容をアウトプットすることで思考を整理して、学習効率を上げていきます。 ルーティングヘルパーとは ルーティングを行うことで使用できるものでuser_pathやuser_urlと記述されている 疑問に思ったコード user_path(@user, tab: "retweets") …

初めに 学習内容をアウトプットすることで思考の整理をしていこうと思います。 Twitterクローンのホーム画面にタブを作成してみる 作成手順 home.html.slimに部分テンプレートを使用して作成を行う(_tabs.html.erbを作成) _tabs.html.erbにはリンクを作成し…

初めに 学習した内容をアウトプットすることで思考の整理を行っていきます。 OmniAuthの全体の流れ！ 登場人物 ユーザー 使用するアプリケーション OmniAuth:Auth2.0の流れを処理するミドルウェア GitHub :外部の認証を提供するサービス 全体のフロー 1. [ユ…

初めに! 学習内容をアウトプットすることで思考の整理をしていきたいと思います。 実装の手順 1. Devise & OmniAuth の導入 gem 'devise' gem 'omniauth-github' gemにdeviseとomniauthを記述。 その後bundle installを実行する 2. Deviseの初期設定 rails g…

初めに 学習中に遭遇したエラーや問題点を整理することで学習効率を上げていきます。 問題 GitHubにてPull Requestを作成したところコンフリクトが生じてしまった。 解決方法 CLIにてコンフリクトを解消していく 解決手順 1. github_loginブランチにてmainを…

初めに 学習中に躓いたことをアウトプットすることで思考の整理を行っていこうと思います。 前提 Xのクローンを作成している deviseを使用してログイン機能を実装し、その後ログインをわざと失敗してエラーメッセージを表示させようとした 問題 sign_up画面…