※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

ruby に慣れていて python に慣れていないんだけど、python を書く機会が増えてきたので備忘録のような感じで。 python は完全に初心者。 python 3。python 2.x のことは気にしないことにした。 手元の処理系 ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16] Python 3.5.2 :: Anaconda 4.2.0 (x86_64) で確認している 長さ ary_len = [1,2,3].size # [1,2,3].length でもいい hash_len = {a:1}.size # {a:1}.length でもいい string_len = "hoge".size # "hoge".length でもいい range_len = (1..9).size # Range#len

何がしたいのか 最近はDockerを導入したサービスがガンガン出てきている一方、現場でのDocker導入に足踏みをしているところもあると思います。 今回はDockerを導入するために、「コンテナを利用するとこんなに便利!!」という主張を展開することで、現場でのDocker導入の推進をしたいと思います！ まあ、スライドモードを使いたかったんですよ TL;DR コンテナと仮想環境は別物だよ コンテナでの運用するといいことがたくさんあるよ どんな環境でも同じように動かせる デプロイ・ロールバックが簡単 システムが簡単に把握できる あいのり環境もいける コンテナとは コンテナ ≒ VM ?? Docker導入しようって言うとこんな話を聞くことがある コンテナってVMみたいなもんでしょ？ VMの上にまたVM作るの? AMI使ってるから、わざわざコンテナにする必要がない コンテナ != VM VMとコ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ###おことわり 主観であり何らかのデータにもとづいてはいない この記事に書いてあることは信じずに自分で試そう #EC2 t2 ファミリーは他ファミリーと比べて不安定 どのインスタンスもいつかは死ぬという点では共通なのですがそのなかでもt2は故障したり不具合が発生したりする確率が非常に高い気がする なので死んだり、死にかけ状態で動き続けたりしてほしくないインスタンスはあんまりリソースを使わなくても t2.micro とかじゃなくて m3.medium にしとくとすこし可用性があがる 追記: CPUクレジット理解していないだけではとか書か

MySQLのint型は符号付きで　-2147483647〜2147483647 の範囲をサポートし、レコードを記録する際にこの範囲を超えて記録しようとするともちろんエラーとなります。 これは、長い運用の末にデータが膨大になり、ついにintのサポート範囲が枯渇寸前となった話です。 方針 DBはAWS Auroraを使用しており、アプリケーションはRailsで構築されています。RailsのMigrationはデフォルトでidカラムをAUTO INCREMENTのint型で作成します1。サービスの特徴としては他のサービスと比較すると高トラフィックに晒されるもので、DBに大量のログを記録する必要がありテーブルによっては1ヶ月で1億レコード以上記録されるものもあります。対処方法を検討し始めた時にはidは既に18億を超えており、やるべきことは対象のテーブルのidカラム、及びそのidを関連として保持して

アメリカ人です。 Hello 👋 この記事の目的 多くの日本人は自分の英語力には自信がないではないでしょうか。残念ながら「英語がわからん」、「英語が全然できない」という声をしょっちゅう聞いています。でも、今まで英語ができて意味がちゃんと伝わる何人かの日本人に会ったがあります。完璧な英語ではないけど(外国人も英語でミスる時もある...)、がんばって話そうとするので充分仕事ができる人たち。そういうがんばる姿勢はオープンソースのプログラムや英語圏のプログラムに手を出すためには一番大事なことだと思います（外国人側もすごく助かります）。日本の文化では「私はできる！」と自慢することは少ない中、この記事を通して、流暢に話せなくても自分のプログラミングの命名の仕方にはちょっとだけでも自信を持たせたいなと思います。完璧じゃなくていいです。Let's go! 合わせて読んでいただきたい 【日本人エンジニア必

tl;dr コンピュータ系の情報収集用のSlack公開グループ（モヒカンSlack）を作ってみたよ。 皆さんで協力して育てていく共同RSSリーダーみたいなものだよ。 このSlackグループの情報を追っていればオッケーなので、情報取集が格段に楽になったよ。 誰でも無料で参加オッケーよ。下のどっちかからメールアドレスを入力して参加できるよ。 Invite people to mohikan Slackin Google Forms 参加者数 1,694名 (2016/10/7 時点) 4,077名 (2017/1/25 時点) 7,000名 (2017/8/25 時点) 11,747名 (2018/12/1 時点) チャネルのリストは「Gist」にあるよ。148チャネル(2017/1/25時点） 分野ごとにチャネルが別れていて、追いたい分野のものに参加すると良いよ プログラミング言語系(毎朝G

Djangoのカスタムコマンドを作成してコマンドラインから処理を実行する はじめに Webアプリケーションの開発を行っていると、コマンドラインから特定の処理（集計処理、API呼び出し、メール配信など）を実行したい場合があります。この記事ではDjangoアプリケーションをコマンドラインから実行する処理の書き方を紹介します。 Djangoのコマンドラインツール Djangoにはデフォルトでコマンドラインツールが付属しており、例えば次のような処理をコマンドラインから実行することができます。 python manage.py startapp sample => アプリケーションの作成 python manage.py migrate => DBマイグレーションの実行 python manage.py shell => インタラクティブShellの起動 python manage.py runse

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに すごーい！きみはでばっぐじょーほーがよめるフレンズなんだね！ （雑な挨拶） 実行時に解釈するスクリプト言語ではなく、ソースコードをコンパイルしてマシン語バイナリを作るコンパイル言語では、プログラムを実行する時に出たバグを解析するのに、ソースコードとの突き合わせ作業が必要になります。とはいえIDEやエディタの拡張機能を使っていれば、ユーザはほとんど何も気にすることなく、プログラムのソースコード上のある行番号で実行を止めたり、その時の変数の値を調べたりすることが出来るでしょう。 この記事では、そうした技術の裏側にあるデバッグ情報

Git のコミットグラフを簡単に作成できる Gitgraph.js を使っていて、「もっと楽に色とか調整できたらいいのになぁ」と思ったので作ってみた。 こちら を開けばすぐに使えます。 データはローカルストレージに保存されます（キー：gitgraph.storage）。 一応 Chrome, Firefox, Edge では動いているみたいです（IE は動かないです）。 ソースや細かい使い方はこちら（日本語は後半）

はじめに 先週フロントエンドエンジニア向けの勉強会に行った際、最近フロントエンドエンジニア（コーダー寄り）になったという方に、 「なんでjQuery以外のライブラリやら、フレームワークやらを覚えないといけないんですかね。業務ならjQueryだけで十分なのに」 と訊かれ、その場の思い付きでつらつらと説明しましたが、改めてその理由を考えてみました。 状況整理 確かに、今からフロントエンドの仕事をしようとしている人や、新しい情報をキャッチアップしていなかった人にとって、今のフロントエンド界隈の新旧入り混じった状況はカオスに映るはずです。 現場ではjQueryが重宝され、それで十分業務は回っているのに、ネットを覗いてみると、やれSPAだ、リアクティブプログラミングだと騒いでおり、Angular、React、Vue.js、PostCSS、Sass、Babel、webpackなどの横文字が乱立していて

手順 Identity & Access Management でロール作成 ELB のログ出力設定 Amazon Elasticsearch Service 作成 AWS Lambda 設定 Amazon Elasticsearch で確認 Kibana 表示 参考 URL http://qiita.com/toshihirock/items/e530f3cb6dcf545601c9 http://dev.classmethod.jp/cloud/aws/elb-accesslog-to-elasticsearch/ http://kenzo0107.hatenablog.com/entry/2015/10/08/113110 Identity & Access Management でロール作成 ロール名の設定 適宜ロール名を入力。 ロールタイプの選択 AWS Lambda を選択。

社内に新人が増えてきたので、弊社のWeb開発でのGitのゆるーい利用方針をまとめます。 本当はネガティブなことばかり書かずに、「覚えて欲しいコマンド、使ってほしくないコマンド」というタイトルにしたかったのですが、予想以上に長くなりそうなので分けます。 (追記：第二弾できました) →　[社内新人向け]Gitで絶対にオススメなプラグインや設定3つ 社内環境 Web系開発がほぼ100％ ブランチワークはGitflowをベースにしたプルリク駆動開発 少人数チームなので、エンジニアは全員LinuxのCUI操作をできて欲しい（vagrantや開発サーバ上の操作など） GitのGUIクライアントは、SourceTreeとGithub公式を試しましたが、初学者が使うと却って危ない挙動をしてしまうケースがあったので、全員CUI操作をしてもらうことにしました CIツールはまだ導入できず。各サーバーへのデプロイ

本記事は下記を参考に漫画、「HUNTER×HUNTER」に置き換えながら説明する内容となっております。誤字脱字、間違い等ありましたらコメントを頂けますと幸いでございます。 JavaScriptの「this」は「4種類」？？ javascriptの「this」は「念能力者」？？ この記事ではベースとなる４種類の「this」を念能力者として紹介します。 念能力者を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン（キャラの自己紹介） ２：関数呼び出しパターン（パクノダで考えよう） ３：コンストラクタ呼び出しパターン（具現化系能力者で考えよう） ４：apply,call呼び出しパターン（クロロ=ルシルフルで考えよう） メソッド呼び出しパターン（キャラの自己紹介） メソッド呼び出しパターンはキャラの自己紹介 var ゴン=フリークス = { 系統: '強

ここで書いてること タイトルの構成でWebアプリ作った際に思ったこと 作り方ではないのでコードは一切書いてない 作り方的なのも書きたいけど多分無理 きっかけ 2016年は結構ダラダラしてた 仕事以外ではほとんど何も書いてない 夏以降は筋トレのことばっか考えてた おかげで筋肉はついたよ そろそろ何か始めようかと思った 何を作ったか 何をはさほど重要ではなかった 今回重視したのは何を触るか Redux(Flux) React Webpack Firebase postcss 結局作ったのはメモ帳でした Redux ReduxというかFluxでちゃんと作ってみたかった Reduxのチュートリアルはやった 公式ドキュメントは読んだ Fluxを調べる内に@azu_reさんの10分で実装するFluxに辿り着いた これで良いじゃない Fluxの実装面をちゃんと理解して書ける 別にReduxを使わなくても

たまたまTwitterを見てたら以下のようなツイートを見かけました。 つまり、 isNumber っていう関数を作るなら一旦Numberでキャストした値と同一かどうかを比較すれば良いと。おそらく NaN を省いた number 型を true にしたいのかなという感じがする (NaN === NaN は必ず false)。 ただこれには問題があるらしく、 V8 のOptimizerリーダーである bmeurer から下記のようなレスが付いてました。 「 Number() では意図しない副作用があるかもしれない」という意味のレス。最初意味がわからなくて、「おや？」と思ったんですけど、その後で補足が。 「ToPrimitive関数が呼ばれてしまい、意図しないJSの動きをするかも。」とのこと。 つまり、

Pythonを使ってこの方さまざまな点につまずいたが、ここではそんなトラップを回避して快適なPython Lifeを送っていただくべく、書き始める前に知っておけばよかったというTipsをまとめておく。 Python2系と3系について Pythonには2系と3系があり、3系では後方互換性に影響のある変更が入れられている。つまり、Python3のコードはPython2では動かないことがある(逆もしかり)。 Python3ではPython2における様々な点が改善されており、今から使うなら最新版のPython3で行うのが基本だ(下記でも、Python3で改善されるものは明記するようにした)。何より、Python2は2020年1月1日をもってサポートが終了した。よって今からPython2を使う理由はない。未だにPython2を使う者は、小学生にもディスられる。 しかし、世の中にはまだPython3に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

タイトルは釣り、かつ、自分のための備忘録です。 マイクロサービスアーキテクチャでサービスを構築すると、APIサーバをサービスごとに立てるわけですが、 ブラウザ上のJSエンジンからAPIサーバを叩く時に避けて通れないのが、Same-Origin Policy（同一生成元ポリシー）によるCORS (Cross-Origin Resource Sharing)制限です。 これを回避するには、APIサーバ側でAccess-Control-*ヘッダを適切に返す必要がありますが、どう設定するべきかの情報が意外と少ないので（自分的）これが決定版！　という設定を考えてみました。 結論 nginxの場合の設定例です。 server { listen 80; server_name site.localhost; charset utf-8; root /var/www/app/public; locatio