例えば、コンポーネントを使ってブログを作成するとなると、記事のタイトルや投稿内容などのデータをコンポーネントに渡して処理することになります。今回は、コンポーネントにデータを渡す方法について書きます。 カスタム属性としてデータを渡す Vueインスタンスのdataを渡す 単一のルート要素 単一のプロパティでデータを渡す まとめ 参考サイト カスタム属性としてデータを渡す <!-- blog-postタグのtitle属性に値を指定 --> <div id="app"> <blog-post title="HTMLについて"></blog-post> <blog-post title="CSSについて…

コンポーネントの基本の記述について書きます。ここでは、クリックイベントを持つコンポーネントの例を簡単に見ていきます。他の記事でも書きましたが、改めてコンポーネントが再利用可能であることを確認します。 コンポーネントの基本の記述 コンポーネントの記述例 コンポーネントのdataオプションは関数にする コンポーネントの再利用 参考サイト コンポーネントの基本の記述 コンポーネントは、以下のように定義します。 Vue.component('コンポーネント名', { // ... オプション ... }) オプションには、data、template、methodsなどを指定できます。dataオプション…

コンポーネントで再利用可能なパーツを作ります。つまり、ページのある箇所のHTML、CSS、JavaScriptを部品に切り出して、再利用できる形にします。例えば、ナビゲーションバーやヘッダー、フッターを部品に切り出して使うことが考えられます。そして、切り出した部品を新たなタグとして定義します。 コンポーネントを作る コンポーネントの再利用 コンポーネントにメソッドを定義する まとめ 参考サイト コンポーネントを作る 以下に簡単な例を示します。ここでは、<click-box>～</click-box>というタグを新たに作ります。このタグの内容をVue.component()で定義します。 <di…

Reactは、PropsまたはStateが更新されるたびに、コンポーネントを自動的に再レン​​ダリングします。 どちらも変更されない場合は、再レンダリングは発生しません。 しかし、初心者はコンポーネントを再レンダリングするのが非常に難しいと感じることがよくあります。 まず、コンポーネントを再レンダリングするために使用できる方法を見て、本当に再レンダリングを強制するべきか、 Reactに処理させるべきかについて説明します。 Reactコンポーネントを再レンダリングさせる方法とタイミングを真に理解するには、Reactの内部動作を理解する必要があります。 つまり、コンポーネントを強制的に再レンダリン…

状態の概要 状態とは？ Reactの状態管理 それの何が良いのか？ 状態管理の変化 フック Context APIとは？ 最後に Reactでの状態管理はReactをやっていく上ではもっとも重要となります。しかし、状態はReactで最も複雑なものであり、初心者と経験豊富な開発者の両方が理解するのに苦労している方々は少なからずいらっしゃいます。そのため、この記事ではReactの状態のすべての基本について説明します。Propsの解説も含めますが、状態管理に焦点を当てていきます。状態を制する者はReactを制すると言っても過言ではありません。 状態の概要 状態により、アプリケーション内の変化するデー…

はじめに 技術広報のyayawowoです。 いつもラクスのエンジニアブログをお読みいただき、ありがとうございます。 また、別途開催しているエンジニアイベントへのご参加も誠にありがとうございます。 今回も大盛況となりました、『【ラクスMeetup】大規模SaaSのフロントエンド開発／レガシー改善、Vue.js、マルチブラウザ対応』の発表内容についてご紹介します。 rakus.connpass.com はじめに イベントテーマ概要 発表の紹介 20年物プロダクトのフロントエンドを改善するための取り組み チャットボットシステムのスマートフォン対応について チーム開発におけるコンポーネントシステムの問…

はじめに Twitterを流し読みしていると、こんなツイートが流れてきました。 PowerPointの色調整は、HSLモードがおススメ。#PowerPoint pic.twitter.com/g0lEz3DSi4 — ネスコプラズム (@nesscoplasm) 2021年9月7日 いつもPower Pointを中心にいろいろなデザイン関連のツイートをされているネスコプラズムさんのツイートでした。HSL、便利そう！ Power Appsでの色指定 Power Appsでの色指定は、Color列挙体(組み込み色の名前で指定)、ColorValue(16進数値で指定)、RGBA（Red,Green…

この記事は MicroAd Advent Calendar 2022 の4日目の記事です。 qiita.com 前提 ここで触れないこと RKE2って？ Kubernetesのコンポーネント RKE2のアーキテクチャ RKE2の制限事項・必要条件 RKE2 ServerとAgent Nodeの構成をどうするか RKE2にてcontrol planeとetcdを分けて構築するには RancherからCreateしたクラスタと構築済みのクラスタを登録する場合の違い RKE2の設定ポイント 設定ポイント：RKE2で利用するデータ領域を別Diskに指定する 設定ポイント： tokenは指定する方が楽 …

はじめに 本エントリーは Vue Advent Calendar 2022 3日目の記事です。 qiita.com 今回は VueJS と地図アプリ開発用 API の ArcGIS API for JavaScript を使用して簡単な地図アプリと印刷機能を作成しました。Vue と ArcGIS API for JavaScript については Esri の ArcGIS API for JavaScript の開発者でもある Rene Rubalcava 氏のブログで以下の記事を参考にしました。 odoe.net ArcGIS API for JavaScript は ES モジュールとして…

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2022 の 4 日目の記事です。前日の記事は尾沼さんの「リファイメントとプランニングを改善することで、チームの属人化が解消された話」でした。 こんにちは。バイセルテクノロジーズ テクノロジー戦略本部 開発 2 部の小松山です。 私が関わっているプロジェクトでは、一部のバッチ処理の実行環境として Cloud Run ジョブを採用しています。Cloud Run ジョブは2022 年 5 月にリリースされた比較的新しいサービスで、記事執筆時点ではプレビュー版として提供されています。サービスの解説記事や試してみた系の記事は散…

ファイバスプリッタはFTTxとPONアーキテクチャの重要なコンポーネントであり、複数のユーザーがファイバネットワークを共有できるようにします。最も一般的な分光器のタイプは、FBT（融合二重テーパテーパ）分光器とPLC（平面光波回路）分光である。 PLC光分岐器 PLC分岐器は石英基板に基づく集積導波路光パワー分配装置であり、体積が小さく、動作波長範囲が広く、信頼性が高く、スペクトル均一性が良いなどの特徴を有し、特に受動光ネットワーク（EPON、BPON、GPONなど）にローカル端と端末装置を接続し、光信号の分岐を実現するのに適している。 FBT光分岐器 FBT分岐器は、2つ以上の光ファイバをバ…

これは エムスリー Advent Calendar 2022 の3日目の記事です。 エンジニアリンググループの山本です。 主にクラウド電子カルテサービス エムスリーデジカルのフロントエンドを開発しています。 この記事は、デザインの刷新と技術的負債(AngularJS)の返却を目的にデジカルの施設管理画面をリニューアルした時の記録になります。 愛犬のぽめちわ 施設管理画面 技術選定 その他実装方針 おわりに We are hiring!

この記事は「はてなエンジニア Advent Calendar 2022」の3日目の記事です。2日目は id:pokutuna さんの「Slack チャンネルのロボット帝国化を防ぐ feed-pruning-proxy」でした。 blog.pokutuna.com さて、TypeScript で React コンポーネントを定義する時、皆さんはどういう書き方をしてますか? 関数宣言/アロー関数どちらを使って書くか、React.FC を使うかどうか、など微妙に人によって書き方が異なると思います。 その中でも、よく使われるのは以下の 3 つのスタイルでしょうか。 import React from …

Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か？ 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の…

記事作成日：2022/12/03 情報 名前 URL Github https://github.com/OAI/OpenAPI-Specification 公式サイト https://www.openapis.org/ デモサイト https://editor.swagger.io/ 開発母体 OpenAPI Initiative version 3.1.0 言語 JavaScript 価格 無料 ライセンス Apache-2.0 license 情報 何ができるもの？ 使い方 利用シーン 登場背景 気にすること 何ができるもの？ OpenAPI: 仕様 Swagger: 仕様を実装するため…

概要 Windows ユーザーなら一度は使用したことがあるかもしれない、標準でついている電卓アプリが GitHub に公開されていましたので、今回はこちらの「Windows Calculator」についてご紹介します。 Windows Calculator（以降、電卓アプリ） は C++ 及び C# で記述されたデスクトップアプリで、Windows に標準でインストールされています。 こちらの電卓アプリは標準的な電卓としても使用できますし、科学計算やプログラマー向け電卓機能など様々な電卓の機能が含まれています。 電卓アプリは常に新機能とバグ修正をリリースしているようで、日々の開発状況が Git…

PHC（プログレッシブハイドロリッククッション）の登場以降は古い技術とシトロエン社からも公言されてしまったハイドロニューマッチクですが、私は可能な限り乗り続けようと考えています。まだ、C5Xには試乗していませんが、ディーラーにC5エアクロスを買いに行って、C6の中古も試乗したのが運の尽きで、C5エアクロスもハイドロ感満載だったのですが、程度の良い中古C6のどんぶらこを体験したら、どうしても乗ってみたくなり、気がついたらC6を契約してしまった自分がいました。妻もC6の乗り心地に感銘し、購入許可をいただけたのは本当に幸運でした。 さて、本題ですが、ハイドロサスの肝はやはりスフィア（sphere）で…

shuntaendo.hatenablog.com Building Open Worlds in Unreal Engine 5 - UE5でオープンワールドを構築する 概要 Open World テンプレート デバッグ UE4からの変換 World Partition Editor Packed Level Actor Improving Developer Iteration in Unreal Engine 5 - UE5においての開発イテレーションの改善 概要 Unreal Cloud DDC Virtual Asset Horde Compute 最終的なワークフロー、実装時期 A…