noonworks

絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです…

noonworks

絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです。 好きなゲーム：FF14、Minecraft

  • デザイナー向けのVue.js紹介

    「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。

UIデザイン反面教師日記：言いがかり警告

はじめに言い訳させていただくと、私はUIデザインのプロではありません。しかし、プロでなくとも「このUI/UXはイヤだな」と感じることはよくあります。 この記事はそういっ…

noonworks
noonworks
4年前
3

(7) コンポーネントの属性 - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、コンポーネントに属性値を渡す方法を…

noonworks
noonworks
4年前
4

キーボードと手

（PCのモニタが映らなくなってしまったので、今日の連載更新は休止で、スマホから日記をお届けします……） 私は手が小さいです。 すごく小さいというわけではありません…

noonworks
noonworks
4年前
6

(6) 子要素を持つコンポーネント - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、子要素を持つコンポーネントを作る方…

noonworks
noonworks
4年前
4

(5) スタイルの適用と閉じ込め - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、コンポーネントにスタイルを適用し、…

noonworks
noonworks
4年前
4

(4) 新規コンポーネントの追加 - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、新規コンポーネントを追加してみます…

noonworks
noonworks
4年前
6

(3) サンプルで見る動作の流れ - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、前回作成したサンプルの動作を解説し…

noonworks
noonworks
4年前
8

(2) CodeSandboxでサンプルを動かす - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、Vueを使ったプロジェクトのサンプルを…

noonworks
noonworks
4年前
12

(1) Vue.jsの概要・機能・メリット - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、Vue.jsの概要・機能・メリットの解説…

noonworks
noonworks
4年前
20

デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、執筆経緯や想定読者、記事の方針など…

noonworks
noonworks
4年前
17

はじめまして

noonworksと申します。 絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです。 主にプログラミングに関する記事を書いていこうと思…

noonworks
noonworks
4年前
8
noonworks

noonworks

UIデザイン反面教師日記：言いがかり警告

はじめに言い訳させていただくと、私はUIデザインのプロではありません。しかし、プロでなくとも「このUI/UXはイヤだな」と感じることはよくあります。
この記事はそういった「イヤだな」の考察であり、特定サービスを貶める目的のものではありません。

謎のエラーメッセージ？ある日、私はスマートフォンのブラウザでブログ記事を読んでいました。読んでいるうちに知らない言葉が出てきたので、その文字列を選択し、ブ

もっとみる
noonworks

noonworks

(7) コンポーネントの属性 - デザイナー向けのVue.js紹介

(7) コンポーネントの属性 - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、コンポーネントに属性値を渡す方法を解説します。
連載をまとめたマガジンはこちら↓

コンポーネントの属性前回作成したBaseButtonコンポーネントは、現段階ではまだリンクやボタンとして動作しません。BaseButtonコンポーネントにリンク先のU

もっとみる
noonworks

noonworks

キーボードと手

（PCのモニタが映らなくなってしまったので、今日の連載更新は休止で、スマホから日記をお届けします……）

私は手が小さいです。
すごく小さいというわけではありませんが、知り合いの女性の平均よりもやや小さく、一般的な男性の手よりは0.5～1cmくらい指が短いと思います。

その私からすると、プログラマーに人気のHHKBシリーズなどは、大きすぎて指が疲れます。キーピッチには困りませんが、キーストローク

もっとみる
noonworks

noonworks

(6) 子要素を持つコンポーネント - デザイナー向けのVue.js紹介

(6) 子要素を持つコンポーネント - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、子要素を持つコンポーネントを作る方法を解説します。
連載をまとめたマガジンはこちら↓

コンポーネントのルート要素前回までに作ったコンポーネントは、単一のHTML要素を持つコンポーネントでした。今回からは、もっと複雑なコンポーネントを作っていきましょ

もっとみる
noonworks

noonworks

(5) スタイルの適用と閉じ込め - デザイナー向けのVue.js紹介

(5) スタイルの適用と閉じ込め - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、コンポーネントにスタイルを適用し、スタイルを閉じ込める方法や共通CSSを使う方法を解説します。
連載をまとめたマガジンはこちら↓

スタイルの適用前回までに作った新しいコンポーネントにスタイルを適用してみましょう。今回は下のように、端が透明にグラデー

もっとみる
noonworks

noonworks

(4) 新規コンポーネントの追加 - デザイナー向けのVue.js紹介

(4) 新規コンポーネントの追加 - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、新規コンポーネントを追加してみます。
連載をまとめたマガジンはこちら↓

新規コンポーネントファイルの作成
前回までで基本的なファイル構成や動作の流れがわかりました。
今回は、新規コンポーネント作成のサンプルとして、シンプルな水平罫線（<hr>）のコ

もっとみる
noonworks

noonworks

(3) サンプルで見る動作の流れ - デザイナー向けのVue.js紹介

(3) サンプルで見る動作の流れ - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、前回作成したサンプルの動作を解説し、いじってみます。
連載をまとめたマガジンはこちら↓

サンプルのフォルダ構造まずはサンプル・サンドボックスの構造を確認してみましょう。ファイルエクスプローラー上でフォルダをすべて展開すると、以下のようになります。

もっとみる
noonworks

noonworks

(2) CodeSandboxでサンプルを動かす - デザイナー向けのVue.js紹介

(2) CodeSandboxでサンプルを動かす - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、Vueを使ったプロジェクトのサンプルを作成します。
連載をまとめたマガジンはこちら↓

アカウントの準備
Vueに触れ、プログラミングを始めるにあたって、便利なWebサービスがいくつかあります。まずはそこへの登録から始めましょう。（すべて無料で使用可

もっとみる
noonworks

noonworks

(1) Vue.jsの概要・機能・メリット - デザイナー向けのVue.js紹介

(1) Vue.jsの概要・機能・メリット - デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、Vue.jsの概要・機能・メリットの解説をします。
連載をまとめたマガジンはこちら↓

Vue.jsとは？Vue.js公式サイトの「はじめに」のページにリンクされている動画が非常にわかりやすいです。プログラミングの専門用語を含んだ英語の動画なので、抄

もっとみる
noonworks

noonworks

デザイナー向けのVue.js紹介

デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、執筆経緯や想定読者、記事の方針などを説明します。

執筆経緯私自身はプログラマーで、趣味で小さなwebアプリケーションを作っています。その中で Vue.js を使用し、とても便利なのでデザイナーさんにも触ってみてほしいなぁと思いました。

さっそくT

もっとみる
noonworks

noonworks

はじめまして

noonworksと申します。
絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです。

主にプログラミングに関する記事を書いていこうと思っています。
よろしくお願いします～

扱う予定のテーマ：
Vue.js、フロントエンド、TypeScript、ユーザーインターフェイス


好きなゲーム：FF14、Minecraft、CookieClicker
Twitte

もっとみる