2022-10-16

Nuxt3にtailwindを導入する

導入手順

インストール

npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

@nuxtjs/tailwindcss → Nuxt3でTailwindCSSを利用するためのモジュール tailwindcss@latest → Tailwindの最新版 postcss@latest → postcss(CSSツールを作るためのフレームワーク)の最新版 autoprefixer@latest → autoprefixerの最新版

nuxt のビルド設定

ファイル名：nuxt.config.ts

export default defineNuxtConfig({
  buildModules: ['@nuxtjs/tailwindcss'],
  css: ["@/assets/css/tailwind.css"],
})

buildModules: ['@nuxtjs/tailwindcss'] → @nuxtjs/tailwindcssモジュールをビルド時に利用する css: ["@/assets/css/tailwind.css"] → @/assets/css/tailwind.cssのCSS設定の読み込み

Tailwind のセットアップ

npx tailwindcss initでtailwind.config.jsを作成する

ファイル名：tailwind.config.js

module.exports = {
  // tailwindを適用したいファイル群を指定
  content: [
    "./app.vue",
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

./assets/css/tailwind.cssを作成

ファイル名：./assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

上記の３つは【Tailwind CSS】標準で読み込まれるCSSについて【Tailwind CSS】標準で読み込まれるCSSについて | プログラミングマガジン

参考

Nuxt 3 + Tailwind CSS 3 Starter: How to add Tailwind CSS v3 to your Nuxt 3 application - YouTube

Nuxt3 に Tailwind CSS をインストールしてみた

2022-10-13

Nuxt3にEslintとprettierを導入する

Nuxt.js TypeScript vue.js フロントエンド個人開発

Nuxt3にEslintとprettierを導入する

ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。

ESLint：静的解析ツール。バグの可能性がある書き方を指摘する。

Prettier：コードフォーマッター。インデント、改行などを自動整形してくれる。

ESLintとPrettierの違いについて - 技術ブログ

1. Eslintの導入

1.1 必要パッケージのインストール

npm install --save-dev eslit eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslit -> ESLint本体
eslint-plugin-vue -> vueファイルを静的検証
@vue/eslint-config-typescript -> TSをESLintで検証するために必要なライブラリ
@typescript-eslint/parser -> TSをESLintで検証するために必要なライブラリ
@typescript-eslint/eslint-plugin -> TSをESLintで検証するために必要なライブラリ

1.2 .eslintrc.ymlの作成

.eslintrc.ymlにEslintの設定情報を記載していきます。

env:
  # windowやalertも含まれるたくさんのブラウザ用のグローバル変数を一気にglobals設定に登録してしまい、ESLintにチェックしなくてよいと伝える
  browser: true
  # ECMAScript2021を適用
  es2021: true
extends:
  # eslint-plugin-vueが推奨するルールを適用/https://eslint.vuejs.org/user-guide/#installation
  - 'plugin:vue/vue3-recommended'
  - '@vue/typescript/recommended'
  # ESLintが推奨するチェック項目でまとめてチェックする
  - 'eslint:recommended'
parserOptions:
  # parserOptionsのecmaVersionは、使用するECMAScriptのバージョンを指定します。envのes2021は指定しているため、それに合わせる
  ecmaVersion: 12
plugins:
  - vue
  - '@typescript-eslint'
rules: {}

1.3 package.jsonのscriptsにeslintの実行コマンドを指定

  "scripts": {
    ...
    "lint-fix": "eslint --fix --ext .ts,.js,.vue .",
  },

--fix は勝手に直しちゃうオプションなのでなしがいい場面もあるかも
--ext で範疇とする拡張子を選ぶ.
最後の . は現在のディレクトリ内を探して、という意味。 --ignore-path で .gitignore に書いてあるものは無視します。

2. Prettierの導入

2.1 必要パッケージのインストール

npm install --save-dev prettier @vue/eslint-config-prettier

prettier -> prettier本体
@vue/eslint-config-prettier -> ESLintのフォーマットのルールを無効にします。そのため、Prettierが整形した箇所に対してエラーを出さなくなります。

2.2 .prettierrc.ymlの作成

Prettierの設定ファイル.prettierrc.ymlを作成します

# 80文字で折り返す
printWidth: 80
# 半角スペースの数を2にする
tabWidth: 2
# ダブルクオテーションの代わりにシングルクオテーションを利用する
singleQuote: true
# 末尾のセミコロンを無しにする
semi: false

2.3 package.jsonのscriptsにprettierrcの実行コマンドを指定

  "scripts": {
    ...
    "format-fix": "prettier -w .ts,.js,.vue ."
  },

--w で上書き保存します

参考サイト

Vite + Vue3にESLintとPrettierを導入する

Nuxt 3 + Tailwind + esLint + Prettierの環境を作成する

2022-10-11

個人開発ドキュメントまとめ

個人開発

アイデア

自分の問題にフォーカスする
自分と同じ悩みを持つ人は他にもたくさんいる
本ではなく自分の経験から考える
問題からまずは考える、解決はその後
ニッチから始めよう
アイデアは人に話しても問題ない。アイデアが同じでも人によってアウトプットが変わるので
自分が毎日使うようなサービスが良い

開発

最初はMVPでOK
完璧を目指さない
バグは出しても良いが、報告できるようなUIにすべき。そうしないとユーザーがイライラする
アプリがグロースしてきたら人を雇う。一人では時間的制限がありすぎる
技術力が高くなくても良い、分からなければその都度調べていくスタンスで十分
小さく初めて、小さく試して、ダメなら作り直す。成功するまで繰り返す
コストダウンは大事
コネクションは大事ではない、大事なのはスキルとお金
あなたの悩みはググればほぼ答えがある。大事なのは検索力
利用する技術は慣れていて一番早く開発できる技術が一番良い
最初はwebで、人気出たらnativeが良い。
リリース前にLPは作った方が良い
問い合わせ機能はGoogleFormで作成
タスク自動化は Zapierが良い
課金はStripeが良い
外部APIは依存リスクが高い（クローズする可能性があるので）

リリース

3ヶ月以内にリリースしないとモチベきつい
バグはできる限り回収した後にリリースしよう
アナリティクスはいれるべき
フィードバック機能はいれるべき
顧客ターゲットがいそうな場所でプレスリリース出す
リリース情報は複数箇所に挙げて、どんな反応があるか比べる
友達に拡散を依頼しない、良いプロダクトは依頼しなくても拡散される
嘘のlikesなどをしない
fakeは短期ではworkするが、長期ではworkしない

グロース

グロースハックなどの小手先に頼らない
自然なグロースが一番良い、フォロワーを金で買うと長期で見ると破綻する
バージョンアップするたびに、ストーリをプレスリリースする
SNSシェア機能は必須
公開API作るのもあり

マネタイズ

マネタイズすることに罪悪感を抱く必要はない
マネタイズ方法は早めに考えておくべき
[マネタイズ方法１] 機能を絞り込み、人気機能を利用するには有料プランに以降を促す
[マネタイズ方法２] ほぼ全ての機能はフリーで利用できるか、一部の機能のみを有料化する
[マネタイズ方法３] 広告型収入でマネタイズする
[マネタイズ方法４] 月額制で利用料金を支払うサブスクリションモデル
[マネタイズ方法５] プラットフォームサービスでユーザーと企業がマッチングした時に発生する金額の一部を成果報酬として得る。
課金システムはStripe利用が良い
返金要求された時は、フォームで理由を聞いた上で返金するのがベター（クレームは顧客ヒアリングのチャンス）

自動化

人を雇わなくても自動化できそうな箇所はロボットで自動化する
単純作業や繰り返し処理は自動化できないか検討する
不労所得に夢を見ない
テストやデプロイの自動化は必須

エクジット戦略

売却オファーができるように連絡先をオープンにしておく
オファーに浮つくのはNG
90%程度のオファーはシリアルでないので、そういうのは無視でOK
ブローカー使って売却先探すのもあり
現金売却、株式売却のどちら選ぶ
売却するときは税金もかかる
売却してFIREしたとしても、何もしないとメンタルがやられる
相手からオファーがあって売る方が勿論ベター、自分から売ると買い手の言い値になりやすい

参考

MAKE: The Indie Maker Handbook

2022-09-15

JavaScriptでディープコピーとシャローコピーについて

JavaScript

JavaScript(Vue.js)で実装している時に参照先のデータがうまく参照できないケースが発生しました。

そこで、データを参照する為ようのコピーを作成したのですが、その時にディープコピーとシャローコピーについて理解が出来ておらず詰まったのでそれぞれの違いを記載します。

結論

ディープコピー：オブジェクトの中のオブジェクトまで丸ごとコピーする
シャローコピー：オブジェクトの中の中のオブジェクトは参照コピーする

ディープコピーはコピー元とコピー先の実体は別なので、どちらかのオブジェクトを変更したも、もう片方のオブジェクトに影響を与えない

シャローコピーはコピー元とコピー先の実態は同じなので、どちらかのオブジェクトを変更したら、もう片方のオブジェクトも変更される

違いについてはこちらの動画がわかりやすい：ディープコピーとシャローコピーの違い - YouTube

ディープコピー図解

画像参照：【JavaScript】ディープコピーとシャローコピーの違い

ディープコピー実装方法

単純にシリアライズ → デシリアライズという形でも、ディープコピーできるようです。

例）

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = JSON.parse(JSON.stringify(lists))

copyLists[0].key1 = "hoge"
console.log('lists')
console.log(lists)

console.log('copyLists')
console.log(copyLists)

実行結果

lists
0: {key1: "value1", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3"}

シャローコピー図解

画像参照：【JavaScript】ディープコピーとシャローコピーの違い

2022-09-10

JSON.parse()とJSON.stringify()の違い

JavaScript

JSON.parse()とJSON.stringify()の違い

JavaScriptのブラウザーでは組み込みの JSON オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。

■ parse(): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。
■ stringify(): オブジェクトを引数に取り、等価な JSON 文字列を返します。

超簡単にまとめるとJSONの生成する時がJSON.stringfiy()でJSONの読み込みをする時がJSON.parse()になります。

JSON.stringify() – JavaScriptでJSONを作成する

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);
// オブジェクトを引数に取り、等価な JSON 文字列を返します。

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

配列に対しても利用可能

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
// 配列を引数に取り、等価な JSON 文字列を返します。

console.log(myArrStr);
// "["shark","fish","dolphin"]"

■ 応用篇
JSON.parse() は、値が返される前にオブジェクト値を変換できる2つ目の引数として、関数を指定することができます。

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

↓
{
    "name": "SAMMY",
    "email": "SAMMY@DOMAIN.COM",
    "plan": "PRO"
}

JSON.parse () – JavaScriptでJSONを読み込む

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);
// オブジェクトを引数に取り、等価な JSON 文字列を返します。

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"


---- 追加 ----

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
// 配列を引数に取り、等価な JSON 文字列を返します。

console.log(myArrStr);
// "["shark","fish","dolphin"]"

---- 追加 ----

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

■ 応用篇
JSON.stringify() は、2つの追加引数を指定することができます。1つ目はreplacer関数で、2 つ目は文字列または数値を、返された文字列のスペース（インデント）として使用します。

const user = {
  id: 229,
  name: 'Sammy',
  email: 'Sammy@domain.com'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

参考

【parse / stringify】JavaScriptでJSONを簡単に扱う方法 | IT・ものづくりエンジニアの転職・派遣求人情報なら【パソナテック】

2022-08-25

フロントエンドの環境設定

JavaScript HTML/CSS Nuxt.js IT基礎知識フロントエンド

フロントエンドの環境設定

概要

Babel : ES6 -> ES5への変換
Node.js : JSライブラリ管理
webpack: 1つにまとめる（読み込み速度UP)
polyfill: 下位互換
vue-cli: 必要ソフトをパッケージ化

Npm

■ Npmとは Node.jsはJavaScriptを実行する環境です。

本来、JavaScriptはWebブラウザに組み込まれていて、ブラウザ上でしか実行できませんでした。

しかし、Node.jsはその場でのスクリプトの実行を可能にしてくれます。さまざまなライブラリが存在しているのですが、それらのインストールを行うツールとして、Node.jsに組み込まれているのがNpmです。

■ package.jsonとは npmを使ってパッケージをインストールする際に、バージョンなどの情報をJSON形式で記録して依存関係をまとめたファイル

■ 参考リンク

npm入門 - Qiita

npm よく使うコマンドまとめ

webpack

■ webpackとは webpackとはモジュールバンドラーになります。

webpacklを利用することで、複数のモジュールを依存関係を解決して一つのアセットにまとめることが出来ます。

■ 参考リンク

webpackまとめ - 世界一適当な技術ブログ

css-loader

webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。

■ 参考リンク

css-loader | webpack

babel

Babelとは、簡潔にいうと、JavaScriptのコードを新しい書き方から古い書き方へと変換するツール

ブラウザによってはES2015のJavaScriptの書き方では正常に動かないケースが存在する

具体的にはJavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。

そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。

Polyfill

polyfillはES5に存在しない関数やライブラリの代替コードのこと。

■ 参考リンク

Polyfill (ポリフィル) - MDN Web Docs 用語集&colon; ウェブ関連用語の定義 | MDN

polyfill、babelとは？jsをどのブラウザでも動くようにしてくれる。（IE対応） - Qiita

2022-08-16

フロントエンド勉強でしたことまとめ

Nuxt.js 備忘録 WEB vue.js フロントエンド

業務でフロントエンドをすることになったけど、バックエンドがメインなのでフロントエンドの勉強をしなおす。

何やったか忘れた時ようにやったことまとめる。

Vue.js
- 動画コンテンツ
Nuxt.js
- 動画コンテンツ
- 記事コンテンツ
HTML/CSS
- 動画コンテンツ
JavaScript
- 動画コンテンツ
- 記事コンテンツ

Vue.js

動画コンテンツ

■その１： 【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで！超初心者から最短距離でレベルアップ

Vue.jsの基本

Vue.js devtool
v-bind
v-bindとスタイル
v-show
v-if
v-for
v-textとv-html
v-cloak
v-onと@
computed
thisとアロー関数
リアクティブ
ライフサイクルフック

フォームと非同期通信

双方向データバイディング(v-bindとv-on)
v-model
computed(get/setter)
promise/async/await/fetch
watch+Ajax

コンポーネント

グローバルコンポーネント
ローカルコンポーネント
props
$emit
Atomic Design
slot

SFC(SingleFileComponent)

VueCLI
import/export
render/$mount
scopedCSS

VueRouter SPA

router-link
動的パラメーター
ネストルート
リダイレクト
トランジションリンク

Vuex

actions
mutations
state
getters
mapヘルパー

Vue.js3対応

vue.js devtools
provide/inject
teleport
script setup
ref()
reactive()
toRefs()
computed()
watch()
watchEffect()
setup(props)
emit(context, emit)
setup Vuex

■その2： [2022年決定版] Vue3 x Typescriptによるアプリケーションづくり

紹介

開発環境の整備

Vueの導入

環境構築
viteで作られたアプリケーション
template, script, style
templateについて
scriptについて
styleについて

Vueの導入

コンポーネント指向について
初めてのコンポーネント
v-bindデータの埋め込み
v-on処理を埋め込む
ネイティブイベントを扱う
動的なアプリケーションへの入り口
RefとReactive
v-model双方向バインド
computed property
watch
CompositonAPIとOptionAPI
script setup
ライフサイクル

コンポーネント同士のコミニケーション

Props
Emits
コールバックとEmit

より深くコンポーネントを理解する

Slot
動的コンポーネント

大規模アプリでのコンポーネント同士のコミニケーション

Provide/ inject
injectionKey

HTTPリクエスト

バックエンドセットアップ
Postリクエストデータ
Getリクエストデータ
Loading
エラー

Nuxt.js

動画コンテンツ

■ その１：【Nuxt.js】入門から応用まで！【Firebase】と連携しWebアプリをつくってみよう【SPA】

NuxtJs2

インストール方法
フォルダ構成
VsCode 拡張機能

NuxtJs2基本操作

フォルダ構成
ルーティング
オートインポート
ライフサイクル
context
asyncData,fetch
middleware
plugin

Firebase & SPA

firebase概要
firebase SDK
pluginのinjectとnuxt.config.js
firestore
authentication
ユーザー登録
Vuexモジュール
ログイン
ログアウト
middleware・redirectの作成
ロードでstate消える時の対策

記事コンテンツ

■ その１：RailsとNuxtでバックエンドとフロントエンドを分けた開発を行ってみよう！

Rails

APIとは何か
基本的なAPIの開発（モデル、コントローラー、ルーティング）
フロントエンドに返却するJSONの扱い方
CORS（Cross-Origin Resource Sharing）の仕組み

Nuxt

Nuxtを用いた基本的な開発の進め方
computedやcreatedなどのライフサイクルの仕組み
コンポーネントの仕組み
Vuetifyの基本的な利用方法
Axiosを用いた非同期通信の方法
Vuexを用いたログイン状態の管理
新規登録時のアニメーションコンポーネントの作成方法
ログイン成功時のメッセージコンポーネントの作成方法

その他

NuxtとRailsAPIの接続
フロントバックを分けた状態で開発環境から本番環境へ移行する際の注意
Firebase Authenticationを用いた認証機能の実装
Firebase Hostingを用いたフロントエンドアプリケーションのデプロイ
Herokuを用いたバックエンドAPIのデプロイ

HTML/CSS

動画コンテンツ

■ その1：【tailwindcss】CSSが苦手な人向けじっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】

tailwindcssの基本

ボックスモデル(margin, padding)
幅と高さ（width, height)
フォントとテキスト(font, text)
色・color
擬似要素（hover: focus:)
透明度（opacity）
線関連(border, divide, rounded)
リング(ring)

レイアウト関連

display
Flexbox
Grid
レスポンシブ対応
overflow
visibility
container

レスポンシブ対応

アイコン（svg）
カード
フォーム
サンプル

その他のクラス

グラデーション
トランジション
トランスフォーム
アニメーション

カスタマイズ

tailwindcss.config.js
VScodeのおすすめプラグイン
カラーパレット
オリジナル色
フォントカスタマイズ
オリジナル色
ファントカスタマイズ
テーマ
@apply
@layer
Purge

Webアプリ画面制作

テーブルフォーム

Tailwindcss ver3

インストール
tailwingcss.config,js
JIT
色と透明度
Box shadow
下線の装飾
width, height, margin, padding
アスペクト（縦横比）
スクロール位置調整
ver2との比較

JavaScript

動画コンテンツ

■ その１：JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

記事コンテンツ

アロー関数の挙動について