現象 yarn startをすると、jsxをreact-jsxに変換してしまう 立ち上げると下記のメッセージがでて、tsconfigを修正しても、ovverrideしてしまう The following changes are being made to your tsconfig.json file: - compilerOptions.jsx must be react-jsx …

要約対象記事 byrayray.dev 1 なぜから始めよう このプロジェクトの目的を明確に。 練習で作成なのか？なにかの課題を解決したいのかなど。 この記事では「天気のアプリ」を想定していました サンプルとして、 雨の日を予測したい、天気を知りたいなどの課題…

ポイント canvasタグはcontextオブジェクトを持っていてそれらを操作する イベント canvasのオブジェクトを操作するメソッドを覚える サンプル これは、canvasタグを使ってつくりました。 実装の内容は、画面をクリックしたら図形がでてくると言う仕様です。…

なんでBEMにするひつようがあるのだろうか？ htmlをこんな漢字に書く。 これだと冗長に見えるけどcssを書くときにネストしてあげる .notification-modal .notification-modal__header 通知一覧 .notification-modal__content アンパサンドで書くと結構わかり…

ポイント fontawsome css 疑似要素 実装 html css html %i.far.fa-bell.have-notification css .have-notification:after { content: "●"; font-size: 10px; position: absolute; right: 11px; top: 26px; color: red; } 疑似要素でまるを作って、positionで…

ポイント fontawsome css 疑似要素 実装 html css html %i.far.fa-bell.have-notification css .have-notification:after { content: "●"; font-size: 10px; position: absolute; right: 11px; top: 26px; color: red; } 疑似要素でまるを作って、positionで…

環境 aws docker rails rds（postgres） dropを実行したらエラーが RAILS_ENV=production bundle exec rake db:drop rake aborted! ActiveRecord::ProtectedEnvironmentError: You are attempting to run a destructive action against your 'production' da…

エラーの内容 `resolve_symbol_connection': 'development' database is not configured. Available: ["default", "database", "password", "host"] (ActiveRecord::AdapterNotSpecified) 背景 dockerでrails mysqlで構築していた際に、このエラー 原因 <

挙動確認 メソッドに、{}か do endが渡されていれば block_given?はtrueになる def check if block_given? puts "Block is given." else puts "Block isn't given." end end check{} #=> Block is given. check #=> Block isn't given. サンプル 渡されたブ…

link_toの引数に値を渡すだけ <%= link_to "登録", new_company_registration_path(ref: "root")%> こんな感じでリクエストを送ってくれる http://localhost:3000/company_registration?ref=root コントローラー側でパラメーターを受け取れる [1] pry(#<Companies::RegistrationsController>)> pa</companies::registrationscontroller>…

link_toの引数に値を渡すだけ <%= link_to "登録", new_company_registration_path(ref: "root")%> こんな感じでリクエストを送ってくれる http://localhost:3000/company_registration?ref=root コントローラー側でパラメーターを受け取れる [1] pry(#<Companies::RegistrationsController>)> pa</companies::registrationscontroller>…

link_toの引数に値を渡すだけ <%= link_to "登録", new_company_registration_path(ref: "root")%> こんな感じでリクエストを送ってくれる http://localhost:3000/company_registration?ref=root コントローラー側でパラメーターを受け取れる [1] pry(#<Companies::RegistrationsController>)> pa</companies::registrationscontroller>…

こんな感じに 前提情報 Productモデルにname, email, ageカラムを作成 presece: trueのバリデーションを設定 修正内容 1.エラーを表示するパーシャルを作成 2.パーシャルに引数を渡す。（attributeは :nameなどの項目の情報が入っています。modelには produc…

仕組み webhookとは？ qiita.com この記事を参考にすると、外部のサービスを、指定のエンドポイント（url）を叩くと利用できると言う事らしい（さらっと読んでるので、違うかも） 通常外部のサービスをAPI利用する場合、tokenやkeyを取得してできるけど、 ur…

イベントに監視を渡すとき 式展開で渡すと.setStateするときに、thisがundefinedになりエラーになる handleLogin() { this.setState({loggedIn: !this.state.loggedIn}) } <Botton onClick={this.handleLogin}}>ログイン</Botton> 対処方法 対処方1 thisをbindする <Botton onClick={this.handleLogin.bind(this)}>ログイン</Botton> 対処方法2 即時関数で実行する <Botton onClick={() =></botton>…

なぜルートテーブルを理解したい？ awsのデフォルトVPS?を消してしまって、 ec2を構築する時に、自分でVPC、サブネットをを構築しなくてはいけなくなり、毎回ルートテーブルの設定を忘れるので少し調べてみる ルートテーブルは何か？ サブネット内の通信がど…

rubyのバージョンを変更したい場合 .ruby-versionのrubyのバージョン指定と Gemfileのrubyのバージョンを同じにしないと変更できない 事象 本番環境でrubyのバージョンをruby 2.6.3 ローカル2.4.0で運用していたので、本番環境でbundle ができなかった。 Gem…

シンプルなFlash機能 controoller def create @book = Book.new(book_params) if @book.save flash[:success] = "保存できました" redirect_to パス else flash[:failled] = "保存に失敗しました" redirect_to パス end end view <% flash.each do |key, val…

早期リターン 早期リターンをすると可読性が上がる function handleConsole(a:string, b:string) { if (a != 'a' || b != (b) ) { return } if (a == "a") { console.log("a") } else if (b = "b") { console.log("b") } } function hello(a: string, b:stri…

基本 private name: string;は this.nameの型 name: stringは初期化時の引数の型 class Greeter { // プロパティの定義（デフォルトで public） private name: string; // ここで肩を定義 // コンストラクタの定義 constructor(name: string) { this.name = …

サイドバーのフェードインをjavascriptで実装 最近jsがかなり使いやすくなっている気がする ソースコード ロジックとしては、下記。 1.positionで最初は見えなくする 2.fadeInのクラスを作成 positionのtransitionを設置 3.クリックイベントでfadeInクラスを…

Video タグの使い方 タグの設置はこんな感じ <video src="sampe.mp4" width="300" height="300" controls id="my-video"></video> controls これは再生ボタン、再生時間などを表示してくれるバーの事 play() pause()メソッド 下記のように、videoの要素を取得して、play() pause()が行える <div class="container"> <section> <h2>audioタグ</h2> </section></div>

GitHub にHtmlを公開する html cssぐらいであれば、githubで公開できる 手順 1.html cssを作成する 2.githubレポジトリを作成する 3.pushする 4.github settingsでホスティングの設定をする 5. https://.github.io/<リポジトリ名> 1.html cssを作成する ディ…

N + 1とは？ 関連するレコードを無駄に見に行ってしまう事 具体例 前提 UserとAirticleで1対多の関係 controller AirticleController def index @airtcles = Airticle.all end view <% @airtcles.each do |airtcle| %> <%= airtcle.user.email%> <% end %> …

React 環境変数で環境を識別する process.env.NODE_ENV => developmen

500エラーの画面 恥ずかしながら本番での500エラーは 、Rails の500html.htmlだったのか、 開発環境だと、赤い画面でエラーメッセージが出て、本番の場合にこの画面がでるからnginxの画面なのかとずっと思ってた。。。。 public/500html.htmlのファイルだっ…

flashを汎用的に書いてみる module ApplicationHelper def flash_messages flash.each do | flash_type, message| concat(content_tag(:div, message, class:"alert-message #{flash_type}")) end end end application.html %body = render 'layouts/header'…

rails データ保存 def create @post = Post.new(post_params) if @post.save flash[:success] = "保存に成功" redirect_to posts_path else flash[:error] = "保存に失敗" redirect_to new_post_path end end 例外などについては、こちらの動画で解説されて…

方法 stateのbooleanを更新したら、styled-componentで動的に変更する キャプチャー こんな感じのボタンを作成 クリックしたら文字色が赤になる様にします ボタンをクリックしたら文字が赤くなる ソース アプリケーション側 import RoundButton from './comp…

手順 gitignoreに.envに入れる gitignore .env .envに環境変数を設定する REACT_APP_FIREBASE_KEY="your_key" REACT_APP_FIREBASE_DOMAIN="your_app_id.firebaseapp.com" REACT_APP_FIREBASE_DATABASE="https://your_app_id.firebaseio.com" REACT_APP_FIREB…