タグ

ブックマーク / kuroeveryday.blogspot.com (8)

  • 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

    rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜
  • 手を動かして学ぶ 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の違いは以下のとおり。 インメモ

    手を動かして学ぶ Redis 入門
  • Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する

    国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応(多言語化対応)の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。 しかし、ローカリゼーションチーム(非エンジニア)にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。 そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。 また、当

    Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する
  • 自作フレームワークをつくって学ぶ 仮想DOM実践入門

    昨今の代表的なJavaScriptフレームワーク(ReactVue.jsなど)には「仮想DOM(Virtual DOM)」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する! そして、ReactVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは? D

    自作フレームワークをつくって学ぶ 仮想DOM実践入門
  • JavaScriptとTypeScriptを共存させ、段階的に移行する方法

    某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい! ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です! → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result

    JavaScriptとTypeScriptを共存させ、段階的に移行する方法
  • [図解]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系で親子コンポーネント間でデータの受け渡しをする方法
  • initial-setup-script-for-centos.html

    CentOSでサーバを立てたときに、まず最初に必ずやっておきたい初期設定がある。 その作業の一覧が以下のとおり。 パッケージを最新化する 新規ユーザを作成する suコマンドを制限する suコマンドを実行可能なユーザ・グループを限定する 特定のグループ以外suコマンドでrootに昇格できないように制限する パスワード入力なしでsudoコマンドを利用できるようにする ssh接続を制限する rootユーザのsshログインを禁止する sshで公開鍵認証のみ接続を許可する sshでパスワード認証を禁止する 公開鍵をサーバに登録する sshdサービスを再起動する iptablesまたはfirewalldの設定 ←今回はやらない Webアプリケーションをつくりたくて、WebサーバとAPサーバを用意しようと思ったが、毎回この初期設定をするのが超絶メンドそう...。 ということで、自動化するために初期設定を

    initial-setup-script-for-centos.html
  • TypeScript+Jasmineでテスト駆動開発(ビヘイビア駆動開発)をする

    膨大なユニットテストを手動でやりたくないし、リグレッションテスト(回帰テスト)も面倒で、テストの自動化をしたい。 ということで、JavaScriptのテストフレームワーク「Jasmine」をつかったテスト駆動開発(ビヘイビア駆動開発)をやってみた。 開発環境と各種バージョンは、以下の通り。 Visual Studio Community 2013 TypeScript Jasmine 2.2(現時点での最新版) 追記:2015/06/07 bowerやtsdを使うともっと簡単にJasmineとその型定義ファイルをダウンロードすることができる。 詳しくは、以下のエントリで。 Jasmine の導入 Visual StudioのNuGetからもインストールできるけど、ディレクトリが変に作られてしまうので、GitHubからダウンロードする。 ※ 私の環境では、scriptフォルダ直下に"jasm

    TypeScript+Jasmineでテスト駆動開発(ビヘイビア駆動開発)をする
  • 1