「プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで」を読み進めて練習課題が出てきたので解いた gist.github.com Links プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで Software …

A. 開発者コンソールを開いて次のコードをコピペする ytInitialData.metadata.channelMetadataRenderer.rssUrl 手順 適当なチャンネルにアクセスする : eg. 「獅子神レオナ/レオナちゃんねる - YouTube」 開発者コンソールを開く コードを貼り付けて実行 : y…

Nuxt.js + Cloud Firestore でドキュメント データを引っ張ってくるコードが書けた、のでその記録 とくに手順とかは説明しない リポジトリは gouf/firebase_demo で、実際にデータを表示させてる部分は ここ, 設定は ここ 詳しくは公式ドキュメントを参照さ…

とりあえず、「ボーナスステップ」まで進めてのデプロイまで リポジトリを作った github.com Netlify に デプロイした Netlify にデプロイした Hello ページ このコミット で、Hello の表示以外に /fun で ページが表示される ように設定してる Nuxt.js を利…

A. つぎのコードスニペットを開発者コンソール上で実行する // 地域絞り込み Array.from(document.querySelectorAll('.card-info__text.ng-binding')) .filter(x => { return !x.innerHTML.match(/.+万.+/) }) /* 年収レンジの表示以外を収集 */ .filter(x =…

「Ruby on Rails - Rails 天気予報取得 表示｜teratail」で、質問者によって書かれた JavaScript との連携方法を調べてみた リポジトリ 書いたコード 大まかな処理内容 Links リポジトリ GitHub にリポジトリを作った : gouf/open_weather_map_demo - GitHub…

モクモク会でも同様のコードを書いた gouf.hatenablog.com 今回はコードの公開が目的 教材の部分と絡んだコードにならないよう、Rails から分離した See the Pen Drag & Drop API Demo by Gou Furuya (@gouf) on CodePen. Links HTML ドラッグ＆ドロップ API…

A. 次の JavaScript を開発者コンソール上で実行する var companyNameSet = [...new Set(Array.from(document.querySelectorAll('p.company-name')).map(elm => elm.textContent))] var duplicatedElements = companyNameSet.map(name => Array.from(documen…

A. 次の JavaScript を開発者コンソール上で実行する document.querySelectorAll('.mark').forEach(function(elm) { elm.click() }) 対象ページは「type.jp/mypage/scout_list.do」 削除ボタンとして用意されている ☓マーク (.mark) が拾えれば 別ページでも…

A. 開発者コンソール から当該要素を見つけて、onpaste 設定値を無効化したノードに差し替える // 開発者コンソール上での操作 // eg.「パスワードの入力を確認してください」 // がペースト無効化状態にされた input 要素 el = document.querySelector('inp…

A. querySelector() + scrollIntoView({}) を使う // 次のような例が考えられる $('#foo').on('click', function() { document.querySelector('a[name="hello"]').scrollIntoView({ behavior: 'smooth' }); }); Links Smooth Scrolling | CSS-Tricks Element…

結構駆け足だけれど 最初の一歩としては実際に動作するものができるのでよい動画だと思った Learn Vuex In 10 Minutes (Vue.js State Management) - YouTube 公式ドキュメントも併せて読みたい 動画を観ながら手を動かして git にコミットしたモノを GitHub …

teratail.com 質問を見掛けて、コードを書いたので、こちらにメモ // Accepts size of generates and number of upto with Object function randomNumbers (params) { return ( Array.apply(null, Array(params.size)) .map(() => { return Math.floor(Math.…

前回に続き、機能を作る gouf.hatenablog.com IndentInput.vue, Editor.vue 2つのコンポーネントを作る まとめ わからなかったこと ゴール <template/> を記述する <script/> を記述する <style/> を記述する Link まとめ Vue.js 上で使える CSS の scoped はコンポーネントの中でスタイ</style/></script/></template/>…

ゴール 前提 説明しないこと コンポーネントの作成 <tamplate/> の記述 <script/> の記述 $nextTick $refs キーコード デフォルト キーコード一覧 キーコード 一覧の拡張 Links ゴール コンポーネント、「InputEditor」を作成する 機能は次の通り実装する： ボタンクリックで要素</script/></tamplate/>…

リポジトリつくった(全体で7コミット) github.com 詳細はコミットログ参照のこと <textarea/> に JavaScript での初期化を仕掛けて、いい感じのエディタを召喚できる キャプチャ画像はプラグインとか何も入れてないスッピンの状態 30 に届きそうな数のプラグインで拡張</textarea/>…

たぶんスマホだと動かない... codepen.io 質問を見かけたので、なんとなくメモ teratail.com

小ネタ codepen.io 手順・考え方 右から数えて3桁ごとに ,を挿入する 数値を配列として1字ずつに分解 並びを反転 左から数え上げて3で割ったあまりが0のときが , を挿入するタイミング あとはまた配列を反転して結合、一連の文字列として返す、それだけ まと…