【js】jsonで取得した値、並び替えてみた【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
jsonで取得した値の値がソートできる。はず。
┓作業の流れ┓
⚠︎attention⚠︎
sort関数を使用します。
ふっつーの連想配列はソートできません。
タイトルにもあるように「大体そんなもん」です。
より理解を深めたい方は、書店などに駆け込んでビーチフラッグ競技のようにJavaScriptの本を
購入して知識を深めてください。
話が脱線しないように頑張ります。
では、行ってみよー！
はじめに.....
連想配列と言えば
var arrey = { "赤":"red", "青":"blue", "緑":"green"};左側が「プロパティ値(属性)」。右側が「プロパティで参照したときに取得できる値」です。
分かりやすい。と思われる方もいると思います。が、これをこのままソートする事はできないとのこと。
ただ、じゃぁ全部の連想配列がソートできないのか？というわけじゃないそうで。
配列の中に入った連想配列であればソートが可能らしいです。やったね！
書き方(三項演算子を使って書きます。)
昇順
Array型変数.sort(function(a, b) {
return (a[配列番号] < b[配列番号]) ? -1 : 1;
});
降順
Array型変数.sort(function(a, b) {
return (a[配列番号] < b[配列番号]) ? 1 : -1;
});
解説
(昇順を例にして)
「a[配列番号] < b[配列番号]」ならば「-1」を返す。
「a[配列番号] > b[配列番号]」ならば「1」を返す。
ここでいう、「-1」や「1」というのは順番のことです。
なので、
「a[配列番号] < b[配列番号]」ならば、「b は aの前に並べ替え」
「a[配列番号] > b[配列番号]」ならば、「a は bの後に並べ替え」
を行っています。
降順はその逆。
ちょっと書いてみる。
jsonの内容は以下、
{ "demoList": [ {"name":"みかん" , "price":120}, {"name":"もも" , "price":160}, {"name":"いちご" , "price":200}, {"name":"りんご" , "price":190} ] }
文字列で並び替え
昇順
データ取得するところはちょっと省略しますね。
//配列宣言 var arryList = new Array(); ・ ・ ・ //リストに格納 $(data.demoList).each(function(i){ arryList[i] = data.demoList[i].name + ',' + data.demoList[i].price ; }); //昇順のソート arryList.sort(function(a, b) { return (a[0] < b[0]) ? -1 : 1; });
降順
データ取得するところはちょっと省略しますね。
//配列宣言 var arryList = new Array(); ・ ・ ・ //リストに格納 $(data.demoList).each(function(i){ arryList[i] = data.demoList[i].name + ',' + data.demoList[i].price ; }); //降順のソート arryList.sort(function(a, b) { return (a[0] < b[0]) ? 1 : -1; });
数字で並び替え
昇順
データ取得するところはちょっと省略しますね。
//配列宣言 var arryList = new Array(); ・ ・ ・ //リストに格納 $(data.demoList).each(function(i){ arryList[i] = data.demoList[i].name + ',' + data.demoList[i].price ; }); //昇順のソート arryList.sort(function(a, b) { return (a[1] < b[1]) ? -1 : 1; });
降順
データ取得するところはちょっと省略しますね。
//配列宣言 var arryList = new Array(); ・ ・ ・ //リストに格納 $(data.demoList).each(function(i){ arryList[i] = data.demoList[i].name + ',' + data.demoList[i].price ; }); //降順のソート arryList.sort(function(a, b) { return (a[1] < b[1]) ? 1 : -1; });
以上です。
ほとんど配列の並び替えの時と同じことを言った気がします。
が、気にしない。大体そんなもんだもの。
探したらもっときれいな書き方もあるかもしれないので、
気になる方は探してみてください。
お疲れ様でした。
【js】配列、並び替えてみました。【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
配列の値がソートできる。はず。
┓作業の流れ┓
⚠︎attention⚠︎
sort関数を使用します。
タイトルにもあるように「大体そんなもん」です。
より理解を深めたい方は、書店などに駆け込んでビーチフラッグ競技のようにJavaScriptの本を
購入して知識を深めてください。
話が脱線しないように頑張ります。
では、行ってみよー！
はじめに.....
sort()って？？
javascript側が用意してくれた並び替えができるメソッドです。
配列の値を昇順や降順に並び替えることが出来ます。
配列
文字列の並び替えを行う
昇順(sort)
小さい→大きい としたい場合はsortメソッドを使用します。
//適当な文字を配列に設定 var arrey = ['A','X','B','Z','Y'] //並べ替え var sortArray= array.sort(); //コンソールログ出力 console.log(sortArray); // ['A','B','X','Y','Z']
デフォルトで昇順になります。
降順(reverse)
大きい→小さい としたい場合はreverseメソッドを使用します。
//適当な文字を配列に設定 var arrey = ['A','X','B','Z','Y'] //並べ替え var sortArray= array.reverse(); //コンソールログ出力 console.log(sortArray); // ['Z','Y','X','B','A']
ちょっと重要なこと。
sortメソッドが各要素を文字列に変換したデータを比較して、
辞書順でソートするためだそうです。つまり、文字列比較してしまうのは仕様ですね。
(仕様。って言葉は便利ですね。この一言で片付けられますから....)
私はこの仕様を知らずにいたので数時間程、地獄を見ました。
で、ですね。
sortメソッド。というくらいなので、引数が設定できるのは皆さまもお気づきの通り。
配列の中に格納されている数字を比較したい場合は比較関数を使いましょう。
数字の並び替えを行う
本当に比較関数がないと文字として並び替えられるのか確認
//適当な数字を配列に設定 var array = [1,17,26,80,9]; //並べ替え var sortArray= array.reverse(); //コンソールログ出力 console.log(sortArray); // [1, 17, 26, 80, 9]
はい。並び替えをしたのに何で[80]の後に[9]が来るんですかね....
まぁ、理由としては文字。として認識されてしまい、想定した結果にならないんです。
昇順(sort)
//適当な数字を配列に設定 var array = [1,17,26,80,9]; //並べ替え array.sort(function(a,b){ return (a < b ? -1 : 1); }); //コンソールログ出力 console.log(sortArray); // [1, 9, 17, 26, 80]
降順
勘の良い方はもうお気づきの通り。比較演算子を逆にしてあげる。または並び順を入れ替えてあげるだけで降順になります。
//適当な数字を配列に設定 var array = [1,17,26,80,9]; //並べ替え array.sort(function(a,b){ return (a < b ? 1 : -1); //return (a > b ? -1 : 1); でもおk! }); //コンソールログ出力 console.log(sortArray); // [1, 9, 17, 26, 80]
解説。みたいなことをします。
(昇順を例にします。)
「a < b」ならば「-1」を返す。
「a > b」ならば「1」を返す。
ここでいう、「-1」や「1」というのは順番のことです。
なので、
「a < b」ならば、「b は aの前に並べ替え」
「a > b」ならば、「a は bの後に並べ替え」
を行っています。
降順はその逆ですね。
ひとまず以上です。
コードを書いたのでなかなかの長文でした。
皆さん、寝ちゃダメ。
無意識のうちに、「メダパニ(混乱呪文)」かけてないし、
「ラリホー(眠りに誘う呪文)」かけてない。はず...(メダパニは無意識のうちにかけてるかも)
ちゃんと「マホカンタ」覚えてきてね。
最近、JSONを使い始めました。
そしてまたもや並び替え地獄.....おっふ。
なので、まとめてみました。
【js】jsonで取得した値、並び替えてみた【大体そんなもん】
お疲れ様でした。
【GitBush】パスフレーズ入力、めんどくさい【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
パスフレーズの入力の手間が省けます。
┓作業の流れ┓
⚠︎attention⚠︎
この設定をすると、パスフレーズの入力回数は格段に減ります。
が、パスフレーズを入力しなさ過ぎて忘れては本末転倒なので
必ず、秘密の場所にメモしておいたほうが安心です。
話が脱線しないように頑張ります。
では、行ってみよー！
1.GitBach起動
2.以下のコマンドを入力
vi ~/.bashrc
3.INSERTモードにして、以下の3行を入力
#ssh-agent eval `ssh-agent` ssh-add
4.上書きしてviモードを終了
5.GitBachを再起動
手順は以上です。
今後、GitBachを起動するたびに、最初の1回だけ入力を求められますが
pushしてもssh接続確認してもパスフレーズの入力を求められなくなります。
入力が省略されるのは今現在開いたセッション間のみ。
中には別のセッションでも共用できる方法もあるらしいのですが、
もしかしたら途中でパスフレーズを変更するって場合が無きにしも非ず。
なので、今回は現セッション間のみパスフレーズを省略できるようにしました。
ちなみに、1回起動したssh-agentを別のセッションでも共用したい場合、以下を
3の手順実行時に入力してください。
# test for identities function test_identities { # test whether standard identities have been added to the agent already ssh-add -l | grep "The agent has no identities" > /dev/null if [ $? -eq 0 ]; then ssh-add # $SSH_AUTH_SOCK broken so we start a new proper agent if [ $? -eq 2 ];then start_agent fi fi } # check for running ssh-agent with proper $SSH_AGENT_PID if [ -n "$SSH_AGENT_PID" ]; then ps -ef | grep "$SSH_AGENT_PID" | grep ssh-agent > /dev/null if [ $? -eq 0 ]; then test_identities fi # if $SSH_AGENT_PID is not properly set, we might be able to load one from # $SSH_ENV else if [ -f "$SSH_ENV" ]; then . "$SSH_ENV" > /dev/null fi ps -ef | grep "$SSH_AGENT_PID" | grep -v grep | grep ssh-agent > /dev/null if [ $? -eq 0 ]; then test_identities else start_agent fi fi
お疲れ様でした。
【CSS】はてなブログに書いたコードに色を付ける【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
はてなブログでコードを記載する際に好きな色が付けられる
┓流れ┓
話が脱線しないように頑張ります。
では、行ってみよー！
色のテーマ
テーマはずばり「柔らかい感じ」ですかね。
基本、パステルカラーを使っております。
背景を黒にしようと思ったのですが、スタイリッシュになってしまうかな。
と思い、少し茶色が混ざった灰色を使用しています。
配色は整ってる......はず。
今現在使用しているCSS
/* code色設定*/ .entry-content pre.code { background-color: #333333; /* 灰色：とても暗い無彩色 背景色*/ color: #ffffff; /* Font 文字色*/ border: solid 2px lightgray; } .synSpecial { color: #C000C0 } /* Red 特殊文字*/ .synType { color: #ffffb3 } /* 黄色：淡い黄系の色 型*/ .synComment { color: #b3ffbf } /* 緑：淡い緑系の色 コメント*/ .synPreProc { color: #c2b3ff } /* 青紫：淡い青紫の色 プリプロセッサ*/ .synIdentifier { color: #99ffbb } /* 黄緑：淡い緑系の色 識別子*/ .synConstant { color: #a2d7dd } /* 水色：瓶覗 かめのぞき 定数*/ .synStatement { color: #ffccff } /* ピンク：淡い赤紫系の色 ステートメント*/
サンプルを用意してみました。
【html】
<!DOCTYPE html> <html> <head> <title>サンプル</title> </head> <body> <span>Hello world!!</span> <div id="t1"></div> </body> </html>
//画面初期表示時実行 window.onload = function() { setInterval(function() { var dd = new Date(); document.getElementById("T1").innerHTML = dd.toLocaleString(); }, 1000); }
【XML】
<?xml version="1.0" encoding="Shift_JIS"?> <emp> <content> <ID>1</ID> <name>スナフキン</name> <tribe>人間</tribe> </content> <content> <ID>2</ID> <name>ニョロニョロ</name> <tribe>幽霊</tribe> </content> <content> <ID>3</ID> <name>ムーミン</name> <tribe>カバの妖精</tribe> </content> </emp>
【JSON】
[ { "ID": "1", "name": "スナフキン", "tribe": "人間" }, { "ID": "2", "name": "ニョロニョロ", "tribe": "幽霊" }, { "ID": "3", "name": "ムーミン", "tribe": "カバの妖精" } ]
【java】
public class HelloWorld{ public static void main(String[] args){ String msg = "Hello World!!"; //メッセージ格納用変数 System.out.println(msg); } }
【vim】で、いいのかな？
# test for identities function test_identities { # test whether standard identities have been added to the agent already ssh-add -l | grep "The agent has no identities" > /dev/null if [ $? -eq 0 ]; then ssh-add # $SSH_AUTH_SOCK broken so we start a new proper agent if [ $? -eq 2 ];then start_agent fi fi } # check for running ssh-agent with proper $SSH_AGENT_PID if [ -n "$SSH_AGENT_PID" ]; then ps -ef | grep "$SSH_AGENT_PID" | grep ssh-agent > /dev/null if [ $? -eq 0 ]; then test_identities fi # if $SSH_AGENT_PID is not properly set, we might be able to load one from # $SSH_ENV else if [ -f "$SSH_ENV" ]; then . "$SSH_ENV" > /dev/null fi ps -ef | grep "$SSH_AGENT_PID" | grep -v grep | grep ssh-agent > /dev/null if [ $? -eq 0 ]; then test_identities else start_agent fi fi
ってな感じです。
例に記載しているサンプルコード達はよくお世話になったコードや私が説明のためにサクサクっと作ったりしたものです。
なので、動くかと聞かれたら動かないかもしれません(笑)
お疲れさまでした。
【詳細設計】詳細設計が難しい。【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
詳細設計というものが何となく理解できる
社会人として3年目。今日、こんなことがありました。
会社にて
上司「新人たちに詳細設計書かせて」
と、言われ
私「あ～はいはい。おkおk。」
と、私は答えました。答えてしまいました。
(実際はちゃんと「かしこまりました。」って言ったわけですが...)
んで、ふと思ったわけです。
........詳細設計の書き方ってどう教えたらいいんだ？？？
と。
なぜ、書き方を説明できないんだ？と自分でも不思議に思っていたのですが、私自身、初めて詳細設計を描いたのは常駐していた派遣先でした。
その時、社会人1年目だったので素直に「書き方教えてください」と言えればよかったのですが、その時の私の教育係(私より先に常駐されていた自社の女先輩)の人がですね......私が気にくわなかったのか「調べれば？」の一言で突っぱねてきやがりましてね？
「今、あなたに聞いてるやん(調べてるやん)。」と心の中で毒づいていたわけですが....
結局、常駐先のプロパーの方に伺い、快く別の仕事の詳細設計を見せていただけたので解決しました。
が、その結果、書き方なんて千差万別だってことがよく分かりました。内容が丁寧な方もいるし、ものすごく大雑把に書いている方もいました。
そして今現在、これからの未来を担う新人たちに誤った知識を植え付けて腐らせる訳にはいかない。フレッシュなままでいてほしい。
と思い、改めてGoogle神に教えを乞ったわけです。
┓流れ┓
⚠︎attention⚠︎
文中の中でも書いてあると思いますが、IT業界に足を踏み入れてたかが3年程度のペーペーが書きます。
設計書というものは必ずこれだよ。と決まっているものではないと思っています。
閲覧された方のなかでも「ん？」と思うところもあるかと思いますが、そこは𠮟咤激励のお言葉ぜひお願いします。
では、話が脱線しないように頑張ります。
では、行ってみよー！
内部設計書。とも言います。
詳細設計では何を書くのか。
基本設計で決められた動きを、どうやって実現するかを記述する
文字が読めるので日本語だと思いますが、私が理解できない。
はい、じゃ。次....
基本設計をもとにして、実際にプログラムが作れるように詳細を描く
さっきよりは何となく理解できた。
しかし、詳細に書くとはいっても、難しい。
何が難しいのか。詳細にする加減(レベル)が分からないのです。
参考にさせていただいたページなのですが....
参考リンク：https://sirokuro-2.hatenadiary.org/entry/20100106/1262784265
このページに書かれている、詳しすぎる詳細設計書。
このサイトのページを読んで、ビンタを食らった気持でした。
なぜなら、私も詳しすぎる詳細設計書を今でも書いているからです。
詳細設計書を書く際、「他人が見ても書けるくらい詳細に書いて」と言われ、心がけてきました。
1年目で常駐していた時の先輩には「あんたでも理解できるようにやさしく書いてあげているんだからね？」と必ず念押しされて、先輩が書いてくださった詳細設計書を見せてもらっていました。一言多いんだよね。と思いながらもそれが正しいと思っていたわけです。
そんな詳しすぎる詳細設計書を正しいと思い込んでいたからこそ、プログラム設計書と何が違うのかも理解で来ていなかったということですね。
詳しすぎる詳細設計書については、私も今後書き方に注意したいと思います。
けれど、まだまだ3年目なのですがその3年の中で、7件ほど派遣させていただきました。
派遣先にて拝見させていただいた詳細設計書ですが、ちょいちょい会社によって書き方が違うのもまた事実です。
むしろ、部署で統一性を持たせるためにフォーマットを用意していた会社様もありましたし、フォーマットなんてないからWebからダウンロードしてきたテンプレを運用していたり、Excelで1から作成していたりと様々です。
なので、その常駐先に合わせた書き方をしなければならないところが難しいところです。
(だって、違う書き方したらレビューしたとき、ボロクソ言われたし.....)
先駆者の方々のご意見も閲覧させていただきました。
参考リンク：https://anond.hatelabo.jp/20161105155342
この記事を読んでいて、文面の最後の「甘えんな」に笑ってしまいました。
確かに今まではバグがあるごとに、ソースを日本語化した詳細設計書(という名の詳しすぎる設計書)を書いていたので、管理がめんどくさい。と不満がありました。
で、以下の記事も閲覧させていただきました。
参考リンク：https://blog.goo.ne.jp/hishidama/e/3118f6e7161f486700c5f05e21b5ce4f
むむむ。どちらの記事も「確かに」と読んでいました。
そうなると、必要/不必要の問題ではなく、やはり『書き方』の問題なのでしょうか？？
そして最後、
参考リンク：https://www.deep-rain.com/other/1058
綺麗にまとめてくださいました。
頭の中のモヤモヤがうっすら晴れた気がします。
自分の中で「必要/不必要」と考える前に、詳細設計書が何に使われるのか聞け。
ということですね。
と、改めてふと昔のことが思い浮かんだ。
「あんたでも理解できるようにやさしく書いてあげているんだからね？」と必ず念押してきてくれやがった先輩に対してムカムカしてきたので、いつかあったら心の中で「ちゃうやんけ」と言ってやろ。まぁ、相手は覚えてないだろうけど。なんてったってオバサンだし.....
【Json】Jsonって何ぞや【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
Jsonが大体理解できる
┓流れ┓
初めて仕事でJSON(ジェイソン)を使用しました。
なに、それ？？
と思ったので自分が理解するために調べてみました。
話が脱線しないように頑張ります。
では、行ってみよー！
JSONとは？
JavaScript Object Notationの略。
XMLなどと同様のテキストベースのデータフォーマットのこと
だそうです。
いつもながら一回で理解できないのが私クオリティ。
なので、自分が理解できるようにもっとかみ砕いて考えてみる。。。。
結論
Webで扱うデータをやり取りするときの言語のひとつ
らしい。
つまり、ホームページを作成するためにjavaやC言語を書くのではなく「HTML言語」の書き方で作成しますよね？
データのやり取りをするときは「XML言語」を使います。
なので私は、JSONもデータのやり取りをするときに使う言語の1つ。
と覚えることにしました。
じゃぁ「XML」と「JSON」の違いは？？
①基本型の有無。
XML : 無
JSON: 有
これはありがたい。わざわざエンコードするなどの手間が省けます。
(それに、nullとブランク(空文字)の区別がついてかなり便利。)
※ここでいう、基本型というのは
integer
boolean
null
など、変数の型のことです。
②可読性の違い。
XML : タグを使用する
JSON: 括弧をしようする
これは本当に見やすいなと思いました。
今までXMLで10行以上書いていたプログラムコードをJSONならもっと短い行で書いてくれるそうです。
例
【XML】の場合
<?xml version="1.0" encoding="Shift_JIS"?> <emp> <content> <ID>1</ID> <name>スナフキン</name> <tribe>人間</tribe> </content> <content> <ID>2</ID> <name>ニョロニョロ</name> <tribe>幽霊</tribe> </content> <content> <ID>3</ID> <name>ムーミン</name> <tribe>カバの妖精</tribe> </content> </emp>
【JSON】の場合
[ { "ID": "1", "name": "スナフキン", "tribe": "人間" }, { "ID": "2", "name": "ニョロニョロ", "tribe": "幽霊" }, { "ID": "3", "name": "ムーミン", "tribe": "カバの妖精" } ]
さて、いかがでしょう。
インデントも使ってみましたが.....私はJSONのほうが見やすいです。
JSONのほうが文字数が少なくて済むので、腱鞘炎のSEの方が減るのではないでしょうか？(笑)
しかしながら、JSONは簡潔にまとめられすぎて、理解されにくいという方もいます。
なので、JSONを使うか、XMLを使うかは完全に「好み」次第ですね。
ちなみに...
JSON を取得するには、XMLHttpRequest (しばしば XHR と呼ばれる) という APIが必要らしいです。
難しい言葉と横文字を使ってますが、つまりAjaxですね。
※APIと聞いて「？」となってしまったので簡単に記述。
→略さないと「Application Programming Interface」。
つまり、ソフトウェアとの機能を共有することです。
海外に行ったときにその空港の手荷物検査する人のイメージでよいかと
APIの理解について、参考にさせていただいたリンク：https://www.sejuku.net/blog/7087#API
大体こんなものかな？と理解されたのではないでしょうか？
私はフワッと理解できたので満足です。
お疲れさまでした。
【Git】GitBushのパソコン名非表示【大体そんなもん】
始めましての方、初めまして。
それ以外の方、私だ こんにちは。
この記事を読んでできること。
GitBushのパソコン名を非表示にしてすっきりさせる
┓作業の流れ┓
- 1.GitBach起動
- 2.以下のコマンドを入力してEnter。
- 3.内容を画像のようにコメントアウトして上書き。
- 4.GitBachの設定を書き換えたので、一度、GitBachを閉じます。
- 5.GitBachを起動します。
いや、もう本当にね....せっかく画面のキャプチャを取ろうと思ったらパソコン名が表示されてる
ので編集が二度手間。
モザイク処理かけるのがホント、面倒すぎる。
ので、GitBachに表示されるパソコン名を非表示にしてやろうと思います。
話が脱線しないように頑張ります。
では、行ってみよー！
1.GitBach起動
2.以下のコマンドを入力してEnter。
コマンド：
vi etc/profile.d/git-prompt.sh
3.内容を画像のようにコメントアウトして上書き。
「modify：Start」～「modify：End」の部分
4.GitBachの設定を書き換えたので、一度、GitBachを閉じます。
5.GitBachを起動します。
思ったより凄いスッキリしました。
お疲れ様でした。
