読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Qiitaの"俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか"をやってみる

非同期周りにまだ慣れてない感じがあったので、素振りです。 こちらの記事をただただ写経しました。 qiita.com 書いたコードはこちらに。 github.com Promiseにまだまだ慣れていないなと感じたので、改めて噛み砕いてQiitaに投稿しました。 qiita.com

webpackはどのように動いているのか(1)

ずっとWebpackのソースコードを読んだり、仕組みを知りたかったのですが、時間がなくてやれずにいました。 今日からはWebpackの仕組みについて、ちょっとずつ探っていこうと思います。何度かに分けて書きますが、記事が溜まってきたらQiitaにでもまとめます…

npmパッケージ「array-flatten」

npmのパッケージを触ってみるシリーズ。 chuckwebtips.hatenablog.com chuckwebtips.hatenablog.com array-flattenとは 配列を平坦化してくれるパッケージです。 詳しくは後述の例を参照ください。 github.com インストール $ npm install array-flatten 使…

webpack上でglobを使う

webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されてい…

SourceMapとは何なのか

JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。 Json形式で記述されています。 なぜSourc…

JavaScriptでユーザーの位置情報を取得する

JavaScriptでユーザーの位置情報を取得する方法について調べた。 syncer.jp www.htmq.com 意外とカンタンにできるっぽい。 しかも、W3Cが策定に関わっているので、安心仕様。 書いたコードがこちら。 gistdbc84ee9993fca1615ff このコードを読み込んでブラウ…

JavaScriptで競技プログラミングを解く際のテンプレをつくった

これの続きです。 chuckwebtips.hatenablog.com JavaScriptで競技プログラミングを解く際の、ある程度のテンプレを作成しました。 ※ 筆者はまだ競技プログラミングを2回しか受験していません。今後テンプレには手が加えられる可能性があります。 こちらです…

JavaScriptで数値ソートする場合

JavaScriptで配列の内容をソートするとき、sort関数を使います。 ただし、sort関数はデフォルトで文字列比較を行ってしまうんですね。 数値比較をするには、引数に比較関数を渡してあげる必要があるんですね。 すっかり忘れていました。 サンプルコード gist…

配列よりもオブジェクトを使う局面があると学ぶ

競技プログラミングで初めて制限時間に引っかかりました。 対処法を考えているうちに、データ構造について1つ学びがあったのでメモします。 ちなみに、重くなった原因はユニーク判定の仕方でした。 最初に書いたコードがこちら。 gist9b15f1b88ba817838fc7 …

ダブリのある冗長な条件分岐はマッピングできると気づいた

例えば、以下のような2重のswitchがあるとします。 gist2f786f89069acd1edce1 まず、主語が何であるかによって分岐します。次に、時間帯によって分岐して、行動をalertします。 そんな2重の条件分岐があるとします。 でも、これってマッピングできるなあと…

【JavaScript】文字列としての数値を加算する関数を書いた。

今回は独自に作成した加算関数を紹介します。 これの続きです。 chuckwebtips.hatenablog.com 加算関数をつくる目的 JavaScriptのルールでは、'5' + '10'は'510'となります。 見た目的には数値なのに、クオーテーションで囲まれているために、文字列の結合が…

JavaScriptで「'6000' - ('40' + '10') * '50'」の答え分かります??

競技プログラミングで3分ほどハマった。検証が楽しくてさらに10分ほどハマった。 '6000' - ('40' + '10') * '50' の結果です。 パット見で分かりますか??? ' ' は文字列を表します。 ふつうに数値として計算したら、3500ですよね。 ところが答えは -19…

【JavaScript】splitとjoinで不純物探知

stringクラスのsplitとarrayクラスのjoinを使えば、不純物探知ができるよねというお話。 以下のコードを例に取ります。 gist2676ae0c57f3323742be 最初にhelloがたくさん並んだ文字列があります。一見、すべてhelloに見えますね。 次に、split('hello').join…

JavaScriptのsplitを自分で書くとこうなる

車輪の再発明です。 区切り文字列を配列にしたいとします。 それをいちいちfor文で走査して配列化してしまいました。でも、splitを使えば一瞬だよねというお話。 例えば、以下の変換をしたいとき、 var str = 'abc de fg'; var ary = ['abc', 'de', 'fg']; i…

JavaScriptで処理時間を計測してみよう!

最近はじめてconsoloe.time()を知りました。 この関数を使うと、JavaScriptの処理時間を計測できるようです。 使い方 以下のように使います。 gista72712964611fe8743f7 使ってみる まずは空の状態で使ってみます。nodeで実行するとこのとおり。 処理がない…

【関数型プログラミング】underscore.jsを使って高階関数を書いた

こちらの続きみたいな感じ。 chuckwebtips.hatenablog.com 続きにしては文量多い。「JavaScriptで学ぶ関数型プログラミング」の第4章をひたすら写経しました。 ので、ブログに残します。 所感 高階関数自体はそこまで難しくない。複雑でなければ。 いや、複…

君はもうJavaScriptの標準入出力を体験したか!?

僕は先日はじめて体験しました(遅い) 自分ができるようになったのを良いことに、自慢気に書いていこうと思います。JavaScriptの標準入出力について。 標準入出力って?? Web系の人にはピンと来ないかもしれませんね。 ターミナル(コマンドライン)上での…

JSファイル内でJSファイルを読み込む方法

小ネタです。 JSファイル内でJSファイルを読み込む。今までやったことなかったので、メモしときます。 今まで いままではHTMLで読み込んでました。 こんな感じですね。 これから requireという関数?を使えばよいらしいです。 こんな感じです。 同じディレク…

【関数型プログラミング】JavaScriptの高階関数を書いてみる

いまこちらの本を読んでいます。 JavaScriptで学ぶ関数型プログラミング。 まだ半分しか読んでいませんが、ちょっとメモしておきます。 今回は高階関数について。 JavaScriptには高階関数というものがあります。 書籍によると、その定義は 関数を引数にとる …

ここらでJSONについておさらいしておく(coffee使用)

chuckです。 JSONってあるじゃないですか。僕、仕事で2回くらいしか使ったことないんですよね。 いまさらですが、軽くおさらいしておこうと思います。 参考にするのは、「JSON 入門」でヒットしたこの記事。 www.webopixel.net JSONとは まあデータ形式の一…

JavaScriptでさくっと高階関数をつくる

JavaScriptでつくる高階関数のうち、もっともシンプルなものを作成します。 gist507dd0644a06cc368c6a splatという関数は、引数に関数を受け取って、戻り値として関数を返します。 この時点ではまだあまり恩恵を感じませんが、これは立派な高階関数です。 と…

【HTML】画像を動画っぽく表現してみる

chuckです。 オシャレなサイトを発見しました。こちらです。 www.startup50.jp こちらのTOPページの背景画像が動いている(ように見える)んですよね。 面白いなーと思ったので、自分なりに再現してみます。

【JavaScript】Arrayクラスのデフォルト関数を使い倒す

どうも!chuckです。今回はJavaScriptの配列についての復習です。 JavaScriptの配列はそもそも、Arrayオブジェクトというグローバルオブジェクトを指します。 配列を定義するということは、このArrayオブジェクトのインスタンスを作るということです。 実際…

JavaScriptのセミコロン自動挿入について調べた

どうも!chuckです。 JavaScriptでは文末のセミコロンを省略できます。それはなぜかと言うと、勝手にセミコロンを自動挿入して補ってくれるためです。 ただ、最近コーディングしていて気づいたんですが、時々セミコロンを挿入してくれないんですよね。シンタ…

自作JavaScriptプラグイン改修 ~即時関数をつかってグローバル汚染を防ぐ~

どうも!chuckです。 JSのプラグインを開発しましたので、改修します。 chuckwebtips.hatenablog.com github.com

JavasScriptのクロージャについておさらい

JavaScriptのクロージャについて、おさらいします。 developer.mozilla.org

JavaScriptのレキシカル変数について

どうも!chuckです。 JavaScript中級者に向けて、今日も勉強していきますよー! chuckwebtips.hatenablog.com 今回学ぶのは、レキシカル変数について。クロージャはそこそこ分かったのですが、レキシカル変数についてはわかっていなかったようです。 なので…

JSプラグインを作り始めました

どうも!chuckです。 こちらでも書きましたが、JavaScriptのプラグインを作り始めました。 chuckwebtips.hatenablog.com まだまだ作り途中ですが、制作過程などを記録しておこうと思います。

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~void, call, apply~

どうも!chuckです。 引き続きUnderscore.jsのコードを読んでいきます。 chuckwebtips.hatenablog.com ちなみに、現在100行まで読んだようです。ただし全部で1600行あるので先は長いですね…。

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~アンダースコアをグローバルオブジェクトとしてセットする~

どうも!chuckです。 Underscore.jsを読んでいきます。 chuckwebtips.hatenablog.com

データ型の変換がすぐ分かる!JavaScriptプラグインを自作しました

どうも!chuckです。 前々からやりたかったのですが、ついにJavaScriptプラグインを自作しました。なので記録します。と言ってもすごくカンタンなプラグインですがw

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~コンストラクタを利用してthisの値を操作する~

どうも、chuckです。引き続き、Underscore.jsを読んでいきます。 JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~プロトタイプとプロパティ~ - コンパイラかく語りきchuckwebtips.hatenablog.com

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~プロトタイプとプロパティ~

どうも!chuckです。 引き続きUnderscore.jsを読み解いていきます。 前回の記事 <a href="http://chuckwebtips.hatenablog.com/entry/2015/08/27/070000" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015/08/27/070000">JSライブラリ「…

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~グローバルオブジェクトのセット~

どうも!chuckです! ついに、今日からライブラリリーディングを始めます! ライブラリリーディングとは 文字通り、プログラミングのライブラリを読むことです。JavaScriptで書かれたライブラリを読むことで、JavaScriptへの理解を深めることが目的です。 な…

Underscore.jsを学ぶ part.7

どうも!chuckです。 引き続きUnderscore.jsについて勉強していきます。 Underscore.jsを学ぶ part.1 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.6

どうも!chuckです。 引き続き、Underscore.jsについて学んでいきます。 Underscore.jsを学ぶ part.3 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.5

どうも!chuckです。 引き続きUnderscore.jsの勉強をしていきます。 Underscore.jsを学ぶ part.3 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.4

どうも!chuckです。 引き続きUnderscore.jsの勉強をしていきます。 Underscore.jsを学ぶ part.3 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.3

どうも!chuckです 引き続きUnderscore.jsについて勉強していきます。 Underscore.jsを学ぶ part.2 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.2

どうも!chuckです。 前回に引き続き、underscore.jsについて勉強していきます。 Underscore.jsを学ぶ part.1 - コンパイラかく語りきchuckwebtips.hatenablog.com

Underscore.jsを学ぶ part.1

どうも!chuckです。AngularJS, React.jsと学んできたので、次はUnderscore.jsについて勉強していきます。 参考にしたサイト様↓ JavaScript - 遅すぎたUnderscore.js入門 - 全体像 - Qiitaqiita.com

JavaScriptはシングルスレッドだとようやく知ったのでメモ

どうも!chuckです。 前回、JavaScriptのスキル判定をしたところ、初心者以上中級者未満だったことが判明しました。 <a href="http://chuckwebtips.hatena…

JavaScriptの業務スキル判定表に挑んでみた

以前ブクマしたこちらの記事。 <a href="http://d.hatena.ne.jp/language_and_engineering/20100111/p1" data-mce-href="http://d.hatena.ne.jp/language_and_engineering/20100111/p1"&amp…

JavaScript : The Good Parts (良いパーツによるベストプラクティス)を読む④

どうも!chuckです。 暑いですがJavaScript:GoodPartsを元気よく読んでいきますw

React.jsのチュートリアルを消化する(前半)

どうも!chuckです。 今回はフェイスブック製のJavaScriptライブラリである、React.jsについて勉強していきます。やり方として、公式のチュートリアルを消化していこうと思います。 (たぶん前に一回やったことあったような気がするけど、忘れちゃった…w) …

JavaScript : The Good Parts (良いパーツによるベストプラクティス)を読む①

どうも!chuckです。 ずっと欲しかったJavaScript GoodPartsを買いました!なので今日から1章ずつ読み進め、適宜メモしていきたいと思います(`・ω・´)ゞ 本日は第一章「良いパーツ」です。

JavaScript : The Good Parts (良いパーツによるベストプラクティス)を読む③

どうも!chuckです。JavaScript GoodParts読んでいきますよー! 第三章 オブジェクト きました!僕らのオブジェクト! めっちゃ便利ですよね。でも、プロトタイプとか実はよくわかっていなくて、しっかり勉強したいと思います。 あらすじ JavaScriptには基本…

JavaScript : The Good Parts (良いパーツによるベストプラクティス)を読む②

どうも!chuckです。引き続きJavaScriptGoodPartsを読んでいきます。 本日は第2章「文法」を見ていきます。

ちょっと離れたところにあるDOMにどうやってアクセスするか

どうも!chuckです。 昨日仕事で以下の機能を実装しました。 checkboxが10個並んだ選択画面がある。従来はcheckboxの横にテキストがついているだけだった。 そこに画像を追加することとなったので改修。 ただし、checkboxの選択状態によって画像は変化する。…

引き続きES6の勉強+Hello, Babel!

どうも!chuckです。前回に引き続き、ECMAScript6の勉強をしていきます。 分配束縛 // gist.github.com えっ、これも便利。[a, b] = [b, a]で入れ替えができる。tempいらず。すごい。 クラス // gist.github.com うわー、これすごい。僕はJavaもやる人間だか…