2019-02-06

JavaScript　整数　四捨五入　切り上げ　切り捨て

JavaScript

やりたいこと

一言で言うと

整数を四捨五入、切り上げ、切り捨てがしたい

複数行で言うと

一般的な概念としては、123という値で、1の位で四捨五入すると120となり、切り捨ても同じ120で、切り上げが130となる。そんな感じだと思います。

サブジェクトには「整数」と入れていますが、実際にはNumber型しかないので、実際には区別はありません。

const value = 123.45

に対して、小数点第一で四捨五入、切り上げ、切り捨てを行って、切りよく整数になるような例で考えます。

四捨五入: 123
切り上げ:124
切り捨て:123

実食

四捨五入、切り上げ、切り捨て

const value = 123.45
console.log("四捨五入: " + Math.round(value))
console.log("切り上げ: " + Math. ceil(value))
console.log("切り捨て: " + Math. floor(value))

結果は、

四捨五入: 123
切り上げ:124
切り捨て:123

何故「やりたいこと」に上げた例と違うのって？実はこの関数はで出来るのはここまでです。

他の桁で実施するには

これを利用？活用？ありがたく使用させて頂くしかないので、最初に上げた例の一の位の例を実現するには

const value = 123.45
console.log("四捨五入: " + Math.round(value/10)*10)
console.log("切り上げ: " + Math. ceil(value/10)*10)
console.log("切り捨て: " + Math. floor(value/10)*10)

これで晴れて以下の結果を得ます。

四捨五入: 120
切り上げ: 130
切り捨て: 120

~~世の使用人どもよ、ありがたく使わせてもらうが良い。~~ ま、関数を自作するか、どこかのユーティリティにでも入っている関数を使うか、そんな感じでしょうか。

蛇足

設計した人は、「えっ、小数点基準なの？」という使用人どもの驚きの数分だけニンマリしている変態なのでは無いかと。

2019-02-06

JavaScirpt　配列　ソート

JavaScript

やりたいこと

ひとことで言うと

配列のソート処理

複数行で言うと

以下のような配列の各要素をソートしたい

const values = [30, 20, 10]

例えば結果が以下のようになるようにする

[10, 20, 30]

ソートの仕方

これも野暮ったいやり方に、スマートなやり方、当然いくつかありますね。

野暮ったいやり方としては、こちらのループ処理でやっても良いでしょう。配列の要素の出し入れみたいなのを使うことになりそうです。

ここでは、sort()を使います。

sort()

const values = [30, 20, 10]
console.log(values.sort())

簡単ですね。これでやりたいことの結果が得られます。

[ 10, 20, 30 ]

あれ？反対は出来ないの？

sort() その2

sort()にとっては、『反対に並べる=思ったように並べる』です。 sort()は引数にコールバック関数を取ります。

function compare( a, b ){
  return a < b
}
const values = [30, 20, 10]
console.log(values.sort(compare))

とすれば反対に並びます。(といっても、この場合並びが変わらないので、元のデータを逆さまにして試してください)

不等号を逆にすると、コールバック関数を指定しなかった時と同じ動作になります。ですが、本来はこんないい加減なのでは無くて、-1, 0, 1を返す礼儀正しい？関数を書く方が良いと思います。

補足

「そういうものだということ」と「数字以外」

そういうもの

配列のソートは、それ自体がソートされてしまいます。

const values = [30, 20, 10]
const results = values.sort()

console.log(values)
console.log(results)

とすると、以下のようになります。

[ 10, 20, 30 ]
[ 10, 20, 30 ]

もしvaluesが無傷だと期待していた方がいたとしたら、resultsがtrueとか'success'とかならないだけ良かったと思うほかありません。(ま、そんなの返ってきたら別の意味で使いにくくて仕方ないとは思いますが)

従って分かりやすさのために書くのはアリかも知れませんが、元の変数が保たれているという誤解の元にもなりそうです。sort()した結果を別の変数に入れる人は少ないかも知れませんが、元の並びを保つために事前に別の変数にコピーする人はいると思います。

同じ感覚で操作していても、元の変数が変化するものと、元は無影響なものがあるので、すこし注意する必要があります。(使用人は、細やかな気遣いを必要とします)

数字以外

例えば文字列でもソートは可能です。

といっても、比較するのはコールバック関数の役割で、sort()さんは-1,0,1に従って作業しているだけです。

比較するロジックは、概ね『文字列の比較』が関心事の中心だと思いますので、そちらで。

何を言っているかというと、文字列の長さ順で並べるならa.lenghtとかってやればいいわけですね。文字列でソートというと、きっとあいうえお順的なことを想像したと思います。それは文字列の比較で、a>bと出来ちゃいますが、その結果を知っておく必要があり、それは『文字列の比較』へということです。

2019-02-06

JavaScript 配列操作連結

JavaScript

やりたいこと

ひとことで言うと

配列の連結処理

複数行で言うと

以下のような配列の各要素を連結したい

const values = [10, 20, 30]

例えば結果が以下のようになるようにする

10+20+30

連結の仕方

野暮ったいやり方に、スマートなやり方、当然いくつかありますね。

野暮ったいやりかたとしては、こちらのループ処理でやっても良いでしょう。そして、野暮ったい方が実は早いという話もあります。

ここでは、join()を使います。

join

const values = [10, 20, 30]
console.log(values.join("+"))

簡単ですね。これでやりたいことの結果が得られます。もちろん、join("")とすれば、102030という文字列が得られます。

もう少しいうと、join()とすると、デフォルトがカンマなのでjoin(",")と同じ結果に。さらにもう少しいうと、たまたまというか何というかtoString()は同じ結果を生みます。

ループ処理のfor ...inのような余計なものが追加されたりもしません。

なにそれおいしいの？

join()の変わった？使い方。

split().join()

const values = "2019-01-01"
console.log(values.split("-").join("/"))

これで、2019-01-01が、2019/01/01に変換、つまり置換されます。文字列の置換するための関数を忘れてしまったら？使ってみますか。

2019-02-06

JavaScript 配列操作ループ処理

JavaScript

やりたいこと

ひとことで言うと

配列のループ処理

複数行で言うと

以下のような配列の各要素に対して、ループ処理を行いたい

const results = [10, 20, 30]

例えばそれぞれ+5して標準出力へ表示すると以下のイメージの処理を繰り返すことになる。

console.log( result + 5 )

たくさんあるループの仕方

以下に5つのループの仕方を挙げますが、これ以外にもあります。たくさん知っていると品質が上がるかというと、根っこの部分まで理解している場合はその効果があるかも知れませんが、1つしか知らない人のプログラムの品質が低いかというとそうは思えないので、ご自分で試されてしっくりくればそれで良いのかなと。

for

const results = [10, 20, 30]
for (let i = 0; i < results.length; i++) {
    console.log(results[i])
}

いにしえ？より伝わりし方式ですね。JavaとかC言語とかでもあり得る構図ですね。ただ、実際に使うことはあまりなさそうです。というのも、実際に使う時にはresultsがundefinedな状況もあり得て、その場合lengthが無いって怒られちゃうので、ループの手前でチェックする必要があります。

for ..in

const results = [10, 20, 30]
for (const x in results) {
    console.log(results[x])
}

indexとして0,1,2とxに値が入ってループが回るので、最初だけ特別な処理を挟むとか偶数回、奇数回で処理を分けるとかそういうときにも使えます。

使い勝手的には、1つめに挙げたいにしえの方式と同じですが、resultsの中身がundefinedでもエラーになりません。「無いんだからループ回しません」って動きになるので人が作業するときの思考に違い感じですね。

ただし、弱点が無いわけではありません。この辺はなんちゃってプログラマーからみてJavaScriptの闇の部分ですね。この記事の最後に補足として書き記しておきます。

for …of

const results = [10, 20, 30]
for (const result of results) {
    console.log(result)
}

for …inと逆に？値の方を直にとれるやり方です。こっちには補足に記載の内容の心配はありません。

forEach その1

const results = [10, 20, 30]
results.forEach(function(result, x) {
  console.log(result)
})

即時関数は見た目に美しくないと思っているので、私は極力この書き方はしません。

forEach その2

results.forEach(result => {
  console.log(result)
})

こちらの方(アロー関数式)の方がすっきりしますね。

補足

JavaScriptさんって変態というかなんというか...

for ...inでは、以下のコードで余計な部分まで？ループが回ります。

const results = [10, 20, 30]
results.zzz = "zzz"

for (const x in results) {
    console.log(results[x])
}

この結果が以下のようになります。

10
20
30
zzz

同じことがプロトタイプ拡張を行っても起こります。困ったものです。inとofの動作を同じレベルにして、今のinの動きをするin_xとof_x(命名適当)を用意してくれて良い気がするのですが...

そんなことを言っていると、おまえはinの意味が分かってないとか、ofとはね、みたいなことで怒られちゃう気がしますが。

ともかく残念ですが、for ...inには気をつけるしかなさそうです。

私の持論

私の持論としては、こういった凸凹というか下から積み上げていった結果としてのしわ寄せというか、「実はこういう動きなんだよねー」という感じの小ネタやTipsがちりばめられている技術やソフトウェアの方が世にはびこりますよね。

コンピュータを設計したのは人間なのに、その上に積み上げたものに使われるなんて私はまっぴらごめんですが、意外とこき使われていることに気がつかず、その方が心地よい人が多いようです。家政婦がこの自治体のゴミ出しの裏技知ってます自慢してるみたいで私はとてもイヤです。(段ボールは資源ゴミなので燃えるゴミでは出せません。でも30㎠以下に切り刻めば紙くずとして認められ燃えるゴミで捨てられます)

すべて人が創造した世界なんだから、ゴミはゴミ箱に入れたら分別すら不要、大きさだって四次元ポケット並みに伸縮自在に、そういうのであって欲しいです。そしてもっと言うなら、私は使用人ではなく、雇用主側の振る舞いをしたいです。自分たちで作った世界で使用人に甘んじるなんて、ほぼほぼ変態ですよね。

ただ残念なことに、今後もその意味で訳わかんないことと付き合っていないといけないですね。

2019-02-06

JavaScript関連のことを書こうと思います

JavaScript

はじめに

長らく放置していました

かなり長らく放置していました。そして10記事ほどのドラフト記事も放置されていたのですが、古すぎて動作を検証したり加筆したりすることも出来ないのでそこも含め放置します。ここしばらくJavaScriptを書いているのでJavaScript、Node.js関連の話題で再開し、スマホアプリ系の話題は、またその機会が訪れたら再開したいと思います。

記事の流れ

系統立てて、そして正しく解説するのはこのブログの主旨ではないので、ここはやはり「やりたいこと」を起点に「やってみたこと」つまりコピペですね。その動いたものを残していくスタイルにします。

ま、私にはそもそもそんなこと無理ですしね。

書く内容

全般的なこと

ここからがJavaScriptに関連する内容です。

みなさんそれぞれに命名規則があるかと思います。(この場合無い方も、ルールなしというルールがあるということで) 　昨今、自分の流儀を貫けることは、ほぼあり得ないと思います。様々なライブラリを利用するケース、外部のWebサービスを呼び出すケースなど、他人の流儀に寄り添う機会は普通に訪れます。そのため個人的には強い型付けの言語であってもハンガリアン記法的なことを徹底する等といったことは目指していません。特にここで扱うのはJavaScriptですし。

例えば配列(Array)の変数名に、それを意識させたいときにはxxxArray等と命名することがありつつ、特に意識しなくても良いときはusers などのように複数形にしています。そしてループ処理で取り出した1つの値にはuserなどのように単数形にしています。ソースコードをパッと見たときに見間違えて、議題から集中がそがれるのは良くないので、念頭においておいてください。

記事一覧

以下に記事の一覧を掲載します。順次アップデートしていきます。

JavaScript

整数
- 四捨五入切り上げ切り捨て
- 商余り
文字列
- 比較する
- 連結する
- 分割する
- 切り出す
- 探し出す
- 置換する
配列
- ループ処理
- 連結
- ソート
- 切り出し
連想配列
同期/非同期
- ループで実行し終了待ち

Node.js

Express
filter
Cookie
websocket
CORS
stacktrace
timestamp
Sequelize

個別の話題

緯度経度
暗号化関連
GoogleMap
Twitter API

2016-04-03

Objective-C: 動画再生 AVPlayerViewController

Objective-C

概要

いろいろな動画フォーマットがあると思いますが、今回はiPhoneで撮影した動画を標準のライブラリで再生する方法です。

AVPlayerViewController

を使う方法を採り上げます。

なお、動画フォーマットなどと技術的にはさっぱり役に立たない用語で誤魔化しましたが、対象とする動画の仕様はAVPlayerViewControllerの仕様から逆引きして下さいませ。

キーワード: ファイルフォーマット、コーデック

詳細

再生するファイルが何処にあるか？というか話は今回の本題ではないので、今回はたまたま動画がアプリ内にあったとします。（たまたまですよ、たまたま）

コードはこんな感じ。

@import AVKit;
@import AVFoundation;


@interface AVPlayerViewController1 : AVPlayerViewController

@end

@implementation AVPlayerViewController1

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // パス（Documents/movie00.m4v）の文字列を生成、URL化
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString *path = [documentsDirectory stringByAppendingPathComponent:@"movie00.m4v"];
    NSURL *url = [NSURL fileURLWithPath:path];
    
    self.player = [AVPlayer playerWithURL:url];
    [self.player play];
    
    //再生が最後に到達したら通知を発生させ、通知を受け取ったらもう一度再生されるようにする
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(playerItemDidReachEnd:)
                                                 name:AVPlayerItemDidPlayToEndTimeNotification
                                               object:[self.player currentItem]];
    
}

- (void)playerItemDidReachEnd:(NSNotification *)notification {

    [self.player seekToTime:kCMTimeZero];
    [self.player play];
}

@end

今回は動画が繰り返し再生されるように、ローカル通知を使って「巻き戻し＆再生」作業を行っています。

このコードを利用するには、以下のような流れになります。

Objective-Cファイルを1つ新規追加して、上記コードをコピペする。
StoryBoard上で、AVPlayerViewControllerを追加してSegueでViewの呼出設定をして、クラスファイルにAVPlayerViewController1を指定する。

f:id:kzthrk:20160403065657p:plain:w384

どうにかしてDocumentsフォルダ内に動画をおいて、実行。

さいごに

その他にも様々なライブラリが世に出ていると思います。そのあたりは、また出会ったときに扱いたいと思います。

それから、再生する動画ファイルの場所は、そのアプリで撮影した場合、アプリ内でダウンロードした場合、そういったケースでは今回のコードのようにそのアプリ内にあるかと思います。これらは何れにしても、今回掲載のケースのバリエーションの一つだと思います。

そしてその他の場所としては、

カメラロール
iCloud

といったケースが考えられます。それらについては、全く別のコンテキストでの利用が想定されますので、今回とは別の投稿で取り扱いたいと思います。

2016-03-21

Atom for Mac でMarkdown環境を整えてみる

雑談

はじめに

連続して、コピペとは遠い話になってしまいます。

この手の記事を書こうとすると、いろいろと仕様を再確認したり、掲載するために書いたコードを再検証することが増えてきます。それはそれで、他の人にSkill Transferしようすると行為が、自分自身の知識を定着させたり、より確かなものにする効果があり、それらは一般的にもよく言われていることで、もちろんWellcomeです。

ただ、その内容をブログとして吐き出そうすると、今度はそれ自体でストレスを感じてしまうわけで。

ストレス無く更新しようと模索した結果、、、

よーするに、脱線した結果、、、

SubjectのAtomに行き着いたわけです。

で、インストールからはじめて、その後の設定や拡張のためのパッケージ導入やらをスクリーンショットを取りながら、ここに載せようとしていたわけですが。

なーんと、同じことをしていて、その上はてなブログで書いていて、今まさに注目されちゃたりなんかする記事を発見したりなんかしてー

テキストエディタ[Atom]のダウンロードからお勧め設定までを徹底解説！

こちらの記事の方が、マジお勧めなので、ご一読を。そしてそちらを見た方は、ここには戻ってくる必要もありません。

うーむ。完全に書こうとしたことの価値が無い状態で...
でも精神安定上もよろしくないので、このまま続行します。