夢のかけら

Railsエンジニアの技術ブログ

【Moment.js】addメソッドで警告が出る時の対処法

引数の順番が逆 const m = moment('2021-09-21 9:00') m.add('hours', 10) // 昔はこの順番だった。今はこれだと警告が出る。 m.add(10, 'hours') // 今の書き方。

エンジニアに転職して5ヶ月が経ちました

はじめに フィヨルドブートキャンプを卒業してエンジニアになって5ヶ月が経ちました。 仕事についていけるの?仕事は楽しい?エンジニアになってよかったこと・悪かったことなどを書いていこうと思います。 仕事はついていけるのか? ついていける。が、とて…

VSCodeでGoを書いてgit pushするとインデントがおかしくなる時の対処法

次のお仕事でGolangを使うのでGoを勉強中です。しかし困ったことがありました。 起こったこと VSCodeでGoを書く 保存してgit pushする Git Hub上でコードをみる 何じゃこのアホみたいなインデント!! 原因 VSCodeの拡張機能、Goが保存時にインデントをスペ…

【React】Hooksを使って関数コンポーネントに状態を持たせる

昔の話 昔は関数コンポーネントとクラスコンポーネントは明確に違った。 関数コンポーネント 状態を持たない ライフサイクルメソッド(componentDidMountなど)使えない クラスコンポーネント 状態を持つ ライフサイクルメソッドが使える このような違いあっ…

【React】高階コンポーネントを使ってみる

高階コンポーネントって何? 高階コンポーネントは高階関数と似ている。高階関数とは関数を戻り値とする関数のこと。 高階コンポーネントは引数でコンポーネントを受け取り、戻り値として新しいコンポーネントを返す関数のこと。 どんな時に使うの? クラス…

【React】Pessimistic UpdateとOptimistic Updateの違い

Pessimistic Updateとは? Pessimistic Update(悲観的な更新)とは非同期通信が成功するか分からないので、成功or失敗するまで待ってから手元のDOMを更新する方法である。非同期通信の結果を待つ必要があるので非常に遅い。 // post = {id: 1, name: 'hoge'}…

【React】コンポーネントを再利用できるようにするリファクタリング

例えばこのような2つのコンポーネントがある。これらのコンポーネントの問題点は何だろうか? 親コンポーネント state = { users: [{ id: 1, name: 'rin' }, { id: 2, name: 'sin' }] } render () { <div className="container"> <ListGroup items={this.state.users} /> <div> } 子コンポーネント const ListGroup = ({items}) => {</div></listgroup></div>…

【React】styled-componentsを使ってJavaScriptでCSSを書く

純粋なcssはエラーを吐かなかったり、クラス名を重複しないようにしたり、cssのためだけにクラス名をつけたり、と言ったデメリットが存在する。それを解決するstyled-componentsを使っていく。 インストール $ npm install styled-components エディタにstyl…

【JavaScript】アロー関数の引数で分割代入をする

Reactでよく使われるアロー関数の引数で分割代入を行うパターンを解説する。 まずは分割代入の復習から 分割代入はオブジェクトのキーと値をオブジェクトの外に出して変数として使えるようにすること。 英語名はObject destructuringで、その名の通りオブジ…

【React】子コンポーネントから親コンポーネントへデータを渡す

子が好きなタイミングで親のメソッド実行する Vueと同じように子コンポーネントの好きなタイミングで親コンポーネントに作成したカスタムイベントを発火させることができる。その時の引数としてデータを受け取る、という流れである。 注意点として、親コンポ…

【Git 】git switchでリモートブランチをローカルに持ってくる

Git

リモートブランチと同じ名前のブランチをローカルに持ってくる 新しいコマンドのgit switchが便利! $ git switch remote_branch_name もしうまくいかない場合は$ git fetchを実行してローカルのリモート追跡ブランチを更新してください。 リモートブランチ…

【Rails】formタグ内のbuttonを押すと意図せずにPostリクエストが送信されてしまう時の対処法

Railsで作るフォームの中で、Reactを使う必要があった。 Reactのコンポーネントで作ったボタン(<button>)を押すと、なぜかpostリクエストが飛んでしまう。 原因 <form>内の<button>は<button type="submit">がデフォルトになっているようだ。 対処法 type="button"を追加する。 <button type="button">Increment</button></button></button></form></button>

【React】propsとstateの違い

props 親コンポーネントからもらうデータ 読み取り専用で変更することはできない state コンポーネントが持つデータ 変更が可能 コンポーネント内のプライベート変数のようなもの 他のコンポーネントはアクセスすることができない 親からもらうデータを加工…

【Rails】静的ファイルのダウンロード機能を実装する

動的ファイルならコントローラーを経由する必要がある。しかし静的ファイルならもっと簡単にできる。 public/にfoo.txtを作成 download: "ダウンロードする時のファイル名"という文法でviewに書く <%= link_to 'foo.txtをダウンロード', '/foo.txt', downloa…

【DB設計】自己参照する多対多の関係を分かりやすく説明する

多対多の復習 自己参照する多対多の関係を理解するには、多対多の関係を理解する必要があります。 大学の授業と生徒の関係を例にとって考えてみます。 まずは学生目線で考えましょう。学生一人が取れる授業の数はいくつでしょうか? 1つでも2つでも3つでも、…

RubyMineの初期設定

ピープ音を消す macのアラート音を消す。つまり、通知音量を0にする。slackなどの他のアプリの音は聞こえるのでこれで問題ない。 右の目立つ縦線を消す シフトを2回押して「wrap guide」と検索する。 Hard wrap guideのForegroundのチェックを外す。 ちなみ…

rails db:resetとrails db:migrate:resetの違い

どちらもDBをdropしてcreateするタスクだが、両者はかなり仕様が異なるので注意したい。 rails db:reset schema.rbからデータベースを作成する。 rails db:seedが最後に実行される。 つまり、マイグレーションファイルの中身は一切読み込まずにデータベース…

フィヨルドブートキャンプを卒業しました!

これはフィヨルドブートキャンプ Part 2 Advent Calendar 2020 - Adventarの24日目の記事です。 昨日はobregoniaさんのプログラミング学習を始めて一ヶ月が経ち | obregonia1のブログでした。 Part1もあります。 はじめに 2020年11月30日に卒業フィヨルドブ…

天鳳個室の成績を自動計算するサービスをリリースしました!

はじめに プログラミングを1年で1500時間くらい勉強して、ようやく自作サービスをリリースしました。ずっと欲しかったものなのでとても満足して使っています。自分の他にも使ってくれる人がいたら嬉しいのでこの記事で紹介します 作ったもの 「天の個室」と…

Dockerに入門する①〜とりあえず触ってみる〜

はじめに Dockerの勉強始めました。あとブログも始めました。2020年はQiitaしか書いていなかったけど、これからはブログに書こうと思います。 Dockerとは Dockerはインフラをコード化するための技術である。 開発者間の環境の差異を吸収してくれる 環境構築…