Chosenプラグイン
Chosenプラグインとは
セレクトボックスを使いやすくするためのjQueryプラグインです。
Chosenの使用例はこちら。
Chosenのオプション一覧▼
https://harvesthq.github.io/chosen/options.html
コード
<!-- 必要なファイルの読み込み --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="./js/chosen/chosen.jquery.js"></script> <link href="./js/chosen/chosen.css" media="screen" rel="stylesheet" type="text/css"/> <!DOCTYPE html> <html lang="ja"> <body> <select class="chosen-select"> <option value="">選択してください</option> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="岩手県">岩手県</option> <option value="宮城県">宮城県</option> <option value="秋田県">秋田県</option> <option value="山形県">山形県</option> <option value="福島県">福島県</option> <option value="茨城県">茨城県</option> <option value="栃木県">栃木県</option> <option value="群馬県">群馬県</option> <option value="埼玉県">埼玉県</option> <option value="千葉県">千葉県</option> <option value="東京都">東京都</option> <option value="神奈川県">神奈川県</option> <option value="新潟県">新潟県</option> <option value="富山県">富山県</option> <option value="石川県">石川県</option> <option value="福井県">福井県</option> <option value="山梨県">山梨県</option> <option value="長野県">長野県</option> <option value="岐阜県">岐阜県</option> <option value="静岡県">静岡県</option> <option value="愛知県">愛知県</option> <option value="三重県">三重県</option> <option value="滋賀県">滋賀県</option> <option value="京都府">京都府</option> <option value="大阪府">大阪府</option> <option value="兵庫県">兵庫県</option> <option value="奈良県">奈良県</option> <option value="和歌山県">和歌山県</option> <option value="鳥取県">鳥取県</option> <option value="島根県">島根県</option> <option value="岡山県">岡山県</option> <option value="広島県">広島県</option> <option value="山口県">山口県</option> <option value="徳島県">徳島県</option> <option value="香川県">香川県</option> <option value="愛媛県">愛媛県</option> <option value="高知県">高知県</option> <option value="福岡県">福岡県</option> <option value="佐賀県">佐賀県</option> <option value="長崎県">長崎県</option> <option value="熊本県">熊本県</option> <option value="大分県">大分県</option> <option value="宮崎県">宮崎県</option> <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </select> <script> // Chosenプラグインを有効化 $('.chosen-select').chosen(); </script> </body> </html>
途中の文言にヒットするようにする
<script> $(".chosen-select").chosen({ // オプションを有効にする search_contains:true }); </script>
Chosenの問題点
Enterを押した際に、要素が確定してしまうのを直したかったのですが、こちらのサイトが参考になりました。
Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch
エラー内容
gitでリモートのブランチをpullすると、下記のエラーが出ました。
コミットメッセージを入れてください、と書いてあります。
エラーかと思いましたが、ちがいました。
Merge branch 'master' of github.com:xxx/ first # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ Type :quit<Enter> to exit Vim
解決方法
コミットメッセージを入力する もしくは コミットを中断する
コミットメッセージを入力する
- 「i」を押す(INSERT(挿入)を意味する)
- コミットメッセージを書く
- 「esc」を押す
- 「：wq」と入力
- Enterキーを押す
コミットを中断する
- 「:quit」と入力
- Enterキーを押す
Ajaxの使い方
Ajaxとは
Ajaxとは「Asynchronous JavaScript + XML」の略。
Asynchronous：非同時性・非同期の意
つまり、JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。
Ajaxを支える機能たち
・XMLHttpRequest
ブラウザ上でサーバーとHTTP通信を行うためのAPI
・JavaScript
・DOM
・XML
※現在では、XMLではなくJSONがよく使われている
・JSON
コード
たとえば、プルダウンで性別を選択すると非同期でサーバーと通信し、DBを更新するような場合。
$(function(){ //DB更新等の処理が書いてあるファイルのパス let url = '/process.php'; $.ajax({ url:url, type:'POST', data:{ 'sex':$(`#sex`).val() } }) // Ajaxリクエストが成功した時発動 .done( (data) => { alert("登録に成功しました。"); }) // Ajaxリクエストが失敗した時発動 .fail( (data) => { alert("登録に失敗しました。時間をおいてもう一度お試しください"); }) // Ajaxリクエストが成功・失敗どちらでも発動 .always( (data) => { }); }
知っていると便利なgit diffのオプション
- Working directory：ローカル
- ステージングエリア：git addされるところ
- ローカルリポ：git commitされるところ
オプション一覧
| No | 用途 | コマンド |
|---|---|---|
| 1 | Working directoryとステージングエリアのdiffを確認する | git diff |
| 2 | Working directoryとローカルリポのdiffを確認する | git diff HEAD |
| 3 | ステージングエリアとローカルリポのdiffを確認する | git diff --staged HEAD |
| 4 | 特定のファイルのdiffを確認する | git diff -- <ファイル名> |
| 5 | コミット同士のdiffを確認する | git diff <コミットID> <コミットID> |
| 6 | ブランチ同士のdiffを確認する | git diff <ブランチ名> <ブランチ名> |
豆知識
「5.コミット同士のdiffを確認する」で、最新のコミットと一個前のコミットの差分を見たい場合、わざわざコミットIDを指定しなくても、
#古いものを左、新しいものを右に指定するのが一般的
$ git diff HEAD^ HEAD
で確認することができる。
- HEAD：アクティブなブランチの最新コミットを指す
- HEAD^：HEADの一つ前のコミットを指す
- HEAD^^：HEADの二つ前のコミットを指す
git mergeのやり方
前提
マージ先: master
マージ元: new-feature
方法
#masterブランチに切り替える $ git checkout master #差分を確認。git diff <ベースブランチ> <作業ブランチ> $ git diff master new-feature #new-featureブランチをmasterブランチにマージする $ git merge new-feature # マージされていることを確認する $ git log
git logについて
git logのよく使うオプション一覧
git log --online
各コミットを一行で表示する。
得られる情報はコミットID（省略形）とコミットメッセージ。
$ git log --oneline 7d03176 (HEAD -> main) name changed 095671a first commit b52de06 (origin/main, origin/HEAD) Initial commit
git log --graph
各コミットを線で結ぶ。
どこからブランチを切ったか視覚的にわかる。
git log --
特定のファイルの情報を表示する。
$ git log -- newfile2.txt commit 7d0317607ab505170144813483f199 (HEAD -> main) name changed
git log --follow
ファイル名の変更も考慮してコミット履歴を表示する。
特定のコミットの詳細を表示する
$ git show <コミットID>
git mvとmvコマンドの違い
git mv
git mvでファイル名を変更した場合、Git側はファイル名が変更されたことを理解し「renamed」と表示される。
$ ls README.md newfile.txt # ファイル名をnewfile2.txtに変更 $ git mv newfile.txt newfile2.txt $ git status On branch main Your branch is ahead of 'origin/main' by 1 commit. (use "git push" to publish your local commits) Changes to be committed: (use "git reset HEAD <file>..." to unstage) renamed: newfile.txt -> newfile2.txt
mvコマンド
mvでファイル名を変更した場合、Gitは名前変更前を削除、名前変更後を未追跡の状態にする。
# ファイル名をnewfile2.txtに変更 $ mv newfile.txt newfile2.txt $ git status On branch main Your branch is ahead of 'origin/main' by 1 commit. (use "git push" to publish your local commits) Changes not staged for commit: (use "git add/rm <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) deleted: newfile.txt Untracked files: (use "git add <file>..." to include in what will be committed) newfile2.txt
だが「git add .」をすると、git mvのときと同じようにちゃんとrenameされたことになっている。
$ git add . $ git status On branch main Your branch is ahead of 'origin/main' by 1 commit. (use "git push" to publish your local commits) Changes to be committed: (use "git reset HEAD <file>..." to unstage) renamed: newfile.txt -> newfile2.txt
どうしてstatusがgit mvと同じ結果になるのか
理由はgit mvが下記の省略形だから。
$ mv newfile.txt newfile2.txt $ git add newfile2.txt $ git rm newfile.txt
そのため、mvをしているのとやっていることは変わらないので同じ結果になる。
