<VSC> draw.io拡張機能
<JavaScript> jQueryのメソッド、イベントについて
主要なメソッド
on
例：liタグをクリックすると、アラートが発生する
<body> <div> <li>あああ</li> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
$("li").on("click", () => {
window.alert("clickされた");
});
fadeout
例：liタグをクリックするとゆっくり消える
<body> <div> <li>クリックされると消えるよ</li> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
$("li").click(() => {
$("li").fadeOut("slow");
});
fadein
例：clickしてくださいを押すとボックスが表示される
<style> span { cursor: pointer; } div { margin: 3px; width: 80px; display: none; height: 80px; float: left; } #one { background-color: aqua; } #two { background-color: pink; } #three { background-color: yellow; } </style> <body> <span>clickしてください</span> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
$(document.body).click(() => {
$("div:hidden").first().fadeIn("slow");
});
イベント
「〜をクリックした時」「〜にマウスのカーソルをのせた時」など
「〜をした時」に「〜の処理をする」というもの
イベントの書き方
$(function(){
$("セクレタ").イベント(function{ // セクレタ1を〇〇(=イベント)をした時の部分
$("セレクタ2").メソッド(引数); // セレクタ2に対して××(=イベント)をした時の部分
});
});
覚えておきたいイベント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { height: 50px; width: 50px; text-align: center; line-height: 50px; } .box1, .box4 { background-color: silver; } .box2, .box5 { background-color: aquamarine; } .box3, .box6 { background-color: blue; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box6">6</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function () { $(".box1").click(function () { $(".box2").hide(); $(".box3").hide(); $(".box4").hide(); $(".box5").hide(); $(".box6").hide(); }); }); </script> </body> </html>
hoverイベント
hover(ホバー)イベントとは、mouseoverとmouseoutの2つを組み合わせたような処理ができるイベント
基本的な記述方法
$(function () {
$("セレクタ").hover(
function () {}, // マウスをのせた時の処理部分
function () {} // マウスを外した時の処理部分
);
});
<body> <p>画像を表示</p> <img src="https://picsum.photos/200/300" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function () { $("p").hover( function () { $("img").fadeIn(); }, function () { $("img").fadeOut(); } ); }); </script> </body>
<body> <div class="abc"> <img src="https://picsum.photos/200/300" /> <img src="https://picsum.photos/200/300" /> <img src="https://picsum.photos/200/300" /> </div> <img src="https://picsum.photos/200/300" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function () { $("img").hover( function () { $(this).animate({ width: "220px" }); }, function () { $(this).animate({ width: "200px" }); } ); }); </script> </body>
参考文献
<Ruby on Rails エラー編> rails -vをすると大量にignoring nokogiriが吐き出された
発生したエラー
railsをnewした後bundle installし、ふとrails -vを押してみたら大量のignoring nokogiri ~というエラーが出た
$ rails -v Ignoring nokogiri-1.10.9 because its extensions are not built. Try: gem pristine nokogiri --version 1.10.9 ...大量に発生
解決方法
なんでそんなことになったのか分からず、調べてみると以下の記事を発見。
ライブラリがおかしくなっていたようで、一度rbenvをuninstallしてみると解決した。
$ rbenv uninstall 2.6.6 rbenv: remove /Users/user_name/.rbenv/versions/2.6.6? [yN] y rbenv: cannot rehash: /Users/user_name/.rbenv/shims/.rbenv-shim exists $ rbenv install Downloading openssl-1.1.1k.tar.gz... -> https://dqw8nmjcqpjn7.cloudfront.net/892a0875b9872acd04a9fde79b1f943075d5ea162415de3047c327df33fbaee5 Installing openssl-1.1.1k... Installed openssl-1.1.1k to /Users/user_name/.rbenv/versions/2.6.6 Downloading ruby-2.6.6.tar.bz2... -> https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.6.tar.bz2 Installing ruby-2.6.6... ruby-build: using readline from homebrew Installed ruby-2.6.6 to /Users/user_name/.rbenv/versions/2.6.6 rbenv: cannot rehash: /Users/user_name/.rbenv/shims/.rbenv-shim exists $ gem install rails $ rails -v Rails 6.1.3.1
以下の記述については、いらないファイルが存在しているということらしいので、rmすれば良いらしい。
ちょっと怖いのでmvでゴミ箱へ飛ばした。
rbenv: cannot rehash: /Users/user_name/.rbenv/shims/.rbenv-shim exists
参考文献
railsコマンドを叩くと「Ignoring nokogiri~」が大量に吐き出された話。 - Qiita
<JavaScript> jQueryの基本構文、セクレタについて
jQueryとは
JavaScriptのコードを簡単に使えるようにしたライブラリ(コード集)。 使用するとwebページにさまざまな動きを加えることができる。
使用方法
・jQueryファイル(CDN：Contents Delivery Network)を読み込んで使用
・jQueryファイルをダウンロードして使用
記載する場所はheadタグ内か、bodyの締めの手前。
最近はbody前が多い、らしい。
先にjqueryのCDNを読ませないとscriptが使用できないので注意する。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script>
script タグの type="text/javascript" の有無による違い
※上記記事で、html5以降ではtype指定が不要になったと記載があったので、typeの記載はなくて良し
JavaScriptファイル(script.js)
jQuery(function(){
// ここにjQueryを書く
});
// jQueryは$で書くこともできる
$(function(){
// ここにjQueryを書く
});
基本的な記述方法
$(function(){
$("セクレタ").メソッド(引数);
});
・セクレタ
セクレタと呼ばれる部分
「id」、「class」、「子」などを記述し、対象となる部分を定義。
・メソッド
メソッドと呼ばれる部分。
指定したセクレタに対して、どういった処理を実行するかを定義。
・引数
引数と呼ばれる部分。
引数を指定することで、メソッドの動作を制御。
セクレタ
タイプセクレタ(=要素セクレタ)
h1、h2、p、ul、img...
例：divクラスにクラス名"color"を追加
... <style> .color { color: red; } </style> <body> <div>おはよう</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body> ...
script.js
$("div").addClass("color");
クラスセクレタ
.a、.b、.cのようにドットの後ろに任意(好きな)の文字を記述
例：aクラスのフォントの色をピンクに変更
... <body> <div class="a">おはよう</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body> ...
$(".a").css("color", "pink");
IDセレクタ
#abc、#xyz、#nameのようにドットの後ろに任意(好きな)の文字を記述
例：divにid属性appを追加し、#app(idセクレタ)の色を赤に変更する
<body> <div>おはよう</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
$("div").attr("id", "app");
$("#app").css("color", "red");
グループセクレタ
複数のセレクタをカンマ区切りで同時に指定する
例：div、liのフォントをピンクに変える
<body> <div>おはよう</div> <li>こんばんは</li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
$("div, li").css("color", "pink");
スペース区切り
複数のセレクタをスペースで区切り、任意タグの中のタグ(子や孫)にのみ適用
例：divタグ内のliタグの色だけピンクに変える
<body> <div> <div>ああああ</div> <li>おおおお</li> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
$("div li").css("color", "pink");
< コマンド > yarn
YarnとはJavaScriptソフトウェアの依存関係を管理するプログラムのこと
Yarnのバージョンを確認
$ yarn -v
Yarnと依存関係にあるソフトウェアのバージョンを確認
$ yarn versions
参考文献
< コマンド > nodenv
nodenvとは
Nodenv…node.jsのバージョン管理ソフトウェア
nodenvのインストール
$ brew install nodenv // $ vim ~/.zshrcに以下を追記 $ eval "$(nodenv init -)" // Nodenv-doctorで設定されていることを確認 $ curl -fsSL <https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor> | bash
Node.jsバージョン一覧
$ nodenv install -l
インストール一覧
$ nodenv versions
現在のバージョン
$ nodenv version #これも使える $ node -v
指定したバージョンをインストール
$ nodenv install
バージョンを指定
// グローバル $ nodenv grobal バージョン // ローカル $ nodenv local バージョン
参考
< コマンド > npm
バージョン確認
npm -v npm -version
グローバル設定
npm -g
< nodebrew > Permission deniedの対処法
エラー発生
nodebrewのインストールの際、以下のエラーが出た。
Permission denied @ dir_s_mkdir - /private/tmp/homebrew20201025-17620-12ps03o permission deniedはアクセス拒否、後ろのdir_s_mkdirはちょっと意味がわからなかったが、 調べたところ、権限がユーザーになってないことが原因とのこと。
対処法
以下のコマンドで権限をユーザーに戻した。
$ sudo chown -R 'ユーザー名' /private/tmp/
sudoはrootユーザーの権限が必要なコマンドをsudoコマンド経由で実行させることができる、とのことでファイルやディレクトリの所有者を変更するコマンドであるchownと-Rオプションを使用することで、カレントディレクトリ配下のファイルやディレクトリの所有者を変更できるようになる、らしい。
この作業をやったところ、nodebrewのinstallが無事に成功した。
参考:
< コマンド > vim
移動
h：左へ移動
j：下へ移動
k：上へ移動
l：右へ移動
5lと打つと、右5つ移動する。
0：行の先頭へ移動(インデント無視)
^：行の先頭
$：行の末尾
+：下の行の先頭へ
-：上の行の先頭
gg：ファイル先頭に戻る
Shift + g：ファイル末尾に進む
Shift + m：カーソルを画面の中心へ
control + f：ページアップ
control + b：ページダウン
単語移動
w：単語の先頭へ移動
b：単語の先頭へ戻る
e：単語の末尾に進む
ge：単語の末尾に戻る
削除
x：1文字消去
dd：一行削除
cc：一行削除してインサートモードになる
コピー&ペースト
p：カーソルの場所にペースト
ファイル操作系コマンド
:w：保存コマンド
:w!：強制保存コマンド
:q：vimを閉じるコマンド
:q!：vimを強制的に閉じるコマンド
:wq：保存してからvimを閉じるコマンド
:wq!：保存してからvimを強制的に閉じる
モード
i：挿入モードへ
o：新しい行を追加し、挿入モードへ
escキー：インサートモード解除
参考資料
【入門】Vimで高速で移動~プラグインなしでの移動まとめ~ - Qiita
Vimコマンド : 便利一覧 - Qiita
まず覚えておきたいVimコマンド - Qiita
よく使う Vim のコマンドまとめ - Qiita
覚えておきたい Vim コマンド 備忘録 - Qiita
< Node.js > ツイートを取得して、aws comprehendで解析する
const needle = require("needle"); const token = process.env.BEARER_TOKEN; // bearer_tokenを環境変数で設定しておく const endpointUrl = "https://api.twitter.com/2/tweets/search/recent"; async function getRequest() { const params = { query: "from:アカウント名 -is:retweet -is:reply", "tweet.fields": "text", max_results: 取得数, // max 100 }; const res = await needle("get", endpointUrl, params, { headers: { "User-Agent": "v2RecentSearchJS", authorization: `Bearer ${token}`, }, }); if (res.body) { let tweetText = res.body.data; //jsonのdataプロパティを取得 // オブジェクトのtext部分を配列に変換 let ar = []; for (let i = 0; i < tweetText.length; i++) { ar.push(tweetText[i].text.replace(/\r?\n/g, "").replace(/#.*$/, "")); } return ar; } else { throw new Error("Unsuccessful request"); } } //replace(/\r?\n/g, "")：改行の\nを削除 //replace(/#.*$/, "")：正規表現で#以降を削除 getRequest().then((response) => { // .thenでpromiseをcatch let AWS = require("aws-sdk"); AWS.config.update({ region: "us-east-1", credentials: { accessKeyId: "", //キーを入力 secretAccessKey: "", //キーを入力 }, }); const comprehend = new AWS.Comprehend(); let array = response; let params = { TextList: array, LanguageCode: "ja", }; comprehend.batchDetectSentiment(params, (err, data) => { if (err) { console.log(err, err.stack); } // an error occurred else { for (let i = 0; i < data.ResultList.length; i++) { console.log(data.ResultList[i].SentimentScore.Negative); //negativeの数値だけ取得していることを確認 } } // successful response }); });
参考文献
< CSS > marginとpaddingとborderについて
margin, padding, borderについて、ふと混乱したのでメモとして記載。
概要
設定について
paddingやmarginについては、topやleftなどを使用しなくてもそれぞれ一気に設定できる。
paddingを例にすると以下の通り。
適用する場所を以下に示している。
padding: 上下 左右; padding: 上 左右 下; padding: 上 右 下 左;
<VSC> htmlの自動補完が効かなくなった時の対処法
ある時、htmlファイルの保存時自動整形が効かなくなっていることに気づいた。
いろんな拡張機能を追加していたので多分それが原因かなと思ったため、
default formatterの設定をprettierに指定してみたところ、解消した。
<MAC関連> Emacsキーバインド一覧
Emacsキーバインドとは、キーボードショートカットによるカーソル移動のこと。
移動
control + f : カーソルを右
control + b : カーソルを左
control + p : カーソルを上
control + n : カーソルを下
control + a : 行頭/段落先頭に移動
control + e : 行末/段落末に移動
削除
control + d : カーソル右側の文字を削除
control + h : カーソル左側の文字を削除
control + k : カーソル右側の文字から行末/段落末まで削除
option + delete : カーソル左側の1単語とその後ろのスペース・句読点を削除
それ以外
control + y : control + kで削除した文字を貼り付け
control + o : カーソルの後ろに一行挿入
control + t : カーソルの左側と右側の文字を入れ替える
control + l : カーソルを表示領域の中央にする
control + v : 次のページ(Page downと同じ)
