記事更新日: 2018年06月01日

Webワラベンチャー

KITASHIRAKAWA_Chiyuri
ホームページを作るコツを メモっておくぜ☆

目次 - Table of contents.

戻る - back

1. プログラムの綺麗さを判定してくれるツールを揃えてから、書けよな☆
- Stop the production! Get a machine that evaluate for your coding at first.

1.1. HTML コーディングの綺麗さを判定する、2つのサイト☆
- You get help! HTML coding conventions are 2 sites.

KITASHIRAKAWA_Chiyuri
ググるキーワードは coding conventions とか、 validation とか、 lint だぜ☆
そんな単語どうやって知るのかというと、友達を増やせだぜ☆
201806web1.png

W3C Markup Validation Service 良い - Good!

KITASHIRAKAWA_Chiyuri
まずは W3C(ダブリュー・スリー・シー)で☆
ここは 無難に、最近の標準に沿っているか 外れているかのチェックだけしてくれるぜ☆
201806web2.png

Another HTML LINT5 Gateway すごい - Great!

KITASHIRAKAWA_Chiyuri
次は Another HTML LINT5 Gateway の DATA タブで☆
その書き方 間違えてんじゃないの、という ミス多発地帯のありがちポイントを W3C より踏み込んで 指摘してくれるぜ☆
- Check pitfall!
戻る - back

1.2. JavaScript コーディングの綺麗さを判定する、3つのサイト☆
- Mistakes run away from me! Java Script coding conventions are 3 sites.

KITASHIRAKAWA_Chiyuri
JSLint、JSHint、ESHint の3つのサイトでやるといいんだが、
JSLint は、厳密すぎるんで JSHint と ESHint を使えだぜ☆
201806web3.png

JSLint 厳密 - Strict! オタク向け - Otaku! 仕事も忘れてはまる - Crazy!

KITASHIRAKAWA_Chiyuri
JavaScriptの仕様書読んでる?と まるで煽られているかのようなチェッカー。
気に入らないスペース1個あるだけで 指摘してくる。
指摘にいちいち対応していると 海馬が カッカッ と燃えてくるが
使い方も やさしくないし、これはスルーしてもいいだろう☆

はまりだすと こいつからもう離れられない☆
201806web4.png

JSHint すごい - Great!

KITASHIRAKAWA_Chiyuri
一番仕事を助けてくれるチェッカー。
よしでけた、と思った完璧なコードにも 変数間違って使ってるだろ、とか容赦なく 指摘を入れてくる。
実際助かるのはこれ☆ JSLintほど煽ってこないし☆

使い方は やや調べないといけないかもしれない☆
201806web5.png

ESLint 良い - Good! 将来性がある - Hope!

KITASHIRAKAWA_Chiyuri
ぬるい☆
現代の主流チェッカー。
細かいこと言うなよ、と融通の利くチェッカー。
逆に言うと 重要なんだったら自分で設定しろよ、というセルフサービスでもあり
JSHint が指摘してくることを指摘してこない☆ 無理くね☆?

使い方は やさしいし、普段使うのは これで十分だろう☆
戻る - back

1.2.1. 小ネタ "use strict"; ☆

KITASHIRAKAWA_Chiyuri
全部をチェックしていては 終わらない、そんなときの対策として
チェックしたい function の先頭行に "use strict"; と書く、という
ブロックの中だけチェックする、という方法もある☆
function exampleFunction() {
    "use strict";
    
    // ここに処理を書く
}
KITASHIRAKAWA_Chiyuri
これで、その function のブロックの中に 推奨されないコードの書き方があれば
ブラウザがエラーにして 動かないようにしてくれるぜ☆
戻る - back

1.3. CSS コーディングの綺麗さを判定する、1つのサイト☆
- Get the W3C mark! CSS coding conventions is 1 site.

201806web6.png

W3C CSS Validation Service 良い - Good!

KITASHIRAKAWA_Chiyuri
W3C(ダブリュー・スリー・シー)で十分だろ☆
スタイルシートが難しいのは、コーディングというより
サイト全体で行われる カスケードの部分なわけだし☆
戻る - back

2. デザインを考える前に、ありきたりなWebサイトを作って Webサイトの作り方を覚えろだぜ☆
- Stop make according to your planing at first! Make plan according to your abilities at first.

2.1. Bootstrap 4 より選ばれるデザインを考えろだぜ☆ じゃなかったら Bootstrap4 使え☆
- Think about wonderful things than bootstrap 4. Use it if you can not imagine it.

201806web7.png

Bootstrap 4 Tutorial すごい - Great!

KITASHIRAKAWA_Chiyuri
レスポンシブ・デザインとか プログラムするの嫌だろ……☆
ブートストラップ4(フォー)を使っておけば勝手に対応してくれるぜ☆
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
KITASHIRAKAWA_Chiyuri
CDN を使えば HTMLのヘッダーにファイルパスを埋め込んでおくだけで Bootstrap4 は使える☆
戻る - back

2.2. Bootstrap4 より選ばれるデザインに自信があれば W3.CSS スタイルを使え☆ 初期状態で固めなルックスだが機能が多い☆
- Use existing ones when you want to do a common design.

201806web8.png

W3.CSS Tutorial 良い - Good! ガチ - Multifunction

KITASHIRAKAWA_Chiyuri
W3C自身も スタイルシートを作っている☆
bootstrap4 が初期状態で見た目が やわらかいのに対して、
できることは W3C の方が圧倒的に多いのが魅力的だが、なんかルックスの雰囲気が固い☆
レイアウト・デザインやグラフィックを改造する自信があるなら こっちを選べだぜ☆

絵心なければ Bootstrap4 使えだぜ☆

bootstrap4 と W3.CSS は 打ち消しあって どっちかしか効かないんで、選べだぜ☆
            <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        
KITASHIRAKAWA_Chiyuri
CDN を使えば HTMLのヘッダーにファイルパスを埋め込んでおくだけで W3.CSS は使える☆
KITASHIRAKAWA_Chiyuri
bootstrap4 と W3.CSS の良いところ取りできればいいんだが、わたしには やり方が わからなかったぜ☆
戻る - back

3. Ajax☆
- Omake.

201806web9.png

jQuery Get Started 良い - Good!

KITASHIRAKAWA_Chiyuri
書くとこないんで ここに書くが、
Ajax を使いたいなら、 CDN を使えだぜ☆
インターネットにつながない環境で必要な場合は、jquery.min.js みたいな名前の jQueryファイル をローカルPCにダウンロードして使えだぜ☆
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
KITASHIRAKAWA_Chiyuri
CDN を使えば HTMLのヘッダーにファイルパスを埋め込んでおくだけで jQuery は使える☆