mongoDB

f:id:aotree423:20180506144918p:plain

サーバーサイドをJavaScriptで記述できるNode.jsを覚えたかったので、その前準備としてNode.jsと相性の良いドキュメント指向型のNoSQL(Not only SQL)である、mongoDBを勉強したので基本的なコマンドをメモします。

RDBMSとの構造の違い

  • Database(=RDBMSで言うDatabase): collectionを複数入れられる箱
  • Document(=RDBMSで言うRecord): 個々のデータ
  • Collection(=RDBMSで言うTable): データの塊

コマンド (末尾のセミコロンはあってもなくてもよい)

- ログイン

  • mongo (ユーザー認証を有効化していない場合)

- ログアウト

  • exit

- ヘルプ

  • help;

- データベース一覧表示

  • show dbs;

- データベース切り替え

  • use db_name;

*存在しないデータベースを指定した場合、新規作成して切り替える

*mongoDBでは、データベースの中にコレクションやドキュメントを作るまでは存在しないことになっているため、use dbnameの後に、show dbをしても作成したdbnameは表示されない

- コレクション作成

  • db.createCollection("collection_name");

- 現在のDBに関する情報の表示

  • db.stats();

- データベースの削除

  • db.dropDatabase();

- Collection一覧表示

  • show collections;

- Collectionの名前の変更

  • db.collection_name.renameCollection("new_collection_name");

- Collectionの削除

  • db.collection_name.drop();

- Documentの作成

  • db.users.insert({field_name_1: value_1, field_name_2: value_2});

*指定したCollectionが存在しない場合、同時にCollectionも作成される

*MongoDBはスキーマレスなので、異なる構造のDocumentも作成できる

- カウント

  • db.collection_name.count();

- 全件抽出

  • db.collection_name.find();

*_id: ドキュメントを一意に決定するためにMongoDBが自動で付与する
- 全件削除

  • db.collection_name.remove({});

- 条件を指定しての抽出

  • db.collection_name.find({field: value});

- 以上/以下などの条件での抽出

  • db.collection_name.find({field: {$gte: 4}}); 

*$gte: greater than or equal to

 

- JavaScript正規表現

  • db.collection_name.find({team: /l/}); 

- あるフィールドにどんな値があるか

  • db.collection_name.distinct("field_name");

- and(,)

  • db.collection_name.find({name:/o/, score:{$gte:3}});

- or($or [,,,])

  • db.collection_name.find({$or: [{name:/o/}, {score:{$gte:5}}]});

- exists(あるフィールドが存在するドキュメントを抽出)

  • db.collection_name.find({field_name: {$exists: true}});

*trueは0でもよい
- 表示するフィールドの指定(_idはデフォルトで1)

  • db.collection_name.find({}, {name: 1, score: 1});

*0と1は混在不可(_idは例外)

 

指定フィールドの値を昇順で表示

  • db.collection_name.find({}, {_id: 0}).sort({score: 1}); 

- 指定フィールドの値を降順で表示

  • db.collection_name.find({}, {_id: 0}).sort({score: -1});

- 件数制限

  • db.collection_name.find({}, {_id: 0}).limit(2);

- sortとlimitの組み合わせ

  • db.collection_name.find({}, {_id: 0}).sort({score: -1}).limit(2);

- 1件表示

  • db.collection_name.findOne({}, {_id: 0}); 

- スキップ

  • db.collection_name.find({}, {_id: 0}).skip(2);

- update:第一引数は抽出条件

  • db.collection_name.update({name: "aoki"}, {$set: {score: 80, team: "red"}});

*特定のフィールドではなく、丸ごとupdateするときは$setを外して第二引数にオブジェクトを渡す
*最初の1件のみ更新される(第3引数に{multi: true}を渡すと全て更新される)

- inc

  • > db.collection_name.update({name: "aoyama"}, {$inc: {score: 5}});  

- mul

  • > db.collection_name.update({name: "aoyama"}, {$mul: {score: 4}});

- rename

  • > db.collection_name.update({name: "tanaka"}, {$rename: {score: "point"}}); 

- フィールドと値のセットをドキュメントに追加

  • > db.collection_name.update({name: "tanaka"}, {$set: {team: "green"}});

- フィールドと値のセットをドキュメントから削除

  • > db.collection_name.update({name: "tanaka"}, {$unset: {team: ""}});

*$unsetするフィールドの値は何でも良いが空文字がよく使用される

- index:フィールドにindexをつけると、該当フィールドで検索する際にパフォーマンスが向上する

  • db.users.getIndexes();

*_idに対しては_id_というインデックスが自動で付与されている

 

- index付与

  • db.collection_name.createIndex({field_name: 1});

*1: 昇順
*-1: 降順

- index削除

  • db.collection_name.dropIndex("score_-1");

*_idに対するインデックスは消せない

 

- ユニークキー付与

  • db.collection_name.createIndex({name: 1}, {unique: true});

- dbのバックアップ

  • mongodump -d db_name

- バックアップからの復元

  • mongorestore --drop

- mongodump, mongorestoreのヘルプ

  • mongodump --help
  • mongorestore --help

その他

- コマンド補完

  • tabキー

- JavaScriptの構文も使用できる

  • for (var i = 0; i < 10; i++) { db.users.insert({ score: Math.random() }); }

リーダブルコードを読んだ記録【5つの理念と、50個のテクニック】

f:id:aotree423:20180408173804j:image

リーダブルコードを読んで、個人的に「忘れてはいけない」と思った5つの理念と、「今日から実践しよう」と思った50個のテクニックをテーマごとにまとめました。

5つの理念

  • コードは、他の人が読んで最短時間で理解できるように書く
  • 簡潔さや短さより、読み手への親切さを重視する
  • 他人だけでなく、何もかも忘れた未来の自分が見た時に理解可能なコードを書く
  • コードの整理は、やりすぎて逆に見にくくならないように注意
  • 新しいコードは、なるべく書かない

50個のテクニック

名前(変数名, メソッド名, クラス名, ファイル名)
  • 名前に情報を詰め込む (名前は短いコメント)
  • 英単語はなるべく具体的にする (抽象的: get → 具体的: download)
  • 時間やバイト数を格納する変数の名前には単位をつける (ミリ秒: _ms, キロバイト: _kb)
  • アンダースコア、ダッシュ、大文字に意味を込める
  • 限界値 max_, min_を付ける
  • 範囲指定first_, last_を付ける
  • 包含/排他的範囲にはbegin_, end_を付ける
  • ブール値にはis, hasを付ける
  • get(), size()は軽量アクセサという共通認識があるので、重い処理の命名にはcompute()など重そうな単語を使う
  • イテレータは【i, j, k, iter】などで問題ないが、複数のイテレータがあるときには【配列A_i, 配列B_i, 配列C_i】のようにどのイテレータがどの配列に対応するかが瞬時にわかるようにする
レイアウト
  • 似たコードが並ぶ時は、改行位置を統一する
  • 空白を使ってカンマの位置を合わせるなど、縦の線を意識する
コメント
  • コードを読んで、すぐにわかることをコメントに書かない
  • 優れたコメントは考えを記録する
  • 既知の欠陥にコメントをつける
  1. TODO: あとで手をつける (大きな問題)
  2. todo: あとで手をつける (小さな問題)
  3. FIXME: 既知の不具合があるコード
  4. HACK: あまりキレイじゃない解決策
  5. XXX: 危険! 大きな問題がある
  • 定数にコメントをつける (定数を設定した背景)
  • 質問されそうなことを予測してコメントで回答しておく
  • ファイルの全体像を理解するためのコメントを先頭に入れる
  • 関数の全体像を理解するためのコメントを関数の先頭に入れる
  • コメントを書いた方が良いと感じた際は、変な文章でも書かないより良いので、書いとく(その後、時間があれば改善する)
  • あいまいな代名詞を避ける(2つ以上のの意味で捉えられる表現をしない)
  • よくわからない引数には、インラインコメントを使う (method(/* name: */ aoki, /* age: */ 27))
  • コメントは必要な情報を削らずに、コンパクトな表現方法でかく
制御フロー 
  • 条件式は左側に調査対象(変化する)、右側に比較対象(あまり変化しない)を書く
  • if/else条件は、肯定形を否定形より先に書く (ただし、否定形の条件でも単純で関心を引くものは先に処理する)
  • 単純な条件を先に書く(ifとelseのブロックの距離が近づくように)
  • 関心を引く条件や目立つ条件を先に書く
  • 三項演算子は基本的には使用せず、if/elseを使う
  • do/whileループは条件が最後にあって分かりにくいので、最低1回は実行されるという特徴を残したままwhileループで書き直せるときは書き直すb(ただし、本体をwhileループの前に書くということは冗長なのでしない)
  • 関数から早く返すようにする (return文は複数あって良い)
  • ネストをなるべく浅くするため、ブロックを分割する
  • 直線的に読めるコードを書くことを心がける
巨大な式
  • 説明変数, 要約変数は巨大な式を分割するのに有効
  • ド・モルガンの法則で見やすくなる条件式は変換する
  • DRY原則に従い、冗長は避ける
スコープ
  • スコープは、出来るだけ縮める
  • アクセスは、出来るだけ制限する
  • グローバル変数は、出来るだけ使わない
  • メソッドは、出来るだけstaticにする
  • javascriptグローバル変数は、var付きのローカル変数にするか、クロージャで包んでスコープを縮める
  • 変更しなくてよい変数は、定数にする
無関係の下位問題の抽出
  • 関数の中に、その関数の高レベルの目的に無関係な処理があれば、別の関数として抽出する
  • インターフェースが汚い関数は、ラッパー関数を作りインターフェースをシンプルにする
  • プロジェクト固有のコードから、汎用コードを分離する
ライブラリ
  • 標準ライブラリで何ができるのかを知り、最大活用する
  • jQueryなどデファクトスタンダードなライブラリで何ができるのかを知り、最大活用する
テスト
  • コードを完全にテストする、最も単純な入力値の組合せを選択する
  • エラーメッセージは、バグの発見や修正に役に立つものにする
  • テスト関数の名前は、テストする関数や状況を表したものにする (Test_関数名_状況)
  • テストしやすいように、コードを設計する

1週間ほどで作ったシンプルなWebサービスを公開しました

f:id:aotree423:20180302213213p:plain

(この記事は2018年3月2日に書かれた記事です)

昨年の12月末に会社を退職しました。

前職では、GeneXusという日本では少々マイナーな自動開発ツールを用いて開発を行っており、広く一般的に使われているプログラミング言語を直接書く(プログラミング)ことが少なかったため、次の仕事に就く前に一通り基礎を学び直しておこうとDotinstallを利用してプログラミングやプログラムを動かすための環境の作り方を勉強していました。

今回、その総まとめとして自動開発ツール、フレームワークを使用しないで0からWebサービスを作って立ち上げてみました。(jQueryやSweet alertなどライブラリは使わせてもらいました!)

 

URL: https://wall.aotree.blue 

 

使用した技術

今回使用した技術をまとめました。

マークアップ言語

  • HTML5
  • CSS3

プログラミング言語

プログラミング手法

ライブラリ/オープンソースディレクト

  • Google Fonts (デザイン)
  • Font Awesome (デザイン)
  • SweetAlert (アクション)
  • jQuery (アクション)

データベース

インフラ

開発スケジュール

思い立ったのが10日前で、実際に手を動かした日数は7日程度です。

1日目: ログイン/サインアップ画面の実装 (元々作っていたログイン機能を流用)

2日目: 付箋貼り付け機能の実装 (元々作っていたTo-do listのロジックを流用)

3日目: デザインの実装

4日目: AWSにてWebサーバー、DBサーバーを作成

5日目: データベース、テーブルの作成

6日目: AWSでのHTTPS化に手こずる

7日目: how to use? ページの作成、デザイン最終調整

wallのUI

f:id:aotree423:20180302212853p:plain

壁に付箋を貼れます。

無料版では1つのウォールに100枚までの付箋を貼れます。

(有料版の実装は、落ち着いたらチャレンジしたいと思っています)

wallの使い方の提案

どのように使っていただくかは自由です。

物理的に離れた場所で仕事をするプロジェクトチームの掲示板、家族の伝言板、個人のアイディアメモ、To-doリスト、好きなものリストなどなど・・

例えばこんな使い方を想定しています。

1.開発プロジェクト

f:id:aotree423:20180302232306p:plain

f:id:aotree423:20180302232302p:plain

2.アイディアメモ

f:id:aotree423:20180302232259p:plain

良い使い方が見つかったら、是非「評価とレビュー」のウォールに書き込んでください。

評価とレビュー

wall name: wall@review-1

password:wallopen

wallの登録手順

1. サインアップ画面にて登録

f:id:aotree423:20180302233309p:plain

  • 全て入力必須です
  • wall nameはログインに使用するユーザーidのようなものです。ウォールはいくつでも作れるので、「他のsnsで使っているid@ウォールのテーマ」などはいかがでしょう。(例: aotree423@hougaku-list, aotree423@to-do-list)
  • wall display nameはウォールの左上に表示されるタイトルです。日本語、英語ともに使えます。
  • emailはパスワードを忘れた際、パスワード初期化を行うために使う予定です。(現時点で未実装ですので、パスワードを忘れないようにしてください!)

終わりに

最初から最後まで自分で作ってみることで、専門外であった環境構築なども経験できて勉強になりました。

今後の展望としては、Webサービスのマネタイズについて経験したいので、色々と落ち着いたら有料会員版の追加機能を実装してみたいと思ってます。

読んでいただきありがとうございます。

Atom ショートカットまとめ(Mac/Windows対応)

f:id:aotree423:20171130140605j:plain

(この記事は2017年11月30日に書かれた記事です)

Atomについて、ドットインストールでの学習を修了したため、Mac/Windowsの両OSのショートカットをまとめます。

Atomとは

GitHubが開発した、豊富なパッケージによるカスタマイズが可能な、無料テキストエディタです。

ショートカット表 

f:id:aotree423:20171130193452p:plain

Mac/Windowsの両OSについて、よく使うショートカットをまとめました。

(Atomのバージョンは1.22.1で確認しています)

※ブログ上では文字が小さく、読みづらいかと思いますので、「名前を付けて画像を保存」した後、印刷しての使用をお勧めします。

 

よく見る一覧表は印刷して利用した方が良いと思う理由

こういったショートカット一覧表や区分値表などの「開発中に頻繁に見る必要がある情報」は、必要になる度にウィンドウを切り替えるという方法をとると、

  • ウィンドウの切り替えによる集中力の停止
  • ウィンドウの切り替え時間が無駄
  • ウィンドウを沢山開いていると切り替えが面倒でストレスとなる

等のデメリットがあるため、印刷してPCの隣に置いて、いつでもストレスなく確認できるようにしておくのが効率的かと思います。

f:id:aotree423:20171130144201j:image

Google Fontsの使い方

f:id:aotree423:20171126105531p:plain

(この記事は2017年11月29日に書かれた記事です)

今回は、無数のおしゃれFontを無料簡単に利用できるサービス、Google Fontsの使い方を紹介します。 

 

自身ポートフォリオサイトを、HTML, CSS, JavaScriptの練習を兼ねて作成していたのですが、フォントについてはオシャレ感のあるWebフォントを使用したく、数あるWebフォントの中でも個人利用/商用利用問わず無料で使用できるGoogle Fontsを使ってみました。

Google Fontsとは

Googleが提供するWebフォントのオープンソースディレクトリで、全てのフォントが個人利用/商用利用問わず無料で使用できます。

Google Fonts利用手順

1.Google Fontsにアクセス

f:id:aotree423:20171126145157p:plain

Google Fontsにアクセスします。

https://fonts.google.com/

2.好みのフォントを探す

f:id:aotree423:20171125222248g:plain

好みのフォントを探し、右上のプラスボタンを押下して追加していきます。

  • 例文は好みのテキストに変更することができる(APPLY TO ALL FONTSを押下)
  • 右サイドバーのフィルターで好きなカテゴリのフォントのみを表示できる
  • 複数のフォントを追加できる

3.太字や斜体を使用する場合の設定をカスタマイズ

f:id:aotree423:20171126013459g:plain

太字や斜体など、複数のウェイトやスタイルを持つフォントを追加した場合、使用するウェイトやスタイルにチェックを入れます。

4.HTML/CSSGoogle Fontsの取り込みを指定

f:id:aotree423:20171125124933g:plain

ページ下部の黒いバーをクリックして追加したフォントの確認画面を表示します。

この後、フォントの取り込み方法を指定することで、ウェブサイトでGoogle Fontsが使用できるようになります。

HTMLファイルにリンクタグで追加する方法(4-1)と、CSSファイルに@importルールを追加する方法(4-2)がありますので、順に説明します。

4−1.HTMLファイルにリンクタグを追加

f:id:aotree423:20171126011356g:plain

STANDARDのタブに、<link>タグによるフォントの取り込み方法が書かれていますので、コピーしてHTMLの<head>タグの内部にペーストします。

4−2.CSSファイルに@importルールを追加

f:id:aotree423:20171126011404g:plain

@IMPORTのタブに、@importルールが書かれていますので、コピーしてCSSの@charsetルールの次の行にペーストします。

※ @charsetルールがない場合、先頭にペースト

終わりに

f:id:aotree423:20171126144641p:plain

今回、私は自分のポートフォリオサイトに「Poiret One」というフォントを使用しました。

f:id:aotree423:20171126142333g:plain

ちなみに右サイドバーでカテゴリのチェックを全て外すと、「No fonts found!」というメッセージとともに、顔文字が表示されます。

遊び心があっていいですね。