JavaScript

【jquery】DateTimePickerとFontAwesomeを導入

はじめに Font Awesomeを導入 CDN ダウンロード 好きなアイコンを探す datetimepickerを導入 CDN ダウンロード jquery moment.js tempusdominus-bootstrap-4 コード 基本的なコード カスタマイズ 参考URL

論理演算子 と 三項演算子 と Null合体演算子

もくじ 演算子 演算子とは 代入演算子 比較演算子 論理演算子 論理演算子とは 演算子の種類 ショートサーキット評価 使用例 変換規則 三項演算子 三項演算子とは 使用例 Null合体演算子 Null合体演算子とは 使用例 可読性に注意 参考URL

【jQuery】formの確認画面をモーダルで出す

もくじ 完成図 HTML CSS white-space: pre-wrap; JavaScript(jQuery) .val() .find() .text() 「入力フォームに入力した内容を、送信する前に確認画面(モーダル)を出したい」 そんなときに、jQueryを使って入力内容を取得してモーダルに渡す方法をご紹介…

【jQuery/DataTables】行に応じて違うモーダル表示

以前投稿したこの記事にミスがあったので修正して動作確認もちゃんとしたものを再投稿します。 ↓この記事は失敗例としてご参考ください。。 bonoponz.hatenablog.com もくじ データの準備 HTML テーブル モーダル jQuery json の定義 DataTables クリックで…

【JavaScript】文字列の扱い方

文字列を扱う時はどの言語でもクォーテーションを用いますよね。 そのクォーテーションの違いや文字列の連結などについてまとめました。 今回は主にJavaScriptに基づき解説します。PHPなどでも似たように使うようですが、他言語では少し挙動が変わると思うの…

【Laravel】DataTablesで、行クリックしてモーダル表示(jQuery)

この記事にはミスがあります。こちら↓を参考にしてください。 bonoponz.hatenablog.com もくじ テーブルの準備 以下は参考にしないで! クリック時にイベントを追加 モーダルを追加 確認 参考URL

【Laravel】DataTablesでjsonを読み込む(jQuery)

もくじ 前回のつづき jsonの作成〜読み込み jsonデータをテーブルに反映 tableタグの更新 参考URL

【Laravel】DataTablesを使う(jQuery)

もくじ DataTablesとは DataTablesを設置する準備(Laravelに導入) DataTablesを挿入 テーブル設置 DataTablesの反映 Controllerから配列を渡してforeachする インデックス番号を使ってソート オプション 注意点(カンマを忘れずに) lengthChange(表示件…

【jQuery】thisの構文

もくじ thisの構文 HTML jQuery $(this)を使う $(this)を使わないと パフォーマンス向上

【jQuery】基本のキ

もくじ jQueryを使う準備 ダウンロード CDN 基本構文 本来の構文 短縮系 $(function(){ 処理 });で囲む意味 jQueryの処理の記述方法 セレクタ メソッド 変数を使う メソッドチェーン よく使うメソッド cssメソッド hideメソッド fadeOutメソッド findメソッ…

【React】{children}でコンポーネントを受け渡す

もくじ propsの流れ propsの使い方 (本題)親子の要素をまたぐコンポーネント 流れを図解化 実際のコード 複雑な構造をわかりやすく 参考URL

配列とオブジェクト

配列とオブジェクトが、いつも違いがわからなくなるのでまとめました。 配列とは オブジェクトとは オブジェクトを要素に持つ配列 配列とは 複数の値をまとめて管理するもの。 [値1, 値2, 値3, ... ]のように書きます。 const fruits = ["apple","banana","o…

【ES6】環境構築をする

もくじ 流れ 1.Homebrewのインストール 2.nodebrewのインストール 3.node.jsのインストール インストール手順 バージョンを指定してインストール インストールできるバージョンの確認 必要なバージョンをインストール インストールされたバージョンを確認 参…

【React/ES6】named exportsとdefault exportsの使い分け

もくじ Reactにおけるエクスポート exportとは importとは エクスポート方法 named exports default exports named exportsとdefault exportsの使い分け named Exportsを使うべし 参考URL Reactにおけるエクスポート export自体はJavaScriptの構文ですが、Re…

【React】styled-componentsでトグルスイッチを実装

もくじ トグルスイッチとは 経緯 手順 1.インポート 2.定義する 3.スタイルの指定 4.定義を呼び出し 隣接セレクタの指定 参考URL React + Reactstrap + styled-componentsでトグルスイッチを実装 トグルスイッチとは ON/OFFやYes/Noなどをスイッチ感覚で扱え…

【React】styled-componentsの導入 かつ Reactstrapの併用

もくじ ReactでのCSS styled-componentsとは styled-components 導入手順 1.インストール 2.インポートする 3.定義 4.DOM要素に追加 5.完成 Reactstrapを併用する 1.Reactstrap、styled-componentsの準備を整える 2. 双方ともインポート 3.定義 4.DOM要素に…

【React】Reactを使うための基礎知識

もくじ Reactとは JSX JSXを使わない構文 return内は一つの要素 JSXの命名規則 実践 中身を確認 書き換える Componentで管理 コンポーネントを分ける 複雑化していくとコンポーネントが便利 参考URL Reactとは React.jsまたはReactJSの名称でも知られ、JavaS…

【React】インストール〜起動

環境 最新の Node.js 及び npm がインストールされていることを確認してください。 Node.js サーバー側で動作するJavaScriptのことです。つまり、フロントエンドで使っていたJavaScriptをサーバサイドで使えるようにしたもの。 バージョンを確認する。 $ nod…

【HTML/JavaScript】プルダウンで表示内容を切り替える

プルダウンで表示内容を切り替える 残念なパターン HTML JavaScript 完成版! HTML JavaScript 要素内は何でも記述可 プルダウンで表示内容を切り替える こちら実装にてこづったんですが、結果的にとても簡単な方法で出来ました。 HTML/JavaScriptを使用しま…

(Laravel)WYSIWYG導入

WYSIWYG htmlが分からずとも書ける summernoteを使ってみる 必要なライブラリ Bootstrap 4を使う カスタマイズ 日本語版 参考URL WYSIWYG 「うぃじうぃぐ」と読みます。名前は初めて聞いたのですが、実物を見てみたら昔から馴染みのあるあいつでした。 これ…

(Laravel)bladeでJavaScriptを読み込みたい

JavaScript本来の記述場所 <body>タグ内に直接書く <head>タグ内に記述し、外部ファイルを呼び出す Laravelでも基本形は同じ asset()で読み込む bladeを分けるだけ JavaScriptの読み込みは簡単! 参考URL JavaScript本来の記述場所 二通りを紹介します。 <body>タグ内に直接書</body></head></body>…