- MySQL
-
2024-08-30
MySQLのシステムテーブルから指定したテーブルのカラム名とデータ型を取得します。
SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'テーブル名';

MySQLのシステムテーブルから指定したテーブルのカラム名とデータ型を取得します。
SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'テーブル名';
MySQL等から返されるハイフン区切りの日付をJavaScriptでスラッシュ区切りにしたいことがあったので、その方法をご紹介します。
まず単純な方法であれば文字列分割&結合でやることも可能です。
console.log('2024-08-29'.split('-').join('/')); // 2024/08/29
別な方法としてDateオブジェクトを使って実装してみたいと思います。
toLocaleDateStringを使いロケールに日本を指定して実行してみます。
let date = new Date('2024-08-29').toLocaleDateString('ja-JP'); console.log(date); // 2024/8/29
スラッシュ区切りにはなりましたが、月が1桁になっています。
月を2桁で表示したい場合はtoLocaleDateStringメソッドの第2引数にオプションを指定します。
let date = new Date('2024-08-29').toLocaleDateString('ja-JP', { year: "numeric", month: "2-digit", day: "2-digit" }); console.log(date); // 2024/08/29
これでyyyy/mm/ddの形式になりました。
参考URL:
Date.prototype.toLocaleDateString() – JavaScript | MDN
あまり使うことはないかもしれませんが、メモ代わりに投稿しておきます。
特定の日時を指定してコミットするには--date
オプションを使って日時を指定します。
git commit -m "コミットメッセージ" --date="Jan 1 00:00:00 2024 +0900"
onchange
イベントはform
要素のinput
ではないdiv
等の要素では検知することが出来ません。
そんな時はどうすれば良いでしょうか?その方法をご紹介します。
そんな時、以前はこんな方法がありました。
※サンプルコードではjQueryを使用しています。
サンプルのHTML
<input type="button" id="click_me" value="Click!"> <div id="sample"></div>
DOMSubtreeModified propertychange
イベントを使って変更を検知する
$(document).ready(function() { $('#sample').on('DOMSubtreeModified propertychange', function() { alert('Change!'); }); $('#click_me').click(function() { $('#sample').text('Change!'); }); });
しかしながら上記のMutationEvent
は非推奨となっています。
現在は代わりにMutationObserver
を使って同様のことが出来るようになっています。
通常、親コンポーネントから子コンポーネントにはprops
を使って情報を渡します。
しかし、深くネストされた下位コンポーネントに渡すには、メンテナンスのことも考えると非常に不便です。
コンテクスト(Context)を利用することで情報の受け渡しが簡単になります。
まずは基本の使い方から。
createContext
でコンテクストオブジェクトを作成します。
createContext
の引数はデフォルト値です。
import { createContext, useContext } from 'react'; const ThemeContext = createContext('light');
コンポーネントのトップレベルでuseContext
を呼び出して、コンテクストを読み取ります。
function Button({ children }) { const theme = useContext(ThemeContext); const className = 'button-' + theme; return ( <button className={className}> {children} </button> ); }
コンテクストを上記のButton
に渡すには、該当のボタンあるいはその親コンポーネントのいずれかを、対応するコンテクストプロバイダでラップします。
export default function MyApp() { return ( <ThemeContext.Provider value="dark"> <Form /> </ThemeContext.Provider> ) } function Form() { // ... renders buttons inside ... }
これでプロバイダとButton
の間にどれだけ多くのコンポーネントが挟まっていても関係なく情報を受け渡すことができます。