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

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

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

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をとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

関連資料

JavaScriptの基本

• 変数
• 配列
• 連想配列
• if
• for of
• switch
• String
• Map
• Array
• Object
• this
• 変数スコープ

ブラウザ・DOM・WebAPI

• ブラウザオブジェクト
• HTMLセマンティックウェブ
• BEM
• DOM
• appendchild
• load, DOMContentLoaded,即時関数
• setInterval,Math.floor
• ファイルアップロード
• バリデーション
• Windowオブジェクト
• WebAPI
• フロントエンド開発環境

非同期処理・例外

• 例外処理
• Promise
• async/await

通信・ajax

• CORS
• fetch
• fetch/async違い
• Location,History
• クッキー
• WebStorage

クラス・モジュール

• クラス・インスタンス
• 継承
• モジュール

記事コンテンツ

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