JavaScript/jQuery
もくじ DataTablesとは DataTablesを設置する準備（Laravelに導入） CDN ダウンロード DataTablesを挿入 テーブル設置 DataTablesの反映 Controllerから配列を渡してforeachする インデックス番号を使ってソート オプション 注意点（カンマを忘れずに） leng…
もくじ thisの構文 HTML jQuery $(this)を使う $(this)を使わないと パフォーマンス向上
もくじ jQueryを使う準備 ダウンロード CDN 基本構文 本来の構文 短縮系 $(function(){ 処理 });で囲む意味 jQueryの処理の記述方法 セレクタ メソッド 変数を使う メソッドチェーン よく使うメソッド cssメソッド hideメソッド fadeOutメソッド findメソッ…
もくじ propsの流れ propsの使い方 （本題）親子の要素をまたぐコンポーネント 流れを図解化 実際のコード 複雑な構造をわかりやすく 参考URL
配列とオブジェクトが、いつも違いがわからなくなるのでまとめました。 配列とは オブジェクトとは オブジェクトを要素に持つ配列 配列とは 複数の値をまとめて管理するもの。 [値1, 値2, 値3, ... ]のように書きます。 const fruits = ["apple","banana","o…
もくじ 流れ 1.Homebrewのインストール 2.nodebrewのインストール 3.node.jsのインストール インストール手順 バージョンを指定してインストール インストールできるバージョンの確認 必要なバージョンをインストール インストールされたバージョンを確認 参…
もくじ Reactにおけるエクスポート exportとは importとは エクスポート方法 named exports default exports named exportsとdefault exportsの使い分け named Exportsを使うべし 参考URL Reactにおけるエクスポート export自体はJavaScriptの構文ですが、Re…
もくじ トグルスイッチとは 経緯 手順 1.インポート 2.定義する 3.スタイルの指定 4.定義を呼び出し 隣接セレクタの指定 参考URL React + Reactstrap + styled-componentsでトグルスイッチを実装 トグルスイッチとは ON/OFFやYes/Noなどをスイッチ感覚で扱え…
もくじ ReactでのCSS styled-componentsとは styled-components 導入手順 1.インストール 2.インポートする 3.定義 4.DOM要素に追加 5.完成 Reactstrapを併用する 1.Reactstrap、styled-componentsの準備を整える 2. 双方ともインポート 3.定義 4.DOM要素に…
もくじ Reactとは JSX JSXを使わない構文 return内は一つの要素 JSXの命名規則 実践 中身を確認 書き換える Componentで管理 コンポーネントを分ける 複雑化していくとコンポーネントが便利 参考URL Reactとは React.jsまたはReactJSの名称でも知られ、JavaS…
環境 最新の Node.js 及び npm がインストールされていることを確認してください。 Node.js サーバー側で動作するJavaScriptのことです。つまり、フロントエンドで使っていたJavaScriptをサーバサイドで使えるようにしたもの。 バージョンを確認する。 $ nod…
プルダウンで表示内容を切り替える 残念なパターン HTML JavaScript 完成版！ HTML JavaScript 要素内は何でも記述可 プルダウンで表示内容を切り替える こちら実装にてこづったんですが、結果的にとても簡単な方法で出来ました。 HTML/JavaScriptを使用しま…
WYSIWYG htmlが分からずとも書ける summernoteを使ってみる 必要なライブラリ Bootstrap 4を使う カスタマイズ 日本語版 参考URL WYSIWYG 「うぃじうぃぐ」と読みます。名前は初めて聞いたのですが、実物を見てみたら昔から馴染みのあるあいつでした。 これ…
JavaScript本来の記述場所 <body>タグ内に直接書く <head>タグ内に記述し、外部ファイルを呼び出す Laravelでも基本形は同じ asset()で読み込む bladeを分けるだけ JavaScriptの読み込みは簡単！ 参考URL JavaScript本来の記述場所 二通りを紹介します。 <body>タグ内に直接書</body></head></body>…
