初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。「プログラミングの時は何を使う、これで練習する」といった感じで決めておけば、プログラミングも楽になるかと思います。今回は「最初はコレ!」といった感じで選抜してみました。初心者の方向けの記事となります。Link学んだプログラミングやソースコードを管理・反復練習するプログラミングに関する書籍を何冊も読みこんで理解しても、何回ノートを見返しても、普段検索とコピペで済ませていると、いざとなったら全然プログラミングできないです。筆者は泣けるほど記憶力が悪いので、骨組みや意味(なぜ、この記述が必要なのか)を理解したあとに、超基本的なプログラミングのソースコードを白紙の状態から「思い出して、書いて、全部消して」を定期的に何度も繰り返すことが必要でした。記憶の復元って「理解」と「思い出す」ことを継続することが大事なんですね。そんな時に便利だと思ったのが、有名なCodePen。ブログなどに貼り付け可能な無料のコードシェアサービスですが、有料にすることでプライベートモード(非公開)でコードを管理することができます。外部リソースの貼り付けも簡単。自分でテストサーバを準備しなくてもよいし、練習にもってこいです。普段スニペットを作っておいて、サイト構築時に組み込んだりプログラミングの練習に利用したり。非公開で使いたかったので年$75で有料プランにしています。アイコン>Settingでソースコードに使うフォントやタブサイズ、テーマカラーを変更できるのが嬉しい。Testing」で各ブラウザのテストが出来るようになっています。これがあると普段テストしておいて、いざという時にすぐ使えますね。cdn(コンテンツ・デリバリー・ネットワーク)を利用することでファイル一式をダウンロードしなくても(自分のサーバに置かなくても)、codepenやサイトに組み込むことができます。(プロゲート)」や「CODEPREP」などもありますが、ligさんが詳しく解説してくれています。文部科学省プログラミング用語プログラミングの専門書を読むときに理解しにくい(全体が繋がらない)のは、用語を派生して覚えていないからかもしれません。メソッドという言葉が出てきたら「オブジェクトは関数・文字・数字などが入ってる部品で、オブジェクトの状態や属性はプロパティ、オブジェクトの処理をまとめた命令がメソッドだったっけ」とか色々派生しながら思い出すとよいかもしれません。こちらはプログラミング用語一覧です。SkyForEveryなどがあります。ミツエーリンクスエディタを用意するプログラミングに慣れている人はVimを使われている人が多いかと思いますが少々癖があり初心者には使いにくいかもしれません。Textを推そうと思います。覚えておきたいショートカットキーとインストール後に入れておきたいパッケージです。Vimはサーバ上のファイルを直接編集できるので、習得する必要がありました。プログラミングの練習をする時はマウスを使いたくないので、やはりVimを使って練習してます。いうことでおすすめは、この3つのエディタかな。推奨パッケージ一覧です。Console」でコンソール(エディタの一番下に表示される)を開き、コピーしたテキストを貼り付けたら、パッケージのインストールが出来るようになります。P」>「install」で以下の文字列を検索・選択してエンターを押せばインストール完了です。Qiitaダミーを素早く埋め込むemmetがあれば「lorem」を使って短縮記法で素早くダミーテキスト(仮の文字)を入力できます。codepenでもemmetが使えますので活用できます。lorem3:単語3つ分のダミーテキスト出力lorem*5:spanで囲んだダミーを5回出力p*3>lorem:pタグで囲んだダミーを3回出力ul>lorem5*4:li(ダミー入り)を4回出力emmetをまだ使わないのであれば以下。ダミー画像や写真を外部リソースによって埋め込めるサービスや素材一覧です。モックアップ、スニペット作成時に時間短縮できるのでブクマしておきましょう。Ipsum短縮記法「emmet」で最初に覚えておきたいものemmetは少ない文字数でhtml/cssをマークアップできるツールです(エディタにインストールして使います)。最初は短縮記法を使わずにしっかり覚えるのがよいですけど、この辺りの記法を覚えておくと素早くコーディングできます。DocumentationWeb標準を理解・復習するオレオレルールにならないように、Webページを制作するうえでの国際的な「共通のルール」を勉強します。W3C(ダブリュースリーシー)はhtmlなどで使われる技術の標準化を進めるために創られた団体で、Web標準(ウェブひょうじゅん)はW3Cが「世界中で使える技術ですよ」とお墨付きを出しているWeb関連の共通ルールのことです。最初に読んでおいて欲しいルールです。アクセシビリティやメンテナンス性もよくなりますので必ず目を通しておきます。変更点メディア・クエリ文法チェックツール検索エンジンやコンピュータが効率よく情報収集・解釈できるように正確なタグを使ってコーディングすることをセマンティックといいます。html5ではアウトライン(機械から見た見出し・本文など文章の階層構造)を定義できる幅が増え、文章の構造をより明確に伝えることができるようになりました。アウトラインを確認したいときはこちら、有名かと思いますが一応。Service命名規則の理由を覚えておくWebサイトを作る現場では、様々な職種の人たちが集まっていて作業を分担するのでルールがないと記述がバラバラになりメンテナンスも悪くなります。自分勝手なマイルールで周囲に迷惑をかける前に、統一された命名規則を最初に覚えておきたいところ。ファイルサイズ節約・可読性向上のため短いクラス名を使ったり、色定義は三桁で記述したり、誤作動が起こらないようにエンコードはUTF-8(BOM無し)を使うなど規則には何かしら理由があります。理由を知ることで忘れないようになるし、後輩にも教えやすくなると思います。一貫性のあるWebサイトを構築するために制作のルールがきちんと明記された規則を作るか、既存のものを読んでおきます。Guide短期間でコーディングが出来るようになりたい人向けのプログラミング教室を始めました。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2014/08/4メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。前回(あのサイトでさりげなく使われていたCSS小技集)の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりとCSSのみ2016/08/1CSSのみで実現させる、すごいアニメーションやフレームワークまとめCSSのみでおしゃれなアニメーションを付与できるフレームワークやライブラリ。新しいものだけでなく、少し古いけど使えそうなものも掘り起こしてまとめました。画像2016/04/25これは凄い!Web制作が捗るモーフィング系の最新スニペットまとめある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。コメントデータの処理方法の詳細はこちらをご覧ください。