初めに 今まで5年ほどマークアップ＆フロントエンドエンジニアとして働いてきたので、 フロントエンドエンジニアリング（HTML/CSS/JSやその他）において役に立ちそうなリファクタリング（コーディング全般の）をまとめます。 ここでいうリファクタリングは、…

経緯 実際の案件で取り入れてることも多くなってきた、静的サイトのフレームワークAstro。 特にLPなどでは、スクロールに応じたアニメーションを使うことがあると思うので、試しに実装してみました。 Github GitHub - kaiyoshida57/astro-with-animation デ…

はじめに SPAとは、Single Page Applicationのことで、これを使うことでシームレスなページ遷移を実現できます。 以前から興味があったので、勉強中のReactでできるか試してみました。 完成物は、リンクメニュー付のシンプルな画面です。 使用技術など Vite,…

経緯 フロントエンド開発において主流になった印象のフレームワークReact.js。 業務でも使えるようになりたいので、学習がてら実際に練習サイトを作成してみようと思いました。 Reactについての私の理解度 JavaScriptはES6の仕様を含めた基本構文は抑えてい…

基本 TypeScriptは型を推論する。 const name: string = 'torahack';のようにして、型アノテーションを使い明示的な型を定義。 型 柔軟な型定義が可能。例： // 生まれの年は数字か文字列でも受け取れる変数 let birthYear: number | string; valueが存在し…

初めに cookie, localStorage, sessionStorageなど、セッション中のデータ保存できる仕組みがあります。私はJavaScriptでこれらを使った何かしらの実装をしたことが無かったので、今回はlocalStorageを使った簡単なToDo Webアプリを作成してみました。cookie…

初めに まだまだ多くのサイトで使われてるjQuery。最近ではパフォーマンスや保守性などの観点から、jQueryの必要性は無くなってきました。 私は数年前からJavaScriptを一から学び始めましたが、対応案件ではまだjQueryに頼る事が多かったです。 そこで、案件…

成果物 サイト: https://kaiyoshida57.github.io/js_app_ajax/ Github: https://github.com/kaiyoshida57/js_app_ajax きっかけ JavaScriptにおける新しいの非同期処理の学習をしようと思いました。 そこで、TMDB（https://www.themoviedb.org/）という映画…

img要素には、width,heightに値を指定してレイアウトシフトを防ぐ ・img要素にwidth,heightに値を指定することでレイアウトシフト（読み込み時に大きさ指定がないと画面がズレる。）を防ぐのが良い。 ・さらに、loading="lazy"も指定すれば読み込みを遅らせ…

要件 ・WP_queryでカスタム投稿タイプのループ ・その中に特定の投稿だけAdvanced Custom Fields(ACF)値により、先頭に固定表示させ、他は日付順で並べる。 ・カスタム投稿名 information 手順 ・ACFをチェックボックスにし、keyを「information_pickup」、…

Promise Promiseオブジェクトでは、引数(resolve,reject)で、resolve実行時に.then()が実行される。 promiseオブジェクトは、.then() で繋げられる。 Promiseの状態がrejectedになったら、.reject()が実行される。 Async()とAwait() promiseをより直感的にし…

CSS cursor: url; は使う画像は128px以下じゃないと反映されない。 このプロパティはIE,一部アンドロイドブラウザでは使用不可。（211017現在）。背景画像で使うSVGはIEではabsolute配置だと位置がずれる。代わりにjpg,png使う。 WordPress デフォルトでは、…

data-ナンデモ属性とは： <タグ名 data-ナンデモ="img1.jpg"> のように、data- の後に自由に命名した属性を入れることが出来る。（HTML5から実装）・JavaScriptで取得するときは、 const = 取得した要素.dataset.ナンデモ部分につけた名前 こちらの本の内容…

役に立ったページ ・知っておくと便利なHTML5の機能、要素や属性のまとめ 「mapタグ」、「markタグ」、「datalist要素」など、どれも知っておいて損は良いと思えるタグや機能などでした。 coliss.com ・【CSS】mix-blend-mode >CSS3のプロパティ。これはDOM…

ボタンのCSSジェネレーター ボタンのCSSジェネレーター作ったので、よかったら使ってみて下さい！https://t.co/w3jyPDgqbB pic.twitter.com/YErJouOrkf— はにわまん (@haniwa008) 2020年9月12日 ちなみに、作者はにわまんさんのサイトでも、WordPressの記事…

・要素があるかどうか判別したい場合の記述 //querySelectorやgetElementByIdなどの単一要素を取得するメソッドを使った場合 const elem = document.querySelector('.elem'); if(elem !== null){ /* elemがあれば */ } //querySelectorAll や getElementsByC…

使い所 カーソルホバーで開く「プルダウン（ドロップダウン）メニュー」や、自動スクロールしている「スライダー」など、 イベントや動きの設定されている要素のスクリプトを一旦止めて、要素に設定されているスタイルを変更したい時など。 方法 ①Devloper T…

Webページで使っているJSでは、出てくることも多いので、改めて調べてまとめました。 setTimeout() ・引数に指定した待ち時間の経過後に、関数を1度だけ実行させます。 ・処理を遅延させたい時、例えばコンテンツの非表示を遅らせる時などに使います。 ・cle…

【HTML文字列の挿入】： insertAdjacentHTML insertAdjacentHTMLは、第二引数で指定するテキストをHTMLとして、指定された位置（第一引数で指定）に挿入します。構文は以下です。 .insertAdjacentHTML(position, text); ・第二引数で指定するテキストを HTML…

ブラウザで、要素に設定されたイベントを調べる方法を備忘録として書いておきます。 【Chrome例】 ①developerツールにて、タグを選択する。 ②Event Listenersタブをクリック。 ③clickイベントがあればclickなどと表示されており、▼を押してさらに下を見ると…

・コーポレートサイトなどでよくある、headerで、ロゴ要素だけ左端に置いて、他の要素は右端に並べるレイアウト。 （こういうレイアウト） ────────────────────────────── ロゴ 会社概要 アクセス お問い合わせ ────────────────────────────── ul { displa…

WordPress（PHP）で、投稿のカスタマイズなどを理解するために必須のような基本的な関数を、最近知った分をまとめます。 基本的な関数 get_post_type(); 指定した投稿または現在の投稿の、投稿タイプを取得します。 引数には、投稿タイプを取得したい投稿の …

WordPressでアーカイブにて投稿・ループなどをカスタマイズする業務すすめる上で、WP_Query関数を知りました。 まだまだ理解が浅いですので勉強中ですが、簡単にまとめます。 WP_Queryとは wp-includes/class-wp-query.php に定義されているクラスで、 どの…

私がコーディングの仕事で使用している基本的なツールやサイトを紹介します。 HTMLやCSSのタグやプロパティが、各ブラウザへ対応しているか確認できるサイト「Can I use... 」 使用例）FlexboxがIEなどのブラウザで有効なのか知りたい時。Can I use... Suppo…

【デバッグモード】 ｗp-config.php のDEBUG（） をtrueにする。 【固定ページのバックアップやインポートやエクスポート】 ・エクスポートは、左ナビの「ツール」から。xmlで落とせる。 ・インポートは、同じく「ツール」から「Wordpress」インポーターをイ…

一行で済む文の時 （三項演算子） 長い記述になりそうな時 PHPをHTML内に挿入する時 <p>aaa</p> <p>bbb</p> 参考にさせていただいた記事 unitopi.com

使い方 変数$aに文字列 hoge が入っている場合、以下のように var_dump で取り出してみます。 var_dump($a); 出力結果： string(4) "hoge" string は、型（文字列など）を、 (4) は、文字列のバイト数を、 "hoge"（ダブルクォート）は、値を表しています。 W…

左上の「見たまま」から「はてな記法」を選ぶ。 デフォルトでは前者になっているので、「設定」メニューから変えておくと良い。 以下のようにコードを入れる。 >|css|font-size: 10px;|| 結果： i{ font-size: 10px; } 管理画面の、タイトル下のアイコンを選…

問題 zeplinなどで作成されたデザインデータで以下のような値のまま、 font-family: meiryo; 入れていたら、ブラウザsafariで見た時に、明朝体での表示になってしまっていた。ほかブラウザだとゴシックで表示してくれていたが。 解決策 bodyなどのセレクタに…