Javascriptで配列操作に必要な知識をまとめました。「要素数取得」「要素の追加・削除」「並び替え」といった基礎知識から「map」「reduce」「some」などのメソッドの使い方まで解説します。
JavaScriptでDateオブジェクトをコピーしようとして少し詰まることがあったのでメモ。 うまくいかなかった場合 開始日をDateオブジェクトで設定して、その開始日を元に終了日をDateオブジェクトで作成するサンプルで試してみます。 まずはうまくいかなかった方法です。 // 開始日の設定 var start = new Date(2018, (6- 1), 14); console.log('start', start); // start Thu Jun 14 2018 00:00:00 GMT+0900 // 開始から終了までの期間 var period = 31; // 終了日の設定 var end = start; end.setDate(end.getDate() + period); console.log('start', start); // start Sun Ju
今回は、JavaScriptで数値や文字列などを昇順・降順で並び替えることができる「sort()」メソッドについて学習していきましょう! sort()とは? sort()は、JavaScriptで並び替えを実現するメソッドになります。文字列順や数字の大小などによる昇順・降順で対象の値を並び替えることができるようになるので、データの操作などでよく使われます。 また、配列に格納されたバラバラの値やオブジェクトのキー(プロパティ)を対象にして並び替えることも可能なので、活用範囲はとても広いと言えます。 ただし、sort()は元の配列データを変更してしまう破壊的メソッドでもある点には注意が必要です。本記事ではこのような注意点も含めて基本から応用まで解説していきますので、ぜひ参考にしてみてください! 文字列の「sort()」について この章では、文字列が格納された配列のソート方法について見ていきまし
これはcloudpack あら便利カレンダー 2018 の記事です。 Vue.jsでDOMが更新されない問題はわりとよくあたります。 ちょうど昨日社内で相談されたので、せっかくなので記事にまとめてみました。 ビューが更新されないあるある 配列、オブジェクトの更新が検出できない 配列のケース インデックスでアイテムを直接設定するとき 例: vm.items[indexOfItem] = newValue 配列の長さを変更するとき 例: vm.items.length = newLength 解決方法 $setを使う Vueが監視出来る配列のメソッドを使う push(), pop(), shift(), unshift(), splice(), sort(), reverse() 参考リンク => https://jp.vuejs.org/v2/guide/reactivity.html#配列
これはcloudpack あら便利カレンダー 2018 の記事です。 Vue.jsでDOMが更新されない問題はわりとよくあたります。 ちょうど昨日社内で相談されたので、せっかくなので記事にまとめてみました。 ビューが更新されないあるある 配列、オブジェクトの更新が検出できない 配列のケース 1.インデックスでアイテムを直接設定するとき 例: vm.items[indexOfItem] = newValue 2.配列の長さを変更するとき 例: vm.items.length = newLength 解決方法 1. $setを使う 2. Vueが監視出来る配列のメソッドを使う push(), pop(), shift(), unshift(), splice(), sort(), reverse() 参考リンク => https://jp.vuejs.org/v2/guide/reactivi
最近はNode.jsで簡単なスクリプトを実行することが多く、その時に改めてasync/awaitわかりやすいなーと感じることがあったのでそれについてつらつら記述していきます。 手っ取り早く結果を知りたい人は以下の部分だけ読むと良いと思います。 何をしたいか 何が問題なのか async/awaitがあるとあっさり解決 確認のために実行できる例 async/awaitがない場合 指摘やアドバイスありましたら是非コメントをお願いします。必要であれば内容も修正していきます。 何をしたいか 私がやっていた作業は、「データベースのデータを全て抜き出す」というものでした。 普通に全てのレコードを取得しようとすると、DBサーバーが"too large"とエラーを返すので、 少しずつ取得してスクリプト側でマージしていく必要がありました。 「取得結果が0件になるまで繰り返しレコードを取得」という処理をしたいわ
var a, b; a = 0; b = a; b = 5; console.log(b); // 5 console.log(a); // 0 (aは変わらない) var c, d; c = [0,1,2]; d = c; d[0] = 5; console.log(d) // [5,1,2] console.log(c) // [5,1,2] (cも変わる) 値渡しと参照渡しについて理解されている方ならなんの問題もないですが、これは上のコードを見て ***??????***となった方向けの記事です。 結論から言うと、Javascriptにおいて プリミティブ型は値渡し、オブジェクト型は参照渡しとなります。 ざっくり言うと、値渡しはその値そのものの情報を別の変数に渡していて、参照渡しはメモリ上のどこを参照しているかの情報を別の変数に渡しているか、という違いですね。 ちなみに、Javasc
結論を言えば、JavaScriptにはポインターがなく、参照の方式は私たちが知っているほかの主要なプログラミング言語とは異なります。JavaScriptでは、ある変数が別の変数を参照すること(参照渡し)には対応していません。そしてオブジェクトや配列のような複合型のものだけが「参照渡し」を使います。 この記事では以下の用語を使用します。 スカラー(基本型):1つの値もしくはデータ型(整数、論理値、文字列など) 複合型:複数の値から成るもの(配列、オブジェクトなど) プリミティブ:ほかの場所の値を参照しているだけのもの(参照型)と区別するため、実際に値を保有しているものをプリミティブとする JavaScriptのスカラーはプリミティブですが、Rubyなどほかの言語では参照型のスカラーになっています。JavaScriptではプリミティブなスカラーはイミュータブル(immutable)ですが、複合
OrizuruはIoT/AIの力でDXを実現します製造ラインの稼働率を向上させたい品質不良の原因を特定し、不良品を減らしたい属人性を低減し、ベテラン依存を避けたい OrizuruはIoT技術により製造現場の様々な状態をデータ化・可視化し、 AIを活用して課題解決し、生産性の向上・業務効率化を実現します。 ベテランの業務を自動化し属人性低減・省人化することで横展開可能になります。 既存の設備・業務フローは企業により多種多様ですが、 CCTでは導入前の業務コンサルティングから運用時の体制支援まで対応しております。 Orizuruには2つの特徴的なモジュールOrizuru 3DとOrizuru MESがあり、 製造業界・建設業界を対象とした多様な機能をもっています。
アプリをストア申請するにあたり、Webサイトがあった方がよさそうだったのでVue.jsで作りました。制作期間は2-3日くらい。 jyuko's playground Vue.js JSフレームワークを選定するにあたり、軽くて扱いやすいライブラリを用いたかったので、Vue.jsにしました。 jp.vuejs.org Angular.jsとReact.jsは今までに触ったことがあるのですが、いずれも学習コストは若干高めに感じましたし、Reactに至ってはJSXとなかなか仲良くなれない。 せっかくならば・・・と使ったことのないVue.jsを試してみたら、かなり良かったです。 Vue.jsの特徴としては、 軽い 扱いやすい 拡張性がある 軽量なライブラリの方が、サイト表示のレスポンスを向上させやすく、AWSなどのクラウドサービスで運用する際に通信量=コストを抑えられます。 Vue.jsのインストー
先日Vue.jsで制作&公開したWebサイトは、AWSでお安く運営しています。 Vue.jsでWebサイトをサクッと作る - じゅころぐAR Vue.jsで作ったサイトをPWAに対応させてみる - じゅころぐAR 構成はよくある"静的WebサイトのS3ホスティングパターン"ですが、必要な設定を全部まとめておきたかったので書きます。 構築手順 独自ドメインを取得する SSL/TLS証明書を取得する S3バケットを作成する CloudFrontを設定する Route53にサブドメインを登録する S3アップ時に自動でCache Invaridationを行う 請求アラートを設定する メリット 機能面 コスト面 まとめ 構築手順 2018年4月時点の画面および手順です。 ※Managed ConsoleのUIは頻繁に変わるので注意 独自ドメインを取得する "Route53"を選択し、Domains
はじめに この記事は初心者でもwebpackを用いて簡単な環境を構築できるように書いた記事です。 中級者以上でしたらおそらく物足りない記事になるかもしれませんが、初心者には十分な環境を整えることができると思います。 今回用いた環境 macOS Sierra 10.12.2 Node.js v6.9.1 入ってるかわからない人は $ node -vと打ってみてください。 v6.9.1などバージョンが表示されたらおっけーです。 node.jsをまだインストールしていない人は下記のリンク等などを見てインストールしてみてください。 5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】 準備 それでは、環境を作っていく流れをまずはざっくりと説明していきます。 ターミナルを開いて準備しましょう。 1. まずはディレクトリ作成。 普通に
DWRのConverterについて、公式サイトを和訳します。 The Converters ConverterはDWRの必須な部分で、クライアントーサーバ間のmarshaling dataを返します。 以下のConverterを定義しないといけません。 DWRで使いたいJavaメソッドの戻り値の型。ブラウザで使われるJavaScriptオブジェクトを返すために、DWRはJavaの戻り値型をJavaScriptオブジェクトに変換する方法を、知る必要があります。 DWRで使いたいJavaメソッドの入力引数の型。Javaメソッドを適切に実行するために、DWRはJavaScriptオブジェクトをJavaオブジェクトに適切に変換する方法を、知る必要があります。 〜 途中 〜 Basic Converters
前々からDWRというプロジェクトが気になっていたのですが、 時間を取って調べる機会ができたので、環境を作成してみます。 DWRとは 簡単にAjaxアプリケーションを作成するためのフレームワークです。 サーバー側はJavaで記載しますが、普通のJavaクラスを作成すればよく Servletを記載する必要はありません。 イメージ的にはこんな感じかと。 必要なブツ Javaの実行環境が必須です。 アプリケーションサーバーも必要ですが、今回はTomcatを選択しました。 http://tomcat.apache.org/ 6.0.28を使用することにします。 DWR http://directwebremoting.org/dwr/index.html Version 2.0.6のjarファイルをダウンロードしました。 DWRは、Commons Loggingに依存しているようで、jarが不足して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く