ツールの使い方

フレームワークとは？開発効率UPに役立つ理由を知っておこう！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

プログラミング用語としての「フレームワーク」という言葉、知っていますか？

「フレームワークを使えばサクサク開発ができるよ」とか「Ruby on Railsを使えば簡単にWebサービスを作れる」といった文脈を耳にしたことがあるかもしれませんね。

「なんとなく便利なものというイメージはあるけれど、実際はどんなものなんだろう？」

そんな疑問に答えるべく、この記事では初心者の方にもわかりやすくフレームワークについて解説します。

フレームワークとは？

まず、フレームワークとは「プログラミングでよく使う汎用的な機能をまとめて使いやすくした枠組み」のことです。

この説明だけではピンと来ないと思いますので、詳しく見ていきましょう。

フレームワークは「お手軽料理キット」のようなもの

よくプログラミングは料理に例えられます。とある「ECサイトを作ること」を「酢豚を作ること」と例えてみましょう。

ECサイトには「ログイン機能」「商品一覧表示機能」「決済機能」等が必要です。（本来はもっといろんな機能が必要ですが今は気にしないでください。）

かたや、酢豚をざっくりパーツ化すると「揚げた豚肉」「一口大の野菜」「甘酢あん」となり、これらを炒め合わせて完成となります。

このように設計書（料理ならレシピ）に基づき全体をいくつかのパーツに分けてそれぞれを作り上げ、組み合わせて完成させるというところが似ていますね。

酢豚をイチから作る場合は「揚げた豚肉」ひとつをとっても、豚肉を必要な分買ってきてカットし下味をつけてから粉をまぶし、高温の油でカリッと揚げて…といった多くの作業が必要です。

最近は忙しい現代人のために「お手軽料理キット」（ミールキットとも呼ばれます）というものがあります。これは料理を作るために必要な分の材料がある程度調理された状態で提供され、最後の仕上げをするだけで完成するという代物です。

酢豚ならば「揚げた豚肉」「一口大の野菜」「甘酢あん」が完成した状態でパック化されていて、あとはフライパンでこれらを炒め合わせるだけですぐに食べられます。

フレームワークはまさにこのミールキットのように「ログイン機能」「商品一覧表示機能」「決済機能」といったパーツがすぐに使える形で提供されていて、開発者はこれらを適宜組み立てていくだけでWebサイトを作ることが可能です。

冒頭の繰り返しですが、改めてフレームワークとは「プログラミングでよく使う汎用的な機能をまとめて使いやすくした枠組み」であるということがなんとなくイメージしやすくなったでしょうか。

ライブラリとの違い

ここで、ライブラリという言葉をご存知の方は「なんだかライブラリと似ているけれど、何が違うんだろう？」と思われたかもしれません。

ライブラリとは「汎用的な機能をまとめたもの」なので、まさにフレームワークの定義と似ていますが、フレームワークと比べて少し規模の小さいものを指します。

そのため、フレームワークはライブラリを集めたものと考えてください。

先ほどの酢豚の例えでいうと、「酢豚の素」くらいのレベル感になります。

ライブラリを使えばイチからプログラミングするよりは楽にできるけれど、フレームワーク（料理キット）よりは自分で手を動かす手間がかかるということです。

フレームワークを使うメリット

大人気のフレームワークですが、メリットもあればデメリットもあります。

まずはメリットを見てみましょう。

開発効率が上がる

これは言わずもがなですが、よく使用される機能が提供されているので開発効率が格段に上がります。

統一感のあるコードが書ける

大きなソフトやシステムを開発する時、複数人でコーディングをすることがあります。

一つのフレームワークに則って開発すれば、バラバラに書いたとしてもコードに統一感が出て、何をやりたい部分なのかが読みやすくなります。

バグが減る

上記の理由からレビューしやすくなるため問題のある箇所を見つけやすくなりますし、予め提供されている機能を使うため凡ミスも減らせてバグの数を軽減できます。

フレームワークを使うデメリット

便利なフレームワークですが、デメリットの方も確認しておきましょう。

フレームワーク自体の学習が必要

フレームワークを使うにはその方法を学ばなければなりません。例えばRuby on Railsというフレームワークを使う場合、そのベースとなっているRuby言語の文法だけを知っていても使えません。

新たにRuby on Rails自体の文法を学ぶ必要があります。

初心者の学習の妨げになることもある

例えばRuby自体をよく知らないままにRuby on Railsから学習を始めてしまうと、楽に開発はできるものの自分が便利に使っている機能の内部ではどういった処理をしているのかわからないままになってしまいます。

初心者にとってはフレームワークからではなく、基礎の言語の方から学ぶことが望ましいです。

開発内容に制約がある

便利な機能がたくさんあり、Webサービスの完成までに必要な枠組みが揃っているということは逆に自由度が下がるということです。

用意された枠組みから外れるような機能は載せられないという制約があります。

まとめ

フレームワークについて解説しました。

まずは基礎となるプログラミング言語の習得が優先ですが、ある程度基礎的なことがわかったらフレームワークについても学び始めることをおすすめします。

フレームワークを使うと圧倒的に開発スピードが上がるため、導入されていない現場はほぼ無いといえるからです。

この記事で挙げたフレームワークの講座はどれも入門レベルで、基礎の言語を学び始めた初心者の方からも人気の内容となっています。

基礎を学びつつ早い段階から現場力も身につけたい方はぜひチェックしてみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

WordPressとは？どんなことができるの？初心者にもわかりやすく解説！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

WordPress（読み：ワードプレス）をご存知でしょうか。

Webサイトのコンテンツ管理（主にブログ）のために使われるソフトウェアですが、実際にどんなものなのかは知識があいまい…という方も多いはずです。

この記事では、WordPressについて初心者の方にもわかりやすいよう解説します。

WordPressとは？

WordPressは2000年代初期に開発されたオープンソースのコンテンツ管理システムです。

WordPress公式サイト（日本語）

「Contents Management System」の頭文字を取ってCMSと略称で呼ばれることもあります。

コンテンツ管理システムは、簡単にいえばWebサイトに掲載するコンテンツ（デザインやブログ記事、写真等）のアップロードや編集をするためのソフトウェアです。

なお、このブログサイトもWordPressで記事を管理しています。

WordPressで作られているサイト

まずはWordPressを使うとどんなサイトが作れるのか、イメージを掴むためにいくつか適用事例を見てみましょう。

※いずれも2021年1月時点での情報です。

エン・ジャパン

採用関連の情報サイトであるエン・ジャパンはWordPressで作成されています。

記事がわかりやすくカードで示されていて見やすいですね。

エン・ジャパン株式会社

ラクスル

印刷業界でイノベーションを起こしたラクスルのコーポレートサイトでもWordPressが使用されています。

サービスの紹介やプレスリリースがわかりやすく並んでいますね。

ラクスル株式会社

東京大学教育学部

東京大学教育学部のサイトもWordPressによるものです。

ターゲット（入学希望者・在学生・卒業生等）ごとにメニューが分かれた見やすい構造になっています。

東京大学｜大学院教育学研究科・教育学部

その他（自分で調べる方法）

他にも気になるサイトがあれば、WordPressを使っているかどうか調べることができます。

下記のサイトで上図のように調べたいサイトのURLを入力して「ANALYZE WEBSITE」ボタンをクリックすれば確認可能です。

IsItWP｜Free WordPress Theme Detector

WordPressでできること

前項で挙げたサイト例のように、リッチなコンテンツが作れることはイメージが沸いたかと思います。

ここからは具体的にどんなことができるのかを見ていきましょう。

テンプレートを使ってリッチなサイトデザインにできる

WordPressには「テーマ」と呼ばれるデザインテンプレートがたくさん用意されており、好きなものを選んで自分のサイトに適用できます。

メイン画像を別のものに変えたり、多少であればコンテンツやボタンの配置も変更可能です。

ほとんどが無料で使用でき、公式ページでも紹介されているのでどんなものがあるか気になる方は見てみてください。新しいものもどんどん追加されます。

WordPressテーマ

コーディングなしでブログを投稿できる

HTMLやCSSを書いたことのある方ならばイメージがつくかと思いますが、ある程度デザイン性のあるWebページを作るには単にコンテンツの内容を書けばいいわけではなく、余白やレイアウトについてもコーディングでしっかりと指定しなければなりません。

WordPressではブログ記事を投稿する際、上図のように直感的なUIを通してコンテンツを記述することができます。

デザインやレイアウトについてコーディングする必要がなく、コンテンツの内容を書くことに集中できるわけです。

プラグインで機能拡張できる

WordPressにはプラグインという後付け機能が豊富に用意されています。

例えば、Webサイトのセキュリティを強化するもの、目次を表示させるもの、問合せフォームをつけるもの等です。

こういったプラグインを必要に応じて追加すれば、自分でコーディングしなくても手軽にサイトの機能を拡張することができます。

WordPressプラグイン

Webサービスも作れる

ここまで紹介したように、WordPressの基本的な用途としてはブログや記事をアップしていくための情報サイトとなりますが、コーディングして機能を追加すればWebサービスとして運用することも可能です。

実際に、先ほど紹介した「https://www.isitwp.com/」（指定したURLのサイトがWordPressを使っているかどうか調べるサービス）もWordPressで制作されています。

WordPressの使い方

ここでは細かい手順は省略しますが、イメージを掴むためにWordPressの使い方をざっくりと説明します。

サーバーとドメインを用意

WordPressはあくまでCMS（コンテンツ管理システム）なので、それ単体では使用できません。サーバーにインストールして使う必要があります。

また、サーバー上でWordPressを使ったサービスを始めたらそこにユーザーに見に来てもらうためのアドレス（URL）が必要です。

ドメイン管理会社からドメイン（URLの先頭部分）を入手する必要があります。

WordPressをサーバーにインストール

サーバーとドメインが用意できたらそこにWordPressをインストールします。

後ほど必要になる管理者アカウントもこの時に作成します。

管理画面にログイン

無事WordPressが立ち上がったら、管理者ログイン画面にアクセスしログインすることができます。

ダッシュボードからテーマ等を設定

ログインすると「ダッシュボード」という設定画面が使えるようになります。

ここでテーマを選んだり細かい設定をしたりすることが可能です。

ブログサービスとの違い

ここまでの間に「Amebaブログや楽天ブログといったブログサービスも無料なんだから、面倒なことをせずそちらを使えばいいのでは？」と思われたかもしれません。

用途によってはそれでも良い可能性があります。

WordPressを使ったブログサイトの運用では、ブログサービスの使用と比較し下記の違いがありますので、これらを重要とみなすかどうかで決定するようにしましょう。

独自ドメインで運用できる

Amebaブログや楽天ブログなどのブログサービスを使う場合は、自分のブログのURLが「https://ameblo.jp/XXXX」や「https://plaza.rakuten.co.jp/XXXX」といったように各サービスのドメイン名から始まることになります。

個人の情報発信が目的ならばそれでも大きな問題にはなりませんが、何かしらの商業的や社会的な目的で運用したい場合はやはり独自ドメインを用意して使うべきでしょう。

自由にカスタマイズできる

ブログサービスでもたくさんのテーマからデザインを自由に選べるものの、カスタマイズ性についてはどうしても乏しくなります。

細かい見せ方にこだわりたい場合はWordPressがおすすめです。

SEO対策できる

WordPressにはSEO対策に役立つプラグインが多く用意されています。

必要に応じこれらの対策を自由に取ることで他サイトとの差別化を図ることが可能です。

ブログサービスではその運営会社（Amebaや楽天等）が対策を取ってはいるものの、自分のコンテンツに最も適したものを選ぶ自由性はないといえます。

まとめ

WordPressについて解説しました。

自分のWebサービスとしてブログを運用したいユーザー向けに開発された、面倒なコンテンツ管理の手間を省くためのものだと理解できれば問題ありません。

無料で使用可能ですし、導入方法は公式サイトでも詳しく紹介されていますので興味のある方はぜひチャレンジしてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

macのターミナルは何ができる？主な使い方も解説！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

プログラミングのためにパソコンを選ぶ時「ターミナルが使えるからmacの方がいいよ！」と言われたことはありませんか？

初心者のプログラミング学習には13インチのMacBook Proがおすすめ！その理由も解説！｜プログラミング入門ナビ

上記の記事の通り、それ以外にもmacをおすすめする理由はいくつかあるのですが「そもそもターミナルってなんだろう？」と疑問に思われているかもしれません。

この記事では、ターミナルについて初心者の方にもわかりやすく解説します。

使い方についても簡単に説明しますので、ぜひ読んで試してみてください。

ターミナルとは？

わかりやすくいうと、ターミナルとはコンピューターと会話するための窓口です。

上図のような画面からユーザーが「コマンド」を打ち込むことでコンピューターに命令し、それを受け取ったコンピューターがその通りに作業（ファイルのコピーや移動など様々なことができます）を実行し結果を表示する、というのが一連の流れになっています。

ここで「ファイルのコピーや移動だったら、Finderでファイル一覧を開いてマウスを使ってできるんじゃない？」と思われたかもしれません。

まさにその通りで、目で見て直感的に理解しやすいグラフィカルなユーザーインターフェース（GUI：Graphical User Interfaceと呼ばれます）でも同じことをしています。

ユーザーがマウスを使って行った操作は、GUIによりコンピューターが理解できる命令に変換されてコンピューターに渡され実行されるわけです。

一方、ターミナルではユーザーがキーボードのみを使ってコマンド（文字列）を使って命令をするのでCUI（Character User Interface）と呼ばれます。

ここでもユーザーが打ち込んだ命令がCUIによりコンピューターが理解できる命令に変換されコンピュータに渡され実行される流れです。

ざっくりとまとめると、コンピューターにやらせたい作業をウィンドウ表示やマウス操作で行うのが通常なのに対し、キーボードを使って文字だけで指示するためにあるのがターミナルだと捉えてください。

ターミナルを使うメリット

「文字だけで指示しなければならないなんて、わかりにくいし余計に面倒なのでは？なんのためにターミナルがあるの？」と疑問がわくはずです。

これにはきちんと理由があります。

素早く操作できる

エクセルやパワーポイント等を使う時にショートカットキーを使ったことはありますか？

いちいちマウスでクリックしてメニューを開き、やりたい作業のところまでカーソルを持って行ってまたクリックしてさらにメニューを開いて…

といった一連の作業をするよりも、キーボードでショートカットキーを打ち込む方が断然速く作業できますよね。

これと同じで、慣れてくるとマウス作業よりもキーボードでタイプする方が素早く操作できるようになってきます。

かゆいところに手が届く

GUIに比べてより細かい命令が可能なので、かゆいところに手が届きます。

例えばファイルの検索をしたい時などに有効です。

macの検索ではファイル名でしか検索できませんが、ターミナルを使えば「○○から始まるファイル名」で「3ヶ月前くらいに作ったファイル」のようなあいまいな検索もできます。

一括処理が可能

ターミナルでは複数のファイルに対して一括処理をすることができます。

たとえば「このフォルダにあるファイルを全て削除する」といった作業も可能です。

全部削除するだけならばGUIでも比較的簡単にできますが、先ほどの「かゆいところに手が届く」利点も活かし、細かい条件を指定し当てはまるものだけを一括削除することができるため、目で見てマウスで一つ一つ作業していくよりもかなり速くできます。

ターミナルの主な使い方

ターミナルを使う利点を把握したところで、使い方を見ていきましょう。

起動方法

ターミナルはFinderから下記の通りに起動できます。

Finder　→　アプリケーション　→　ユーティリティ　→　ターミナル.app

また、macの右上にある虫眼鏡アイコンからSpotlight検索を起動し「ターミナル」と打ち込んで起動するのでも問題ありません。

主なコマンド

無事ターミナルが起動できたら早速コマンドを打ってみましょう。

下記はよく使用される主なコマンドです。

ターミナルでは「$」マークの後にユーザーがコマンドを入力することができます。

逆に「$」で始まっていない行は全てターミナルからの返答です。

また「ディレクトリ」という言葉が出てきますがこれは階層構造を指しており、「フォルダ」と同じような意味合いと捉えてください。

pwd

「print working directory」の頭文字で、現在いるディレクトリのパスを表示します。

$ pwd
/System/Library

ls

ディレクトリにあるファイルやディレクトリを表示します。
「ls」単体ならば現在のディレクトリ、「ls」のあとにスペースをはさんでディレクトリを指定すればそのディレクトリについて表示されます。

$ ls /Applications
App Store.app		Image Capture.app	Preview.app
Books.app		Mail.app		Reminders.app
Calculator.app		Maps.app		Siri.app
Dictionary.app		News.app		TV.app
FaceTime.app		Notes.app		TextEdit.app

cd

「change directory」の頭文字で、ディレクトリを移動します。
スペースを挟んで移動したい先のディレクトリパスを指定しましょう。
なお「.」は現在のディレクトリ、「..」と入力すれば一つ上の階層のディレクトリとなります。

$ cd ..

mkdir

「make directory」の略で、ディレクトリを作成します。
スペースを挟んでディレクトリ名を指定しましょう。

$ mkdir test

touch

ファイルを作成します。
スペースを挟んでファイル名を指定しましょう。

$ touch test.txt

find

ファイルを検索します。
スペースで挟んで探したいファイル名を指定しましょう。
ファイル名にその文字列を含むファイルが見つかればそのパスが表示されます。
見つからない場合は下記の通りです。

$ find aa
find: aa: No such file or directory

rm

ファイルを削除します。
スペースで挟んで削除したいファイル名を指定しましょう。

$ rm test.txt

mv

ファイルを移動させます。
スペースで挟んで移動させたいファイル名と移動先のパスを指定しましょう。

$ mv test.txt ../temp

cp

ファイルをコピーします。
スペースで挟んでコピーしたいファイル名とコピー先のパスを指定しましょう。

$ cp test.txt ../temp

cat

ファイルの内容を表示します。
スペースで挟んでファイル名を指定しましょう。

$ cat test.txt
Hello, World!

まとめ

macのターミナルについて概要や使い方を解説しました。

コマンドはたくさんあるのですが、まずはここに挙げたコマンドを覚えれば一通りのことはできるはずです。

物足りなくなってきたらぜひ他のコマンドやオプションについても調べてみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Emmetとは？HTMLを素早くコーディングする方法を習得しよう！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

HTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。

簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。

Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。

このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。

動画でEmmetについて学ぶ

フォローしてね！

Emmetとは？

Emmet（読み：エメット）は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。

若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。

略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。

具体的に見た方が早いので下記の例を見てください。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  ul#nav>li.item$*4>a{Item $}
</body>
</html>

7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  <ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
  </ul>
</body>
</html>

たった1行だったのが6行のコードに早変わりしました。

「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字＋展開ボタン」の手間で199文字分のコーディングができることになります。

この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。

これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。

公式サイト：Emmet — the essential toolkit for web-developers

VSCodeでの使い方

プログラマーから絶大な人気を得ているテキストエディタであるVSCode（Visual Studio Code）でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。

「展開」はTabキーでできます。

VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。

なお他のテキストエディタ（Sublime TextやAtom等）では外部プラグインとして導入が必要になります。

公式サイトからダウンロード可能です。

主な記述方法

ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。

まずは初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。

初級編

タグ単体

要素名だけ入力し「展開」（VSCodeではTabキー押下）すると、開始タグと（必要に応じ）終了タグが補完されます。

<!-- 展開前 -->
h2

Tabキーを押すと

<!-- 展開後 -->
<h2></h2>

入れ子構造

入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。

<!-- 展開前 -->
div>a

Tabキーを押すと

<!-- 展開後 -->
<div><a href=""></a></div>

兄弟構造

入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。

<!-- 展開前 -->
h2+div

Tabキーを押すと

<!-- 展開後 -->
<h1></h1>
<div></div>

繰り返し

特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。

繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。

入れ子表記との組み合わせも可能です。

<!-- 展開前 -->
ul>li*3

Tabキーを押すと

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML雛形

HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。

一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。

<!-- 展開前 -->
html:5

Tabキーを押すと

<!-- 展開後 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

なお、デフォルトでは言語設定部分（<html lang=”ja”> ）が日本語（”ja”）でなく英語（”en”）となっていることが多いです。

適宜直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。

VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう｜プログラミング入門ナビ

中級編

idを付加

要素にidをつけるには「#」で指定します。

<!-- 展開前 -->
div#item1

Tabキーを押すと

<!-- 展開後 -->
<div id="item1"></div>

クラスを付加

要素にクラス名をつけるには「.」で指定します。

<!-- 展開前 -->
p.content

Tabキーを押すと

<!-- 展開後 -->
<p class="content"></p>

テキストを指定

コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。

<!-- 展開前 -->
p{ここが本文です}

Tabキーを押すと

<!-- 展開後 -->
<p>ここが本文です</p>

属性を指定

属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。

<!-- 展開前 -->
img[src="dog.jpg" alt="犬の画像"]

Tabキーを押すと

<!-- 展開後 -->
<img src="dog.jpg" alt="犬の画像">

上級編

グルーピング

いくつかの表記の組み合わせを（）で囲めば、一つのグループとして扱うことができます。

繰り返したい要素が1つだけでなく複数要素である場合などに有効です。

<!-- 展開前 -->
table>(tr>th+td*3)*3

Tabキーを押すと

<!-- 展開後 -->
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

連番をつけて展開

クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。

<!-- 展開前 -->
h2.item${見出し$}*3

Tabキーを押すと

<!-- 展開後 -->
<h2 class="item1">見出し1</h2>
<h2 class="item2">見出し2</h2>
<h2 class="item3">見出し3</h2>

兄弟要素のテキストを指定

次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。

<!-- 展開前 -->
p>{お申し込みは}+a{こちら}+{から}

Tabキーを押すと

<!-- 展開後 -->
<p>
  お申し込みは
  <a href="">こちら</a>
  から
</p>

まとめ

HTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。

CSSにも応用可能なので興味のある方は調べて活用してみてください。

コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

VSCodeで画像が表示されない場合の対処法

2021-01-07 By プログラミング入門ナビ編集部

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のサポート記事です。

VSCodeとは

・プログラミングを行う際にコードを記述する「エディタ」と呼ばれるソフトウェアです。

・エディタを用いてコーディングを行うことで、拡張機能などを活用して効率的に開発を進めることができます。

・VSCodeは現在最も人気のあるエディタの一つです。

VSCodeでの画像表示

VSCodeでは、以下のように画像のプレビュー機能があります。

コンピューター内の画像ファイルを別途開かなくても、エディタ内から画像の中身を確認できるので、開発を進める際に便利です。

VSCodeで画像が表示できない場合

以下のように「An error occurred while loading the image」とエラーが表示される場合の対処法についてお伝えします。

画像ファイルが正常に保存されているか確認

webフォルダをエクスプローラーで開いてみて、画像ファイル自体が破損していないかを確認してみてください。

画像が正常に保存できない原因としては、例えば以下が考えられます。

・ネットワークの通信が不安定
安定したネットワーク環境下で再度ダウンロードを行ってみてください。

・ストレージが不足している
余分なファイルなどを削除して、画像保存のための保存領域を確保しましょう。

・アンチウィルスソフトがブロックしている
画像の保存を妨げているセキュリティソフトなどが無いか確認してみてください。

VSCodeの再起動

もし画像が正常に保存されている場合は、ファイルの保存が反映されていない可能性があるので、VSCode自体の再起動などを行ってみてください。

まとめ

この記事では,VSCodeで画像が表示されない場合の対処法について説明しました。このような症状が発生した場合は、画像の保存状態について確認してみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

ツールの使い方

はじめに

フレームワークとは？

フレームワークは「お手軽料理キット」のようなもの

ライブラリとの違い

フレームワークを使うメリット

開発効率が上がる

統一感のあるコードが書ける

バグが減る

フレームワークを使うデメリット

フレームワーク自体の学習が必要

初心者の学習の妨げになることもある

開発内容に制約がある

人気のフレームワーク

Ruby on Rails

Vue.js

Nuxt.js

Bootstrap

まとめ

動画でプログラミング入門をしよう

はじめに

WordPressとは？

WordPressで作られているサイト

エン・ジャパン

ラクスル

東京大学教育学部

その他（自分で調べる方法）

WordPressでできること

テンプレートを使ってリッチなサイトデザインにできる

コーディングなしでブログを投稿できる

プラグインで機能拡張できる

Webサービスも作れる

WordPressの使い方

サーバーとドメインを用意

WordPressをサーバーにインストール

管理画面にログイン

ダッシュボードからテーマ等を設定

ブログサービスとの違い

独自ドメインで運用できる

自由にカスタマイズできる

SEO対策できる

まとめ

動画でプログラミング入門をしよう

はじめに

ターミナルとは？

ターミナルを使うメリット

素早く操作できる

かゆいところに手が届く

一括処理が可能

ターミナルの主な使い方

起動方法

主なコマンド

pwd

ls

cd

mkdir

touch

find

rm

mv

cp

cat

まとめ

動画でプログラミング入門をしよう

はじめに

動画でEmmetについて学ぶ

Emmetとは？

VSCodeでの使い方

主な記述方法

初級編

タグ単体

入れ子構造

兄弟構造

繰り返し

HTML雛形

中級編

idを付加

クラスを付加

テキストを指定

属性を指定