Javascriptで配列操作に必要な知識をまとめました。「要素数取得」「要素の追加・削除」「並び替え」といった基礎知識から「map」「reduce」「some」などのメソッドの使い方まで解説します。
今回は、JavaScriptで数値や文字列などを昇順・降順で並び替えることができる「sort()」メソッドについて学習していきましょう! sort()とは? sort()は、JavaScriptで並び替えを実現するメソッドになります。文字列順や数字の大小などによる昇順・降順で対象の値を並び替えることができるようになるので、データの操作などでよく使われます。 また、配列に格納されたバラバラの値やオブジェクトのキー(プロパティ)を対象にして並び替えることも可能なので、活用範囲はとても広いと言えます。 ただし、sort()は元の配列データを変更してしまう破壊的メソッドでもある点には注意が必要です。本記事ではこのような注意点も含めて基本から応用まで解説していきますので、ぜひ参考にしてみてください! 文字列の「sort()」について この章では、文字列が格納された配列のソート方法について見ていきまし
これはcloudpack あら便利カレンダー 2018 の記事です。 Vue.jsでDOMが更新されない問題はわりとよくあたります。 ちょうど昨日社内で相談されたので、せっかくなので記事にまとめてみました。 ビューが更新されないあるある 配列、オブジェクトの更新が検出できない 配列のケース インデックスでアイテムを直接設定するとき 例: vm.items[indexOfItem] = newValue 配列の長さを変更するとき 例: vm.items.length = newLength 解決方法 1. $setを使う 2. Vueが監視出来る配列のメソッドを使う push(), pop(), shift(), unshift(), splice(), sort(), reverse() 参考リンク => https://jp.vuejs.org/v2/guide/reactivity.h
これは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
vue.jsで一行テキストボックスのイベント処理について調べたのでまとめ。 エンターキーを押したことを検知する場合、@keydown(v-on:keydown).enter.nativeと書く。 @keydown.enterだけだと検知できなかった。 methodsで定義した各メソッドの引数(text)に、入力した文字が入ってくる。 inputSearchWord() = 入力文字が変更されるたびに呼ばれる。 enterSearchWord() = エンターキーが押された時に呼ばれる。 <template> <div id="search-field"> <fieldset class="search-field-set"> <ul> <li> <el-input placeholder="Type something" prefix-icon="el-icon-search" @keyd
<template> <el-table :data="tableData" @row-click="handleClick"> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ name: '太郎', age: 25 }, { name: '二郎', age: 26, }] } }, methods: { handleClick(val) { console.log(`val = ${JSON.stringify(val)}`) } }
こんにちは、新入社員のNakataです。入社するまでは生物系の研究をしていましたが、この度Orizuru開発に携わることになりました。そんな私の初めての実務として、既存のアプリケーションをシングルページアプリケーション(SPA)に移行する作業を行いました。実装には、SPAを効率的に開発するためのフレームワークVue.jsを使いました(Vue.js公式サイト)。 今回はそもそもSPAとは、Vue.jsとはどんなものなのかを、私自身の理解のため、これからSPA開発や Vue.jsを学ぶ人たち向けに、簡単にまとめました。また、SPA移行で役に立った機能(vue-router)の紹介もしたいと思います。 SPAとは SPA(Single Page Application)とは、名前の通り単一のページで構成されるアプリケーションになります。SPAではない webアプリケーションでは、ページ遷移を行う
アプリをストア申請するにあたり、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
Mac以外は知りません。 Getting Startedでやってることと起こること 割愛したり順番入れ替えたりしています。 package.jsonの作成
はじめに この記事は初心者でもwebpackを用いて簡単な環境を構築できるように書いた記事です。 中級者以上でしたらおそらく物足りない記事になるかもしれませんが、初心者には十分な環境を整えることができると思います。 今回用いた環境 macOS Sierra 10.12.2 Node.js v6.9.1 入ってるかわからない人は $ node -vと打ってみてください。 v6.9.1などバージョンが表示されたらおっけーです。 node.jsをまだインストールしていない人は下記のリンク等などを見てインストールしてみてください。 5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】 準備 それでは、環境を作っていく流れをまずはざっくりと説明していきます。 ターミナルを開いて準備しましょう。 1. まずはディレクトリ作成。 普通に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く