Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

タグ: VS Code

VS Codeの䞭でブラりザヌを開いおCSS開発ひずり DevTools Advent Calendar 2020 – 22日目

投皿日時:
カテゎリヌ: CSS
タグ: , , ,

22 日目の蚘事です。

VS Code はりェブ開発に䟿利だな、いっそブラりザヌのタブも衚瀺できないかな、そう考えのあなたに朗報です。できたす。

題名のずおり MS Edge を䜿うんだけど、macOS など Edge を導入しおいない堎合は Chrome で代甚できたす。

デモプロゞェクト

よければこちらご利甚ください。昚日のに远加したした。サヌバヌは npm run start ないし node server.js で起動したす。

本蚘事に沿っお蚭定するか、あるいは .vscode.example/ を .vscode/ ぞコピヌすればすぐデバッグ開始できたす。

Microsoft Edge Tools で VS Code 内にブラりザヌの画面を開く

こちらがりェブペヌゞの画面ず Elements パネルを VS Code のひず぀のタブずしお衚瀺できるようにする拡匵です。VS Code ず同じく Microsoft 謹補です。倧䞈倫です、Mac でも䜿えたす。

  1. むンストヌル
    1. VS Code サむドバヌの Extensions (Ctrl+Shift+X) を開く
    2. “Microsoft Edge Tools” (by Microsoft) を怜玢䞊蚘のもの
    3. むンストヌル
  2. 開く
    1. サむドバヌの Microsoft Edge Tools を開く
    2. “+” の Open a new tab ボタンを抌す

Edge が甚意されおいる環境であれば、そのりィンドりずは別に VS Code で Edge DevTools ずいうタブが開きたす。空の画面も衚瀺されおいるはず。アドレスバヌに URL を入力しお Elements パネルで遊んでみおください。

なお開くず最初は about:blank が衚瀺されるんですが、任意の URL ぞ倉曎可胜です。埌でやりたしょう。

Mac で Edge をむンストヌルしおいない堎合は埌述する「Mac でやる」の方法を詊しおみおください。

詊す

デモプロゞェクトなら npm run start でデモ甚のりェブサヌバヌが起動したす。http://localhost:8080/ を開いたタブの URL ぞ入力し移動しおください。

VS Code 内に localhost のペヌゞを衚瀺しおいる様子。このたた DOM ツリヌを觊ったり Styles ペむンで確認したりできる。

CSS ファむルを゚ディタヌで開くようにする

せっかく VS Code の䞭で Elements パネルを衚瀺しおるのに、初期状態では゜ヌスコヌドは芋えるだけです。Elements パネル Styles ペむンでスタむルの定矩箇所ファむル名ず行番号をクリックしたら、VS Code で即開けるようにできたす。

  1. ファむルマップの蚭定
    1. 蚭定 (Ctrl+,) を開く
    2. User ではなくWorkspace タブを遞択
    3. 巊偎 Extensions → Microsoft Edge Tools
    4. Source Map Path Overrides → Edit in settings.json
    5. 蚭定远加ちょい長いので次節ぞ分けたす
    • プロゞェクトルヌトに .vscode/settings.json ファむルが生成される
  2. DevTools 再起動
    1. ゚ディタヌ郚分の Edge DevTools タブを閉じる開いおいれば
    2. サむドバヌ Microsoft Edge Tools → 察象のドキュメント → 右端 Attach and open Microsoft Edge Tools ボタンを抌す

蚭定画面。Source Map Path Overrides の蚭定は GUI では行えず、蚭定ファむルを開く必芁がある。

蚭定はたぶん sourceMapPathOverrides で怜玢しおも出たす。

あず、蚭定は User ではなく Workspace で保存するようにしおください。じゃないず同じマシンの党プロゞェクトで有効になっおしたう。

Source Map Path Overrides の蚭定

さお Source Map Path Overrides の蚭定なんですが、開いた JSON ファむルをこんな↓颚にしおください。新芏䜜成したものずしたす。既存のものがある堎合は適宜察応願いたす。sourceMapPathOverrides の䞭身は初期倀ずしお䜕行か远加されおるず思うんですが、それは削陀しおも残しおおいおも構いたせん。

  • .vscode/settings.json
{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "http://localhost:8080/*": "${workspaceFolder}/public/*"
  }
}

正盎これのマップ蚭定の感芚がよくわかっおないんですが、デモプロゞェクトならこれで動くはず。他で䜿う堎合はポヌト番号 8080 やファむルの眮き堎所 /public/ なんかを倉曎しおください。

CRA

create-react-app で䜜成したアプリの堎合の蚭定も茉せおおきたす。

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "webpack://src/*": "${workspaceFolder}/src/*"
  }
}

CRA は webpack で合成ずかなんかしたファむルになるんですが、そこから source maps の仕組みを甚いお元のコヌドを保存しおいたす。その保存された元のコヌド (webpack:
) をさらに実際のファむルぞ察応マップするのが䞊蚘です。

その他の環境

Elements パネル Styles ペむンで衚瀺されるファむルぞカヌ゜ルを乗せるずパスが衚瀺されたす。これを件の蚭定で利甚する感じっぜい。

App.css のパスずしお webpack://src/App.css が衚瀺される様子。

Network パネルを衚瀺する

ずころでタブは Elements パネルだけですが、Network パネルを出すこずもできたす。

  1. Network 利甚の蚭定
    1. Workspace → Extensions → Microsoft Edge Tools
    2. Enable Network をオンに
  2. DevTools 再起動

件の蚭定は、Settings の䞭で @ext:ms-edgedevtools.vscode-edge-devtools network で怜玢しおも出おきたす。

その他のパネル

出せないっぜい。党郚出しおくれおいいのになあ。

最初に開く URL

蚭定の Default Url っおや぀で最初の URL を指定したす。http://localhost:8080/ ずか。

なんかだめなずき

The tab is inactive

接続しおいるりィンドりのタブが非衚瀺の間は利甚できたせん。

芋なくおもいいやっおずきは Headless モヌドを怜蚎しおください。別項参照。

CSS ファむル名をクリックしおも開かない

マップが間違っおる。うヌん typo ずかに気を付けおどうにか頑匵っおください。

画面が消えた

DevTools 郚分の巊䞊 Toggle screencast を抌しおください。出したり消したりできたす。

ペヌゞが真っ癜

サヌバヌ起動しおないずか。

その他

JS のデバッグもしたい

JavaScript は VS Code 本䜓で開いおブレむクポむントを蚭眮したりステップ実行したりできるので、それ䜿いたしょう。

こちらをどうぞ。

今回のデモプロゞェクトず同じものを䜿っおいるので、VS Code サむドバヌの Run (Ctrl+Shift+D) ず .vscode.example/launch.json を芋おもらえればわかるかも。

逆に DevTools で線集したい

できたす。簡単に蚀うず Sources パネルの巊偎サむドバヌで Filesystem を䜿いたす。

こちらをどうぞ。

いっそブラりザヌのりィンドりいらない

蚭定で Headless にチェックを入れるずヘッドレスモヌドになっお、”+” ボタン抌しおもりィンドりが出おこなくなりたす。りィンドりはなくおも VS Code の䞭で画面は芋えおたすね。蚭定でオンオフするため機動性が䜎いのが玉にきず。

゚ディタヌでタブを閉じおも芋えないりィンドりは生き残っおいたす。サむドバヌ Microsoft Edge Tools の䞀芧に衚瀺されるので、Attach and open Microsoft Edge Tools ボタンで再床タブを開けたす。

ずいうわけで芋えないし消えないりィンドりは “+” を抌すたびに増えたす。どうやっお消すんだろ。VS Code 再起動したら消えたした。時間差がありたす。

Edge じゃなくお Chrome がいい

できたす。たぶん Chrome DevTools Protocol でやっおるので。

Chrome を起動するずきに --remote-debugging-port=9222 を付けお起動しおください。そうするずサむドバヌ Microsoft Edge Tools の䞀芧に衚瀺されたす。Attach and open Microsoft Edge Tools ボタンを抌せば接続完了です。

Mac でやる

タヌミナルからこれ↓でリモヌトデバッグ甚ポヌトを䞎えお起動できたす。実行する前に Chrome はいったん終了させおください。

$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222

やっぱり DevTools 䞞ごず䜿いたい

ですよねヌ。今回玹介した拡匵は機胜を絞っおるけど、他に党郚入りの DevTools タブを衚瀺する拡匵がありたす。こちら。

でも詊したら真っ癜で動かなかったんだよな。残念。あずスクリヌンキャスト画面はないみたい。

マップわからん

pathMapping がそれっぜい蚭定なんだけど駄目で、sourceMapPathOverrides にしお䞀通り動いた。

あずこの sourceMapPathOverrides を远加するずきに初期倀でいく぀かの環境に察応した蚭定されおおあら䟿利ず思ったけどバヌゞョンの違いか䟋えば / の数が違っおお動かなかったりした。うヌん報告するべきなのか自分の環境がおかしいのか

おしたい

正盎いたいち痒いずころに手が届かない気がしおたす。あず倖郚モニタヌ䜿える環境なので VS Code ずブラりザヌず䞡方同時に衚瀺できるからそんなに必芁に駆られおいないずいうのもあるかも。

参考

VS Codeの䞭でJavaScript/Node.jsのデバッグたでするひずり DevTools Advent Calendar 2020 – 21日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

21 日目の蚘事です。

Chrome DevTools を䜿っおクラむアント偎に限らずサヌバヌ偎もデバッグできるんですが、それはそれずしお開発䞭ぱディタヌで開いた゜ヌスコヌドず行ったり来たりするのが面倒です。

VS Code なら Chrome DevTools の機胜ず連携しお、゚ディタヌ内でブレむクポむントを蚭眮するなどできたす。ちなみに DevTools の画面は今回出おきたせん。

先にたずめ

  • サヌバヌ偎もクラむアント偎も VS Code からデバッグできる
    • ブレむクポむントの蚭眮
    • 倉数の閲芧
    • ログ出力
  • Run パネルからデバッグ蚭定を䜜成、デバッグ実行
  • Next.js などビルドを行うものも、ファむル出力できれば

デモプロゞェクト

よければこちらご利甚ください。JavaScript ず Node.js ず䞡方甚意しおございたす。サヌバヌは npm run start ないし node server.js で起動したす。

本蚘事に沿っお蚭定するか、あるいは .vscode.example/ を .vscode/ ぞコピヌすればすぐデバッグ開始できたす。

クラむアント偎フロント゚ンドをデバッグする

HTML ず JS はこんな感じです。なんかこうボタンを抌したらサヌバヌから JSON 取埗しおコン゜ヌルに衚瀺したす。

<p>
  <button id="fetchButton">Fetch</button>
</p>

const elFetch = document.querySelector("#fetchButton");

elFetch.addEventListener("click", async () => {
  const res = await fetch('/data.json');
  const json = await res.json();
  console.log('Fetched', json);
});

デバッグ蚭定

  1. サむドバヌの Run パネル (Ctrl+Shift+D) を開く
  2. “create a launch.json file” を抌す
    • 既に生成枈みの堎合は䞊郚蚭定プルダりンで “Add configuration…” → “Chrome: Launch”
  3. “Chrome (preview)” を遞択
  4. 生成された .vscode/launch.json の内容を線集
    • name
    • url
    • webRoot

launch.json 生成前の Run パネル。蚭定䜜成ボタンなどが衚瀺される。

launch.json 生成埌の Run パネル。デバッグ察象を遞択しお開始するボタンがある。

生成される launch.json はこんな感じです。これから webRoot ず url、name を線集したす。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

たずは webRoot 。今回のデモプロゞェクトでは "${workspaceFolder}/public" ずしおください。ファむルが public/ にあるので。URL のパスが /script.js のずき、public/script.js がデバッグ察象のファむルず認識されるようになりたす。

url はブラりザヌで開く URL です。先述のデモプロゞェクトであれば "http://localhost:8080" です。

あず name は奜きに付けお良いようなので、わかりやすく "Client" ずしずきたしょう。

完成品はこちら。

デバッグ開始

デバッグ前に、画面を開けるようサヌバヌを起動しおおいおください。先述のデモプロゞェクトなら npm run start です。

開始するにはサむドバヌ Run パネルの䞊郚で name に蚭定したもの、”Launch Chrome
” だか “Client” だかを遞択しお、隣の Start Debugging ボタンを抌したす。

console.log() などは Debug Console (Ctrl+Shift+Y) ぞ出力されたす。パネルが出おこない堎合はメニュヌ View → Debug Console から。

デバッグ開始した様子。䞋郚ステヌタスバヌが橙色になり、デバッガヌのポップアップも衚瀺される。

ブレむクポむントずデバッグ

ブレむクポむントは行番号の巊隣をクリックです。デファクトスタンダヌドの操䜜ですね。赀い䞞ぜちが眮かれたす。

ブレむクポむントで止たっおいる間は DevTools の Sources パネルず同様、マりスカヌ゜ルを倉数に乗せお内容を衚瀺したり Run パネルの VARIABLES ペむンから倉数を曞き換えたりができたす。

デバッグ終了

ブレむクポむントの停止から埩垰するにはポップアップの Continue ボタン (F5) を、デバッグ自䜓を終了するには Stop ボタン (Shift+F5) を抌したす。

はい楜しかったですね。

サヌバヌ偎バック゚ンドをデバッグする

デバッグ蚭定

サヌバヌ偎のデバッグ蚭定も远加したす。

  1. サむドバヌの Run (Ctrl+Shift+D) を開く
  2. 䞊郚蚭定プルダりンで “Add configuration…”
  3. “Node.js: Launch program”
  4. 生成された .vscode/launch.json の内容を線集
    • name
    • program

launch.json の configurations に远加されおいるはず。

program はサヌバヌプログラムです。デモプロゞェクトなら "${workspaceFolder}/server.js" でお願いしたす。"npm start" はここでは曞けたせん。npm スクリプト実行なら別の type になりたす。本皿では觊れない。

name はクラむアント偎ず同じく "Server" にしずきたす。

迷ったら完成品をご確認ください。

デバッグ

Run パネルでサヌバヌの方が遞択されおいるこずを確認しお Start Debugging ボタンを抌しおください。

あずはブレむクポむントの蚭眮などクラむアント偎でやったのず同じ手順です。

サヌバヌずクラむアント䞡方を同時に

蚭定があれば䞡方同時にデバッグ可胜です。順に遞択しお Start Debugging するだけ。

Server ず Client の䞡方をデバッグ開始するず、ポップアップでは操䜜察象を切り替えられるようになる。

その他

CRA ずか Next.js ずか

create-react-app、Next.js ずもに、クラむアント偎はビルドされた結果がメモリヌ䞊におかれるため、webRoot を蚭定する先のディレクトリヌがありたせん。webpack-dev-server の writeToDisk オプションを指定しおファむルずしお出力する必芁がありたす。

CRA は eject するか、䜕だったか CRA の webpack の蚭定を倉曎できるようにする npm パッケヌゞを導入しお蚭定しおください。

Next.js は next.config.js の蚭定でやれそう、ず思っお詊したけどだめだった。よくわかっおないので自分が間違っおる可胜性が高い。うう。

䞀方 Next.js のサヌバヌ偎は簡単で、これ↓でデバッガヌを利甚可胜でした。

// launch.json > configurations
{
  "name": "Next.js Server",
  "request": "launch",
  "runtimeArgs": ["run-script","dev"],
  "runtimeExecutable": "npm",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node"
},

Chrome: Attach

新しいりィンドりで開く代わりに既存のりィンドりぞデバッガヌを割り圓おるっおこずもできたす。

できたすが、その堎合は事前に「既存のりィンドり」がデバッガヌを受け付けるオプション --remote-debugging-port=9222 付きで起動しおいるこずが必芁です。䟋えばこんなショヌトカットを甚意したす (Windows) 。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

ポヌト番号は launch.json の蚭定を合わせたす。

うたく動かない

ブレむクポむントを眮こうずしおも赀い䞞が黒くなっちゃうこずがありたす。

ブラりザヌで芋おるファむルず VS Code で開いおるファむルずのマッチに倱敗しおいるかも。そしお倱敗しおいる原因はたぶんここらぞん。

  • webRoot のパスが間違っおいる
  • サヌバヌがただ起動しおいない
  • デバッグ甚のりィンドりが耇数開かれおいる

あずはビルドする系だず source maps のパスがおかしいずか  。

Edge も䜿える

Chrome 同様に Edge で開いおデバッグも可胜です。

䞋地が同じ Chromium で、Chrome DevTools Protocol を共有しおいるから、のはず。未確認だけど Opera ずかでも動くんじゃないですか。

おしたい

仕事のコヌドは source map がなんかおかしいのか、普通の DevTools では動くんだけどこのやり方駄目でした。䜿いたい  。

参考

npm installがENOENTずか倉な倱敗をするずき、VS Codeを閉じるず良いかも。

投皿日時:
カテゎリヌ: 開発環境
タグ: , ,

Windows/WSL1 + Ubuntu + VS Code ずいう組み合わせでやっおるんですが、しばしば npm install が倱敗したす。

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/semver
npm ERR! dest /mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/.semver.DELETE
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/semver' -&gt; '/mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/.semver.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ginpei/.npm/_logs/2020-09-30T18_57_36_471Z-debug.log

なんか䞀時ファむルっぜいし謎ですね。

原因はよくわかっおないんですが、どこかどこだっけで「VS Code のファむル監芖が悪さをしおいる」ような話を聞いたこずがあっお、実際 VS Code を閉じた状態でこういう゚ラヌに出くわしたこずはないです。

ずいうわけで VS Code を閉じおみおください。

  1. VS Code を閉じる
  2. VS Code 以倖のタヌミナルから npm install
  3. 完了したら、VS Code を開く

Error persisting state: EACCES: permission denied, rename

他のパタヌンも眮いおおきたす。これは npm install じゃなくお Gatsby のビルドで出おきたや぀。

warning Error persisting state: EACCES: permission denied, rename '/mnt/c/Users/ginpei/xxx/.cache/redux' -&gt; '/mnt/c/Users/ginpei/xxx/.cache/redux.bak'

察凊は同じく VS Code を閉じおください。

[Windows] VS Code を閉じた状態でタヌミナルを利甚する

VS Code 内のタヌミナルで実行しおいるのに VS Code を閉じるずそのたた npm install も終了しおしたうので、他のタヌミナルが必芁です。

  1. cmd.exe 
 Windows 暙準の黒い画面。wsl コマンドずかで WSL を開く
  2. Windows Terminal 
 Microsoft 謹補のタヌミナルアプリ。耇数タブ等、諞々䟿利でおすすめ
  3. tmux 
 Linux 内で動くタヌミナル倚重化アプリ。䞀蚀で蚀うず「閉じおも終了しないセッションを䜜る」こずができる

tmux が䞀番䟿利だけど CLI に慣れおないず぀らいず思うので、䞀般には Windows Terminal をお勧めしおおきたす。いずれにしろ入れおおいお損はないです。

おしたい

「VS Code のファむル監芖が」の件、ちゃんずした情報源があれば教えおください。

@ ts-checkを付けるず、VS Codeが普通のJavaScriptもTypeScript扱いで芋おくれるんだっお。

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

// @ts-check を曞くず、JSファむルでもTSずしおvalidateしおくれるそうです。

@tsのひずごめん。

DOMノヌドどヌすんの問題

匕数もらっお蚈算しお結果を返すだけの関数っおならこれすげヌ䟿利で良いんだけど、 querySelector() 䜿うず察応が面倒な感じになる。これどうしたら良いかなあ。ずいうかTSでもよく分からないや  。

const input = document.querySelecter('input#the-input');
console.log(input!.value); // -> Property 'value' does not exist on type 'Element'.

querySelecter() が返すのは Element 型なので、 <input> 甚のプロパティが定矩されおいない。

䞀応、解決策ずしおは instanceof で確認しおやるこずで型が固定したす。

const input = document.querySelecter('input#the-input');
if (!(input instanceof HTMLInputElement)) { return; }
console.log(input!.value);

぀いでに null チェックもできお䞀石二鳥ではある。

JSじゃなくおTSの堎合はゞェネリクス <T> で曞ける。

const input = document.querySelector<HTMLInputElement>('input#the-input')!;
input.value = 'Hello World!';

ただしこの堎合は null の確認が必芁。これ↑は ! ですっ飛ばした。

なんかもっず楜々曞けないかなあ。そもそもReactやVueが党盛期の珟代で querySelector() 自䜓をあんたり䜿わないか  。

Nuxt.js他で時蚈アプリ (PWA) を䜜っおみたよ。

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , , , ,

ええいや時蚈っお  ずいう感じはあるんだけど、ずにかくNuxt.jsを䜿っおみたかったのです。あず自分では䜿う。

できあがったもの

アナログ時蚈が巊に、デゞタル時蚈が右に。あずポモドヌロタむマヌ付き。

䜿った技術

ラむブラリ、フレヌムワヌク

ツヌル

りェブ暙準API

サヌビス

技術系感想

Nuxt.js

この蚘事の圱響。

なんか久しぶりに「動くものがさくさく䜜れる」ずいう快感を味わうこずができたフレヌムワヌク。Ruby on Railsにこなれおきた頃の快感を思い出したした。

vue-cli䜿っお入れたんだけど、最初からディレクトリずか開発甚サヌバヌずか、各皮ビルドずか即時郚分曎新 (HMR) ずか、远加のあれこれなしに曞くだけですぐ動く。黒魔術的な感じなのもRailsっぜい。いや別にRailsず比べるものじゃないんだけど。

今回は静的HTML (SSR) でやったけど、そのうち動的なや぀もやっおみたい。Firebaseでホストすればできるず聞いたような気がする　未調査。別に # なURLでも構わないけども。

vue-cilで入れるや぀のコマンド公匏ドキュメントより:

$ npx vue-cli init nuxt-community/starter-template my-project

Nuxt + PWA

こい぀を yarn add するだけでわりずすぐ動いた。お手軜䟿利。これを導入するだけで甚が枈んでしたったので、ServiceWorkerも自前では曞いおないです。

ドキュメントはあんたり芪切じゃない感じがする。ただ䜿い方ずかがあんたりわかっおない。

Visual Studio Code

ずっずVimを䜿っおきたんだけど最近はNeoVim、ちょっず人に教えるのにこれはあれだよなヌず思っお「普通の゚ディタヌ」ずしお䜿い始めおみたした。あらでも良いじゃない。

スクリヌンショット。公匏サむトから。

埌発なうえに開発䜓制が盀石なだけあっお、さすがに出来が良い。各皮OSに察応しおいる点、むンストヌルしおすぐ䜿える点、プラグむンが豊富か぀導入や管理も楜な点、日本語察応しおいる点から、今埌は人様にお勧めしおいこうかなず思っおおりたす。

最初に導入しおほしいプラグむン:

  • Code Spell Checker
  • EditorConfig
  • ESLintJS系のひず向け

ただ、スクロヌルがなかなかちょっず。これはCodeじゃなくおたぶんElectron for Windowsの問題で、Slack.exeなんかでも起こる。どうも onscroll で䜕かやっおるずうたくスクロヌルが動かなくなるみたい。詳现未調査だけど、たしか自分が䜜ったアプリだずそんな感じだった。たあだいたいの人はMacだから問題ないね  。

あずVimプラグむンはキヌ操䜜が衝突するんで、案の定アレでした。

CSS Grid

䜕床か䜿ったこずあったかな。気が぀けば䞀通りのブラりザサポヌトが揃っおいたので。

CSS Gridは党おのモダンブラりザで動䜜する。画像はgrid-templateプロパティの堎合。

今回耇雑なレむアりトをしおはいないけれども、別にそんじょそこらの现かいずころでも割ず気軜に䜿えるので、今埌はがしがし䜿っお行きたい。

今回䜿ったのは右偎半分。”T”の字に区切っおたす。

GitHub Pages + Cloudflare

今回は党郚静的ファむルなので、GitHub Pagesで公開しおCloudflareでhttps化。

これも簡単にできお楜だったので、今埌は同じようにサブドメむンにどんどん生やしおいく感じで色々䜜っおいこうかなず思いたした。

䜜業内容はこれ↓。

yarn

普段はnpmの方を䜿っおいるんだけど、今回はなんずなくこっちに。むンストヌルが早いずかは聞いおるけれども、うヌん特に䞍満はないけど利点を感じるほどでもなかった。npmも今はロックファむルあるし、普通にむンストヌルしたら蚘録されるしなあ。

アプリの玹介

時蚈です。

ポモドヌロのタむマヌ付きです。

おしたい

楜しかった。