コーディングの開発環境を知ろう!

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. コーディングの開発環境を知ろう!

コーディングの開発環境を知ろう!

コーディングの開発環境を知ろう!

こんにちは、アウラの河野です。
開発環境」という言葉、一度は耳にしたこともあると思います。

制作に入る前に、諸々と準備が必要になります。
例えば、職業が料理人となら「どこで魚を買おうかな」「包丁を磨かないと」など行います。
制作の現場でも同じように、制作前に環境構築というのが、非常に重要になってくるのですが、如何せんココが1番難しかったりもします。

今日は「開発環境」を構築する上で、
頻繁に耳にする用語をいくつかご紹介していきたいと思います。

ローカル環境構築「MAMP」

WordPressの案件や、PHPを使用する制作では、
ローカルで環境構築を行うのが必須になります。
その際によく使用されるのが「MAMP」です。

Apache、PHP、MySQLを使用するときの必需品!
会社に来たら、私はまずMAMPをONにするところから一日が始まります。

バージョン管理「Git」

「バージョン管理」という言葉も制作の中でよく耳にします。
例えば、複数人で1つのサイトを作っていたとして、
1人が間違った情報を上書きしてしまった場合、通常ならやり直しができません。

またお客様などから「前回の画像に戻して」と言われた場合、
画像を削除してしまっていたら、もう元には戻せないです。

そういうことを管理するために必須なのが「Git」です。
Gitがあれば、過去の変更履歴を追えたり、修正箇所を別色で表示など。

本当にありとあらゆることができます。
まだまだ、私も知らないことだらけなので、今後もっとGit周りは学んでいきたいです。

パッケージマネージャー「npm」

npmとは「Node Package Manager」の略称で、その名の通りnode.jsで動くパッケージ管理ツールです。
node.jsのありとあらゆる、パッケージを網羅しています。
制作に置いての超絶便利アイテムなので、いろんな場面で登場してきます。

npmと互換性のあるもので「Yarn」というのがあります。
Yarnの方がインストールのスピードが早いので、個人的にはこちらがおすすめ。

HTMLを簡略化するテンプレートエンジン「Pug」

HTMLを書くためのテンプレートエンジンです。
Pugの特徴は、HTMLを記載するときの「開始タグ」「閉じタグ」が不要なこと。

といったような記載方法でかけます。
また、条件分岐やincludeなどの機能もあります。

CSSを拡張したメタ言語「Sass」

CSSを拡張したメタ言語と呼ばれていますが、
要するに、CSSをより効率的に書けるようにした言語です。
変数を使えたり、ネストという入れ子構造で書けるのが特徴的です。
ここ数年はSassで記載している人の方が多いという印象があります。

Sassの他にも、LESS、stylusなどもあります。

CSSの記載も今後よりプログラミング言語のようになっていきそうです。

進化のスピードが早いJavaScript周り

昨今の技術進化に伴い、急成長で伸びているのがJS周り。
フレームワークや、ライブラリが多数存在しています。

ライブラリとフレームワークという2種類の言葉があり

ライブラリ

汎用性の高いプログラムを再利用可能な形でひとまとまりにしたもの。
要するに、パーツで提供されているものです。

フレームワーク

読んで字の如く「枠組み」です。
アプリケーションの開発などにおいての、設計・枠組みのことです。
予め土台が用意されているようなものです。

有名なところでは、
ライブラリなら・・・jQuery、ReactJS

フレームワークなら・・・AngularJS、vue.js

JS周りのタスクランナー「webpack」

細かく分けたJSファイルを、一つのJSファイルにまとめることができたり、
JSでの制作が多くなると必須になるかと思われます。

また、SASSやPugのコンパイルもできます。

まとめ

昨今ではコーディングと言っても、
より深く枝分かれしてきている印象もあり、
日々、情報を追いかけていかないと、数年後に置いてけぼりをくらいそうです。

また、専門用語なども、ますます増えていき、
初学者からすれば、言葉の意味が理解できないと、制作前に躓く方もいると思います。

よくある、「勉強前に、勉強する方法がわからない」という負のスパライル。
まずは手近なところから進めていくのがおすすめです!
私も、Git周りや、JS周りを勉強しなくては・・・・

 

 

 

 

前後の記事

PHPと仲良くなれるPugの書き方

こんにちは、仁木です。 先日、新規サイトのコーディングの担当割り振りをコーダーの河野さんと話している時に「ちょっとPug使ってみない?」という話になり、巷で話題のPugを使ってみました。 ただし、Pu…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら