Webの勉強前に知ったら楽できた4つの効率化

インプット&アウトプットも大事だが・・・

プログラミングは、作れてなんぼ。インプットも大事だが、手を動かして作品をつくっていくことも大事だと思う。

けれど、情報系あるあるだと思うが、何故動かないかわからない!なぜ動いてるかわからない!ってなる時があるはず。

Web制作は、機能でなくページ・サイトの制作が目標だし、動いてなんぼ。

一心不乱にテキスト読む⇒作る⇒読む⇒ググる⇒・・・でもいいが、あらかじめ知っておくと勉強がはかどる部分をご紹介。

以下4つは、どれも勉強とかしなくても何となく始められる。

CSS, HTML, javascript(jQuery)のどれを勉強してる人にも、どれを勉強してない人にもオススメできる部分を選びました。

コストもかからないので、読んだついでに試してみてほしい。

①効率良くエラーを調べる方法(ブラウザがプログラミング環境!)

プログラミングなんて、1作るのに10エラーを繰り返す作業。同じ10回エラーするなら、素早くエラーしたい。

エラーを繰り返すのに最適な環境がブラウザです!

言語を学ぶ前に、まずはブラウザでの編集・確認を知ってればよかったと…

デベロッパーツールと呼ばれる機能で、どのブラウザでもついてます。Chromeが良いよ!っていう人が多いですが、自分は長年愛用してるFirefoxでやってます。

詳しい使い方は、参考リンクのページなど色んなのがあります。

起動は一瞬「F12」を押すだけ。

ブラウザでF12を押すと、デバックツールが出てくる。ATOMの代わりにメモ帳でプログラミングしてもいいから、デバックツールだけは使いたい!それぐらい便利。

便利1:コードと動作を同じ画面で確認できる

コード書くと、大抵は一回で動かない(笑

泣けるw

とりあえずは左上の「虫眼鏡」で作ってるヶ所を選択!コードを表示できる!

便利2:失敗したコードをいじってリアルタイムに確認

コードとブラウザ画面とを見て確認。変かな?って思った所を編集!

↓デバックツールの使い方

便利3:コンソールから、エラーや変数の値を確認できる

特にjQuery, Javascriptの時は、必須。というか参考書の最初に大抵書いてある。

↓すごく理解しやすかったです。

便利4:コンソールから、新しくコマンド!

なくても何とかなる!ターミナルみたく使えて便利。

便利5:ネットワークから、POST/GETのエラー確認

POSTやGETで通信してると、どこが原因のエラーか原因探しの迷宮に迷い込みます。。。

そんなときにもデベロッパーツール!神!

↓エラーコードの意味とか

さて、ステータスコードは大まかに分けて5つに分けられます。

  • 100番台 : 処理中
  • 200番台 : 成功
  • 300番台 : リダイレクト
  • 400番台 : クライアントエラー
  • 500番台 : サーバエラー

便利6:ヘッダー情報からPOST/GETのエラー予想

ここも最初は使わないかも?自分は、BASIC承認とクロスサイトスクリプティング、メールPOSTの時に初めて使いました。

②無料で良いサンプルコードをゲットする方法

作るのもいいが、一人で全部作るのには限界が。&だんだんと慣れてくると、作るよりも⇒既存のプログラム(ライブラリなど)を使って、作ることが多くなる。

だから、パクリは良いこと!(公開するときは問題ありですが)

ちゃんと動くプログラムを見て、動かして、いじってみて、学ぶ方が、新しい学びも多いはず!

なので、サンプルコード収集は大事!けど、いきなりGitHubに登録!とかいっても慣れないうちは、Gitの使い方を勉強せざるをえない。。。

なので、コード公開サイト!

サンプルコード公開サイト一覧

とりあえず、この2サイトを使えば、jQuery, HTML, CSSでつくるプログラムはだいたいサンプルがある。いっぱい!

自分で作ったサンプルプログラムを公開して管理している人も多いので、商用レベルから、単純な動作理解用のサンプルまで、すべてここで足りると思う。

③片手間で良い仲間・先生にであう方法

オンライン学習!動画で通勤・通学中に勉強しやすい

本とパソコンと自分と、3つで完結する伝統的お勉強スタイルもいいけれど、

学校みたく、先生や仲間がいる方が気軽に始めた場合でもモチベーション維持ができる。

自分は使っていないので、

など、参考に探してみるといいかも。オンラインで個別指導や掲示板活用など

経済的に余裕をもって勉強できるなら、お金払って習うのが一番早いとは思う。

仲間探し!オフ会へ行くべし!

情報系の進路の人でないと、まず情報系に興味のある人とであうのも難しい。パソコンオタクは世の中的にはマイノリティ。パソコン使ったことなくても社会人になれるご時世。。。

個人的にはオフ会がオススメ。

SNSとかでもすぐ探せるし、COMPASSとかを見ればすぐ近場で同レベルの人の勉強会を発見できる。

世間的な、オフ会・勉強会へのイメージはいまいち分からないが、参加者はだいたい自分と似たような人種が多い(笑)類ともはかなり当たっていると思う。

いきなり、DQNやパリピの集まりになることもないし、マルチとかにも当たらない・・・と思う(少なくとも自分はそんな集団に当たったことない)

④何も変えずに作業速度を3倍速に!

ずばりチートシート

チートシート。カンペ。

受験では辞書と単語帳を併用するように、参考書とチートシートは両方あると便利。(たとえ下手でした笑)

「チートシート」で検索すれば種々様々なシートがGetできる。1枚によく使うものだけを凝縮してあるので、1,2枚印刷して持ってると便利。

↓検索も面倒な人は以下のリンクにいっぱいまとめてある。

勉強のお供にひとつは準備しておくと、会議とか講義の途中に読んだりできるw

チートついでにショートカットキー!

ショートカットキー(キーマップ)は、キーボード入力と一緒で、そのうち慣れる!

ショートカットキーのチートシートも沢山あるので、チートシート片手にやるとそのうち慣れる。

Windowsもっと 早く知りたかったショートカットキー4選
Windowsユーザーなら覚えておくと絶対に便利なショートカット4種! これだけで、毎日作業時間が10分は短くなるはず!

関数やタグなど一覧表のチートシートと、ショートカットキーのチートシート、

それぞれ1枚ずつ壁に貼るなり、ノートや手帳に貼るなりすると、ふとした時に使って自然と覚えやすくなります。

まとめ:上記4つは遅かれ早かれ使う

たぶん絶対に使うことになると思う。導入コストもないし、始めの頃から使った方が効率的!

理解力の向上は、無駄の削減でカバーしよう。

個人的にはエディタ変えたり、ブラウザ変えたり、パソコンの設定いじったりするよりもこれらの方が効果あったなーと思います。

やってみると、きっと良かったなって思える4つでした。

Advertise

シェアする

フォローする