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

ぺーぺーSEのブログ

備忘録・メモ用サイト。

Angular入門

フロントエンドMVCフレームワーク Angular (所謂Angular2)を触ってみた。 ここでは Angular CLI を使う。 なお、 ndenv が入ってるテイで書く。導入は下記記事参照。 blog.pepese.com Angular CLI インストール $ npm install -g @angular/cli $ ndenv reh…

Express入門

Node.jsのWebフレームワーク Express 触ってみた。 下記の記事を読んだテイで書く。 blog.pepese.com インストール Expressのインストール $ npm install express --save Express単体を入れる時はこれ。 以降の説明は express-generator を使うので上記はや…

Node.js(npm)入門

Node.js(npm)についてまとめる。 npm(Node Packege Manager)は、Node.js用のパッケージ管理コマンド。 JavaScriptエコシステムツール・ライブラリはnpmで導入できるものが多い。 npmはNode.jsと同時にインストールされるので、Node.jsを入れておけばいい…

webpack + Babel 入門

webpack + Babel で ES6(ECMAScript 2015)をトランスパイルしてブラウザで動くまでをまとめる。 以降を記載する。 サンプルが動くまで サンプルが動くまでの手順 説明 上記の手順の説明 サンプルが動くまで ブラウザに「Hello World !」とポップアップが出…

GulpでJavaScriptテスト

GulpベースでJavaScriptのテスト構成について書く。 以下のツールを使用する。 Gulp お馴染みタスクランナー Jasmine JavaScriptユニットテスティングフレームワーク Karma テストランナー カバレッジレポートなども出力可能 PhantomJS ブラウザレスJavaScri…

CORS(Cross-Origin Resource Sharing)について

CORS(Cross-Origin Resource Sharing)は、ブラウザがオリジン(HTMLを読み込んだサーバ)以外のサーバからデータを取得する仕組み。 各ブラウザにはクロスサイトスクリプティングを防止するために、クロスドメイン通信を拒否する仕組みが実装されている。 特に…

Yeoman入門

Yeoman触ってみた。 下記の記事を読んでインストールやプロキシ設定とかしてる前提で書く。blog.pepese.comblog.pepese.com Yeoman クライアントサイドの技術(Haml、Slim、Jade、Sass、LESS、Stylus、Coffeescript、TypeScript等)は増加の一途をたどってい…

Bower入門

Bower触ってみた。 下記の記事の前半npm・Node.js辺りを読んだ前提で書く。blog.pepese.com Bower BowerはTwitter社が作ったJavaScriptのライブラリ管理をするパッケージマネージャ。 Node.jsのnpmみたいなもの。 インストール > npm install -g bower [User…

Grunt入門

JavaScriptタスクランナーのGruntをさわってみる。 npmとNode.js npm(Node Packege Manager)は、Node.js用のパッケージ管理コマンド。 JavaScriptのエコシステム(CoffeeScriptやGrunt等)はインストールにnpmを使用することが多い。 npmはNode.jsと同時に…

CSS3の基本

本まとめの前段記事が下記。blog.pepese.com CSSでいろいろできるのはわかった。だがデザインが思いつかんw CSS3の前にCSSの書き方から。 p { font-size : 12pt }上記はp要素・タグのフォントサイズを12ポイントに指定するCSS。 pと書いている部分をセレク…

HTML5の基本

今更だが、昨今フロントエンドの需要が高まってきたのでまとめだす。 また、こんな話もある。IE11のどっかから古いドキュメントモードが無くなって今までのWebページが見れなくなる(?)からやばいねって話。Internet ExplorerはIE特化アプリから一時的に日…

レスポンシブWebデザイン(レスポンシブ・ウェブデザイン)

レスポンシブWebデザイン(レスポンシブ・ウェブデザイン)とは、デバイスごとに複数のデザインを用意するのではなく、ブラウザのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法。レスポンシブWebデザインを構成する3つの要素技術 フ…

JavaScriptをテスト

JavaScriptテスティングフレームワークの種類は2つ。 ブラウザベースのテスティングフレームワーク WebブラウザにテストのフィクスチャとなるHTMLをロードし、そのテストフィクスチャファイルからテスト対象のファイル、ライブラリ、実行するテストをロード…

JavaScript基本からやってみる

今まで適当にしかやってこなかった。 文法なんでめもっても仕方ないから、とりあえず簡単な実行方法とデバッグ方法をめも。 実行方法 とりあえず動かしてみるなら下記で。 「・・・」のところにすきなコードを書く。 ただし、Ajax、jQueryみたいにサーバとや…