JavaScriptで配列を操作する(追加、削除)

配列の要素の追加

//配列に要素を追加する
var incrementArray = [ "AAA", "BBB", "CCC" ];
incrementArray.push("DDD");

配列の要素の削除

//配列の指定要素を削除する
var decrementArray = [ "AAA", "BBB", "CCC" ];
decrementArray.splice(1,1); //引数は、削除の開始位置と削除個数

以上。

ドットインストールでVue.jsの基礎をやり直した(#14-#17(いいね集計ボタン作成の最初から最後まで))

概要

ドットインストールでVue.jsの基礎をやり直した#01-#08#09-#13(TODOアプリ作成の最後まで)の続き。 なお、この#17で、2018/5/6現存するドットインストールのVue.js入門コースは完了。なのでこれ関連の記事も最後です。

#14から#17までの内容

前回、前々回にまとめた#01から#13までは、TODOアプリを実装していく動画だったが、この記事にまとめている#14から最後の#17までは、いいね集計ボタンの作成を通して、VueComponentの学習を行う内容である。 なお、いいね集計ボタンと言っても、単純に押した数がカウントされるボタンのことである。

主な学習内容は下記。

所感

TODOアプリの作成と比較すると、Vueの学習をさせたい感が強かったのと、ボタンの装飾も特に無く、見た目が気にされていなかったので「17回までで終わらせようと巻いてるのかな・・・」と思った。 でももちろんVueの挙動については理解できました。

#01から#17までを通しての所感

  • 月額980円の価値は充分にあると感じました。というか、17回分はゆっくりやって3日で終わったので、日割りで考えると200円とかそんなもんでしょ、逆に採算とれるのか心配になる。。
  • Vueの基礎の基礎のところを固める、雰囲気を掴むことは充分にできます。ただし、実際に業務で用いるのって.vueで分割したコンポーネントだったり、関連するツールがはまりポイントだったりするので、そういうコースも並んであると良いと思いました。
  • 一回の動画が短時間ってことを売りにしているからなのか、わかりませんが、概念とか仕組み的なのの説明があっさりしていたので、Vueの動画に関しては学習後に公式ドキュメントを読んで理解を深めた方がよいと思いました。
  • 動画を見ながらの学習方法について、少し試行錯誤したのですが、自分は、動画を*1.6速度で集中して見て「学習メモ」欄にメモを取る(プレミアム会員限定)→学習メモを元に実際に書いてみる→詰まるところがあったら動画に戻る、というふうにやってました。動画を見ながらいちいち停止しながら実装するよりも効率良いと思う。

その他

  • methodsをmethodって書いてるのに気づかずコンソールにもちゃんとエラー内容が出なくてはまった。

以上。

ドットインストールでVue.jsの基礎をやり直した(#09-#13(TODOアプリ作成の最後まで))

概要

ドットインストールでVue.jsの基礎をやり直した(#01-#08)の続き。 この#13まででTODOアプリの作成動画は終了で、#14からはVueComponentを使った実装の動画となる。

#09-#13の全体的な所感と内容

  • 前回の#08までよりも難易度が上がり、目に見える実装だけでなく「どんなサービスなら使いやすいか」という観点の実装内容と感じた。
  • Vueのライフサイクルにも触れているが、詳細な説明ではなくさらっと流されているため、この動画でどんなもんか雰囲気を掴んだ後にVueの公式基本的な使い方部分を読み込むのがベストだと思う。
  • ただしハマりポイントや、Vue以外の技術も使ってよいTODOアプリにしようとされている(気がする)ところが良いと思った。

使用されていた概念は、まとめると下記。

  • v-show
  • v-if、v-else
  • computed
  • メソッド共通化
  • LocalStorageへの登録
  • watch
  • deep watcher
  • LocalStrageからの取得
  • mounted

#09-#13の詳細

各回の詳細を書いたが、長くなったので「続きを読む」を押すと読めます。 詳細には、下記を私の主観で記載しました。

  • 実装内容
  • 新しく使用した概念
  • 良かったところ
  • 悪かったところ
続きを読む

ドットインストールでVue.jsの基礎をやり直した(#01-#08)

概要

業務でVue.jsを扱っているものの、基礎の基礎的なところをやり直ししたかったのでドットインストールを使用して学習した。

なお、2018/5/3時点で、動画は#01から#17の17回分存在するが、この記事は#01から#08を学習しての記録である。

ドットインストール

動画でのIT学習サービス。→ドットインストール

無料で閲覧できる動画と、有料(プレミアム会員)でのみ閲覧できる動画があり、今回閲覧したVue.js入門動画は全てプレミアム会員専用だったため、月額980円払って会員になった。

Vue.js入門動画(#01から#07について)と所感

TODOアプリを作っていく。動画ひとつあたりは2分程度で、だいたい動画ひとつにつき一つの機能を実装していく。

なお、開発環境についての説明がほぼ無いため、本当の初学者は「どこにプロジェクト作ればいいの?」とか思うと思う。(CDN読み込むくだりはあった) ちなみに私はCodeSandboxのデフォルトのVueプロジェクトを少しいじって似た感じにした。

JavaScriptの基本がわからない人は、先にそっちをやった方がよいし、見た目を整えるためにCSSを使うくだりもあるが特に初歩的な説明はないので、CSSわからない人も先にそっちをやった方がよい。

この7回分で使用されたディレクティブは下記。

  • v-for
  • v-on
  • v-model
  • v-bind

よく使用されるため省略可能なディレクティブのこととか、v-onを@で代用できることとか説明してくれるのがよかった。

TODOアプリに実装された機能は下記。

  • 初期データの一覧表示
  • データの追加
  • データの削除
  • TODOの状態(完了状態)の視覚的な表示

その他

  • Vue.js入門動画に限らないが、動画一本あたりの所要時間が少ないため、朝や細切れの時間にやりやすい。(プレミアム会員のみ速度変更可能のようだが、加えて私は*1.6倍速で見ていた。)
  • 他にも色々と基礎を固められそうな動画があるので使っていこうと思う。

「データを加工する技術」を読んだ

概要

技術書典4で購入した「データを加工する技術」を読んだのでその記録。

  • 読書の所要時間:約13分。※書籍内のサンプルは試していない。

本の概要

  • タイトル:データを加工する技術
  • 著者:もふもふ、みっちー(敬称略)
  • 印刷所:ねこのしっぽ
  • 購入価格:確か1000円

内容と感想

代表的なログの収集ツールであるfluentdとLogstashの使い方・違いと、使い方について解説している。 実際にログ収集する時に参考にするには良いが、実践ベースで書かれているので(使い方の手順等)読み物としては不向き。 ただ、私はfluentdとLogstashの名前すら知らなかったので、知れてよかった。

技術書典4に行ってきました

概要

技術書の自主出版即売会である、技術書典4に行ってきたのでその記録。

  • 開催日:2018/4/22(日)11:00-17:00

感想

一般入場が11時からだったので11時過ぎ位に開場に着くようにしたら、整理券の列がかなり長くなっており、自分は1600番台だった。整理券番号によって入場規制が発生していたので、自分の番号になるまでプロントで待機。入場後、特に目当てのサークルの場所等把握していなかったのでぐるっと回り、気になった本と目当てにしていた本を片っ端から購入し約20冊。(ただしUI系のほしかった本は完売していた) 次も予定が合えば行く。

買ったもの

後日更新。

持ち帰り用無料配布トートバック

なお、無料配布の持ち帰り用トートバック(緑色)は、限定数だったので貰えることに期待していなかったが普通に貰えた。こういうイベントでありがちな萌えキャラが前面に描かれたやつじゃなかったのでそれにいれながら買い物をした。

インフラ勉強会のwebセキュリティ勉強会に参加した

概要

Web攻撃の脅威「XSS」、「SQLインジェクション」、「ディレクトリトラバーサル」を知ろう!に参加した記録。

  • 開催日:2018/4/27(金)22:00-23:00

内容と感想

一般的なwebの脆弱性をついた攻撃にはどんなものがあるか解説した勉強会。 登壇者が容易した自宅サーバに対して、参加者で実際にweb攻撃をしてみてくださいというような参加者参加型(??)で、一般のwebシステムにやっちゃいけないことをやれて面白かった。