ha6_6ruブログ

主にフロントエンドの技術ネタを中心にしていく予定です。

SIにおける受託開発のプロセス(APアーキテクト目線)

はじめに 受託開発(クライアントがオーナーになるシステムの構築依頼を受ける場合)のプロセスの内、アプリケーション基盤領域のITアーキテクト(APアーキテクト)の仕事内容をまとめたもので、所謂SIerの仕事の一断面です。以降、ITアーキテクト(AP)と記…

障害解析の進め方

概要 技術部門に異動してから10年以上にわたって実践してきた、他部門から依頼された障害解析における思考およびプロセスを残すものです。 初見のアプリケーションの障害解析が中心だったり、構成に利用したことのないインフラや製品などが含まれることも普…

VSCode Dev Containers(旧Remote Containers)を使った開発環境構築

概要 ソフトウェアやライブラリなどのアップデートを検証する際の使い捨て環境、開発環境構築の自動化などにVisual Studio CodeのDev Containersが便利です。 Dev Containersを利用すれば、開発環境で手軽にDockerコンテナーを扱うことができます。コンテナ…

Docker Comose バインドマウントと相対パスの名前付きボリューム

概要 Dockerボリュームのバインドマウントとdriver optionの相対パス指定について記載します。 Visual Studio Code Dev Containersを使って開発環境を作る時に個人的に必要になった情報をまとめています。 バインドマウント バインドマウントはDockerコンテ…

PiniaのactionからVue Routerを使ってルーティング

概要 Pinia のドキュメントに記載の通り、ストアインスタンスのプロパティに Vue Router のインスタンスを設定することにより、 action から Vue Router を使うことができるようになります。これによって、action 内でルーティングを行うことができます。 公…

動くWebデザインアイディア帳

ナビゲーションやモーダルなどパーツごとに動作するデモがあるので、 デザインの引き出しに使えるだけでなくてクライアントとのイメージのすり合わせにも使えそう。 coco-factory.jp

Vue 3 Auth Guard(未認証の場合にログインページにリダイレクト)

はじめに 次のような振る舞いを実現する場合、Vue.js(Vue Router)ではナビゲーションガードを利用します。 ECサイトで購入手続きに入ろうとしたときにログインページに飛ばされる 最初にログインが必要なサイトで、ログイン以降に表示されるページにアクセ…

axiosの脆弱性解析事例(JVNDB-2020-013151)

はじめに この記事では、axiosの脆弱性(JVNDB-2020-013151)を題材に、エンタープライズ系案件の脆弱性対応について紹介したいと思います。 この記事で題材にするエンタープライズ系案件の特徴としては、例えば大規模で自動テストも無く、簡単にはバージョ…

Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境

はじめに この記事は Vue Advent Calendar 2020 の 25 日目の記事です。 Vue.jsを使ったアプリケーション開発とは少し趣旨を変えて、Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境について整理します。 スクエア free セミナー 第11…

コード値(区分値)選択用フィールドの作り方

概要 業務用アプリケーションによくあるコード値の選択用フィールド 作り方 コード値選択フィールドの外観 Vuetifyを使った実装指針 その1 コード値をキャッシュする template script その2 コード値を都度WebAPI経由で取得する template script 終わりに …

Vue3の始め方

はじめに Vue.js 3.0リリースに併せて、Vue.jsをハンズオン形式で学習する書籍を出版しました。 書籍では、Vue3への移行情報や新機能の中心になっているComposition APIを解説しています。 書籍の宣伝を兼ねて、2020年10月時点のVue3の取り組み方について解…