こんにちは、@_sgtnです。未経験者編に続いて、次は初心者編です。
milkcocoaを使っているユーザーをじーっと観察すると気付くのが、milkcocoa本体ではなくCSS/JSでつまづくユーザーが多いということです。
この記事がきっかけで、milkcocoa開発時のハマりが回避できれればと思います。
HTMLとCSSで何か作ったことのある方向け
HTML/CSSチョットデキルなアナタには、サイトに動きをつけることを覚えてもらいましょう。
これから少しプログラミングチックになってきますが、**「何が分かっていて、何が分からないか」**をひとつづつ確実に分けていけば、大体の問題は必ず解けるようになっています。頑張りましょう！
##ドットインストール:JavaScript入門
JavaScriptの基本的な内容を網羅した動画です。動画が嫌いな方がいるかもしれませんね。そんな方はLIG様がオススメです。
全部を完璧にやる必要はありません。分からなくなったときに辞書に当たるように調べ直すほうが良いです。
それよりも大切なことは、何故作りたいのか、どのように作りたいのか、何を作りたいのかをちゃんと知っておくことです。何かを楽しんで作ることが最大の学びです。
##ノンプログラマーのためのjQuery入門
jQueryという便利グッズがあります。より少ないコードでより多くのことをやってしまおうという粋なツールです。少し難しい専門用語も出てきますけど、ひとつひとつGoogleで調べて押さえていく積み重ねが大切です。知識と知識を蜘蛛の巣のようにつなげて理解しましょう。
jQueryで、簡単に「クリックしたときにHTMLタグに文字を挿入」「ページを開いたあとにアイテムが滑らかに並ぶ」などの表現力の高いことが可能になります。
「ブラウザの要素を選んで操作する」という行為をコードで書くとどうなるか、その対応関係をしっかり理解しましょう。
ズルいデザインテクニック2013
pplogのken_c_lo様の徳の高いスライドです。ちょっとした手間でサイトの見た目を良くするありがたいテクニックがまとめられております。
ちょっとした陰の使い方、ちょっとした背景素材の選び方。webっぽいデザインとは何かを考え直すのによい教材となっております。
JavaScriptで少し動きのあるサイトを作ったことのある方
素晴らしい！そのままmilkcocoaを触り初めてしまえば良いのですが、プロダクトをもっと良いものとするために知っておくと良いかもしれない情報を載せておきます。
モダンCSS設計の解説サイトまとめ
少し大きなサービスが作りたくなったときの話をしましょう。あなたは他のエンジニアと組んでサービスの完成度を高めなければなりません。相手は自分よりも経験があって緊張するかもしれませんね。
このとき重要なのが、**「保守性・可読性」**という考え方です。あなたしか解読できないコードを相方が修正するとき、無駄に時間がかかってしまいますね。事前にある程度書き方を統一しておくことが、どれほど多人数開発をスムーズに進めるでしょうか。
エンジニアの生産性はこういった点からも測ることができるので、しっかり覚えましょう。
JavaScriptのエスケープあれこれ
HTMLのinput要素やtextarea要素は、悪意あるハッカーからの格好の標的です。scriptタグの中でJavaScriptが利用できることを狙って、プログラムを仕込んできます。新しいサービスを出したらとりあえずと言わんばかりに仕込んできます。なので、<と>の記号を無効化しないといけません。そのためにエスケープが必要です。
また、一言にセキュリティというとイメージがぼやけますが、「セキュアである」ということは、ある意味では「自分のサービスが予期せぬ挙動をしないこと」と言い換えることもできます。ユーザーがせっかく作ったデータを削除されたりしないように、適切に処理を行いましょう。
そのためにmilkcocoaでは**セキュリティルールと許可Origin**でデータを守れるようにしています。
Vue.jsから手軽に始めるJavaScriptフレームワーク
最後に、Vue.jsというGUIを作るのに便利なフレームワークを紹介します。大きなサービスを作って行くと、ファイルの置き場所や、コードを書く場所など、ある程度ルールを決めておかないと大変なことになります。せっかく苦労して作ったサービスが、これ以上機能を追加しようにも、一箇所触ると他の場所でバグが出て触りようがない状態になると悲しいですからね。
Vue.jsはデータバインディングという変化するデータを便利に表示する機能だけをサポートしているので覚えることが少なめなので、手軽に始められます。まずはHello worldから初めて、milkcocoaと組み合わせたtodoアプリやchatなどを作ってみましょう。
流行のプロダクトを二つ組み合わせて開発するなんて素敵ですね！どんどんコードを書いてライバルに差をつけましょう！
まとめ
milkcocoaは開発コストを下げるためだけのプロダクトじゃなく、簡単であるが故に今まで思ってもやらなかったことを実現可能にしたり、ほぼリアルタイムの高速通信が当たり前なのでブラウザ間でイベントが共有できているかのように見えたり、多彩な表現が可能なプロダクトでもあります。
JSとCSSをマスターして、milkcocoaのポテンシャルを引き出してくれるユーザーが増えることを願っています！！