今さら聞けないHTML　2023年01月09日

Vueコンポーネントのことはじめ色々

# コンポーネント化

Vueではパーツごとにコンポーネントを細かく分ける。

“`vue:Item.vue

```

# 動的リスト

## 要素の追加

オブジェクトはリアクティブにしておく。

```vue:動的リスト

新旧：
旧比較新

npmモジュールの"reload"で簡単ホットリロード開発環境

久々に超簡単アプリをフレームワーク無しで作ろうかな～と思った際にwebpackを組むのがめんどくさいなと思いました。
昔組んだwebpack 4のものはあったんですが、今やwebpackも5だし、なんならwebpackもそろそろ終わりかなと思い…。([参考](https://qiita.com/access3151fq/items/42b38635d81aad786e60))
そんな折、別方法を探していて[reload](https://github.com/alallier/reload)というものを発見しました。

npmモジュールであり、使い方も非常に単純そうだったため試しに使ってみた体験談です。

# 構成


パッケージマネージャはyarnです。
src以下にアプリ用ソースコードは配置しています。
src以下は最終的ないろいろ検証で複数

Scala、PlayFrameworkでゲームのブキ一覧Webアプリを作る

最近某インクを塗りあうゲームでブキのサブウェポン、スペシャルウェポンを覚えられないので、ブキを覚えることを目的にWebアプリを作ってみました。X帯みんな強い。


ソースは[こちら](https://github.com/shin620/buki-app)

ちなみにフロントエンド周りやPlayFrameworkは初心者ですので、ご承知おきください。

## 環境
+ Windows10
+ sbt 1.7.2
+ Oracle Corporation Java 1.8.0_211
+ PlayFramework 2.8.18

## プロジェクト作成
`sbt new`コマンドでHello Worldプロジェクトを作成します。プロジェクト名以外はデフォルトにしました。

```
sbt new playframework/play-sca

未経験からエンジニアになりたい人へ:Reactでログイン画面を作ってみようのソースコード解説

未経験からエンジニアになりたい人へ:Reactでログイン画面を作ってみよう
でcreatereactから、Reactアプリでログイン画面を実装しました。

動かなかった方ご連絡下さい。

今回は、ソースコード解説です。

# App.js

```js
import './App.css';
import LogIn from "./components/Login";
import LogOut from "./components/Logout";
import { auth } from "./firebase.js";
import { useAuthState } from "react-firebase-hooks/auth";

function App() {
const [user] = useAuthState(auth);
return

{user ? : }

;
}

export default App;

```

大事なのは、この２行くらいでしょうか。
```js
const [use

CSSの書き方

この記事は自分用にCSSの書き方（主にHTMLとCSSの対応方法）を書いたものです。

・CSSはHTMLで設定した文字の大きさや色、レイアウトなどを決めることができる言語である。使うにはHTMLと対応させる(紐づける)必要がある。

1.HTMLとの対応させる方法

①HTMLのheadタグにCSSのリンクを追加する。
この方法ではHTMLファイルとは別にCSSを作成し、そこにCSSの記述を書く方法である。
この方法が一番オーソドックスな適用方法であり、基本的にこの方法をとっているという前提で書いていく、
そしてそのHTMLとCSSの対応方法は下の通りである。

```example.html





~~~~中略~~~~

Video.js完全マニュアル part6 〜Video.js特有のオプション〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart6です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

前回はPlayer生成時に渡すオプションで、標準のvideo要素でも利用されるオプションの紹介をしました。
今回は標準のvideo要素には存在しないVideo.js特有のオプションについて紹介します。

前回
[Video.js完全マニュアル part5 〜標準のvideo要素のオプション〜](https://qiita.com/manzoku_bukuro/items/4869f2f800ec53f79c12)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
- Video.jsを利用する人
- 動画プレイヤーのUI操作をしたい人
- 動画再生関連のサービスを作りたい人
-

未経験からエンジニアになりたい人へ:Reactでログイン画面を作ってみよう

前回、createreactで作ったReactを実行して編集してみました。
今回は、そのReactにログイン画面を付与してみましょう

# Firebaseを使いましょう
ログイン画面に関しては、Firebaseがいい感じの機能を提供してくれてます。
これを導入する事でサクッと実装できます。
https://firebase.google.com/
```
Firebase は、ユーザーに愛されるアプリやゲームの構築と拡大を支援するアプリ開発プラットフォームです。
Google のインフラが支える、世界中の多くの企業から高い信頼を得ているサービスです。
```

プロジェクトを作成をクリックします
![スクリーンショット 2022-12-30 14.01.56.png](https://qiita-i