【現状】 【目的】 【コード】 【ポイント①】dataメソッド 【ポイント②】$(":last") 【現状】 ・chat-spaceというチャットアプリの作成中 ・各メッセージにはカスタムデータ属性「data-message-id」が付与 【目的】 最新のメッセージの「data-message-id」の…

非同期通信で、 入力された値をparamsで送る （非同期通信のdataは、必ずハッシュ型になる） let input = $("#user-search-field").val(); $.ajax({ type: 'GET', url: '/users', data: { keyword: input }, dataType: 'json' }) .done(function(users) { co…

現状 ・LINEのようなチャットアプリを作成中 ・メッセージを非同期通信で保管・表示させたい ・メッセージの「SEND」ボタンを押すと非同期通信が発火 ・文字のみ、画像のみ、文字と画像のそれぞれのメッセージを表示する 以下のようなjavascriptを書いたとこ…

【修正点】 これを $("#new_message").reset(); こう $("#new_message")[0].reset(); 【参考記事】 https://blog.dododori.com/create/program/jquery-reset/ 大変参考になりました🙇‍♀️

【問題】 ・どうあがいてもformDataを用いてデータベースに保存ができなかった ・$.ajax({ の data でハッシュ形式でparamsを記入し無理やり動かしていたが 画像投稿→保存で詰み $("#new_message").on("submit", function(e) { e.preventDefault(); var form…

【前提】 rails', ' 5.0.7.2' carrierwaveで画像をアップロード jQueryで非同期通信の実装中 【手順①】画像の情報をpropで取得 var file = $('#message_image').prop('files')[0]; var file = $('画像アップロードのオブジェクト').prop('files')[0]; file …

よく使うマッチャ 単体テストでのマッチャ フィーチャスペック（統合テスト）でのマッチャ よく使われるFactoryBotのメソッド よく使うFaker deviseをテストでも 画像アップロード CarrierWaveを使った場合の、modelのRSpec よく使うマッチャ 単体テストでの…

■進捗 ■reference型とは？ ■form_for ■form_forとは ■form_forを何故使う？ ■ヘルパーメソッドをどう使い分ける？ ■form_forの使い方 ■引数の定義は忘れない ■form_forで投稿フォームを作成する際に必要となるHTMLタグ ■選択肢にチェックを入れる フォームを…

問題1の解答と解説 問題1：userモデルを作成しましょう 模範解答 ターミナル 1 2 $ rails g devise:install $ rails g devise user マイグレーションファイル 1 2 3 4 5 6 7 8 9 class DeviseCreateUsers < ActiveRecord::Migration[5.0] def change create_…

■プルリクエストでのフィードバック①mailerは使わないので削除 ■プルリクエストでのフィードバック②ハッシュロケットを修正 ■devise導入⑤ビュー画面を作成 ■rake routes実行後の画面 ■プルリクエストでのフィードバック①mailerは使わないので削除 ※今回はメ…

■mixin を活用してdisplay:flexを効率的に設定 ■そもそもベンダープレフィックスとは何ぞ？ ■display:flex をはじめとする並列表記 ■box-sizingプロパティ ■devise とは？？ ■手順 devise導入①deviseのインストール devise導入②deviseに必要な設定ファイルを…

検証ツールを見つつ、sampleサイトの構造を理解して なるほど！こういうことだったのか！と写経してやってみると 意図していない謎のエラーが？？？？ Turbolinks ？？ 帰りの電車の中で原因を調べます 参考記事：https://www.ryotaku.com/entry/2019/01/15/…

■進捗 ■反省 ■次回HTMLの大枠を作るときに活かす反省点 ◾︎エラー① 並列では宣言できません？ ◾︎エラー② エンドポイントありませんよ？ ■進捗 ・左上の歯車アイコン・挿入完了 アイコンが親要素に重ならない…！ というトラブルもあったものの position: absol…

◾︎進捗 ◾︎エラー① 頭のインデント ◾︎エラー② csp_meta_tag ◾︎エラー③ 変数が定義されていません ◾︎エラー④ 高さが0 ◾︎進捗 見た目は全く変わっていないけれども 一区切りついた 昨日まではHTML・CSSで アプリとは全く別で作っていたけれど HTMLをHamlに CSS…

chat-spaceの画面ができた！！！！やっと！！！亀のごとし！！！ でも できたので良しとする！！！ ・久々に触るとHTMLやCSSで忘れている部分が多いなと反省… 定期的に好きなサイトを模写？しながら慣れていこう！ ・親要素のCSSで「display:flex」に定義す…

■今日の進捗 ・header部分の完成！ ■反省 ・作り直す羽目になった部分あり ・調べる作業に時間をかけすぎる ・padding,marginと要素がごっちゃになる ・要素の大きさ（width:、height:）の指示がないのにpaddingの指示があるのが どうしても飲み込めず色々調…

■めちゃくちゃ便利！！！ ■グーグル拡張機能 ColorPick Eyedropper ■色検索 - 原色大辞典 ■めちゃめちゃ勉強になる！！！ ■今日の進捗 ■振り返り・反省 ■めちゃくちゃ便利！！！ ■グーグル拡張機能 ColorPick Eyedropper https://chrome.google.com/webstore…

ついにchat-spaceのビュー画面を作り始めた！！ 〜まずは事前準備から〜 ■そういえばそうだったメモ ■rails g controllerで不要なファイルを作らせないためには？ ■事前準備_大体の流れ ■事前準備_application.cssとapplication.scss ■事前準備_ブラウザのCS…

①コントローラー（posts）の アクション（index）の結果 返す画面（HTML）をHamlで書こう！ index.html.haml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .header .header__logo SNS .contents .contents__message follow me! =link_to "https://www.facebook.com/…

Haml とは Haml（ハムル） とは？ 導入方法は？ RailsアプリにおいてerbからHamlに変換する方法は？ 基本の記述方法 属性の追加 class属性・id属性は省略できる！ divタグは丸々省略できる！ 属性もRubyの中から引っ張る場合 ネスト構造はタブ（スペース）で…

Rubyの練習問題「ズンドコ キ★ヨ★シ問題」を自力で解けた！ 端から見れば 「ただの練習問題で喜ばれても困るわ」 と言われそうだけれども、 自力で仮説を立て調べながら解けたのが 多少なりとも成長として感じられたので 記録しておきます！ 勉強を頑張る駆…

■データ設計とは ■データ設計とは ■データ設計の３要素 ■データ設計の手順 ■主キー ■外部キー ■制限とは ■NOT NULL制限 ■一意性制限 ■主キー制限 ■外部キー制限 ■インデックスとは ■データ設計とは ■データ設計とは ・あらゆる情報をどのデータベースで管理…

■SQLの超概要 ■SQLとは？ ■SQLには主に２つ命令がある ■データベース・テーブルそのものを操作（定義）する ■データベースへの接続 ■データベースをみる ■データベースを作る ■データベースを選択する ■テーブルをみる ■テーブルを作る ■テーブルのカラムを…

〜〜〜〜〜〜〜〜〜〜〜〜〜〜 ■Git init ターミナルに入力するコマンド .git の隠しディレクトリを作成する git（バージョンを管理するシステム）を使えるようになる ■インデックス バージョン管理帳へ入力する前のワンクッションのような存在 変更したファ…

完全にメモ！！ 間違い let list =$("#list"); function appendList(word){ list.append(word) } 正解 let list = $("#list"); function appendList(word) { let item = $('<li class="list">').append(word); list.append(item); } $(function() { //ID名がlistのオブジェク</li>…

■submit ■デフォルトのイベントを消す ■find( ) ■prop() ■attr() ■each() $(function() { $('form').on('submit', function(e) { let output = ''; let checkboxes = $(this).find('input[type="checkbox"]'); checkboxes.each(function(i, checkbox) { chec…

jQuery と JavaScript の比較

■Javascriptでサイト上の画面を変える_大きな流れ ■語句説明 ①DOMオブジェクトをHTMLの中から取得 ②イベントリスナーでイベントと処理を紐づける ②イベントリスナーでイベントと処理を紐づける_処理も色々 ■Javascriptでサイト上の画面を変える_大きな流れ ①…

Javascriptはどこにどう記述するか アラーム・コンソールへの出力 変数の定義 if構文による条件分岐 配列 オブジェクト for構文による繰り返し処理 動詞・アクションの定義 Javascriptはどこにどう記述するか ①WEBサイト上で右クリック→検証→console に記述 …

youtu.be 【検索順位が決まる仕組み】 ①リンク（内部・外部・被リンクを適切につける）②コンテンツの質を上げる③サイト設計（キーワードを重視） 【リンク】・内部リンク →自サイト内の別のページへのリンク・外部リンク →自サイトのページから外部サイトへ…