アキラッシュ

見たものとかやったこととか

Codecademy で git コースやったらめちゃくそ分かりやすかった話

やはり実践型はいい。単に自分が不勉強すぎたともいう気がする。
というわけで、最近Code Academyにはまりまして、なかでもgitコースがとても楽しくしっかりノートをとったので更新です。

www.codecademy.com

これです。全部英語でした。
というわけで、別に自分が英語できるわけではないのですが、ノートも全部英語で取っています。ブロークンです。
未来の自分が読めるかも定かではない……記録までに、です。

To get started

git init on directory you want to use for develop.

Structure

  • working directory
    use git diff file to know your changes

git add file
git checkout (HEAD) to restore files from repository to working directory

  • staging area
    change1, change2, ...
    git status to see add log
    git reset (HEAD) to delete add from status list

git commit (-m “message or comment”)

  • repository
    git log to see commit log
    git show to see commits. HEAD is most recently commit.
    git reset commit-SHA to clear commits after selected commit (You can see commit-SHA in git log result.)

Branch

It’s the git structure over the structure above.
- master branch
git merge branch-name to merge commits of sub branches.
git branch -d branch-name to delete the sub branch.

git checkout branch-name to switch branches (branch-name should be one you want to switch to)

  • sub branches (any name you like)
    git branch branch-name to create a new branch. They inherit all changes in the master branch.

Remort repository

  • origin repository

git clone repository-name clone-name
git merge origin/master to get main things of project
git push origin branch-name to push your work to origin (not repository name but branch name)
git remote add origin URL

  • remote repository
    git fetch to follow changes of origin repository.
    git remote -v to see a list of repository related the origin

今後の学習事項

  • リモートリポジトリとブランチの扱いの違いがわからん(リモートリポジトリにもそれぞれマスターブランチがある?)
  • で?「プルリク」はいったい何だ???
  • forkってなに?

まとめ

ひとりで使うぶんには問題なさそうな感じですね。まだ実戦で使ってはないですけど、今まで全然わからなかったのが多少すっきりしてすごく楽しかったです。

CodecademyではWeb系の言語関連で他にも様々なことができます。
私が終えたコースは今の所

  • Make An Interactive website (jQueryでスライドとか作れます)
  • Learn the Command LIne (コマンドラインで簡単なファイル操作ができます)
  • Learn Git (今回のやつ)
  • Deploy Website (これは正確には終えてない……Jekyllで静的サイトを作り、github.ioで公開し、AWS独自ドメインを取得してgithubの方で設定するとこまでやります。ドメイン取得のところで課金イベント(AWSに)が発生します。自分はログイン情報がうまく共有できなくて途中でインタラクティブ箇所をスルーしました。)

多少エイゴを理解しようとする胆力が必要ですが、それなりに実用に耐えそうなかっこいいものをスマートに触れるので初心者の方にはおすすめです。

それでは。

HTML5/CSS3モダンコーディング読み終わった

とりあえずWebデザイン関連でちゃんと体系的に知識が欲しい、と思い、その前段階としていいから本をシリーズ第一弾です。

www.shoeisha.co.jp

こちらの本を読み終えたので、新しく知ったことをまとめてみようと思います。
と言っても、ほとんど私にとっては新しいことだったんですが……

所要期間:約3日

わかったこと

  • コーディングの模範的な流れ
  • CSS3で装飾、アニメーション効果をつける基礎
  • 擬似要素について
  • ベンダープレフィックスについて
  • コーディングの考え方について
  • overflow, clearfix, box-sizing や などにまつわる細々としたテクニック

まず前提として、私はWebサイトを作るにあたって、きちんとした勉強をしてきていません。8年ほど前に趣味で展開されていたような無料テンプレートのカスタマイズからはじまり、携帯サイトを繰り返し作成し、CSSフレームワークGoogle先生に頼りながら利用することで、なんとなくマークアップがわかってきた(気になっている)状態です。 お里が知れる……

なのでそもそも体系的な知識がありませんし、ベースがスタート地点であるIE7の時代で止まっています。

というわけで、初心者+浦島太郎というわけのわからない状態で読んだのですが、読んでいて非常に楽しかったです。

コーディングでの模範的な流れ

HTMLマークアップ

CSSベースコーディング(リセットとか、全要素共通の設定とか)

CSS文字関連設定 ↓ 細かいコーディング

模範的というか、「こういう流れで思考するとこうなるのか」という感覚がつかめました。いつも、いままでの制作物はたいてい趣味の延長であることも相まって、とても適当にコーディングしていたんですよね……

ちゃんと設計して、後のことも考えて計画的にコーディングする流れをつかんでおくのは非常に重要だなと思いました。

CSS3で装飾、アニメーション効果をつける基礎

この部分、砂が水を吸うような気分になって一番楽しかったです。

今回とても便利に利用されているなと思ったのは主にこちら。

  • border-radiusプロパティ(角丸)
  • transformプロパティ(変形、移動)
  • transitionプロパティ (なめらかな変化)

括弧内はとりあえず私が理解しているそれぞれの機能です。どれも便利すぎて感動しました。 角丸なんてあんなに面倒臭かったのに……(テーブルと画像を使う方法しか知らなかった)

この3つがあれば大抵のシンプルな装飾はつくれますし、単純なものならアニメーション効果も割と思いのままだなと思いました。CSS3なのでまだ完璧に使えるわけではなさそうですが、今後活用していきたいです。

擬似要素について

::before, ::after擬似要素について。

クラス付加することで、クラス内の前後にコンテンツを挿入できる擬似要素です。知ってはいた、というか見かけたことはあったのですが、よくわからないのでスルーしていたこれまできちんと調べてこなかった要素です。しかも私がWebサイトを作っていた最初のピークの時代(IE7)には存在してなかったっぽいですね。

本を読んでわかったんですが、これ、 めちゃめちゃ便利 ですね。怖い。今までスルーしていたのが怖い。つらい。
本書のサンプル内でも随所に仕様されていました。便利すぎるので今後はちゃんと活用していきたいです。

ベンダープレフィックスについて

ブログとかで最新機能の紹介記事を読んでいたら必ず見かけるこれ、ベンダープレフィックス。

存在はもちろん知ってましたが、どういう風に使って、どういう風な判断でつけるのか詳細に紹介されていてようやく理解しました。

これで、ベンダープレフィックスの自動付加機能や諸々のCSSメタ言語のありがたみがよりわかってきますね。まだほとんど使ってませんけど。

コーディングの考え方について

何度も書いてますがまともに勉強してないし実務経験もないので、コーディングにまつわる考え方など自己流以外知りようもありません。そんな中で本書に書いてあったものがこちらでした。

グレースフルデグラデーション vs プログレッシブエンハンスメント

響きはかっこいいんですが何度も書くのは面倒なこの2つ

  • グレースフルデグラデーション
    最新機能により対応しているモダンブラウザに合わせてデザインを考え、それに対応していないレガシーブラウザでは最低限表示が崩れないように対応する、という方針。

  • プログレッシブエンハンスメント
    上の逆で、レガシーブラウザに合わせてデザインを考え、あとからモダンブラウザで採用可能な機能でちょっとした装飾を追加するという方針です。

個人で作る分にはどっちでも良さそうですが、作るWebページで想定するユーザによって使い分ける必要がありそうですね。

シングルクラス vs マルチクラス

「基本的な仕様は同じだけれど、特定の要素だけ異なるクラス」を作るときに、どのように実装するかという話です。カテゴリによって色が違うボタンを作る場合などですね。

  • シングルクラス
    HTML側で1つのクラス指定で済むよう、CSS側で同じである基本的な仕様も複製し、基本のクラスと、それにそっくりだけれど特定の要素が異なるクラスを作ります。

  • マルチクラス
    HTML側には複数のクラス(基本となる要素を指定したクラスと、変化をもたらすクラス)を指定し、CSS側ではまず基本のクラス、そして特定の要素だけ上書きする小さなクラスを作ります。

前者で行く場合、HTMLのクラス指定がごちゃつかないというメリットがありますが、同じ記述が幾つも生じてCSS側が煩雑になるデメリットがあります。が、もちろん対策も生まれていて、これを改善するのがメタ言語の@extend。ベースクラスを1行で継承してしまうので煩雑になりません。そういう風に使うのか……なるほど便利だ……

でも、たとえばJSで特定の要素だけ変化を加える場合などは後者のマルチクラスに揃えておいた方が楽そうですし、こちらもサイトの完成図をどのように想定するかで使い分けると良さそうだなと思いました。

overflow, clearfix, border-box や などにまつわる細々としたテクニック

場当たり的に使っていたけど実はよくわかっていなかったプロパティと、わかっていたけどその発想がなかった便利テクニックと、全然知らなかった便利テクニックです。

  • overflow
    overflow: hidden; というのがよく出てくるので存在は知ってましたし、役割はわかっていましたが、hidden以外のプロパティや使い所をいまいち理解していませんでした。なかでもoverflow: auto; は便利ですね。要素がはみ出た時にだけスクロール可能にしてくれる(大抵のブラウザで)設定で、よく見ると色々なところで使われていました。

  • .clearfix
    これはプロパティの話ではなくて、「float対策で作っておくと便利なクラス」です。正確にはafter擬似要素を利用して、floatを指定した要素の親要素に設定することで回り込みを解除します。これがあれば余計な要素をHTMLで作ることも必要ないので、とても便利そうです。

  • box-sizing
    これは知らなかったプロパティです。と思ったらCSS3の新要素だったらしいのでそりゃ知らないわ……通常、CSSの width や height プロパティは、その要素のborder、paddingの内側のエリア(content-box)の大きさを指定するものですが、このプロパティを使って box-sizing: border-box; を指定すると、なんということでしょう、ボックスの border の外側までを width, height の対象エリアとして認識してくれます。
    これによって直感的に padding を内側と認識したまま width 指定ができるので、とても便利です。

思ったこと

上に書いたこと以外にも、大きな要素についての知識から考え方の漠然としたものまで、たくさん学び取れた気がします。

なによりもそれによって、今後Webで知識を得るための最初の壁を崩した気分です。基本知識がないとコード読めませんしね……仕様書もとっつきにくいし……

あと数冊これ系のクックブック的な本を読んで、もう少し専門的な仕様に踏み込んだ勉強をしていこうかなと思っています。CodePenなどのサイトを本当の意味で活用できる様になりたい……コード読めるようになりたい……

次はSVGについてもう少し知りたいな。
そんな感じで、あしゅ/ A.sheでした。

js do.it のHTML5実力テストを受けてみた

こんにちは、あしゅ/ A.sheです。

Webデザイン系ブログの過去記事を片っぱしから読んでみよう企画を個人的にやっているのですが、そんな中でこちらの記事

www.webcreatorbox.com

を読んで面白そうだったのでやってみました。

第二回全国統一HTML5実力テスト

jsdo.it

こちら。情報が古そう!!!良く見たら2012年のものみたいですね。 やってみた成績はこちら。

惨憺たる結果 ですね。最後のスマートフォンコースだけはなぜか規定値を超えたらしく、某大手企業の面接申し込みリンクが表示されました。

当たり前ですがまだまだ知らないことがたくさんあるナー

Hello, World.

"Hello, World."を何気なくSNS記事のタイトルにしたら、見も知らぬプログラマーの方から陽気にメッセージが飛んできたことがあります。

こんにちは。 Ashe, あしゅという名でTwitterをやっている者です。

twitter.com

Twitterでは基本的にプログラミングやテクノロジー関係で見たもの聞いたこと、ついでにそのときTLで見た気になる話題についてぶつぶつつぶやいています。

そもそも勉強記録を兼ねてWeb上にアカウントを作ったのですが、勉強を本格的にしていくにあたり、もう少し人様に見せられる文章を書くこと、そしてマークダウン記法に慣れることを兼ねてブログを作ってみました。
未来の自分と、同じように初歩から勉強している人たちに想いを馳せて、日々読んでみた本や気になったことを更新していけたらと思っています。

っていうか、誰?

私はWeb業界を夢見るしがない大学生です。怪しい者ではありません。
一応情報系に掠る学部に所属し、関連する研究をし(ようとし)ています。

できること

……の、超初歩 ※ここ重要

今まで作った最も大規模なものは、Bootstrapを使ったごくごく簡単なレスポンシブシングルページサイトです。

興味があること

Webデザイン、インタラクション、VRに興味があります。

最近やってること

Web系のプログラミングスキルを磨きたい

Prog-8でよさそうなコースを一通りやってみました。
※ 途中で一部有料になってしまったので無料でできるところまで。
※ HTMLはできるレッスンがさすがに簡単だったので進めてません。

f:id:akirask:20160419175952p:plain

とにかく情報が欲しい

Webの情報ならブログでしょ、というわけで、いくつかのサイトを片端から読ませてもらってます。

Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。

ICS MEDIA - Webデザイナー/デベロッパーの必読メディア

Webクリエイターズマニュアル

それからGIGAZINEやWiredなどのニュースサイト。facebookの最近の動向はとても面白いです。

もちろん本も読みたい

積読しているのは、図書館で取り寄せたものを含めて5冊くらい…………。
速読を身に着けたい。

こんなかんじで、あまり今まで勉強熱心だったというわけではありませんが、これからなにかもっと頻繁にここに投稿するネタができたらいいなあと思っています。
markdown記法、慣れてきました!

Remove all ads