6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022-05-01から1ヶ月間の記事一覧

2022年5月29日 アルゴリズム問題をTypeScriptやRubyで解く (by やの)

問題 https://algo-method.com/tasks/213 ◇ 問題の意図 配列の中から一番大きな数字を取り出してほしいようです。 Rubyで解いてみる ◇ 解く過程 問題を解くためのメソッドを検索 『ruby 配列 大きい要素』検索でヒットした記事 - Ruby リファレンス 3.1 ◇ 提…

2022年5月21日 番外編アルゴ式

今回の問題 配列の要素と右隣の数字を比較して右隣が大きいケースの回数をカウントするという内容です。 解答 yano's answer Array.prototype.reduce()を使用しました。 countを出す・配列のindexを使って操作する点などでreduceが妥当と判断しました。 //(…

2022年5月20日 投稿機能を作成

今回実装した機能 投稿一覧ページにログインユーザーの新規投稿ページへ遷移するボタンを実装 仕様 userとpostを紐付ける new Postリンクをクリックすると、投稿フォームが出る 投稿に成功したら、投稿一覧に遷移する 投稿に成功したら、「投稿に成功しまし…

2022年5月19日 ログイン機能 ・サインアップ機能を作成

テーブル構成 ◆ usersテーブル name:string email: string crypted_password: string salt: string ◆ postsテーブル title:string body: text user_id:bigint(references) ◆ commentsテーブル body: text text: string 実装 ログイン機能・サインアップ機能…

2022年5月17日 りあクト! 第8章 コンポーネントのメンタルモデル (p.126~)

Reactの差分検出処理エンジン Reactではstateの値とpropsの値に差分を検出すると、コンポーネントのレンダリング処理を再実行します。 stateとprops stateは、コンポーネントが持つ状態のことです。 stateでは、エラーがあるか、モーダルウィンドウが開いて…

2022年5月16日 りあクト! 第7章 他のフレームワークとの比較 (p.113~)

世代におけるフロントエンド技術の特徴 フロントエンド技術を世代分けすると、第1世代が prototype.jsやjQuery といった DOM 操作を中心に据えたユーティリティライブラリ、第2世代がAngularJSが挙げられます。 現在はReact、Vue.js、Angularが第3世代と呼…

2022年5月14日 アルゴ式 番外編

Ryuji's answer TypeScript import * as fs from 'fs' const input = fs.readFileSync("/dev/stdin", "utf8") const [nv, alist] = input.split("\n") const [n,v,..._] = nv.split(" ").map(Number) const list = alist.split(" ").map(Number) type LastIn…

2022年5月13日 りあクト! 第7章 単方向データフロー (p.108~)

単方向データフローとは Reactでは親コンポーネントから子コンポーネントにpropsという形でデータが流れ落ちます。子コンポーネントから親コンポーネントにデータが逆流することはありません。 双方向バインディング 親コンポーネントと子コンポーネント間で…

2022年5月12日 アルゴ式 番外編

Ryuji's answer TypeScript import * as fs from 'fs' const input = fs.readFileSync("/dev/stdin", "utf8") const [nv, alist] = input.split("\n") const [n,v,..._] = nv.split(" ").map(Number) const list = alist.split(" ").map(Number) type PlusNu…

2022年5月10日 Railsガイド ポリモーフィック関連付け

ポリモーフィック関連付けとは ある一つのモデルが複数のモデルと関連付けがある事をpolymorphic: trueと1つの関連付けのみで示すことができます。モデルにポリモーフィック関連付けを行なった場合、データベースにもテーブル同士の関連付けがある事をマイグ…

2022年5月9日 りあクト! 第7章 Reactをめぐるフロントエンドの歴史 (p.99~)

Component-Based(コンポーネントベース)、Just The UI(UIにしか関知しない) ReactにはRuby on RailsのようなMVCという概念はなく、model, controllerはアプリケーションを構築するのに必要ないと考えているのではないかと書籍では語られています。 コンポー…

2022年5月7日 アルゴ式 番外編

プログラム上で入力を扱う Ruby N, V = gets.split(' ').map!(&:to_i) A = gets.split(' ').map!(&:to_i) puts N puts V puts A.class JavaScript function main(input) { const args = input.split("\n"); const inputArray = args.map((n) => n.split(" ")…

2022年5月6日 りあクト! 第7章 Reactをめぐるフロントエンドの歴史 (p.86~)

フロントエンドの歴史 年 出来事 2005 Googleマップが登場 2006 jQueryが登場 2008 GoogleがChromeのJavaScriptエンジンであるV8をオープンソース化して公開 2009 V8エンジンを採用したJavaScriptの実行環境であるNode.jsがリリース 2009 ES5を発表 2010 Bac…

2022年5月5日 Railsガイド Active Record の関連付け

has_many :through 関連付け Physician・・・・医者 Appointment・・・診察予約 Patient・・・患者 class Physician < ApplicationRecord has_many :appointments has_many :patients, through: :appointments end class Appointment < ApplicationRecord be…

2022年5月3日 りあクト! 第6章 stylelint (p.74~)

stylelintとは stylelintはCSSのlinterです。 使用するには4つのパッケージをインストールします。 stylelint ... stylelint本体です。 stylelint-config-standard ... stylelint公式による標準の共有設定です。 stylelint-order ... stylelintの並び順に関…

2022年5月2日 Rails開発者が採用面接で聞かれる想定Q&A 53問(翻訳)を深ぼる(Q1〜Q10)

基本的な用語 コレクション コレクションとは,いくつかのオブジェクトをまとめて取り扱うための「容器」として振る舞うオブジェクトです。Rubyの標準ライブラリはいくつかのコレクション・クラスを提供しています。代表的なものはArray(配列)とHash(ハッ…