npm install のオプションについて
最近はReact+echoでなんか作ろうプロジェクトを進めている!
npm install
- オプション無し
- ex) npm intall
- カレントディレクトリに存在する
package.jsonに応じて、./node_modules/ 以下にモジュールをインストールするpackage.jsonとは、パッケージ名や、バージョン、モジュールの依存関係などを管理するファイル
npm initで対話形式で作成可能
-g- ex) npm install -g パッケージ名
- 指定したパッケージがグローバル領域にインストールされる
- 通常プロジェクト毎に
package.jsonを作るので、あまり使わないオプション - macだと通常 /usr/local/lib/node_modules/ 以下にインストールされる
--save- ex) npm install --save パッケージ名
- 指定したパッケージをローカルインストールし、package.json の
dependenciesに追記するdependenciesはプロジェクトの実行に必要なものだけを入れるとよい
--save-dev- ex) npm install --save-dev パッケージ名
- 指定したパッケージをローカルインストールし、package.json の
devDependenciesに追記する- テストモジュールとか
参考
s3の特定ディレクトリにファイルがあるか確認する
S3のバケット・ディレクトリにファイルが上がっているか、ファイルが空でないかを検知したい。 ので、検知する用のシェルスクリプトを書いた。 あまり綺麗な書き方ではないと思うのでもっといいやり方があれば知りたい。
ディレクトリの想定
特定バケット以下の指定ディレクトリのファイルを確認。 ディレクトリはこんな感じになっている想定。
nekootoko3_no_gohan/[matatabi | saba | catfood]/YYYYMMDDHH/ファイル
matatabi saba catfood ディレクトリ以下には毎時ファイルがアップロードされる。
スクリプト
現在時刻から3時間前に上げられているであろうファイルを確認するバッチ。
DATETIME=$(date -d '3 hours ago' '+%Y%m%d%H')
BUCKET_NAME='nekootoko3_no_gohan'
DIR_LIST="matatabi saba catfood"
ERR_MSG=''
for DIR_NAME in $DIR_LIST
do
# 手動実行用に実行状況を出力
echo "inspecting s3://$BUCKET_NAME/$DIR_NAME"
RES=`/usr/local/bin/aws s3 ls s3://$BUCKET_NAME/$DIR_NAME --sum`
if echo $RES | grep -sq 'Total Objects: 0'; then
MSG="$DIR_NAME ni file ga naiyo!!\n"
ERR_MSG=$ERR_MSG$MSG
elif echo $RES | grep -sq 'Total Size: 0'; then
MSG="$DIR_NAME no file size ga 0 dayo!!\n"
ERR_MSG=$ERR_MSG$MSG
fi
done
if [ -n "$ERR_MSG" ]; then
echo -e $ERR_MSG >&2
fi
これをcron設定しよう。 標準エラー出力だけは出力するようにしないと、エラーメールが飛ばないので注意。
MAILTO=alert@alert.jp 5 * * * * /bin/sh どこかのディレクトリ/gohanchecker.sh 1> /dev/null
mysqlで複数カラムを追加・削除したい
mysqlで同一テーブルに対して複数カラムの追加・削除する必要があるときに、
今まで複数のALTER文を発行していたけど、1クエリーで実行できるように書くようにした。
カラム追加
複数行で書くと普通にALTER文を何回か書く感じになる。
ALTER TABLE `table` ADD COLUMN `column1` decimal(11,2) NOT NULL DEFAULT `0`; ALTER TABLE `table` ADD COLUMN `column2` varchar(255) NOT NULL DEFAULT 'neko';
これを1行で書くと
ALTER TABLE `table` ADD COLUMN `column1` decimal(11,2) NOT NULL DEFAULT `0`,
ADD COLUMN `column2` varchar(255) NOT NULL DEFAULT 'neko';
1回のクエリで実行できてなんかいい感じだ。
カラム削除
これも複数行で書くと
ALTER TABLE `table` DROP COLUMN `column1`; ALTER TABLE `table` DROP COLUMN `column2`;
これを1行で書くと
ALTER TABLE `table` DROP COLUMN `column1`,
DROP COLUMN `column2`;
カラム変更をまとめて行う
ADD、DROP、CHANGE、MODIFYはカンマ区切りで1つのクエリでまとめられる。
tableに対して、カラム追加・カラム削除・カラム名(とカラム定義)変更、カラム定義変更を1クエリで行う。
ALTER TABLE `table` ADD COLUMN `column1` decimal(11,2) NOT NULL DEFAULT `0`,
DROP COLUMN `exist_column1`,
CHANGE COLUMN `old_column_name` `new_column` int(11) NOT NULL DEFAULT '1',
MODIFY COLUMN `pi` decimal(11,2) NOT NULL DEFAULT '3.14';
node.js?npm?Javascriptとどんな関係が?
npmとnode.jsとJavascriptの関係性がよく分からない。
node.js
- サーバーサイド用Javascript の言語処理系のこと。
- サーバーサイド用Javascriptってなんやねん。
- ブラウザで動くJavascript(いつもjsファイルに書いているやつ)と似てるようで実は違うJavascript
- モジュールの読み込みができたりするんです。
nodeコマンドで実行でき、Browserfyを使ってブラウザで動くJavascriptに変換できる
- ブラウザで動くJavascript(いつもjsファイルに書いているやつ)と似てるようで実は違うJavascript
- 言語処理系ってそもそもなんやねん
nodeコマンドでREPL(Read Eval Print Loop: 対話的実行環境)が出て来るよ(pythonコマンドみたいな感じ)
- サーバーサイド用Javascriptってなんやねん。
$ node > var name = 'nekootoko3'; undefined > name 'nekootoko3' > console.log(name); nekootoko3 undefined > .exit $
- 引数に.jsファイルを持って来ると。
nekootoko.js
var name = 'nekootoko3';
console.log('Soy ' + name + '!');
$ node nekootoko.js Soy nakootoko3!
npm
# パッケージをグローバルにインストール $ npm install -g browserify /usr/local/bin/browserify -> /usr/local/lib/node_modules/browserify/bin/cmd.js + browserify@16.1.0 added 140 packages in 7.915s
おわりに
フロントやるぞお
参考
CentOS7にGoの最新版をインストールする
最新版のgoをインストールする流れをまとめてみた
全体の流れ
$ uname -m x86_64 $ sudo su - # cd /usr/local/src # wget https://dl.google.com/go/go1.9.4.linux-amd64.tar.gz # tar -zxvf go1.9.4.linux-amd64.tar.gz # mv go /usr/local # exit $ vi ~/.bash_profile 下のようにPATHに/usr/local/go/bin を追加する PATH=$PATH:$HOME/bin:/usr/local/go/bin $ source ~/.bash_profile
各コマンドの説明
uname -m
$ uname Linux $ uname -m x86_64
sudo su -
- ルートユーザーになる
- /usr は一般ユーザーに編集権限がないので
cd /usr/local/src
/usr直下のディレクトリはディストリビューションが管理/usr/local以下のファイルは各システムの管理者が管理/usr/local/srcコマンドのソースコードが置かれる
wget https://dl.google.com/go/go1.9.4.linux-amd64.tar.gz
- アーキテクチャに応じたファイルを/use/local/src以下にダウンロードする
tar -zxvf go1.9.4.linux-amd64.tar.gz
- ファイルを解凍する
tarファイルの解凍・圧縮を行うコマンド-zgz対応-x解凍(extract)-v圧縮・解凍状況を表示(なくてもいい)(verbose)-fファイル名を指定(filename)
mv go /usr/local
- コマンドを置くディレクトリを移す
vi ~/.bash_profile
- パスを通す
参考
htmlファイルの上の方にいるあいつら
ブログ長らく放置していたけど、しれっと再開しますw
あまり肩肘張らずちょっとした内容でもちょいちょい更新していきます。
そして基本的には丁寧語とか使わず、自分用のメモに近い形で書いていきます。
htmlファイルの先頭とかhead内にいろいろ書くと思うんだけど今までコピペで済ませていた。 ちょっくら必須なやつだけでも簡単にまとめてみようと思う。
例
この例に出てくる<body>より上の要素を解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="...">
<title>解説するお</title>
<link rel="stylesheet" href="css/style.css">
<script scr="js/script.js"></script>
</head>
<body>
<!-- なんかいろいろ -->
</body>
</html>
<!DOCTYPE html>
- 文書が
HTML5で書かれたことをブラウザなどに対して明示する宣言HTML5では、videoタグなど新たな便利なタグが使えたり、フォームの機能が拡張されていて便利- 参考：yahooのブログ
- 文書の先頭に記述する
<html lang="ja">
lanf="ja"と指定することで、日本語の文書であることを明示する
<head>
<meta name="viewport" content="width=device-width">
- 仮想的に表示領域を指定する
- この書き方だと、デバイスのサイズに合わせてページを表示する
- content="width=360"ってすると、横幅360px用の描画を行う
- コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
<meta name="description" content="...">
- 検索結果の説明文に表示される文言
- SEOの効果を高めるために重要らしい
<link rel="stylesheet" href="css/style.css">
- 読み込むスタイルシートを指定する
<script scr="js/script.js"></script>
- 読み込むスクリプトを指定する
参考
ハイパフォーマンスWebサイトを読んで
こんにちは。
寒くなってきましたね。
半袖じゃ若干きついですね、、、
仮想通貨を少し買ってみてるんですが、値段の乱高下が半端ないですね。
ビットコインの分裂があーだこーだというのを聞いても実際がよく分からないので、
近々ブロックチェーン技術を勉強しようと思います。
とはいえ今回は別のテーマで、前回に引き続きWebの基本的なところです。
何を読んでも知らないことばかりなのは変わりありませんが、
少しずつ理解が容易になってきていることで自分の成長を感じるここ最近ですw
概要
サイトを高速化するための方法について。
サイトが表示されるまでの処理で時間が消費される割合はフロントエンドが80%程度とほとんどの割合を占めている。
ブラウザがサーバーからHTML文書を取ってくるバックエンドの処理は20％に過ぎないので、
フロントエンドの処理を変えることで大幅な高速化を実現できる可能性がある。
全体の構成
- フロントエンドパフォーマンスの重要性
- HTTPの概要
- ルール1: HTTPリクエストを減らす
- ルール2: CDNを使う
- ルール3: Expiresヘッダを設定する
- ルール4: コンポーネントをgzipする
- ルール5: スタイルシートを先頭に置く
- ルール6: スクリプトは最後に置く
- ルール7: CSS expressionの使用を控える
- ルール8: JavaScriptとCSSは外部ファイル化する
- ルール9: DNSルックアップを減らす
- ルール10: JavaScriptを縮小化する
- ルール11: リダイレクトを避ける
- ルール12: スクリプトを重複させない
- ルール13: Etagの設定を変更する
- ルール14: Ajaxをキャッシュ可能にする
- 米国トップ10サイトの分析
HTTPリクエストを減らす
- 複数の画像を個別に取得する代わりにイメージマップを使う
- CSSスプライトを活用する
- Data URIスキームを使用する
- スクリプトおよびスタイルシートを結合する
CDNを使う
- CDN(Contents Delivery Network)を使うこと
Expiresヘッダを設定する
- Expiresヘッダをしていない場合、条件付きGETリクエストを発行する
- 最終的にはキャッシュを使うことになってもHTTPリクエストが送られるため、オーバーヘッドとなる
- Expiresヘッダを指定して、コンポーネントの取得時にキャッシュを使用するようにする
- max-ageを使うと、日付ではなく保持期間を秒単位で指定できる
- Apacheのmod_expiresを使うと、DxpiresDefaultをディレクティブでExpiresヘッダとmax-ageヘッダ療法を指定できる
- ファイル名にバージョンや日付などを付加することで、Expiresヘッダを長めに指定してもファイル変更時にファイルを取得しに行ってくれる
nekootoko.js?20171111やnekootoko.css?v=91と行った感じ
コンポーネントをgzipする
スタイルシートは先頭に置く
- スタイルシートはLINKタグを使用してドキュメントのHEADに置く、普通に
スクリプトは最後に置く
CSS expressionの使用を控える
- CSS expressionは、ロードの遅延やバグの原因になりうるので極力使用を控えるべき
JavaScriptとCSSは外部ファイル化する
- インラインと外部ファイルだとキャッシュがない状態での単純な比較だとインラインが早い
- HTTPリクエスト数が少なくなるため
- コンポーネントの再利用化やコンポーネントがキャッシュされるメリットが大きいので基本的に外部ファイル化するべき
- onloadイベントで、ページが完全にロードされた後で外部コンポーネントを動的にダウンロードする
DNSルックアップ回数の削減
JavaScriptを縮小化する
- JavaScriptのソースコードを縮小化する
- 縮小化(推奨)
- コードのコメントや余白を削除する
- JSMinなどのツールあり
- 難読化(非推奨)
- コードの変数を短いものに置き換える
- 保守性が低下する
- Dojo Compresser などのツールあり
- 縮小化(推奨)
- 縮小化とgzipの組み合わせを推奨
- CSSはコメントや空白文字が少ないので効果が薄い -> JSだけでよい
リダイレクトを避ける
- リダイレクトはHTMLドキュメント全体の配信を遅らせる
- 末尾のスラッシュの欠如の場合
- ウェブサイトの連結の場合
- 内部トラフィックの追跡の場合
- HTTPヘッダのRefererを活用する
- 外向きトラフィックの追跡の場合
- ビーコンもしくはリダイレクトもやむなし
- 覚えやすいURL
スクリプトを重複させない
- スクリプトが重複することでパフォーマンスが低下する要因は2つ
- HTTPリクエストが発生する
- Chromeはしなかったけど、最近のはするのかなぁ
- JavaScriptが無駄に実行される
- HTTPリクエストが発生する
- サーバーサイドで
insertScriptといった関数を作成する- 依存関係やバージョンも同時に扱えばなおよし(やりたい)
ETagの設定を変更する
- EtagはHTTPレスポンスヘッダに含まれている
- サーバーが異なる場合、異なったEtagとなるためファイルに変更がなくとも、304レスポンスではなく200レスポンスとなる
- Etagは設定を変えるか削除する方がよい
参考: HTTPヘッダチューニング Etag・Last-Modified
Ajaxをキャッシュ可能にする
終わりに
この本の執筆された2008年にはまだ一般的ではなかったこと(特にAjaxなど)が、
今では普通になっていることを考えるとWebの世界の移り変わりの速さを感じます。
ただ、今でもこの本のルールを活かせる部分も多いと思うので、
早速に会社に改善提案を出してみます！
