技術公開

defaultの有無 export default で書き出した値は、中括弧なしでimport できる。 export で書き出した値は、中括弧ありでimport する。 そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。 とのこと。 参考：ES2015のモジュール機能(import/export) 実際に動かしてみた 上記の参考とまんまだが、実際に動かしてみた。 export default "uchida hyakken"; export const firstNaMe = "hyakken"; export const lastName = "uchida"; import name, { firstNaMe, lastName } from "./export"; console.log("name", name); // name uchida hyakken console.log("firstNaMe", firstNaMe); // firstNaMe hyakken console.log("lastName", lastName); // lastName uchida 下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。 うん、動かすことで理解が深まった。 export / import を使いこなすことで、ファイル管理を楽にしていこう。

treeコマンド treeコマンドとは、フォルダ構成とかを綺麗に表示してくれるもの。 実際に吐き出されるソースの見本は下記記事を参照。 インストールしたreact のファイルを検分する 使い方は簡単で、コマンドを開き、 cd 表示したいフォルダ tree で、きれいに表示される。 ちなみに、ファイル名まで表示したい場合は、 tree /f で、実行する。 bash: tree: command not found Windowsのコマンドなので（？）、vsCode 上で実行すると bash: tree: command not found というエラーができる。 そういう時はコマンドに行けばいいのだが、どうしてもvsCodeでやりたい時は下記コマンドで実行可能となる。 pwd;find . | sort | sed '1d;s/^\.//;s/\/\([^/]*\)$/|--\1/;s/\/[^/|]*/| /g' 参考：Windowsファイルツリー構造の表示とテキスト保存 参考：tree コマンドが無い環境で tree コマンドを実現

クラシックエディタのリンク挿入ボタンがうまく機能していない 公開から少し経ち、ブログを投稿する機会が増えるにつれ、気が付き始めたことがある。 クラシックエディタのリンク挿入機能がうまく機能していないという点が、その１つ。 調べてみるとクラシックエディタがうまく機能しなくなるバグはよくあることらしい。 プラグインが原因？ 調査結果によると多くはプラグインを起因とするものらしく、特定のプラグインを無効化すれば直ったという声をよく見た。 しかし、こういう事態に備えて、プラグインを最小限に抑えている。 とは言え入れていないわけではないので、ひとつひとつ無効化してテストしてみた。 Classic Editor 無効化したが効果が見られず。 というより、そもそもこのプラグインを無効化したら意味がない。 Highlighting Code Block エンジニアの味方。 ブログでコードを簡単に見せることができるプラグイン。 無効化したが効果が見られず。 XML Sitemaps 動的にサイトマップを作成してくれるプラグイン。 無効化したが効果が見られず。 結果、原因はプラグインではない。 functions.phpにいけない記述があるのかしら。 ということで、functions.phpをまるっと削除してみたところ、正常に稼働した。 細分化してエラーの原因を探すと、どうやらビジュアルエディターにcssを当てる記述が悪さをしているとのこと。 書かれたソースがこちら。 // 投稿ページにスタイルを充てる function wpdocs_theme_add_editor_styles() { add_editor_style('パス'); } add_action('admin_init', 'wpdocs_theme_add_editor_styles'); もしやエディタを読み込む関数が非推奨になったのかしらなんて思い、 add_editor_style('パス'); シンプルに記述方法を変えてみたが、変わらず正常に稼働しない。 ついに、原因解明 まさかと思いつつ、ということで読み込んでいるcssの内容をまるっと削除すると、正常に稼働。 そこでトライ＆エラーと消しては確認を繰り返すとついに発見。 原因はaタグに指定された「display: contents ;」…! 確かシンプルにリンクにアイコンをつけたくて記述した箇所だが、現状はもう使用してない不要な箇所。 自身が使うエディタのみだから削除を忘れていた。 そして原因はまさかのCSSだった。 無駄な記述は自身の首を絞める 今回の教訓として心に刻むことにした。 せっかくなので、 display: contents ; 理解を深める 表示のスタイルとエディターのスタイルを一元管理する 上記２つを課題として自らに課すことにした。

Wordpressのタグがひっちゃかめっちゃかになった過去 かつて、タグに翻弄されていたことがある。 カテゴリはチェックボックスで過去に設定したカテゴリを投稿画面で見ることができるのだが、タグはなぜかそれができない。 例えば、「HTML」と過去に投稿したことがあったのだが、次に書くときは「html」と書いてしまうかもしれない。 その時点で2つは別になってしまうのである。 そこでタグもチェックボックスにしようと思いついた。 タグをチェックボックスにする実現コードはこちら //タグをチェックボックス表示に function re_register_post_tag_taxonomy() { global $wp_rewrite; $rewrite = array( 'slug' => get_option('tag_base') ? get_option('tag_base') : 'tag', 'with_front' => !get_option('tag_base') || $wp_rewrite->using_index_permalinks(), 'ep_mask' => EP_TAGS, ); $labels = array( 'name' => _x('Tags', 'taxonomy general name'), 'singular_name' => _x('Tag', 'taxonomy singular name'), 'search_items' => __('Search Tags'), 'popular_items' => __('Popular Tags'), 'all_items' => __('All Tags'), 'parent_item' => null, 'parent_item_colon' => null, 'edit_item' => __('Edit Tag'), 'view_item' => __('View Tag'), 'update_item' => __('Update Tag'), 'add_new_item' => __('Add New Tag'), 'new_item_name' => __('New Tag Name'), 'separate_items_with_commas' => __('Separate tags with commas'), 'add_or_remove_items' => __('Add or remove tags'), 'choose_from_most_used' => __('Choose from the most used tags'), 'not_found' => __('No tags found....

記事に目次をつけよう 目次があれば、結末まですぐに飛ぶことができる。 時間に追われる現代人にはなくてはならない機能である。 そこで本サイトに目次を導入した。 プラグインは使いたくないよう 個人的にプラグインには頼りたくない。 理由はシンプルで楽しくないからである。 どうせ作るなら自分自身の力で作成したい。 なので今回も自作した。 目次を挿入するための考え方 やりたいことはページが開かれた時に記事に目次を挿入する。 で、対象はh2タグとh3タグとする。 つまり、記事内にh2タグとh3タグがあるかを判定し、あればそれに対応する目次を挿入する。 実現コードはこちら // 目次を生成 let secondIdCount = 1 let ThirdIdCount = 1 const headingSecond = document.querySelector('.article-detail')?.querySelectorAll('h2') const headingThird = document.querySelector('.article-detail')?.querySelectorAll('h3') if (headingSecond !== undefined || headingThird !== undefined) { headingSecond.forEach(el => { el.id = `tocSecond-${secondIdCount}` secondIdCount++ }); headingThird.forEach(el => { el.id = `tocThird-${ThirdIdCount}` ThirdIdCount++ }); const target = document.querySelectorAll(`[id^='toc']`) const insertTarget = document.querySelector('.article-table-of-contents-insert') if (target.length === 0) { document....