rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜
この記事は本番環境でやらかしちゃった人 Advent Calendar 2019 17日目の記事です。 はじめまして、ダーシノ(@bc_rikko)です。 突然ですが、懺悔します。 私は転職して10ヶ月で2回も本番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。 1回目は2015年11月27日、入社27日目のこと。 gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて本番環境が壊れた。原因はpush.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。 2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。 またしても本番環境をぶっ飛ばした。しかも、前回より盛大に……。 タイトルにもあるようにrsyncコマンドが原因だ。 当記事では、この「rsy
手を動かして学ぶ Redis 入門
会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。 Redis の特徴 Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。 In-Memory Database RedisはIn-Memory Databaseなので、On-Disk Databaseと比べ非常に高速に動作する。ちなみにIn-Memory DatabaseとOn-Disk Databaseの違いは以下のとおり。 インメモ
[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン
Vue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。 親子コンポーネント間についてはProps down/Events upでデータのやりとりができる。 子子コンポーネント間（いわゆる兄弟間）はどうするのが良いのかを3つのパターンを紹介する。 $on/$emitでのイベントによるやり取り 親コンポーネントをコントローラにして子コンポーネント間を取り持つ Storeパターンの適用 親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。 $on/$emitでのイベントによるやり取り 一番簡単なのが、この$on/$emitでのイベントによるやり取り。 共有のViewModel（vueインスタンス）を用意し、そこにイベントを登録/発火させることで親子に関係なくデータ
![[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/448f477e6fb92d451d6a0665b7ad21a4abe526ca/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhFfb5jSuCxUgirxVTp8mLr3n_o8OPMZ80IRuP83CgT3Hk33XnoBZY0Ib-YZYiJ4nOHsO5KeMGMWQFzugGvGnS96kfss5u7x66-qfw9K9zTrM8DvWnaQFz-jUAh5WwPiSIQE6XYmGZgRUt1%2Fw1200-h630-p-k-no-nu%2Fstate-management.png)
自作フレームワークをつくって学ぶ 仮想DOM実践入門
昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！ そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは？ D
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
ゲーム開発初心者が教えるブラウザゲームのつくり方（前編）
この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。 発表スライド（SpeakerDeck） 前編: この記事 後編: ゲーム開発初心者が教えるブラウザゲームのつくり方 ※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。 ※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります ゲーム開発初心者が教えるブラウザゲームのつくり方 まずは、自己紹介からさせていただきます。 2015年末にSIerからフロントエンドエンジニアにジョブチェンジして、さくらインターネットに入社しました。 いまは、さくらのクラウドのネタ機能開発や、自社サービスのエゴサを主な業務としています。ですので、みなさんがツイートされた
[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法
引用: Components#Composing Components - vue.js Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則としてPass Props/Emit Eventsで行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ただ、公式ドキュメントに載っている図を見るだけではよくわからなかったので、実際にサンプルを作ってみた。 親子コンポーネント間でデータの受け渡しをする方法 <div id="app"> <div class="parent"> <h2>Parent</h2> <!-- 子コンポーネントからのデータを表示 親.applyメソッドで更新される --> <p>{{ messageFromChild }}</p>
![[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e2407ba7d8fb2983c260617cf5c8d799d8516b7/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEjbjVTF6b1dMxmqfReQmbC4ZM_IP8UH8WTF3f0U-3TNqQCNBA5_gqqBWX1X2iD-Fb5cQbYJGwk2k0qRCaPAQTVKqMQFciyBwwVqwiYjwqyiNjtIDlPGABH-DjvHQDqI1RWq1p75YuMCX2XC%2Fw1200-h630-p-k-no-nu%2Fprops-events.png)
IT系ブラック企業で過労死しかけたので4年分のタイムカードと実態を暴露する
突然だが、みなさんは「会社に殺されかけた」ことはあるだろうか？ 某居酒屋チェーン店の女性社員、某コンビニエンスストアの店長、某広告代理店の新卒女性社員をはじめ、多くの尊い命が失われたことも記憶に新しいだろう。 そんな私も新氷河期を乗り越え新卒で入社した中堅SI会社で、長期間におよぶ過重労働を強いられ、文字どおりブラック企業に殺されかけた。 当記事では、ブラック企業の実態を知ってもらうため、入社2年目から退職までの4年分のタイムカードを公開しようと思う。当時どんな思いで働いていたのか、体調を崩したのはいつか、精神を病んだのはいつか、などタイムカードをもとに暴露する。今ブラック企業で働いている人や会社を辞めようか悩んでいる人の参考になり、1人でも多くの命が救われることを願っている。 ※ 文中に登場する社名やプロジェクト名、人名のイニシャルには、とくに意味はありません。 ※ 長文なので時間がない
【TypeScript】MVVMなVue.jsを使ってToDoアプリをつくってみた
今まで素のJavaScriptとAngularJSを使って、Todoアプリをつくった。 素のJavaScriptはとにかくコード量が多くなって面倒。 AngularJSは学習コストが高く、AngularJS2.0になると別モノになってしまう。 とにかく手軽にアプリが作れるフレームワークを、と探したところにMVVMフレームワークの「Vue.js」を見つけた。 ググるとなにかと「お手軽」というキーワードが目についたので、実際に使ってみた。 できあがったモノは、以下のサイトで触れる。 ToDoアプリ自体は、以下の2つのエントリとほとんど同じ。 準備 bower、tsd、NuGet、GitHubなどから以下のjsファイルと型定義ファイルをダウンロードする。 vue vue.d.ts View（HTML） <!-- index.html --> <!doctype html> <html lang=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
