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

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

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(ハッ…

2022年4月30日 アルゴ式 番外編

アルゴ式とは プログラミングを解くドリルが提供されているWEBサービスである。by yano 今回の問題 配列の全探索 1 Ryuji's answer JavaScript function main(input) { const args = input.split("\n"); const inputArray = args.map((n) => n.split(" ")); …

2022年4月29日 りあクト! 第6章 特別なフォーマッタ 『Prettier』 (p.67~)

Prettier Prettierはフロントエンドのメジャーどころをほぼ網羅しているフォーマッタです。 TypeScript、HTML、CSS、Vue、Angular、GraphQL、CSS in JS の styled-components など コードフォーマッタとは インデントや改行などの記述スタイルのフォーマット…

2022年4月28日 アルゴリズムを自作して問題を解く

問題 1以上の整数nが与えられたとき、1からnまでの整数の内 7で割り切れない数の合計を出力するプログラムを示してください。 例えばnが7の場合は1, 2, 3, 4, 6, 7の合計を出力する。 関数型プログラミングと手続型プログラミングの違い 関数型プログラミ…

2022年4月26日 りあクト! 第6章 ESLintの適用ルールをカスタマイズする (p.54~)

依存パッケージをリストアップする npm info パッケージ名 peerDependenciesを実行すると、依存しているパッケージをリストアップできます。 以下の例では、styled-componentsの依存パッケージをリストアップしています。 ➜ frontend git:(feature/add_#403)…

2022年4月25日 りあクト! 第6章 Linter とフォーマッタでコード美人に (p.45~)

RubyではRubocopなどを用いることでコードのバグの警告や自動整形を行うことが出来ます。対してJavaScriptではlinterやコードフォーマッタを使用します。 linterとは コードを静的解析してコンパイルではじかれない潜在的なバグを警告するものです。 放って…

2022年4月23日 りあクト! 第5章 Reactの組み込みコンポーネント(p.39~)

復習 トランスパイル 一つのプログラミング言語で書かれたプログラムのソースコードを別のプログラミング言語と同等のソースコードを生成すること また、それを行うプログラムをトランスパイラといいます。 BabelはES2015以降のJavaScriptやJSXをトランスパ…

2022年4月22日 りあクト! 第5章 JSXとコンポーネントの関係(p.35~)

JSXの基本構文 JSX構文 <MyComponent foo="bar">baz</MyComponent> コンパイルされると 以下のReact.createElementの形式に変換されます。 React.createElement(component, props, ...children) React.createElement(MyComponent, { foo: 'bar' }, 'baz'); React.createElementの実行結果が以下の…

2022年4月21日 りあクト! 第5章 JSXの書き方(p.29~)

JSXの基本文法 tsconfig.jsonのjsxオプション reactに設定している場合 JSXの記述はReact.createElement(...) のように変換されます。 createElement メソッドの上位モジュールのReactをインポートする必要があります。 react-jsxにしている場合 TypeScript4…

2022年4月18日 りあクト! 第5章 なぜReactはテンプレートを使わないのか(p.18~)

なぜReactはテンプレートを使わないのか JSファースト(思想) ReactではJavaScriptで一貫してviewのレンダリングも行います。 JSXはオブジェクトを生成するためのJavaScriptの純粋な式であり、フレームワークから特別扱いされることはありません。 HTML テン…

2022年4月16日 りあクト! 第5章 JSXでUIを表現する(p.11~)

JSXとは 名前の由来は『JavaScript』と『XML』の組み合わせです。 XMLライクな記述を出来るようにしたECMAScript2015を構文拡張したものです。 JSXは、コンパイル後にReact.createElementになります。 React.createElementを実行すると、ReactElementオブジ…

2022年4月15日 りあクト! 第4章 TypeScriptの環境設定(p218~)

TypeScriptのコンパイルオプション tsconfig.json TypeScriptプロジェクトのコンパイラ設定を保存しておくためのファイルです。 コンパイルが実行される際、デフォルトではプロジェクトルート配下から順に探索し、最初に見つかったtsconfig.json ファイルが…

2022年4月14日 りあクト! 第4章 型定義ファイルはどのように探索されるか(p.215~)

npmのパッケージに含まれている型定義ファイルをプロジェクトに関連付ける方法は大きく分けて2つあります。 1. JavaScriptファイルと同じ階層に同じ名前で.d.ts拡張子の型定義ファイルを置く 例を挙げる『ky』というライブラリは、パッケージ内で同じ階層…

2022年4月12日 りあクト! 第4章 JavaScriptモジュールを TypeScript から読み込む(p.212~)

JavaScript モジュールを TypeScript から読み込む npmのリポジトリで提供されている多くのパッケージは、TypeScriptで書かれているものでも、TypeScriptのままで配布されているものはあまりありません。 (理由は以下) JavaScript環境との相互運用が簡単であ…

2022年4月11日 りあクト! 第4章 モジュールと型定義 TypeScript のインポート/エクスポート (p.207~)

TypeScriptのimport/export JavaScriptとほぼ同じで異なる点は2つあります。 TypeScriptのimportは拡張子を書くとエラーになる 同名の型を扱った場合の挙動 importで拡張子を書くとエラーになる理由 モジュールを解決する際に独自のルールで探索するからで…