【javaScript基礎】練習問題集02【jQuery】
問題
2-1. ボタン押下時に、5秒おくれてアラート表示してみよう(5分)
2-2. ループ処理で、配列の後ろににオブジェクトを追加してみよう(10分)
[ { "name": "suzuki", "age" : 27, "from": "tokyo", }, { "name": "tanaka", "age" : 32, "from": "fukuoka", }, ... ]
2-3. 「2-2.」からの特定のnameを指定して、配列から削除してみよう(5分)
2-4. 「2-2.」からfromが同じ人の情報を括りだしてみよう(15分)
{ "tokyo":[ { "name": "suzuki", "age": 27, } ], "fukuoka":[ { "name": "tanaka", "age": 32, }, { "name": "sato", "age": 26, } ], ... }
【javaScript基礎】練習問題集01【jQuery】
問題
1-1. ブラウザにアラートを表示してみよう(5分)
回答例はココをクリック
ソースコード例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="js/learning.js"></script> </head> <body> <p>javaScript学習用</p> </body> </html>
alert('Hello World!');
実行結果
1-2. jQueryライブラリを読み込もう(5分)
1-3. セレクタを使ってhtmlの要素を非表示にしてみよう(5分)
1-4. 「1-3.」をボタン押下時に表示/非表示ができるように切り替えよう(10分)
1-5. jsonを読み込んでみよう(10分)
1-6. 初期表示時に、jsonで読み込んだデータをブラウザに表示してみよう(5分)
1-7. フォームの未入力チェックをしてみよう(5分)
1-8. フォームの文字数チェックをしてみよう(5分)
1-9. 以下の条件でアラートボタンでアラートを表示してみよう(10分)
1.追加ボタンが押されたら、アラートボタンを追加
2.アラートボタンが押されたらアラート表示
1-10. inputタグにmaxlength属性を追加してみよう(5分)
1-11. li要素の値を全て取得してみよう(5分)
<ul> <li>りんご</li> <li>ごりら</li> <li>らっぱ</li> <li>ぱいぷ</li> <li>ぷりん</li> </ul>
1-12. 「1-11.」で取得したli要素の値を逆順でhtml表示してみよう(15分)
【Gitlab】コマンドで簡単操作、labコマンドを使ってみた【大奮闘】
GitbashでGitlabをコマンド操作
labコマンドとは?
GitLabのCLIクラアントとして以下に紹介されています。
コマンドラインからGitlabへのissueのopen/close、マージリクエストやブラウザ遷移など。
Webブラウザ上の操作をコマンドで操作できちゃいます。
fzfなどのワンライナーツールと組み合わせると超効率が実現できそうです。
about.gitlab.com
今回使うのはこれ!
github.com
ただlabコマンドを使っている人が少ないのか情報がほとんどない。。
とりあえず↟のREADMEをみながら進めてみた。
環境はWindows10で、愛用のGitbashを使用していきます。
labコマンドのインストール
bashのインストール手順通りに進めますが、いきなり躓きます。
unrealman@DESKTOP-XXXXX MINGW64 ~ $ curl -s https://raw.githubusercontent.com/zaquestion/lab/master/install.sh | sudo bash bash: sudo: command not found (23) Failed writing body
Gitbashにはsudoコマンドがありません。
sudoを省きます。
unrealman@DESKTOP-XXXXX MINGW64 ~ $ curl -s https://raw.githubusercontent.com/zaquestion/lab/master/install.sh | bash OS not supported
「OS not supported」
OSがサポートされていないと出てきました。。
これ終わりじゃ、、と思いましたが諦めません。
WindowsのPowerShellからパッケージ管理ツール「Scoop」を使えばインストールする手順があります。
パッケージ管理「Scoop」をインストールする
PowerShellを開き以下のコマンドを実行します。
Set-ExecutionPolicy RemoteSigned -scope CurrentUser; iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
labコマンドをインストールする
PowerShellではなくGitbashを使いたいのです。
WSLでもよいのですが、WSLだとCLIからブラウジングができないのです(検証済み)。
(WSLからブラウザの制御が難しい模様、できなくはないのだろうが骨が折れそうです。。)
Gitbahを開き、以下のコマンドを実行します。
scoop bucket add zaquestion https://github.com/zaquestion/scoop-bucket.git scoop install lab
インストール完了!
labコマンドの実行
さっそく実行してみます。
$ lab Enter GitLab host (default: https://gitlab.com): Create a token here: https://gitlab.com/profile/personal_access_tokens Enter default GitLab token (scope: api): 2019/12/04 22:45:11 main.go:68: The handle is invalid.
はい失敗しました。
labコマンドを構成しているgo言語ファイルでエラーをはいています。
おそらくこれが原因じゃなかろうかと、minttyのwindowsラッパーのwinptyを付けてみます。
$ winpty lab Enter GitLab host (default: https://gitlab.com): Create a token here: https://gitlab.com/profile/personal_access_tokens Enter default GitLab token (scope: api):
いけました!
Gitlabでパーソナルアクセストークンを発行
labコマンドを入力し、Enterを押下するとトークンを作るURLが表示されるのでブラウザで開きます。
これ
Create a token here: https://gitlab.com/profile/personal_access_tokens
名前(トークンの名前)とScopes(有効範囲とアクセスレベル)を設定します。
今回は
Scopesはapi(完全な権限)
Expiers atは未入力(有効期限が無期限)とします。
入力したら、Create personal access tokenを押下します。
パーソナルアクセストークンが発行されました。
コマンド操作してみる
ちゃんと動いています。
以下はプロジェクトのリスト表示コマンド
$ lab project list leberwurscht/teardownwalls technomancy/leiningen jonan/heroes-of-wesnoth jonan/k hcs/hcs_utils soeren/sspssptest
cloneしたプロジェクトは以下で以下のコマンドを打つとブラウザ表示します。素晴らしいです。
$ lab project browse
しかし、うまくいったと思ったのも束の間。
issueもマージリクエストも作成できない
また、エラーです。viの実行可能ファイルがPATHにないと言っています。
$ lab issue create 2019/12/06 02:13:27 issue_create.go:55: /home/travis/gopath/src/github.com/zaquestion/lab/cmd/issue_create.go:54 exec: "vi": executable file not found in %PATH%
しかし、viはパス通っています。認識しています。
$ vi
念の為確認しますが、やっぱり通っています。
$ echo $PATH (省略):/usr/local/bin:/usr/bin:(省略)
ここにちゃんといます。
$ ll /usr/bin/vi -rwxr-xr-x 1 unrealman 197609 25 10月 21 21:40 /usr/bin/vi*
調べてもどこにも情報はなく、Githubのissueにもありませんでした。
(似たような人はいましたが放置状態)
ここ大事なとこなので諦められません。
まったく関係ないとこで何やら、.exeが付いているかついていないかで動きが違うという情報を取得。
理由は謎らしいので触れません。
https://stackoverflow.com/questions/54276583/getting-an-stdin-is-not-a-tty-error-when-using-python-json-tool-in-git-bash
viコマンドを表示してみると、なぜかviは.exeがついていない。
これはなぜなのか?
$ ll /usr/bin/vi* -rwxr-xr-x 1 daisuke 197609 25 10月 21 21:40 /usr/bin/vi* -rwxr-xr-x 1 daisuke 197609 2729207 11月 4 16:09 /usr/bin/view.exe* -rwxr-xr-x 1 daisuke 197609 2729207 11月 4 16:09 /usr/bin/vim.exe* -rwxr-xr-x 1 daisuke 197609 2729207 11月 4 16:09 /usr/bin/vimdiff.exe* -rwxr-xr-x 1 daisuke 197609 2121 11月 4 16:09 /usr/bin/vimtutor*
ひとまず、vi.exeを作成します。
※管理者権限必要なので、Gitbashを管理者として開いていなければ、右クリック-「管理者として実行」してください。
$ cp -p /usr/bin/vi /usr/bin/vi.exe
また、エラーです。。。
しかし、内容が変わった。着実に進んでいる証拠です。
$ lab issue create 2019/12/06 02:25:07 issue_create.go:55: /home/travis/gopath/src/github.com/zaquestion/lab/cmd/issue_create.go:54 fork/exec C:\Program Files\Git\usr\bin\vi.exe: This version of %1 is not compatible with the version of Windows you're running. Check your computer's system information and then contact the software publisher.
「互換性がないからコンピューターのシステム情報を確認してから、ソフトウェアの発行元に連絡してください。」
と言われました。
ええ、なにか方法はないか、WSLを開きDebianのviを何気なく見てみたらヒントが。。!
unrealman@DESKTOP-XXXXX:~$ ll /usr/bin/vi lrwxrwxrwx 1 root root 20 Aug 3 17:40 /usr/bin/vi -> /etc/alternatives/vi unrealman@DESKTOP-XXXXX:~$ ll /etc/alternatives/vi lrwxrwxrwx 1 root root 17 Aug 3 17:40 /etc/alternatives/vi -> /usr/bin/vim.tiny
もしやとvi.exeでvim.exeへのシンボリックリンクを張ってみました。
$ ln -s /usr/bin/vim.exe /usr/bin/vi.exe
いけました!
$ lab issue create やっとwindowsからlabコマンドでissueが作れた。。。 # Write a message for this issue. The first block # of text is the title and the rest is the description. ~
画像はslackと連携させているので、そこに通知が来ています。
ゆっくり眠れそうです。
【Git for Windows】tty/mintty/winptyとは何なのか?【Gitbash】
tty/minttyとは何なのか?
Windows環境で、Linux操作が可能なGitbashでdockerコマンドなどをしようすると以下のようなエラーとなる。
$ docker exec -it unreal_container bash the input device is not a TTY. If you are using mintty, try prefixing the command with 'winpty'
何やら、
「入力デバイスはTTYではないよ。minttyを使用しているなら、コマンドの先頭に「winpty」を付けてくれ」
とのこと。
言われた通り、winptyを使用すれば問題なく動くので、.bash_profileにalias設定をしていました。
(補足)
もしくは以下にwinpty経由にしたいコマンドを追加でもOKなようです。
for name in node ipython php php5 psql python2.7 do case "$(type -p "$name".exe 2>/dev/null)" in ''|/usr/bin/*) continue;; esac alias $name="winpty $name.exe" done
以下が参考になりました。
■参考
GitbashはデフォルトでMinTTYを使用しており、それはGit for Windowsをインストールした際の構成ウィンドウで選択しているとのこと。
何気なくデフォルトでインストールしていましたが、確かに選択した記憶があります。。
ここで「Use MinTTY」を選択すると、Bashプロンプトは、Windowsに同梱されているCMDコンソールではなく、MinTTYターミナルエミュレーターでホストされます。MinTTYターミナルエミュレータは、コマンドの前にwinptyを付けない限り、Windowsコンソールプログラムと互換性がありません
https://willi.am/blog/2016/08/08/docker-for-windows-interactive-sessions-in-mintty-git-bash/
winptyとは?
MinTTYは、Windows APIを使用するプログラムと対話する場合、ptyの非互換性/文字エンコードの非互換性の問題からうまく動作しないらしく、回避策としてwinptyというラッパーを使うように推奨しているようです。
また、これはMinTTYの問題ではないとのこと。
https://github.com/mintty/mintty/wiki/Tips#inputoutput-interaction-with-alien-programs
また、もしWindows10デフォルトのコンソールに戻りたければ、Git for Windowsインストーラを再実行して選択しなおす。
どうしてもMinTTYを使いたい場合は、インタラクティブセッションでは先頭にwinptyをつけましょうということです。
そもそもtty/minttyとは何なのか?
ttyとは?
“tty”はもともとは “テレタイプ”を意味し、 “pty”は “擬似テレタイプ”を意味します。
https://codeday.me/jp/qa/20181203/23640.html
⇒ttyは端末、ptyは仮想端末(そこに読み書きするプロセスの端末のように機能するが、他のものによって管理されるデバイスエントリ)
コンソール上で、ttyコマンドを打つと自分のデバイスファイル名が表示されます。
(接続している人の名札のようなもの)
unrealman@STN-XXXXX MINGW64 ~/dev/docker (master) $ tty /dev/pty0
さらにセッションを立ち上げてttyを入力すると違うデバイスファイル名が表示されます。
(セッションごとにデバイスファイル名が生成される)
unrealman@STN-XXXXX MINGW64 ~/dev/docker (master) $ tty /dev/pty1
また、「/dev/pty0」が割り当てられている端末側から、
$ echo "hogehoge" > /dev/pty1
を実行すると、「/dev/pty1」が割り当てられている端末に"hogehoge"と表示されます。
つまり、どの端末から実行されているかを表している情報ということでよさそうです。
MinTTYとは?
Git for Windowsのインストール画面を参考。
ターミナルエミュレータ。
それはサイズが変更可能なウインドウで、非長方形の選択、Unicodeをサポートしている。Windowsコンソール・プログラムは(対話型のPythonのような)MinTTYの中で動作させるために「winpty」を通して起動しなければならない。
結論
ttyは端末を持っていることを示し、コマンドの受け手は標準に対する統制(キーボードを介しての入力)があると期待しているのに、MinTTY(仮想端末)を使用することでptyとなり異常検知され警告されているということでしょうか?
上手く整理できていませんので、またアップデートします。
■参考
https://codeday.me/jp/qa/20190802/1364237.html
https://codeday.me/jp/qa/20190112/131467.html
【Windows】コマンド操作で超効率【fzf/ff】
Windows環境で爆速ファイル操作
fzfのダウンロード
github.com
64bitであればfzf-0.19.0-windows_amd64.zip
32bitであればfzf-0.19.0-windows_386.zip
(2019/12/15時点の最新)
任意のディレクトリに展開してください。
ffのダウンロード
Windows環境ではfzfの機能が制限されるので、fzfの Windowsラッパーであるffもダウンロードします。
github.com
ff-v0.1.1.zip
(2019/12/15時点の最新)
任意のディレクトリに展開してください。
環境変数に設定(パスを通す)
上記でダウンロードしたfzf.exeとff.exeのパスを通します。
使い方
以下のREADME.mdを参照。
github.com
便利設定
Gitbashでの設定
Gitbashを使用されている方は、そのままだとffが使えなかったので以下で実行する必要があります。
$ winpty ff
ただし、毎回winptyを入力するのは面倒なので、以下のようにエイリアスを設定しておくと良いと思います。
.bash_profileファイル
alias ff="winpty ff"
ショートカット設定
ff.exeと同階層の以下のファイルでAutoHotKeyに設定しておくと、「Windowsキー+/」ショートカットであいまい検索ができてさらに爆速です。
(ショートカットは自由に変更可能)
ff.ahkファイル
【moment.js】日付を扱うライブラリの便利機能
便利機能メモ
月のショートネームを返却
moment.monthsShort(); // ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] moment.monthsShort(0); // "Jan" // インスタンス生成 let m = moment(); // 現在の月のショートネームを小文字で返却(※実行したのは12月なので"dec") moment.monthsShort(m.month()).toLowerCase(); // "dec"
うるう年の判定
moment([2000]).isLeapYear(); //true moment([2001]).isLeapYear(); //false
インスタンスの複製
let m = moment();
mTmp = moment(m);
日付の加算・減算
let m = moment("2019-12-04"); m.add(1, "M").format("YYYY-MM-DD"); // "2020-01-04" m.subtract(1, "M").format("YYYY-MM-DD"); // "2019-12-04" ↑で2020-01-04となったので
上記は月で指定したが、もちろん年や時間も可能
(指定は表のKeyでもShorthandでも良い)
Key | Shorthand |
---|---|
years | y |
quarters | Q |
months | M |
weeks | w |
days | d |
hours | h |
minutes | m |
seconds | s |
milliseconds | ms |
その他
let m = moment("2019-12-04"); // 月の日数(末日)を取得 m.endOf("M").date(); // 31 // 月の末日の曜日を取得 m.endOf("M").day(); // 2 ([日(0)月(1)火(2)水(3)木(4)金(5)土(6)]) // 逆に月初は startOf() を使う m.startOf("M").date(); // 1 m.startOf("M").day(); // 0 // 月を10月に設定(月の指定は0~11) m.set("M", 10).format("YYYY-MM-DD"); // "2019-11-01"
以上です。
【javaScript】変数スコープの整理
スコープの種類
ローカルスコープ(関数スコープ/ブロックスコープ)
グローバル変数以外は、ローカルスコープを持つローカル変数です。
関数スコープとブロックスコープの2つに分けられます。
関数スコープ
関数ごとのスコープ。
関数内で宣言した変数は、関数の内側からのみアクセス可能なローカル変数になります。
※仮引数も同じく関数スコープを持ちます。
function fn(arg) { // 仮引数 arg は参照できる console.log(arg); // => 1 } fn(1);
ブロックスコープ
ブロック({})ごとのスコープ。
ブロック内で宣言した変数は、ブロックの内側からのみアクセス可能なローカル変数になります。
※仮引数も同じく関数スコープを持ちます。
for (let i = 0; i < 5; i++) { // 仮引数 i は参照できる console.log(i); }
変数キーワードの種類
var
・関数スコープを持つ。
つまり、ifブロック内の宣言であろうと宣言された関数のどこからでもアクセスできる。
(function() { if (true) { var x = 'hoge'; } console.log(x); // => hoge }());
・変数を宣言する前に参照してもエラーとならない。
console.log(s); // => undefined var s = "hoge";
・再定義可能
var x = "hoge"; var x = "moge"; console.log(x); // => moge
これは、意図せずに同じ変数名で定義してもエラーとならずに、値を上書きしてしまう。
let
・ブロックスコープを持つ。
つまり、letで宣言された変数にアクセスできるのは、それらの変数が宣言されたブロック(またはサブブロック)の内側のみとなる。
・変数がvarに比べてはるかに予測可能なものとなり、ブロック外での使用されたことによるバグの紛れ込みがなくなる。
・変数を宣言する前に参照するとエラーとなる。
console.log(t); // => ReferenceError: Cannot access 't' before initialization let t = "moge";
・再定義不可能
let x; let x; // => SyntaxError: Identifier 'x' has already been declared
const
・定数。変更不可。
・再代入が必要ないときはconstを使う。
以上です。