Docusフレームワークで階層データを表示するための再帰コンポーネントの実装
DocusはNuxtとMarkdownを使用してビューティフルなドキュメンテーションを作成できるツールです。この記事では、Docusのフロントエンドコンポーネントを使って階層データを表示する方法を紹介します。
再帰コンポーネントとは？
再帰コンポーネントは、自分自身をテンプレート内で呼び出すことができるコンポーネントです。これはファイル構造やナビゲーションメニューな ...
6月29日 21:33 投稿
NEditorで簡体字と繁体字の変換機能を実装する方法
簡体字・繁体字変換ボタンの追加手順
1. ツールバーにボタンを追加します。ファイルパス：neditor/neditor.config.js
toolbars: [
[
"selectall", // 全選択
...
'simplified', // 簡体字
'traditional' // 繁体字
]
]
2. ボタンのラベルテキストを追加します。ファイルパス：neditor/i18n/zh-cn/zh-cn.js
'labelMap':{
'anchor':'アンカーポイン ...
6月23日 23:30 投稿
Vue Router の基本設定と実装手順
Vue.js でシングルページアプリケーションを構築するには、Vue Router の導入が不可欠です。以下に、最小限の環境からルーティング機能を整えるまでの手順を解説します。
プロジェクトの初期化
任意のディレクトリでコマンドプロンプトを開き、次のコマンドを実行して Vue プロジェクトを生成します：
npm create vue@latest
対話形式で設定が進みます。ルーティング機能 ...
6月21日 16:08 投稿
VSCodeにおけるプロジェクトコード規約設定 - editorconfig, prettier, ESLint
editorconfig
EditorConfigは、複数の開発者が同じプロジェクトを異なるIDEで編集する際のコーディングスタイルの一貫性を保つことを目的としたツールです。
プラグインのインストール：EditorConfig for VS Code
プロジェクトのルートディレクトリに.editorconfigという名前のファイルを作成し、以下の内容を記述します。
root = true
[*]
charset = utf-8
indent ...
6月18日 20:08 投稿
Headless UIを使ってアクセシブルなモダンWebインターフェースを構築する方法：2023年の開発者必読ガイド
Headless UIとは、Tailwind CSSとシームレスに統合できる、完全にスタイルのないが完全にアクセシブルなUIコンポーネントライブラリです。このライブラリは、開発者がユーザーインターフェースを構築する方法を根本から変え、視覚的な表現を完全にコントロールしながら、すべてのユーザーにとってアクセシブルなアプリケーションを確保できるようにします。
Headless UIの ...
6月16日 00:45 投稿
SpringBootとVueを基盤とした研究業務管理システムの設計と実装
序文
現代の経済の高速発展と絶えず進化する情報技術は、伝統的なデータ管理をソフトウェアによる保存、分類、集中処理へと変革しています。この研究業務管理システムは、そのような環境下で誕生しました。管理者が短時間で大量のデータを処理し、業務効率を向上させることを支援します。このシステムは、成熟したSSMフレームワーク、クロスプラットフォームで大規模な商用 ...
6月11日 19:45 投稿
Vueの基本操作とCSS活用法
ここに記載する内容は、思いつくままに書きます。他の項目は後で追加します。また、いくつかのCSSも含まれています。
テキスト入力フィールドの双方向データバインディング
HTML
<input value="123456" type="text" v-model="account" @input="handleAccountChange" class="bottom-line bottom" placeholder=&q ...
6月10日 22:59 投稿
Vue プロジェクトにおけるフロントエンドの工程化とWebpackの活用
フロントエンド工程化の重要性
近年のフロントエンド開発では、SPA（シングルページアプリケーション）の普及により、JavaScript の複雑さが増し、多くの依存パッケージや SCSS・TypeScript などの拡張構文を扱う必要が出てきました。このような状況に対応するため、Webpack などのモジュールバンドラは、プロジェクト構造を解析し、ブラウザで直接実行できない拡張構文を ...
5月22日 17:22 投稿
Heroiconsとモバイルレスポンシブデザイン：小画面での最適な表示を実現する方法
Heroiconsとモバイルレスポンシブデザイン：小画面での最適な表示を実現する方法
現在、モバイルファーストの時代において、ユーザーがスマートフォンやタブレットなどの多様なデバイスでウェブサイトやアプリにアクセスするのは当たり前のことです。アイコンはユーザーインターフェースの核となる要素であり、その異なるスクリーンサイズでの表示は、ユーザーエクスペリエ ...
5月20日 08:53 投稿
Nuxtプロジェクトでimport構文を有効にする最新手法
Nuxtを使用したVue開発に関する動画を視聴していた際、NuxtプロジェクトではES6のimport構文が利用できないという記述があった。その際の対応策として以下の手順が紹介されていた：
1. package.jsonに以下の設定を追加する：
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node&q ...
5月19日 04:23 投稿