さっさと帰りたい怠け者エンジニアは vim をマスターしましょう その2 - 編集 いざ編集ですよ。これまた狂った便利機能が豊富にあります。 第1回と今回の操作方法をマスターするだけで、他人のエディットが超鈍足に見えるようになるでしょう。 自分の頭の中ではとっくに終わっている編集がちっとも終わらない様にびっくりしますよ。 さ、今回も長いですが、張り切っていきましょう。かのアニマル浜口もこう言っています。 長州ー！気合だ気合だー！！(名言) Undo、Redo 編集をする上でまずこれがわからないと困るので最初にサラッと書いておきます。 u Undo ctrl + r Redo ビジュアルモード vim にはビジュアルモードと言う、範囲選択機能があります。むちゃくちゃ使うので必ず覚えましょう。 v 範囲選択 V 行選択 ctrl + v 矩形選択 v は範囲選択を開始します。v を押した後上下

コードを書いている時間と言うのはエンジニア人生の中でかなりの部分を占めます。ですが、その時間というのは残念ながら大半が無駄なものです。一発でバキッと仕上がる事なんてないので、書いちゃ消し、試しちゃ消し、とキーを叩きまくります。このキーを叩いている時間と言うのは 100% 無駄な時間であり極力減らすべきものです。 エンジニアがやりたい事はキーを叩くことではなくてきっちり動くコードを書くことですからね。仕事をしているふりをしているような人間であればエンターキーを「ターーン！」と爽快に押して無駄な時間を楽しめるかもしれませんがそんなことやってりゃレイオフまっしぐらです。 このエディット時間を究極に短くするためには vim を使うしかありません。このエディタに敵うエディタは人類史上ありませんから。 正直な話 vim を20年以上前に初めて触った時「何だこの狂ったエディタは！」なんて思ったもんです。

プロフェッショナルIPv6 第2版（価格BOOST↑用）(¥ 1,000), プロフェッショナルIPv6（価格BOOST↑用）初版(¥ 1,000), プロフェッショナルIPv6（無料版）(¥ 0)

キーマップに Ctrl キーを使うものを割り当てたいんですが、既存の機能と衝突するのが怖いので調べてみました。 keybind normal visual insert <C-a> 数字を加算 なし さっき挿入した文字を挿入 <C-b> 1ページ上にスクロール 1ページ上にスクロール なし*1 <C-c> (検索)コマンドの中止 visual モードの終了 insert モードの終了 <C-d> 半ページ下にスクロール 半ページ下にスクロール 字下げの削除 <C-e> 1行下にスクロール 1行下にスクロール カーソルの下の行の同じ位置の文字を挿入 <C-f> 1ページ下にスクロール 1ページ下にスクロール インデントの再調整 <C-g> カーソル位置とファイルの状態表示 セレクトモードへ移行 1行下の、挿入開始位置と同じ列へ移動 <C-h> カーソルを左に移動 カーソルを左に移動 カーソル

2016/06/26 03:37 Blob, ArrayBuffer, Uint8Array, DataURI の変換 ◆ Blob からは FileReader をつかって非同期で変換処理 ◆ ArrayBuffer, DataURI, text, BinaryString ◆ ArrayBuffer や BinaryString, Uint 系配列 から Blob は Blob のコンストラクタでできる ◆ Uint 系配列の buffer プロパティが　ArrayBuffer ◆ ArrayBuffer を Uint 系のコンストラクタに入れるとその TypedArray に変換できる 色々あって変換するときにどうすればいいんだっけと思うのでまとめ 今回の対象はこれ BlobArrayBufferUintXXArrayFileBinaryStringDataURI UintXXArr

Ruby力をつけるための基礎固めとして、IOクラスについて整理します。※たのしいRubyから IOクラスとは プログラムの外部とデータのやりとりをするための機能として入力(Input)と出力(Output)を提供するのが、IOクラスです | たのしいRuby P339 標準入出力 3つのIOオブジェクト 標準入力 キーボードからの入力を受け付ける 組み込み定数STDINに割り当てられる getsなどで標準入力からデータを受け取る 標準出力 標準出力の書き込みは端末画面に向けられている 組み込み定数STDOUTに割り当てられる レシーバを指定しないputs、print、printfなどは標準出力への出力となる 標準エラー出力 標準エラー出力の書き込みは端末画面に向けられている 組み込み定数STDERRに割り当てられる 標準入力が端末からかどうか判定できる

今回はAWS勉強会入門編として、AWSとは何なのか？ AWSのサービス概要や特徴などを解説していきます。 この記事のゴールは基本サービスであるEC2を触れるようになるための事前知識をマスターすることです。 ※ 本記事は超入門編であり、サービスについて細かい説明は行なっておりません。各サービスには公式ドキュメントへのリンクを貼っているので、詳細を知りたい方はそちらをご参照ください。 AWSについて AWSとは何者なのでしょうか。最初にAWSのイメージを掴むために概要の説明を行います。 AWSとは何か？ AWSはAmazon Web Servicesの略です。まずは公式サイトの説明を見てみましょう。 アマゾン ウェブ サービス（AWS）は、米アマゾン・ドット・コムを支えてきた技術がベースとなるクラウドサービスです。柔軟で耐久性と拡張性に優れており、世界で数百万以上、日本でも10万以上のお客様が

半年前から低レイヤーに関する勉強をしている。 その中で読んだ技術書の感想、そしておすすめの読む順番をここにまとめてみる。 OS 30日でできる! OS自作入門 おすすめ度：80（満点100） 一言：自作OSの初心者向け 自作OSでまず初めに候補に挙がるのがこの本。2006年に出版された本ではあるが、OSの根幹を理解するにはとても良い。最初からアセンブリでメモリ操作をがっつり書くため、アセンブリの経験やレジスタ周りの知識が無いと挫折してしまうかも知れない。そこを乗り越えれば楽しくOSを実装していける。 コンピュータシステムの理論と実装 ―モダンなコンピュータの作り方 おすすめ度：95 一言：一からOSを作って学べる本格的な指南書 論理回路と呼ばれるレベルからメモリやCPUを作っていき、アセンブリ言語やアセンブラの開発、そして独自言語とそのコンパイラ、OSまで開発する。CPUなど各要点の考え方

はじめに 今度入社する会社では、JenkinsでなくCircleCIを使っているということなので、1から勉強した内容を初心者向けにまとめました。 また、最新バージョン2.1(2018/12時点)の新機能も本記事では触れています。 ※2019/8/8追記 Slack連携に関する記事も書きました。 SlackでCircleCIからカバレッジレポート通知を受け取る設定手順 ※2020/4/2追記 https://twitter.com/CircleCIJapan/status/1245253320551399424 CircleCIさんより、本記事を紹介いただきました！ なお、本記事は初回投稿時（2018/12）の情報がメインのため、ご留意いただきますようお願いします。 前提知識 CI/CDに関する入門レベルの知識 ymlファイルに関する入門レベルの知識 コンテナに関する入門レベルの知識 未学習

まえがき 以前の JavaScript はバイナリデータの扱いがとても下手でした。 バイナリデータをブラウザ上に一旦保存し再利用するには、サイズが1.3倍になることを覚悟した上でデータをDataURIに変換する必要がありましたし、XHRを使ってサーバからデータを取得する場合も、一度全てメモリに読み込んでから、ループでマスク処理を施し、Base64に変換し、DataURIに変換し… と、何重にも変換を繰り返す必要がありました。 2009年に出版された JavaScript Good Parts では、ビット演算子が「使うべきではない悪いパーツ」と評価されていた事を思い出す方もいるでしょう。 あれから5年、もはや時代が違います。 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ハードウェアと JIT コンパイラの進化に合わせ、大容量の

今更ですが、CORS (Cross-Origin Resource Sharing)を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく、データ

gitは、とにかくトピックブランチを作成して作業する。だいたい機能追加とかバグ修正とかの単位でブランチを作って作業します。（ちゃんとやってますよね？） なので、作業の途中で別の修正を優先してお願いっ！なんて言われたときは、別のブランチに切り替えて作業をする必要がでてくる。そんな時に変更を一時的に退避しておくことのできる機能、それがstashである。 では、早速使い方 まだcommitしていない状態の変更ファイル（addしてる or add していない)が存在する状況で、次のコマンドを実行すると変更ファイルを退避することができる。 ※saveは、省略することもできる。 これでファイルの退避完了！git statusとか見てみると変更状態であったファイルがなくなっている。この状態なら安心してブランチを切り替えることもできる。めでたしめでたし。 と、退避だけならこれで終わりだけど、次につかうとき

はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが

煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02

Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する

Ruby での文字列のキャメルケース変換についてのメモです。 ActiveSupport の camelize 最近(?)では、Rails の ActiveSupport の String#camelize でそれができるようです。 require 'active_support/core_ext/string/inflections' p "foo/bar_baz".camelize #=> "Foo::BarBaz" Rails ではきっと便利なんだと思うのですが、残念ながら仕様が私の都合にはあいませんでした。 モジュール Camelizable そこで、古いソースをもとに小さなモジュールを自作しました。 インスタンスメソッドは以下の２つです。 Camelizable#ucc Camelizable#lcc いずれも、区切り文字列は引数で指定できます。正規表現か文字列で指定します。 区

※ 色々修正しました Rails開発等でdocker-composeを使うと非常に遅い場合があります（特にDocker For Mac）。 docker-compose時に余計なファイルをマウントしてしまってるのが原因らしいので、.git, log, tmp, vendor などのホストからマウントする必要のないディレクトリを別のvolumeでマウントを上書きしてしまえば解消されます。 具体的な docker-compose.yml は以下のようになります（Railsの例） version: '3' services: app: build: context: . dockerfile: Dockerfile.dev environment: RAILS_POSTGRES_HOST: db ports: - "3000:3000" volumes: - .:/app:cached - bu

JavaScriptで作られたエディタCodeMirrorで、こんな風に補完をしたい。 準備 まず以下のjsとcssを読み込む codemirror/lib/codemirror.js codemirror/lib/codemirror.css codemirror/addon/hint/show-hint.js codemirror/addon/hint/show-hint.css 同期的に補完候補を表示する 以下coffeescript elはなんか適当なDOMTextAreaELement渡してください。 {Pos} = CodeMirror autocomplete = (cm) -> CodeMirror.showHint cm, -> cur = cm.getCursor() token = cm.getTokenAt(cur) start = token.start end

最近はクラウド上のサーバーを利用する事も多くなってきた。 サーバーの用意やネットワーク周りの設定はインフラ部門がやってくれるけど、アプリのデプロイ／設定は開発者がする事が多いので、開発メインでやってるエンジニアでも最低限SSHの知識は必要になる。 また、Vagrant等でローカル環境にVMを作成する事もあるので、ローカル環境内でSSHを使用するケースも増えてきた。 というわけでインフラエンジニアじゃなくてもSSHクライアントの知識は必須になってきているので、改めてSSHの再学習をしてみることにした。 SSHとは 暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコル。 SSHでは以下の点で従来のTelnetより安全な通信が行える。1 パスワードやデータを暗号化して通信する。 クライアントがサーバーに接続する時に、接続先が意図しないサーバーに誘導されていないか厳密に