shimizuya

※Web開発

【Chart.js × Laravel】Controllerで返されたデータをJavaScriptで操作するには

Controllerで返された値をJavascriptで操作する方法、Javascriptでchart.jsを使って複数のチャートで動的なデータを表示する方法があまり見当たらなかったのでこちらで紹介。 通常Controllerで返された値(...
※Web開発

【Reactのインポート、エクスポート】JavaScriptにおけるモジュールの作り方を解説

「JavaScriptでモジュールという言葉を見かけるが何かがよくわかっていない」「Reactでコンポーネントの読み込みが上手くいかないときがある」「import文の書き方で{ }の有無の違いがわかっていない」 本日はそんな方に向けてモジュ...
laravel

PHPMailer-6.1からGmailへ接続しメール送信(Xampp対応)

2020年05月24日 (日)PHPMailer のバージョン 6.1 から Gmail のSMTP に接続し メール送信する方法です。 Windows の Xampp からの送信にも対応しています。 Windowsからのメール送信では よ...
laravel

見やすい!便利!Chart.jsでグラフ出力してみたら意外と簡単だった

今回は、LaravelプロジェクトにChart.jsを導入し、グラフ出力する方法を紹介します。情報が数字で並んでいるだけだと情報が伝わりづらいので、あると便利です。 目次 1 Chart.jsの導入 2 グラフの作成 2.1 Bladeテン...
※Web開発

clamp()を使ってフォントサイズはレスポンシブで自動調整せよ【ジェネレーターとSass関数の使いかたも】

clamp()を使ってフォントサイズはレスポンシブで自動調整せよ【ジェネレーターとSass関数の使いかたも】|しょーごログ (shogo-log.com) レスポンシブでフォントサイズや要素のサイズを変える時に、毎回メディアクエリで、画面幅...
laravel

Laravelで画像を保存する方法・シンボリックリンクの意味から解説|初心者のためのLaravelの教科書11

WordPress

【保存版】HTML、CSSでホームページに表を作る方法を解説【table, tr, th, td, thead, tbody, tfoot, caption】

※Web開発

【】Visual Studio CodeでのJavaScriptのデバッグ方法

マイクロソフトが無償で提供しているコードエディター「Visual Studio Code(略称:VS Code)」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設...
※Web開発

【保存版】ChromeのデベロッパーツールでJavaScriptをデバッグする方法(2022年版)

JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立て...
※Web開発

【保存版】CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方

モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能(※)もつけられま...