npm-scriptsを使った開発環境
いつもgulpを使って開発をしていたのですが、ハマってしまうとなぜかいつも抜け出せなくて開発環境を整理するだけで時間がかかってしまうことがありました。
もっとシンプルな環境が作れないかなあ、と調べていて見つけたのが、npm-scriptを使った開発環境です。
npm scriptsって？
そもそもnpm scriptsって何だろう？と疑問に思ったのでメモ。
具体的にどういうことなのかというと
【package.json】
"scripts": {
"start": "npm run server",
"server": "browser-sync start --server ./ --port 3000 --files \"./**/*.html,./assets/css/style.css,./assets/js/bundle.js\"",
},
このpackage,jsonの記述を例にすると
$ npm startでサーバーが立ち上がり、ファイルの監視がはじまります。
このようにシェルスクリプトやエイリアスコマンドを「scripts」というフィールド登録できます。
手順
1. $ npm init 2. $ npm install module名 3. package.jsonのscriptsを編集
実行
$ npm run scripts名 でscirptを実行できます。
この例でいうと$npm run serverでserverが実行されます。
serverはbrowser-syncを使ってローカルサーバーを作って、ファイルの変更を監視オートリロードするタスクです。
予約語
npm-scriptsには予約語が4つあります。それらはrunをつけずに実行できます。
さっきの例だと$ npm startで serverタスクが動きます。
$ npm start appを起動するようなshell scriptのエイリアスとして用いる。 $ npm restart appを再起動させるためのshell scriptのエイリアスとして用いる。 $ npm stop appを停止させるためのshell scriptのエイリアスとして用いる。 $ npm test appをテストするようなshell scriptのエイリアスとして用いる。
npm-scriptのメリット、デメリット
npm-scriptsのメリット、デメリットをまとめてみます。
メリット
シンプルな開発環境
タスクランナー独自のルールを学習しなくて済む
豊富なnode_modulesを直接叩ける
タスクランナーを使うと、タスクランナーの勉強コストがかかってしまったり、タスクランナー用のnode_modulesの開発が止まったりして、詰まってしまうことがあります。
npm-scriptsだと、package.json だけで設定と処理が完結するのでとてもシンプルです。
デメリット
環境依存
可読性が悪くなる
実際に使ってみて、macでは動くのにWindowsでは動かない問題に直面してしまいました。 原因はmacだとUnixのコマンドラインで動作、WindowsだとWindowsのコマンドラインで動作するので同じ記述だと動作しなかったのです。。。 記述を変えて解決しました。。。
また、多くのタスクを増やそうとすると、可読性が悪くなります。。。
まとめ
お仕事ではまだ使っていないのですが、npm-scriptsを使った開発環境は気に入っています。
案件によってケースバイケースだなあと思い、今年は、
LPを作る時はnpm-script、ページものを作成する時はgulpを使おうかなあ（ejsを使ったり、複数人で開発のため環境依存や可読性が悪いのはやだなと思ったため）と個人的に考えています。
最後に作った環境をあげておきます。
2017年と2018年
書こう、書こうと思って2018年になってしまいました。。。
2017年の音楽のこと、本のこと、お仕事のこと、2018年頑張ることをまとめていこうと思います。
音楽のこと
2017年はずっと音楽を聴いていた気がします。 出社してPCをつけてイヤホンをつける、退社してエレベーターに乗ったらイヤホンをつける、 家に着いたらPCをつけて音楽をかける。
そんな1年でした。
今年たくさん聴いたなあ、と思うアルバムをとりあえず
たしか春くらいにリリースされて（3月？だったかな）、東京で過ごすはじめての春にたくさん聴きました。
![Are You Anywhere [12 inch Analog]](https://m.media-amazon.com/images/I/51mOB-6m6CL._SL160_.jpg "Are You Anywhere [12 inch Analog]")
Are You Anywhere [12 inch Analog]
- アーティスト:Submerse
- 発売日: 2017/10/20
- メディア: LP Record
前の記事でも書いたけどsubmerseは大好きなので、もう一度。
- アーティスト:Ducktails
- 発売日: 2017/10/06
- メディア: CD
迷ったんだけど、今年の秋はこのアルバムをよく聴いたので。
- アーティスト:YUMI ZOUMA
- 発売日: 2017/10/04
- メディア: CD
10月にリリースされたアルバム。たくさん聴いたのは12月です。
その他に今年たくさん聴いた曲たち
- アーティスト:THE NOVEMBERS ノベンバーズ
- 発売日: 2017/09/12
- メディア: CD
https://itunes.apple.com/jp/album/i-cant-tell-you-how-much-it-hurts/1312972569?uo=4&at=10l8JW&ct=hatenablog
1 Hour of Relaxing Zelda: Breath of the Wild Music
NieR Automata OST Full Complete 「ニーア オートマタ Original Soundtrack」
ゲームのサントラを今年はたくさん聴いた気がします...
特にゼルダとニーアオートマタのサントラはすごくよかったです...
去年はあまりライブに行かなかったのですが、2018年はいろんなライブに行ってみたいなあ、と思っています。
とりあえず、1/6のsubmerse とTeen Dazeのミニライブには行きたいと思っています。（行ければいいのだけれど。）
本のこと
2017年は小説を読む量が減りました。
お仕事を変えたこともあると思うのですが、技術書を読むことが増えた気がします。
とりあえず読んだ小説
言葉ひとつひとつがとても綺麗でした。
- 作者:実篤, 武者小路
- 発売日: 1999/12/27
- メディア: 文庫
- 作者:原田 マハ
- 発売日: 2014/06/27
- メディア: 文庫
- 作者:スコット フィッツジェラルド
- 発売日: 2006/11/01
- メディア: 単行本（ソフトカバー）
気になる本、技術書、漫画
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
- 作者:山本 陽平
- 発売日: 2010/04/08
- メディア: 単行本（ソフトカバー）
- 作者:久保田 光則
- 発売日: 2017/05/26
- メディア: 単行本（ソフトカバー）
お仕事のこと
1年間を振り返ってみると、化粧品案件で診断コンテンツを作ったり、大企業のコーポレートサイトを作成したり、
100ページ規模のサイトをcss設計を含めて作成したり、とても充実した一年になりました。
振り返ると土日も家に帰ってからもコード書いてたなあ、っていう印象です。
何かを学ぶのに人の倍しないと覚えられないのでほんとうに辛かったのですが、
コードを書くことが楽しくて、何か新しいことができた瞬間が嬉しくて、作ったページを先輩が褒めてくれる瞬間が大好きで
1年間頑張れた気がします。
2017年の目標は、フロントエンドエンジニアとして自信を持って名乗れるように技術力をあげていきたいなあ、と漠然と思っています。
- ES6をきちんと書けるようになりたい。
- React,Vueでwebアプリを作ってみたい。
- ReactNativeでアプリを作ってみたい。
- サーバーサイドのことも勉強したい。（PHP）
- npm scriptを使った開発環境を完成させたい。
漠然としているけれど、今年は難しいことにも挑戦していきたいです。
2018年
2018年新しくはじめたことなのですが、仮想通貨をはじめてみました。 怖くてなかなか始められなかったのですが、やっとはじめました。
とりあえずですが、Zaif、coincheck、Binance、Cryptofolioに登録して
少額ですがはじめてみました。
2017年は個人的に仮想通貨、決済システムが大きく変化したなあ、という印象です。
去年気になったのが、Payment Request API です。 developers.google.com
ネットで買い物するときにめんどうな住所の入力、クレカ番号の入力が簡単になるみたいです。
なんだか送金システムのニュースだったり、仮想通貨のニュース記事を見ていると
いつのまにか、紙のお金が本当にただの紙になってしまう日がきてしまうのかなあ、と感じます。
今年は少しずつですが、資産運用もはじめていきたいと思っています。
今年はすてきな思い出がたくさんとできるといいなあ、
MAMPを使わずにlocalhostを作る
macに標準でインストールされているApacheとPHPを使ってlocalhostを作ったのでメモです。
せんぱいに教えてもらったのと、黒い画面に苦手意識があるので少しずつですが克服したいなあ、と思って練習です。
準備
以下の3つのファイルを編集します。
/etc/apache2/httpd.conf /etc/hosts /etc/apache2/extra/httpd-vhosts.conf
手順
1. /etc/apache2/httpd.confの編集
viに慣れたいのでviで編集しました。
ターミナルでこのコマンドを叩きます。
sudo vi /etc/apache2/httpd.conf
1-1.まずバーチャルホストが使えるようにコメントアウトを外します。
160行目付近
#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so ↓ LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
499行目付近
#Include /private/etc/apache2/extra/httpd-vhosts.conf ↓ Include /private/etc/apache2/extra/httpd-vhosts.conf
1-2.PHPが使えるようにコメントアウトを外します。
169行目付近
#Include /private/etc/apache2/extra/httpd-vhosts.conf ↓ Include /private/etc/apache2/extra/httpd-vhosts.conf
2. /etc/apache2/extra/httpd-vhosts.confの編集
sudo vi /etc/apache2/extra/httpd-vhosts.confで編集します。
一番下の行に以下を記述します。
<VirtualHost *:80>
ServerName cidermitaina.localhost
CustomLog "/private/var/log/apache2/access_log_[projectname]" common
ErrorLog "/private/var/log/apache2/error_log_[projectname]"
DocumentRoot "/Users/[name]/[directory]/[projectname].localhost"
<Directory "/Users/[name]/[directory]/[projectname].localhost/">
AllowOverride All
Options FollowSymLinks Indexes
DirectoryIndex index.php index.html
Require all granted
Order Allow,Deny
Allow from all
</Directory>
</VirtualHost>
[name],[directory],[projectname]は適宜変更してください。
3./etc/hostsの設定
sudo vi /etc/hosts
以下の記述を追加します。
127.0.0.1 localhost [projectname].localhost
4 Apacheを再起動
httpd.confの文法チェック
sudo apachectl configtest
Apacheを再起動
sudo apachectl restart
5 確認
[projectname].localhostにアクセスしてページが表示されたら成功です。
memo
viに慣れていないのでviで使ったコマンドメモ
i → カーソルの左からインサートモードへ移行 a → カーソルの右からインサートモードへ移行 Esc → コマンドモードに帰る／インサートモード解除 :q → 終了 :wq → ファイルに保存して終了 /検索したい文字列 → 前方検索
少しずつ黒い画面に慣れよう計画中です。。。
viも少しずつですが、慣れていきたいなあ、と思っています。
（あわあわしながらviでファイルを編集してました。）
gulp4.0にしました。
大きい案件が始まるので、開発環境を整理したいと思っていたのですが、いろいろ考えた結果gulpのバージョンを4.0にしてみることにしました。
悩んでたこと
ページ数の多い案件はgulp、ejsを使ってhtmlにコンパイルするっていう開発をしていました。 ですが、ページ数が多くなるとリロードが遅くなったり、何度もリロードされたり不安定な挙動でした。
原因はhtmlが変更されたらオートリロードが走るっていう記述のせいで、ejsでhtmlをたくさん吐き出すと毎回オートリロードが走ってしまい不安定な挙動になっていました。
そこで、htmlが変更されたタイミングではなくて、ejsが変更されてタスクが終わった後にオートリロードを走らせる処理に変更したいなあ、と考えていました。
やりたかったこと
gulpのタスクの実行順を指定したかったのですが、いろいろ調べているみると、
・ run-sequenceを使う方法
・ gulpのバージョンを4.0にあげて'gulp.series'を使う方法
が見つかりました。
run-sequence
複数タスクの並列／直列処理が設定できます。
せっかくなのでgulp4.0の勉強も兼ねてバージョンをあげてみることにしました。
gulp v4.0
そもそもgulpのタスクは非同期で実行されるから高速なのかなあ、と勘違いしていたのですが、ドキュメントを読んでみると
If more than one task is listed, Gulp will execute all of them concurrently, that is, as if they had all been listed as dependencies of a single task.
タスクは非同期ではなくて並列で実行されるみたいです。
勘違いをしていました。
並列で実行されることを踏まえてgulp4.0の気になった変更点を軽くまとめます。
- gulp.series,gulp.parallelで直列/並列の処理
- タスクに渡す関数の制約
- gulp.taskの引数
その他の変更点は以下で確認してください。。。
https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md
1.gulp.series,gulp.parallel
gulp.seriesでタスクの直列処理、gulp.parallelでタスクの並列処理ができるようになりました。
gulp.series
gulp.task('default', gulp.series('build', 'server'));
buildのタスクが終わってからserverのタスクが動きます。
gulp.parallel
gulp.task('build', gulp.parallel('css', 'js', 'html'));
css,js,htmlのタスクは並列に実行されます。
2.タスクに渡す関数の制約
タスクに渡す関数の制約ができたみたいです。
- 最後にcallbackを実行する
- streamを返す
- Promiseを返す
- child processを返す
- observableを返す
をしないとエラーになってしまいます。
例えば、 sassのタスクですが、
gulp.task("sass", () => { gulp.src(`${SRC}/scss/**/*.scss`) .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) .pipe(sass()) .pipe(autoprefixer({browsers: ['last 6 versions']})) .pipe(gulp.dest(`${DEST}assets/css/`)) });
この書き方だと
The following tasks did not complete: sass Did you forget to signal async completion?
こんなエラーが出てしまいます。
そのため非同期タスクにするためにstreamを返すように以下のように変更すると上手くいきました。（returnをつけてあげます）
gulp.task("sass", () => { return gulp.src(`${SRC}/scss/**/*.scss`) .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) .pipe(sass()) .pipe(autoprefixer({browsers: ['last 6 versions']})) .pipe(gulp.dest(`${DEST}assets/css/`)) });
3.gulp.taskの引数
gulp.taskの引数が最大2つになりました。
gulp v4.0の使い方
1, gulp4.0のインストール
α版なのでローカルにgulp4.0をインストールします。
npm install gulpjs/gulp#4.0 -D
2, npm scriptにgulpを登録
ローカルにインストールしているのでnpm runコマンドでgulpが実行できるようにpackage.jsonを編集します。
"scripts": { "gulp": "gulp" },
3, gulpfile.jsの編集
好きなタスクを書いてください。
4, 実行
コマンドで
npm run gulp
と叩くと実行できるはずです。
最後に作ったgulp4.0の環境です。
GitHub - cidermitaina/starter-kit: html5 starter-kit
不具合があるかもですが、誰かの参考になれば嬉しいです。
9 - 10月に聴いた音楽
9月から10月に聴いてた音楽について書いてみようかなあ、と思います。
すきなものを紹介したり話すのが苦手なので上手く書けるか分からないのですが、誰かと音楽を話す機会が減ったので読んでくれている誰かと共有できたら、と思っています。
今年の秋は気になるアーティストの新譜がたくさんリリースされて個人的には充実しました。
#submerese / Are you anywhere
![Are You Anywhere [PT012]](https://images-fe.ssl-images-amazon.com/images/I/51hW-O-HtGL._SL160_.jpg "Are You Anywhere [PT012]")
- アーティスト: Submerse
- 出版社/メーカー: Perfect Touch
- 発売日: 2017/10/06
- メディア: CD
- この商品を含むブログを見る
去年リリースしたawakeが好きすぎて2016年はずっと聴いていました。
新しいアルバムは、じめっとした気だるい感じが最高だなあ、と思いました。
#qrion / Just a Part of Life
- アーティスト: Qrion
- 出版社/メーカー: Moving Castle
- 発売日: 2017/08/30
- メディア: MP3 ダウンロード
- この商品を含むブログを見る
8月末にリリースされたEP。9月はこのEPをずっと聴いてました。
qrionは好きなアーティストの1人なのですが、彼女のRemixは最高で、ハズレがないです。
特に下の2曲は最高です。
#for tracy hyde / he(r)art
- アーティスト: For Tracy Hyde
- 出版社/メーカー: P-VINE RECORDS
- 発売日: 2017/11/02
- メディア: MP3 ダウンロード
- この商品を含むブログを見る
11月リリースのアルバムだけど、最近ずっと聴いているので書いておきたいです、、、
都会がコンセプトみたいで聞いていてすごく東京を感じるときがあります、
去年、1人で東京に引っ越してきて不安と寂しさで東京の街が眩しくて仕方なかったのですが、このアルバムを聴きながら東京の街歩くときらきらして綺麗に見えます。
#a l e x / Growing Up, Vol. 1
なんとなく漁ってたbandcampで見つけてはまったアルバム。
特に no one would miss meの救いのない感じがたまらなくてずっと聴いてます。
夏の終わりから秋にかけて京都にいる友達が東京に来ることか多くて、懐かしさから感傷的になることが多かったです。
なので、今年の秋はなんだか落ち着いた曲ばかり聴いている気がします。
gitのリモートリポジトリ作成
最近になって担当になった案件のgitのリモートリポジトリを自分で作るようになりました。
手順
git用のサーバーを構築してる場合の手順です。
1.リモートのホストにログイン
ssh [user@]hostname -p ポート番号
sshでサーバーにアクセスします。
-p
でポート番号を指定することができます。
ログインの認証方法はパスワード認証か公開鍵認証です。
2.作りたいディレクトリとそのディレクトリの中にrepos.gitを作成
mkdir -p ディレクトリ名/repos.git
3.repos.gitに移動、リポジトリ を作成
cd ディレクトリ名/repos.git
git --bare init --shared
いつもおまじないみたいに使ってたのでちゃんと意味を理解したくて調べてみました。
--bare: ベアリポジトリを作成する。 ベアリポジトリは、作業ディレクトリを持たないリポジトリで、 外部に公開し、作業を中継するリポジトリとして使用。
--shared: リポジトリを他のユーザと共有する場合に、利用する
ふう、これでgitのリモートリポジトリの完成です。
チェックされた値を、URLパラメータに入れて送る
このあいだフォーム案件をやっていたのですが、ラジオボタンのチェックされている値を
GETして最後に値をPOSTするっていうことをJSで実装しました。
質問？アンケートページ？みたいな感じです。
フォーム案件をする機会が少なかったのでGET？POST?ってなってしまって、悲しかったのでメモです。
GETとPOSTの違い？
そもそもGETとPOSTの違いがいまいち分かりませんでした、、、
GETだとURLに付加してリクエストするので目でパラメータを見ることができて POSTだと見えないっていうことなのかな？
GET
リクエストとして送信されるデータはURLに含まれる
(「URL?パラメータ名=値」という形式) 「?」パラメータのはじまり 「&」パラメータの切れ目 「=」挟んだ左側がGETの変数名、右側が渡される値
データを取得したい時に使用
データベースの書き換えが必要ない場合。
POST
リクエストとして送信されるデータはメッセージボディ部に含まれる
メッセージボディは、HTTPリクエストのパラメータ内容を渡す場所。
データを変更したい時に使用
データのソート、更新、削除、新規登録などで使用する場合。
パスワードのような秘匿情報をURLに表示したくない場合。
データ量が多い場合。
バイナリデータを送信したい場合。
URLなどを送信したい場合はGET、秘匿性の高いデータやデータベースなど重要度の高いデータ、大量のデータを送るときはPOSTを使うみたいです。
値をGETして最後にPOSTしたい
今回やりたかったことは次へボタンを押したときはラジオボタンにチェックされている値を次のページにGETして最後の送信ボタンでチェックされている値全てをPOSTするということです。
var param = location.search; //次へ進むボタン $('.nextButton').on('click',function(){ var value = $('[name=radio]:checked').val(); var link = $(this).attr("href"); if (value == null){ //undefined(リンク無効) alert('選択肢１つ選んでから次設問にお進みください。'); return false; }else{ if(param){ $(this).attr("href",link + param + '&' + value); }else{ $(this).attr("href",link + '?' + value); } } }); //回答完了ボタン $('.submitButton').on('click',function(){ var value = $('[name=radio]:checked').val(); if (value == null){ //undefined(リンク無効) alert('選択肢１つ選んでから次設問にお進みください。'); return false; }else{ param = param.replace('?',''); $(this).attr("value",param + '&' + value); } });
location.searchはクエリ部分を取得、変更するプロパティ
val()は全ての要素のvalue属性を返す。
まずラジオボタンがチェックされているかどうか判別します。
値が入ってないときは進まないように、値が入っているときはURLに値を付与していきます。値を付与するのはattrでhrefを変更します。
１問目のときは'?' + 変数value(チェックされている値）２問目以降は1問目以降の値に&で値をつなげていきたいので変数param（クエリ部分）+ '&' + 変数value(チェックされている値）になります。送信ボタンをクリックしたときはPOSTしたかったので送信ボタンのvalueを
attr("value",param + '&' + value)で変更して 最後にPOSTします。
組み込みはシステム会社さんがするのでここまでなのですが、きちんと値がPOSTされるかどうか<?php print $_POST['name']; ?>で確認。
ばっちりでした！
フォーム案件をする機会が少なかったでのこれを機にPHPでフォームを作って理解を深めたいなあと思ったり。（苦手意識があります。。。）
あ！URLを操作する実装ははじめてだったのできちんと覚えたいです。
