プログラミングやコーディングを学習したい人に役立つツール

• 作成：2015/11/16
• 更新：2016/08/01
• Web制作 >

初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。

また「プログラミングの時は何を使う、これで練習する」といった感じで決めておけば、プログラミングも楽になるかと思います。今回は「最初はコレ！」といった感じで選抜してみました。初心者の方向けの記事となります。

エンジニア速報は Twitter の@commteで配信しています。

学んだプログラミングやソースコードを管理・反復練習する

プログラミングに関する書籍を何冊も読みこんで理解しても、何回ノートを見返しても、普段検索とコピペで済ませていると、いざとなったら全然プログラミングできないです。筆者は泣けるほど記憶力が悪いので、骨組みや意味（なぜ、この記述が必要なのか）を理解したあとに、超基本的なプログラミングのソースコードを白紙の状態から「思い出して、書いて、全部消して」を定期的に何度も繰り返すことが必要でした。

記憶の復元って「理解」と「思い出す」ことを継続することが大事なんですね。

そんな時に便利だと思ったのが、有名なCodePen。ブログなどに貼り付け可能な無料のコードシェアサービスですが、有料にすることでプライベートモード（非公開）でコードを管理することができます。通常のエディタのように更新＞プレビューも必要なく、normalize.css や外部リソースの貼り付けも簡単。自分でテストサーバを準備しなくてもよいし、練習にもってこいです。

普段スニペットを作っておいて、サイト構築時に組み込んだりプログラミングの練習に利用したり。非公開で使いたかったので年$75で有料プランにしています。

アイコン＞Settingでソースコードに使うフォントやタブサイズ、テーマカラーを変更できるのが嬉しい。

さらに、管理画面の「Change View」＞「Open on CrossBrowser Testing」で各ブラウザのテストが出来るようになっています。これがあると普段テストしておいて、いざという時にすぐ使えますね。

cdn（コンテンツ・デリバリー・ネットワーク）を利用することでファイル一式をダウンロードしなくても（自分のサーバに置かなくても）、codepenやサイトに組み込むことができます。

• jQuery - Google Developers
• Bootstrap CDN
• FontAwesome CDN

オンライン学習でプログラミングを学ぶ

プログラミングをオンライン上で学べるツールに「Progate (プロゲート)」や「CODEPREP」などもありますが、ligさんが詳しく解説してくれています。プログラミングツールとしては使いやすい方かと思います

• [使い方] コーディング初心者必見！ゲーム感覚で学べるプログラミング学習サイト「Progate」「CODEPREP」 | 株式会社LIG

他のオンラインプログラミング学習ツール

• Codecademy
• CodeStudy
• プログラミン | 文部科学省

プログラミング用語

プログラミングの専門書を読むときに理解しにくい（全体が繋がらない）のは、用語を派生して覚えていないからかもしれません。例えば本にメソッドという言葉が出てきたら「オブジェクトは関数・文字・数字などが入ってる部品で、オブジェクトの状態や属性はプロパティ、オブジェクトの処理をまとめた命令がメソッドだったっけ」とか色々派生しながら思い出すとよいかもしれません。

こちらはプログラミング用語一覧です。読み方はプログラミング用語の読み方集 - SkyForEveryなどがあります。

• マンガで分かるプログラミング用語辞典一覧：CodeZine（コードジン）
• JavaScript超初心者によるJavaScript入門講座
• Web制作用語集 | 用語集 | ミツエーリンクス

エディタを用意する

プログラミングに慣れている人はVimを使われている人が多いかと思いますが少々癖があり初心者には使いにくいかもしれません。他にAtomやリアルタイムで編集できるBracketsなど色々ありますが、自動保存、ショートカットキーの使いやすさと軽量さなどから、やはりSublime Textを推そうと思います。覚えておきたいショートカットキーとインストール後に入れておきたいパッケージです。

2016/07/14追記：ちなみに筆者が現在使っているエディタはATOM / Sublimetext / Vim です。Vimはサーバ上のファイルを直接編集できるので、習得する必要がありました。またプログラミングの練習をする時はマウスを使いたくないので、やはりVimを使って練習してます。ということでおすすめは、この３つのエディタかな。

SublimeText 推奨パッケージ一覧です。最初にInstallation - Package Controlのページから文字列（import urllib.～文字全て）をコピーしてエディタメニューの「View > Show Console」でコンソール（エディタの一番下に表示される）を開き、コピーしたテキストを貼り付けたら、パッケージのインストールが出来るようになります。

インストールが完了したら、ショートカット「Ctrl + Shift + P」＞「install」で以下の文字列を検索・選択してエンターを押せばインストール完了です。

• Emmet：短縮記法
• BracketHighlighter：タグ・クォーテーションの開始と終了をハイライト
• Can I Use：対応しているブラウザを確認できる
• Google Search：エディタから直接ググれる
• Open URL：URLをAlt+ダブルクリックするとブラウザで開く
• ConvertToUTF8：Shift_JISで書かれたファイルの文字化け防ぐ
• HTML5
• IMESupport：日本語IME
• Japanize：日本語化
• Package Control：パッケージ管理
• SFTP：FTPツール
• WordPress
• Sass

エディタ ショートカットキー一覧

• Sublime Text 3 - starlod.net
• Brackets
• Atom - Qiita

ダミーを素早く埋め込む

emmetがあれば「lorem」を使って短縮記法で素早くダミーテキスト（仮の文字）を入力できます。codepenでもemmetが使えますので活用できます。

• lorem3：単語３つ分のダミーテキスト出力
• lorem*5：spanで囲んだダミーを5回出力
• p*3>lorem：pタグで囲んだダミーを3回出力
• ul>lorem5*4：li（ダミー入り）を４回出力

emmetをまだ使わないのであれば以下。ダミー画像や写真を外部リソースによって埋め込めるサービスや素材一覧です。モックアップ、スニペット作成時に時間短縮できるのでブクマしておきましょう。

• [写真] PlaceIMG
• [画像] Placehold.jp
• [画像] DummyImage
• [動画] Mazwai
• [文章] Lorem Ipsum

短縮記法「emmet」で最初に覚えておきたいもの

emmetは少ない文字数でhtml/cssをマークアップできるツールです（エディタにインストールして使います）。最初は短縮記法を使わずにしっかり覚えるのがよいですけど、この辺りの記法を覚えておくと素早くコーディングできます。

• Tab：末尾でtabを押すと、コード展開
• lorem：ダミーテキスト
• ()：グループ化
• []：属性
• ^：上の階層に上がる
• *：繰り返す
• >：入れ子
• {}：テキストを入れる
• !：html5 雛形
• meta:vp：ビューポート
• link:css
• link:rss
• script:src[common.js]：jsへのリンク
• Ctrl+Shift+.：Dom移動
• Ctrll+Shift+,：Dom移動
• !>h1+article>header>h2+p^section>h3+p：アウトラインの例

• [デモ] Emmet Documentation

Web標準を理解・復習する

オレオレルールにならないように、Webページを制作するうえでの国際的な「共通のルール」を勉強します。W3C（ダブリュースリーシー）はhtmlなどで使われる技術の標準化を進めるために創られた団体で、Web標準（ウェブひょうじゅん）はW3Cが「世界中で使える技術ですよ」とお墨付きを出しているWeb関連の共通ルールのことです。最初に読んでおいて欲しいルールです。アクセシビリティやメンテナンス性もよくなりますので必ず目を通しておきます。

• W3Cの仕様書等の文書の日本語訳集
• [日本語訳] HTML5勧告
• HTML5 における HTML4 からの変更点
• メディア・クエリ

文法チェックツール

検索エンジンやコンピュータが効率よく情報収集・解釈できるように正確なタグを使ってコーディングすることをセマンティックといいます。

html5ではアウトライン（機械から見た見出し・本文など文章の階層構造）を定義できる幅が増え、文章の構造をより明確に伝えることができるようになりました。html5 アウトラインを確認したいときはこちら、有名かと思いますが一応。

• HTML 5 Outliner
• The W3C Markup Validation Service

命名規則の理由を覚えておく

Webサイトを作る現場では、様々な職種の人たちが集まっていて作業を分担するのでルールがないと記述がバラバラになりメンテナンスも悪くなります。自分勝手なマイルールで周囲に迷惑をかける前に、統一された命名規則を最初に覚えておきたいところ。

ファイルサイズ節約・可読性向上のため短いクラス名を使ったり、色定義は三桁で記述したり、誤作動が起こらないようにエンコードはUTF-8（BOM無し）を使うなど規則には何かしら理由があります。理由を知ることで忘れないようになるし、後輩にも教えやすくなると思います。

ともあれ、一貫性のあるWebサイトを構築するために制作のルールがきちんと明記された規則を作るか、既存のものを読んでおきます。

• [参考] 新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
• Google HTML/CSS Style Guide

短期間でコーディングが出来るようになりたい人向けのプログラミング教室を始めました。

プログラミング教室の詳細を見る