jQueryの記述方法（超超基本）
「jQueryはビューで様々な動きをつけることができるのでいいんですよー。
ほら、こうやって文字をフェイドアウトさせたり、フェイドインさせたりできていいでしょ？」
うおおーーかっこいい！！ただ、それって難しいんじゃないんですか？
「そんなことないですよー。」
またまた〜、そんなこと言っちゃって...
...本当にそんなに難しくなかった。
書き方はjsに似ているけどわかりやすい！！
早速だが、下に記す。
$('セレクタ').メソッド（引数）;
これが基本だ。
例えばhtmlで
<div class = "fade">こんにちは</div>
と記述したとしよう。
今回fadeクラスの中身をフェイド・アウトさせたいのでメソッドはfadeOutと記述する。
１秒でfadeクラスの中身を消したいので引数で指定してあげる。するとこのように記述する。↓
$('.fade').fadeOut(1000);
簡単だ！！
次はユーザーがクリックとかをした時にビューが反応する方法を記す。
$('セレクタ').イベント名(function(){
//イベント発生時に実行したい処理
});
例えばクリック（イベント）した時に文字を消したい時...
<div id = "hide-string">文字を隠す</div> <p id = "string">文字を隠すボタンをクリックすると消えちゃうよ</p>
上のようなhtmlにしたがってjQueryのコードをこのように記述する。
$('#hide-string').click(function(){
$('#string').hide();
});
書きやすいでしょ？？
最後に補足したいのはjQueryでclassを指定した場合はセレクタのクラス名の前に"."(ドット)をつける。
idを指定した場合は"#"（シャープ）をつけるという違いがあることに注意しよう!!
See you guys :)
Rubyって何？ってググって一番目の英文記事を訳してみた
Hey, guys :)
"what ruby can do"でググって一番上に出てきた記事をなんとなく翻訳してみた。
1.Make an app that texts you every time Brad Pitt tweets.
1.ブラッド・ピットがいつでも貴方につぶやくアプリを作れる。
2.Scrape any website on the Internet with only a few lines of code (seriously, it’s soooo easy).
2.たった数行のコードラインでどのウェブサイトからも情報を抽出できる（本当に超簡単！）
3.Play Hackety Hack.
3.Hackety Hackで遊べる。
4.Spend your days stockpiling Gems.
4.たくさんのGemsで日々過ごせる。
5.Make fancy client websites with awesome CMSes like Radiant CMS.
5.かっこいい顧客のウェブサイトをいかしたCMS(Content Management System)を（例;Radiant CMS)作れる。
*CMS = コンテンツを管理するシステム / Radiant CMS = Ruby on Railsで開発された少人数向けのCMS
6.Do test driven development like the RSpec badass you are.
6.RSpec野郎のようにテスト駆動開発ができる。
*RSpec = クラス、メッソドが正常に動くかテストできる機能をRailsに取り入れられるもの。
7.Teach your kids Kids Ruby.
7.Kids Ruby を自分の子どもに教えることができる。
8.Write lines of code that actually read like English (almost): 5.times {print “Ruby is awesome!”}
8.コードラインを英語文のように記述できる。
9.Quickly deploy an app prototype using Heroku.
9.Herokuを使って素早く見本のアプリをデプロイできる。
10.NEVER WORRY ABOUT A MISSING SEMI-COLON. EVER. AGAIN.
10.セミコロンを入れ忘れるような不安はもうない！
11.Become a Ruby Warrior.
11.Ruby戦士になれる。
12.Build a Twitterbot that tweets sweet things to people having a bad day.
12.嫌な日を過ごした人たちへ優しい言葉をかけるツイッターBotを作ることができる。
13.Become a RailsGirl.
13.Rails少女になれる。
14.Gain more masculine confidence, courtesy of Paul Dix & Thundergod.
14.もっと男として自身をもち, Paul Dix & Thundergodの作法を身につけることができる。
(Paul Dix & Thundergodって何だろうw)
15.Work on Basecamp, Shopify, Urban Dictionary, Slideshare, White Pages, Hulu, Twitter, or one of the thousands of websites built with Ruby.
15.Rubyで設計されたBasecamp, Shopify, Urban Dictionary, Slideshare, White Pages, Hulu, Twitterといった超巨大企業で働くことが出来る。
16.Make an average salary of $102,000! That’s the average salary of a Ruby software developer according to Indeed.com’s salary calculator. Whaaaat.
16.Indeed.com'sの調査によるとRubyソフトウェア開発者の平均年収は$102,000！なんだっってーー!
17.Work with a programming language that is designed to make YOU happy.
17.プログラム言語と仕事するのは貴方の人生を幸福にする。
リンク
17 Awesome Things To Do With The Ruby Programming Language | Skillcrush
うーーん所々うさんくさいんだけど、英語にするとなぜか説得力があるように聞こえる...
日本語に慣れすぎてしまっているんだろうか?ネイティブ並みに英語が理解出来れば同じようにうさんくさいって思うのだろうか？
bryanのwebエンジニアと英語の修行はまだ続く...
"Ruby" クラスメソッドとインスタンスメソッドの書き方（例示）
Hey, guys !!
クラスメッドとインスタンスメソッドの書き方が自分の中でごちゃごちゃしてしまう為、メモの様に下に記す。
参考になるようならしてね:)
まずはクラスメソッドの主な書き方３つ...
①
class Foo
def self.bar
puts 'class method'
end
end
Foo.bar # "class method"
②
class Foo
class << self
def bar
puts 'class method'
end
end
end
Foo.bar # "class method"
③
class Foo; end
def Foo.bar
puts 'class method'
end
Foo.bar # "class method"
①はクラスメソッドがわかりやすく記載されている。 ②はrailsでよく書かれている！ ③は自分ではあまりお目にかからないですが使われているらしい...
次はインスタンスメソッド！！
①
class Foo
def baz
puts 'instance method'
end
end
Foo.new.baz # "instance method"
②
class Foo
attr_accessor :baz
end
foo = Foo.new
foo.baz = 'instance method'
puts foo.baz
③
class Foo; end
foo = Foo.new
def foo.bar
puts 'instance method'
end
Foo.new.baz # "instance method"
うーん色々な書き方があるんだね
英語の重要文法①ー述語動詞、準動詞ー
今日はプログラミングのことから離れて英語の重要だと思うルールを数ある中から一つ紹介しよう。
こんなルールがあるんだって気付いたら英語の表現が広がるし、リーディング能力も上がる。
webエンジニアなら「stackoverflowの記事をちゃんと読みたい！」とか「世界にむけて英語で質問がしたい！」..と思ったりするよね？
今日紹介したいのは動詞に関する事である。
述語動詞と準動詞
聞いたことはあるかな？
聞いたこと合ってもどういう意味かわからない人は結構いるはず。
私も最近まで知らなかったし聞いたこともなかった気がする..。
まずどういうものか特徴を挙げてから例文で確認してみよう。
ーーー述語動詞の特徴ーーー
①必ず現在形か過去形
②述語動詞がなければ文が成り立たない(つまり不可欠)
③１つの文で１つしか使えない（文とは主語＋述語）
④動詞の働きしかしない
ーーー準動詞の特徴ーーー
①形容詞、副詞として働く
②準動詞がなくても文は成り立つ
③１つの文で何回でも使える
[例文 A]
He drinks coffee. 訳） 彼はコーヒーを飲む。
クソみたいな例文ですいませんｗ
この例文の動詞はdrinksのみ。
述語動詞の特徴①②③④全てに当てはまってるよね。
当てはまらない場合次のような文になってしまう。
He coffee.(文が成り立たない)
He drunk coffee.(動詞が過去完了形。意味不明になってしまう。)
[例文 B]
He drinks boiled coffee in the smelling room. 訳） 彼は沸騰した（された）コーヒーを臭い部屋で飲む。
Heってもしかして上島竜兵さんのことかな？
準動詞 がboiled 、 smellingの２つ出てきました。
この例文ではboiledはcoffeeを修飾し、smellingはroomを修飾する形容詞である。
準動詞は２つ以上あっても問題ない。準動詞がなかったら.."He drinks coffee in the room." 成立するでしょ？
簡単に説明したが、なんとなく述語動詞と準動詞の特徴について理解できたかな？
長文になるとこれは成立しないのではないか..と思うかもしれない。
大丈夫！！ 例外はあるが８割の英文にて通用する！！
最後になるが述語動詞と準動詞の特徴を知る最大のメリットは...
述語動詞発見することで難しい長文であってもなんとなく理解することが出来る！！
なぜなら述語動詞は文の要になるからだ。
rails "before_action"で記述を簡素化しよう！
Hey, guys!
railsでコードを書いていて同じコードが重複してしまうことってあるよね？？
なるべく重複したコードは避けたい。。
そんな時に使えるbefore_actionで簡素化してみよう！
よくある重複する例としては
@article = Article.find(params[:id])
findを使って記事をArticleモデルのデータベースから取り出してくる時。
def show @article = Article.find(params[:id]) end def edit @article = Article.find(params[:id]) end def update @article = Article.find(params[:id]) end def destroy @article = Article.find(params[:id]) end
４つのアクション内で同じものが重複してしまっている...
そんな時に使えるのがbefore_actionだ。
とりあえずコードの一番下に重複した部分をメソッドとして追加してみる。
def set_article @article = Article.find(params[:id]) end
これを記述した後にbefore_actionを同ファイルの上の方に記述。
set_articleメソッドを記述すること。
before_action :set_article
これでOK! それでは重複した部分を削除しよう！
before_action :set_article def show end def edit end def update end def destroy end def set_article @article = Article.find(params[:id]) end
こうするとshowアクションとかが実行される前にset_articleアクションが読み込まれる。
また、onlyでアクションを指定することも出来る！
before_action :set_article, only:[:show, :edit, :update, :destroy]
簡単でしょ？
Have a wonderful Christmas!
My boss, technuma san, advised me how to spend the Christmas in best way.
"Just write codes ;)"
See you :)
railsでMVC作成の超簡単な流れ
Hey, guys:)
さて早速ですがターミナルでrailsアプリの基盤であるMVCを作ってみよう！
まずはターミナルでコントローラーから作成！
$ rails generate controller home top
homeはコントローラー名でtopはアクション名だよ！
topアクションのビューファイルも生成されてるよ！
次はモデルとデータベースを作ってみよう！
$ rails generate model Blog title:string content:text
でモデルを作成！
Blogがモデル名でtitle:string / content:text= カラム名:データ型 だよ！
とどめに
rake db:migrate
でデータベースを作っちゃえ！
力が有り余ったので英訳してみた
Lets's create MVC with terminal which is foundation of rails application.
First of all, type below.
$ rails generate controller home top
"home" is the name of controller and "top" is action.
If you want to create the model and database, you can do it easily as below
$ rails generate model Blog title:string content:text
"Blog" = name of database, title:string / content:text = column:Data Type
rake db:migrate
The code of above creates the database of your cool application.
英語のライティングってクソ難しい..
bye guys, see you next time : - )
モバイル版とPC版のビューの違いを@media screenで指定＊CSS＊
こんにちは、エンジニア見習いのブライアンです。
HTML/CSS/JSの知識はまだまだですが、とあるwebアプリの開発中機能のビューを担当させていただくこととなりました。
利用者様は主にスマホから利用していただいている為、モバイル版向けにビューを作成すればいいんだなと取り組みはじめました。
なんとかそれなりにいい感じのビューが出来上がってきた頃、PC版も考慮するように指示を受けました。 何か嫌な予感がする...と思いPC版に変換するとやはり今まで作成していたビューが人に見せてはいけないぐらい歪んでしまいました...
width,height,margin,padding等全てがモバイル版しか考慮しなかった為、画面の大きさが何倍も違うPC版だとそのようなことになるのは当然です。
そんな私を救ってくれたのは@media screenというコマンドです。
実際にどのようにして使うかというと...
@media screen and (max-width: 703px){
.content{
margin: 100px;
}
}
上記はブラウザのwidthが703pxまではcontentクラスのmargin:100pxとして読み込まれます。widthが704px超えてしまうと上記のコードは読み込まれません。
@media screen and (min-width: 704px) and (max-width: 1055px){
.content{
margin:180px;
}
}
上記の様に記述すればブラウザのwidthが704px以上1055px以下の時はcontentクラスがmargin:180px読み込まれます。 ブラウザがそれ以外のwidthだと読み込まれません。
この利便性に感謝です。
