通称「黒い画面」コマンドラインと仲良くなろう! – コマンドラインでなにが出来るのか

set

こんにちは!
StudioSPECのakiraです。

突然ですが、時代の流れは早いものでWeb制作を取り巻く環境も随分と便利になりました。

と同時にDreamweaverとPhotoshopが使えればOKな時代ではなくなっています。

僕はこのブログを通じて、SpecDesignCollegeの授業ではお伝えしきれない便利な情報等をお伝え出来ればと思って書いています。

そんなお伝えしたい技術やツール。そのほとんどが通称黒い画面といわれる「コマンドライン」を利用してインストール、操作を行います。

特にこれからWeb制作を学ぼうと考えている方は、ぜひ最初の段階から黒い画面を利用してコンピュータ操作を行っていただければと思います。

通称黒い画面といわれる「コマンドライン」

kuroigamen

これ全部打ち込むわけじゃないのでご安心ください。

Web制作には黒い画面が必須な時代に

現役のWeb制作者の方からすると「何をいまさら」といった感じでしょうか。たしかに僕もそう思います。

ただ、この黒い画面を利用せず、2010年当時の古い手法でサイトを制作されている方もまだまだ沢山いらっしゃいます。

別にその方法が悪いとは言いませんが、最新の制作環境を用いた制作といわゆるオールド・スクールでの制作。同じサイトを制作するにしても作業時間には歴然な差が生じます。

ましてやこのマルチデバイス全盛の時代に従来の制作スピード、フローでは太刀打ちが出来なくなっている現状です。

とんでもない数のデバイスに対応しないといけません

The "F" Word: OpenSignal's 2014 Android Fragmentation Report

The “F” Word: OpenSignal’s 2014 Android Fragmentation Report

従来の手法で、現在のマルチデバイスに対応しようと思うと相当の時間がかかってしまいます。当たり前の話かもしれませんが、Web制作の費用は作業時間に比例します。そうなると自然と仕事は作業時間が早い人の方へ流れてゆくものだと思います。

黒い画面を利用して最新の制作環境を整えると、作業時間が短縮出来るだけではなく、Web制作を行う中で起こり得る様々なトラブルも未然に防ぐことが可能になります。

すでにDreamweaverとPhotoshopが使えればOKな時代ではなくなっているわけです。

ライブラリのダウンロードもコマンドラインから

例えば皆さまご存知のBootstrap

bootstrap

このようなライブラリはZipでダウンロードすることが多かったと思います。

例えばコマンドラインを使えば、

$ bower install bootstrap

と実行すればほんの数秒でBootstrapを利用してサイトを制作するのに必要なファイル一式を揃えることが出来ます。

Bootstrapが数秒で

set

Bootstrapのサイトに行かなくても一式がそろう

 

$ wp core download --locale=ja

と実行すればWordPressの最新版のファイル一式をダウンロードすることが出来ます。

WordPressが数秒で

WordPressのファイル一式が数秒で。

WordPressのファイル一式が数秒で。

SassなどのCSSプリプロセッサもコマンドラインで

Web制作者の方ならほとんどの方が使用していると思われるCSSプリプロセッサ。特に日本で利用率が高いSassなんかは何らかのGUIを使って利用することも可能ですが、そのバージョンアップの速度は恐ろしく早く、GUIのアップデートが追いつかないという現状もあります。

※SassとはCSSをプログラムチックに書くことができ、コーディング効率やソースコードの保守性を向上させることがかのうな拡張言語です。

sass

Sassの頻度の高いバージョンアップにも柔軟に対応できます。そしてなれるとGUIを利用するよりはるかに使いやすいです。

Sassだけではありません。HTMLもほとんど生身のままでは扱わずJadeなどのテンプレートエンジンといったものを利用して制作を行います。これらにも同様のことが言えます。

ましてやパワーの弱いマシンなどで色々と立ち上げて制作を行うと、せっかく効率よい方法をとっているのに処理速度が遅くなってしまっては本末転倒です。(言い過ぎですかね笑)

また、最近ではコマンドラインを利用したインストール方法しか記載されていないライブラリなどもあります。

Zipでダウンロードがオールド・スクール扱いを受けることも

old

gulpで色々と自動化してコーディングを簡単にすることも

今まででしたら手動で行っていた、

  • ブラウザのリロード
  • 画像の圧縮
  • CSS,JSの圧縮
  • CSS,JSの結合

なんかもgulpを利用すると自動でマシンに行わせることが可能です。

※gulpとはタスクランナーの一つで、事前に登録した作業を自動で行ってくれます。

gulpで効率のよいコーディングを

gulp

しかしながらこのgulp、またはgulpを動かすために必要なツールもコマンドラインからでしかインストール、利用することが出来ません。

Googleのスターターキットもコマンドラインで

マルチデバイス対応制作を目的とサイト制作のスターターキットをGoogleが配布しています。

このキット、簡単に言うと最新のWeb制作技術が詰まっているとても嬉しいキットです。

最新のWeb制作技術が詰まっているWebスターターキット

google

このスターターキットはgulpを利用して構築されているので、動かすにはコマンドラインを操作する必要があります。

コマンドラインを利用したウェブ制作は既にスタンダード

Googleがこのようなスターターキットにコマンドラインで扱うものを使っているということは、もうすでにこれらの方法がスタンダードということになります。

なにでも始めることに対して早いに越したことはないですが、やるとやらないでは大きな違いです。

皆さまこれを気にコマンドラインの操作に対して興味をもっていただければ幸いです。

次回はコマンドラインの簡単な使い方というか、よく使うコマンドをご紹介したいと思います。

Facebookコメント