【初心者】ドットインストールでjavascriptを二時間で一通りやってみて詰まってわからなかったところを補完してメモ
無名関数
関数の定義の仕方は二通り 1. 普通のやり方
function greet(){alert("hello");} greet();
2.無名関数
var greet = function(){alert("hello");} greet();
即時関数で変数を囲う
即時関数...無名関数を定義して即座に実行する
ローカル変数にすることで他人のコードに影響を与えないようにする
(function(引数){ 式挿入 })();
ループ内にif文の中のcontinue
ループ処理の途中で処理をさせたくないものをif文で囲みcontinueすることで回避することができる。
タイマー処理
setInterval
前の処理が終ったか考えずにすぐに処理を行う
setTimeout
前の処理が終わったかどうかを考えた後に処理を行う ループではsetTimeoutが良く使われる
タイマーを止めるときはif文の中にclearTimeout(引数)で終了させることができる。
<script>
/*
タイマー処理
setInterval
setTimeout
*/
var i = 0;
function show() {
console.log(i++);
var tid = setTimeout(function() {
show();
}, 1000);
if (i > 3) {
clearTimeout(tid);
}
}
show();
</script>
配列の作り方
大カッコをつかう[]
var score = [100, 300, 500];
配列の中の配列
var m = [ [1, 2, 3] [4, 5, 6] ]; console.log(m[1][1]); //5
javascriptのオブジェクト
名前と値のペアがグループ化されている それぞれのペアのことをプロパティと呼び、名前のことをプロパティ名と呼ぶ
呼び出し方は二通り
- 変数の呼び方のように大カッコ[]で囲いプロパティ名
- ドットで繋げて呼び出す
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> /* オブジェクト 名前と値 */ var user = { name: "taguchi", // プロパティ score: 80 }; // console.log(user["name"]); // console.log(user.name); user.score = 100; console.log(user); </script> </body> </html>
プロパティの値に関数を用いる(無名関数を用いることが可能)
オブジェクトのプロパティの値に関数が来た場合その関数のことをメソッドと呼ぶ
メソッドの中にオブジェクト内のプロパティにアクセスが可能
下記の様にthis.◯◯として利用する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> /* オブジェクト 名前と値 */ var user = { email: "taguchi@gmail.com", // プロパティ score: 80, greet: function(name) { // メソッド console.log("hello, " + name + " from " + this.email); } }; //console.log(user["email"]); //console.log(user.email); //user.score = 100; //console.log(user); user.greet("Tom"); </script> </body> </html>
組み込みオブジェクト
組み込みオブジェクトとは...javascriptが元々用意してくれているオブジェクトのこと
Stringオブジェクトを使ってみる
下記のように、文字列リテラルから文字列オブジェクトと同様に書き下すだけで、javascript側が文字列オブジェクトを利用したいんだなと理解してくれるので、そのまま文字列オブジェクトを利用することができる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> /* 組み込みオブジェクト - String - Array - Math - Date */ // var s = new String("taguchi"); var s = "taguchi"; // 文字列リテラル console.log(s.length); console.log(s.replace("t", "T")); console.log(s.substr(1, 3)); </script> </body> </html>
※組み込みオブジェクトである、Arrayオブジェクトやその他も同様
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> /* 組み込みオブジェクト - String - Array - Math - Date */ var a = new Array(100, 300, 200); // var a = [100, 300, 200]; console.log(a.length); // unshift -> array <- push // shift <- array -> pop a.push(500); console.log(a); a.splice(1, 2, 800, 1000);//削除したいとき、その後追加したいに利用 console.log(a); </script> </body> </html>
DOM
DOMとはwindowオブジェクトのこと(document object modelのこと) ブラウザ処理についてjavascriptから実行することが出来る ※ブラウザにより処理が変わるので注意が必要
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>見出し</h1> <p id="msg">こんにちは！</p> <script> /* */ // console.dir(window); // console.log(window.outerHeight);//windowの高さを得る // window.location.href = 'http://dotinstall.com';//他のページに遷移 // document - 今開いているページ // document object model (DOM) </script> </body> </html>
DOMの操作
DOMを操作するにはhtmlのツリー構造が重要
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> <style> .myStyle { font-weight: bold; border: 1px solid gray; } </style> </head> <body> <h1>見出し</h1> <p id="msg">こんにちは！</p> <script> var e = document.getElementById('msg'); e.textContent = 'hello!';//eのtextを変更する e.style.color = 'red'; e.className = 'myStyle';//eのstyleを変える /* body p text */ //bodyの中のp要素の中にtextを仕込む var greet = document.createElement('p'), text = document.createTextNode('hello world'); document.body.appendChild(greet).appendChild(text); </script> </body> </html>
イベント操作
getElementById('id')
指定されたidの要素を取得することができる
target.addEventListener('type', function)
type...対象とするイベントの種類をあらわす ex.'click'など listener...指定されたタイプのイベント発生時に通知を受け取るオブジェクト。基本は関数
全体として
DOM以降の#22〜#24が重かった。基本的な使い方を理解することができたので、あとは実際に作りながら、他の情報を参考にして理解を深める
参考URL
zshとoh-my-zshとカラーテーマでCentOSの見た目をかっこ良くする
まずはカラーテーマをカッチよくしましょう。
まずはカラーテーマをインストールします。
https://github.com/baskerville/iTerm-2-Color-Themes
上記githubからzipをダウンロード
サイトの下の方のPreviewsを見て 気に入った色のテーマをキメます。 (個人的にはthayerがオススです)
itermを開き、
Preferences>Profiles>Colors>Load Prosets>Import...
でお気にのテーマをインポート
再度
Preferences>Profiles>Colors>Load Prosets
を開くと、カラーテーマが選択できるようになってます。
ヨカッタネ！さっちゃん！
zshってそもそも何？
zshとはZ shellの略。 Unixのコマンドシェルの1つである。 通常はbashってのを使ってるけど、そういうシェルの色んなのをいいとこ取りしてます。プラグインもあるから拡張すると便利っぽい
まあ、一応今んトコ大丈夫っぽいけど、内部的なアレなので自己責任でオナシャス。 zsh は sh, ksh, csh (誰が使うの?) のエミュレーション機能を持っていて、 それを切り替えるのが組込みコマンド emulate です。 上記の理由から普通のシェルコマンドを打つとハマることが大いにあるらしいので注意ですね。
oh-my-zshとはそもそも何？
zshを簡単に設定してくれる便利なやーつ
zshをインストールする
zshの圧縮ファイルをダウンロードしてtarで解凍、そしてインストール
yum -y install zsh
oh-my-zshをインストールする
サーバ上のフォルダの権限がちゃんとしてないとエラー起きるっぽいので注意
$ git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh $ cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc
$ vim ~/.zshrc 8 ZSH-THEME＝”wedisagree”
上記のように変更
以上で、
$ zsh
コマンドを打つことでzshに入ることができ、
$ exit;
で出ることができます。
SlackのCEOに聞いた三つの質問の答えが人と人のコミュニケーションの問題について捉えていて良かった
Slackは昨今飛ぶ鳥を落とす勢いのチームコミュニケーションツールだが、そのSlack社のCEO、Slack社CEOのStewart Butterfieldの考え方が、正しすぎて良かった。
三つの質問は
1.なぜSlackはこんなに人気なのか？ why is Slack so popular?
2.どんな新しいことに取り組んでいるのか？What new things are you working on？
3.Slackに変化をもたらし続けますか？Are you bringing other changes to Slack?
上記の三つ
2,3の答えについては特に思うことは無かったが特に1の答えについて。
1.の答えに二つのポイントを答えている。 一つは透明性が高いこと。つまり、いつでも他の人が何をしているかわかるということ。
二つ目に全てのコミュニケーションがデジタルの世界で行われているということ。
つまり、全てが可視化されている。
人と人とのコミュニケーションの問題って結局上の二つのポイントに集約されていると思う。 何を考えているのかわからないという透明性が無いこと、 あるいは、雰囲気や曖昧な記憶などといった不可視な世界で行われていること。
だからこそ、エンジニアの世界や、チームという一つの利益追求をするべき組織の中では透明性があり、
可視化可能な世界でのコミュニケーションが求められているし、
それができないとちょっとあの人あれだよね的な不可視な世界での戦いが更に奥行きを増していき最終的には崩壊という未知を歩んでしまうんだなあと思った。
http://www.technologyreview.com/news/532606/three-questions-with-slacks-ceo/
気をつけます。
railsとcentOS・vagrantで開発環境を作っていたら早速ハマった。
ERROR: Error installing rails:invalid gem: package is corrupt, exception while verifying: undefined method `size' for nil:NilClass (NoMethodError) in /home/vagrant/.rbenv/versions/2.1.5/lib/ruby/gems/2.1.0/cache/thread_safe-0.3.4.gem
cakePHPをやっていて、 昔railsチュートリアルでやったあれってこういう意味だったのかとか、 あれってこうなってたよなあ という気づきがあってもう一度railsで何かサービスを作ってみようと思い立って開発環境を構築し始めたら早速ハマった。
centOSをvagrantに突っ込んでvagrant up。 rbenvやらなんやりを使ってrubyをいれたりgemしたりなんだりかんだりして、 後railsだけっていう状況で以下。
gem install rails --version 4.1.8 16:24:23
ERROR: Error installing rails:
invalid gem: package is corrupt, exception while verifying: undefined method `size' for nil:NilClass (NoMethodError) in /home/vagrant/.rbenv/versions/2.1.5/lib/ruby/gems/2.1.0/cache/thread_safe-0.3.4.gem
bundleからインストールを試みるも失敗。
これは。。。何だと思って、一度vagrant destroyかまして 今度は基本的なサーバーに入れるべきファイルを入れてから同じ手順で行ったら成功した。 原因自体は何か調べてないけど多分、基本的なファイルをvagrantにyumって無かったから。
開発しよう!!と思い立って環境構築でハマるとぐぬぬってなるのは仕方ないけどなんだかなあ〜
gitコマンドまとめ
gitコマンドまとめ
リポジトリの作成
$ cd <リポジトリを作成したいディレクトリ> $ git init
リモートリポジトリの複製をローカルに作る
$ cd <リポジトリを作成したいディレクトリ> $ git clone <複製したいリポジトリのURL>
変更があるファイルの表示
$ git status
特定のファイルの変更内容を表示
$ git diff <確認したいファイル>
変更点の保存
$ git add . $ git commit -m "<コミットメーッセージ>"
ログの閲覧
$ git log
ブランチについて
ブランチ情報の表示
$ git branch <ブランチ名>//<ブランチ名>の作成 $ git branch//現在のブランチ一覧
ブランチの切り替え
$ git checkout <ブランチ名>
ブランチの履歴を確認する
$ git show-branch
マージ
merge...現在のブランチに別のブランチの作業内容を取り込む
$ git merge <変更点の取込元ブランチ>
変更内容の一時退避
一時退避
$ git stash save //あるいは $ git stash
スタッシュ状況の一覧
$ git stash list
スタッシュの消去
$ git stash drop <消したいstash名>
変更の復活
$ git stash apply stash@{0}
リモートが最新でローカルの作業にrebaseしたい時
$ git pull --rebase origin <ブランチ名>
git flowコマンド
git flowの初期化
$ git flow init $ git flow init -d //すべてをデフォルト設定に //developでの作業に移る
featureブランチの作成とチェックアウト
$ git flow feature start <ブランチ名>
remoteリポジトリへのpush
$ git flow feature publish <ブランチ名>
作業を始めるためのpull
$ git flow feature pull origin <ブランチ名>
機能が完成しブランチを終了する時
$ git flow feature finish <ブランチ名> //上記は以下と同様 //git checkout develop //git merge feature/<ブランチ名> //git branch -d feature/<ブランチ名>
フィリピンのビールとネットは天国か
今一ヶ月くらいフィリピンのセブ島にいます。 日本から南に何十キロだけど、時差は一時間日本より遅いだけです。 すごく暑いというのを想像していたけど実際はそうでもなく、雨季っていうのもあるけど生ぬるい感じがずっと続いてる。
ビールが安いフィリピンという国
フィリピンに来て多分いちばん驚いたことは、ビールに氷を入れるという文化について。 日本でそんなことしたら、先輩に殴られても仕方ないけど、こっちは普通に皆入れるし自分も入れてる。 多分冷蔵庫とかが無い店とかが氷いれるっしょみたいなノリで入れはじめたんだと思うけど、実際氷入れても意外とうまい。 度数は普通のビールで6%くらいだから氷をいれてちょっと溶けてるくらいが丁度いいのかもしれないと思ってます。 サンミゲルという会社(日本のキリンビールが株式の43%を持っている)のビールがほとんどでコルトってビールもあります。 ただただビールが馬鹿みたいに安い。一リットルのビールが230円くらいで帰るから。ひとり500円くらい出せばかなり酔っぱらえる。 呑兵衛にとっては天国みたいな街だなと。
やっぱりネットは,,,,,
IT系の企業が進出してみたり、ネット界隈の有名な人が結構行ってるからインターネット回線とかブリブリにやっちゃってると思ってたら、 すごく細いです。 日本でいうところの回線を仕切ってる会社がPLDTっていう会社(NTTとdocomoが合わせて株式の20%くらい持ってるらしい)があるんだけど それはまあまあ速いらしいのですが。。 というのも実際沢山の人が同じ回線使うので遅くなっちゃうんですよね。それは仕方ないけどネ。 ほとんどのノマドっぽい日本人たちは町中のカフェでポケットワイファイ的なLTEを使ってますがそれも日本のLTEと比べると それもちょっと遅いので皆心の底では何を思ってるのかわからない怖さあるな!!という感じです。 ほんとに速さが必要な時はホテルのカフェのWifiを使うのがおすすめぽいす。
TERRA BATTLE（テラバトル）のダウンロード開始を結構楽しみにしている
TERRA BATTLE（テラバトル）というスマフォのゲームが９月にダウンロードをスタートする予定らしい。
TERRA BATTLE (テラバトル)： Official Trailer - YouTube
パズドラもモンストも白猫プロジェクトもやっていながらピンときていない自分の中ですごいゲームになるんじゃないかと少しワクワクしつつも、期待しすぎて裏切られるのも辛いので自分を抑えている。(聖剣伝説がそうでした。)
坂口博信氏が完全新作RPGとして製作
僕ら世代にとってFF7はストーリーもゲーム性も映像も全てが新鮮だった。FFシリーズの生みの親こそ坂口博信氏。FF7の映画はどうかと思ったけど、いつも既存の殻を破ろうと新しいことをしているのが印象にある。
植松伸夫氏が音楽を担当
同じくFFシリーズの音楽を手がける植松伸夫氏が前編の音楽を担当しているらしい。
公式サイトに行くとテラバトルの音楽を聞くことができた。めちゃんこかっこいい。
ゲーム性が新しくて楽しそう
【TERRA BATTLE】ゲームシステム紹介① - YouTube
パズドラみたいにくるくるやって敵を挟むと攻撃できるっぽい。 パーティ構成や装備、アビリティ(?)とか考えるの楽しそうだし、将棋みたいな戦略性もありそうな内容。
ダウンロード数到達ごとにイベントが既に用意されている
ダウンロードスターターって名づけてあるけど、プロモーション。 すごく真新しい感じではないけど、スマフォゲームみたいにユーザーが増えれば増えるほどイベントを広げていくっていうのはすごく正しい道筋だと思う。 最後にコンシューマー版開発開始っていうのが用意されているのも楽しみ。 協力プレイと対戦プレイ開発、天野絵が楽しみです。
エンディングがある
期待する理由の一番はコレ。 RPGにはストーリーとそのエンディングが欲しいとそろそろ思っている。 無課金でもエンディング行けるように設計されてるそうです。
そんな感じの理由で結構楽しみにしています。 現状のスマフォゲーム界に一石投じる内容であってほしいなあと期待しています。 まあ蓋を開けてみてからのお楽しみですね
事前登録はtwitterをフォローすれば良いだけみたいなので是非
