読み込み中 読み込み対象

読み込み中

Blogメニュー

独学WEBエンジニアのためのブログ

記事をカテゴリーで絞り込む

  1. 最初へ
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 9
  9. 最後へ

(総記事数:43件)

新着記事一覧

  • 雑記

    独学エンジニア成長目録19

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    フロントとサーバーの違いって?

    独学でホームページを制作をしているとなかなか意識しませんが、サイトのコードを書く人は
    フロントエンドエンジニアバックエンドエンジニアに分かれます。

    おそらく独学でホームページを作成している人はほとんどがフロントエンドエンジニアでしょう。

    本記事ではフロントとバックで何が違うのかを考えてみようと思います。





    フロントエンドエンジニア

    HTMLコーダーと呼ばれるかもしれませんね。
    HTMLコーダーとフロントエンドエンジニアは一般的に違うものとされているようですが
    その区分けは人によって違うようです。
    まず、私が思うHTMLコーダーフロントエンドエンジニアについて書かせていただきます。



    HTMLコーダーとは(私見)
    HTML、CSSを難なく書ける人。
    デザイナーから上げられたものに対し、HTML、CSSで忠実なスキルを思った人。
    javascriptのプラグインも入れることができる。



    フロントエンドエンジニアとは(私見)
    フロント周り、つまりユーザーの目に触れる部分で全てのスキルを持った人。
    HTML、CSS、JavaScriptから、SEOやUX、UIについても考えられる人。
    サイトの保守性やパフォーマンス、バックエンドとの連携についても考えられること。



    こんな風に私は考えています。

    HTMLコーダーの求人を見かけることもありますが、業務内容を見ると
    とにかくHTMLコーディングをしてください!というものが多いです。

    対してフロントエンドエンジニアの求人となると、UX、UIや、sassやらgulpやらgitやらが
    わかる人!とやることがグンっと増える印象です。



    フロントエンドエンジニアが作り上げるもの

    そんなやることの多いフロントエンドエンジニアですが、作り上げるものは
    クライアント側のサイトになります。

    HTML、CSS、JavaScriptはクラインアント側で動く言語です。
    クライアント側という紛らわしい表現をしましたが、簡単に言えばブラウザです。

    これに対し、ブラウザ以外で動く言語がサーバー言語、バックエンドになります。





    バックエンドエンジニア

    バックエンドエンジニアはサーバー言語を使ってコーディングします。
    サーバー言語はPHP、Java、Ruby等です。

    私は少し前までJavaScriptとJavaは同じものだと考えていましたが、全く違います。
    書き方はもちろんですが、ブラウザで動くのか、サーバーで動くのかという面で
    全く違うものです。

    サーバーと言われてもピンとこないかもしれません。
    自身のサイトを作ったことのある場合、(無料でも有料でも)レンタルサーバーを
    契約すると思います。
    FC2やさくらやロリポップなど、ざっくり言ってしまえば、このレンタルサーバーで
    認識し動かすものがサーバー言語です。



    バックエンドエンジニアが行うこと

    PHPなら触ったことあるよ!と思ったかもしれません。
    私も多少触れていますが、バックエンドエンジニアは行うことはもっと広いです。



    不動産サイトを思い浮かべてみましょう。
    47都道府県のあらゆる物件を取り扱っていますね。
    この1つ1つのページを1つずつHTMLで制作しているとは思えません。

    実際にはデータベースというとても多くの情報を保持している場所から
    条件を指定して呼び出し、型にはめてブラウザに出力しています。

    また、自身の条件を指定して検索結果を表示しますよね。
    この検索結果も指定された条件を元にデータベースから呼び出し、並べています。
    検索結果の1つ1つは同じようなデザインになるため、ループ処理によって並べます。

    物件が表示されるには当然登録する必要があります。
    いろんな不動産から物件情報が送られてきて、それをフォームに入力して
    データベースに保存します。


    今上げたようなことは全てバックエンドエンジニアが行っています。
    (私はバックエンドは経験したことはないので、実際はもっと複雑でしょう)





    このように、大きなサービスサイトでは必ずフロントエンドエンジニアと
    バックエンドエンジニアが存在します。

    HTMLを触れ、PHPも触れたら、自分にはどっちが向いているか、考えて
    どちらかを極めてみるのも良いかもしれませんね。

    私はデザイン寄りをフロントエンドを!
    プログラム書くのがとにかく好きならバックエンドですね!
  • 雑記

    独学エンジニア成長目録18

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    TypeScriptに触れる



    前回の記事、AltJSって何?からの続きになります。
    本記事ではTypeScriptの使い方を前回よりも詳細に説明致します。





    型宣言

    TypeScriptでは、変数や引数、関数の戻り値に予め型を宣言します。
    そして、格納される値と型が一致しない場合はコンパイル時にエラーとなります。
    型宣言は
    :文字列
    の形で行います。

    String - 文字列
    var str:string = 'string';

    Number - 数値
    var num:number = 7;

    Boolean - 論理値( true または false )
    var bool:boolean = true;

    Array - 配列(以下の例では数値の配列)
    var ary:number[] = [1,2,3];

    Any - 自由な型(純javascriptの変数と同意)
    var hoge:any = 'fuga';

    Void - 戻り値のない関数
    (function ():void {
    console.log('function!');
    })();

    Object - インターフェースを使った型付きオブジェクト
    interface Obj {
    str: string,
    num: number,
    bool: boolean
    }
    var obj:Obj = {
    str: 'string',
    num: 7,
    bool: true
    };






    アローファンクション

    TypeScript
    var sum = (x:number,y:number):number => x + y;
    var greet = (name:string):void => { console.log('hello ' + name + '.') };

    コンパイル結果
    var sum = function (x, y) { return x + y; };
    var greet = function (name) { console.log('hello ' + name + '.'); };


    { }
    がない場合はすぐに
    return
    で値が返されます。





    クラス

    TypeScript
    class Person {
    name:string;
    age:number;
    public constructor (name:string,age:number) {
    this.name = name;
    this.age = age;
    }
    public greet () {
    console.log(this.name + 'です。' + this.age + '歳です。よろしく。');
    }
    }
    var nakazato = new Person('中里',100);
    nakazato.greet();

    コンパイル結果
    var Person = (function () {
    function Person(name, age) {
    this.name = name;
    this.age = age;
    }
    Person.prototype.greet = function () {
    console.log(this.name + 'です。' + this.age + '歳です。よろしく。');
    };
    return Person;
    })();
    var nakazato = new Person('中里', 100);
    nakazato.greet();


    JavaScriptでクラスを生成することができます。
    クラス内には
    constructor ()
    が必須です。

    public
    private
    を使うことができ、TypeScript上では正しく動作します。
    (コンパイル時には単に削除されます)





    名前空間

    TypeScript
    module NS {
    var name = 'nakazato';
    var age = 100;
    export var greet = () => {
    console.log(name + 'です。' + age + '歳です。よろしく。');
    };
    }
    NS.greet();

    コンパイル結果
    var NS;
    (function (NS) {
    var name = 'nakazato';
    var age = 100;
    NS.greet = function () {
    console.log(name + 'です。' + age + '歳です。よろしく。');
    };
    })(NS || (NS = {}));
    NS.greet();


    module 名前空間 {}
    とすることで簡単に名前空間を生成できます。
    外部からアクセスするプロパティやメソッドには
    export
    を付けます。





    TypeScriptでよく使いそうなものを選び、説明させていただきました。

    まだまだできることは沢山あるのですが、私個人のレベルでは
    本記事で説明した機能で精一杯でした。。

    プログラム言語をJavaScriptしかやっていない私としては、型の宣言や
    クラスの考え方は逆に難しく感じてしまいますね。

    とはいえ、大規模開発では本当に役立ちそうです。
    そういった環境に身を置いた際には使ってみたいと思います!
  • 雑記

    独学エンジニア成長目録17

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    AltJSって何?

    Alternative JavaScript、略してAltJSです。
    AltJSは、大規模開発向けに開発された代替えJavaScriptという認識でいますが
    正直なところよくわかってません。。。

    というのも、私が知っているのはCoffeeScriptとTypeScriptで、その2つが
    目的としてるものが全く違う(ように感じる)からです。

    本記事では、この代表的な2つのAltJSについて書いてみたいと思います。





    CoffeeScript

    CoffeeScript

    CoffeeScript
    obj = 
    key1: 'value'
    key2: 'value'
    key3: 'value'
    console.log obj

    コンパイル結果
    var obj;

    obj = {
    key1: 'value',
    key2: 'value',
    key3: 'value'
    };

    console.log(obj);


    このように、CoffeeScriptではJavaScriptを簡潔に、綺麗に書くことができます。
    CoffeeScriptの特徴はまさにこの簡潔、綺麗にコードを書けることです。

    CoffeeScriptの公式サイトでは記述方法を始め、テストコーディングをすることもできます。
    CoffeeScript公式サイト





    TypeScript



    TypeScript
    var myName:string = '中里';
    function greet ( name:string ):void {
    console.log('こんにちは。' + name + 'さん');
    }
    greet(myName);

    コンパイル結果
    var myName = '中里';
    function greet(name) {
    console.log('こんにちは。' + name + 'さん');
    }
    greet(myName);


    TypeScriptでは、一見コード量が増えてしまっています。
    しかし、ここで書いている
    :string
    :void
    がTypeScriptの特徴です。

    TypeScriptでは変数や引数、戻り値などに型を宣言することでき、宣言された型と
    実際に格納される値の型が異なる場合はエラーとなります。
    これにより、バグの元となるコードを減らすことができます。

    TypeScriptは、多くの人が同じファイルを触るような大きなプロジェクトほど
    効果を発揮します。

    TypeScriptの公式サイトでは記述方法を始め、テストコーディングをすることもできます。
    TypeScript公式サイト





    2つのAltJSを紹介させていただきました。
    どちらも記述方法、目的まで全く異なるため、適材適所がありそうですね。

    次の記事では、私が実際に触れたTypeScriptをもう少し詳細に説明したいと思います。
  • 雑記

    独学エンジニア成長目録16

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    ECTに触れる

    前回の記事、HTMLテンプレートエンジンって何?では
    HTMLテンプレートエンジンの概要に触れました。
    本記事ではHTMLテンプレートエンジンの1つ、ECTの使い方を紹介致します。





    ECTについて

    ECTはjavascriptで作られたHTMLテンプレートエンジンです。
    とにかくコンパイルが高速であることを推しています。

    開発は長らく止まっていますが、高速であることと、機能が必要最低限で
    学習コストが少ないため、現在私は利用しています。

    ECTを記述する際には、拡張子を
    .ect
    とします。





    継承

    基本となる枠を作成し、各ページに継承させます。


    layout.ect
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    </head>
    <body>
    <% content %>
    </body>
    </html>

    page.ect
    <% extend 'layout.ect' %>
    <main>
    <div>メインコンテンツ</div>
    </main>

    コンパイル結果
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    </head>
    <body>
    <main>
    <div>メインコンテンツ</div>
    </main>
    </body>
    </html>


    layout.ect
    <% content %>
    page.ectに書いたコードが挿入されます。


    page.ectに書いた
    <% extend 'layout.ect' %>
    は継承元ファイルを表します。
    継承元ファイルが複数あり(例えばPCとSPなど)、継承を変えたい場合は
    'layout.ect'
    を変更します。


    コンパイル後のファイル名は
    page.html
    となります。
    継承するファイルがベースとなり、コンパイルされます。
    ページを複数作成する場合は、継承するファイルを作成することになります。





    部品

    テンプレート化させる部品を作ります。


    layout.ect
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    </head>
    <body>
    <% include 'header.ect' %>
    <% content %>
    <% include 'footer.ect' %>
    </body>
    </html>

    header.ect
    <header>
    <h1>見出し</h1>
    </header>

    footer.ect
    <footer>
    <p><small>コピーライト</small></p>
    </footer>

    コンパイル結果
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    </head>
    <body>
    <header>
    <h1>見出し</h1>
    </header>
    <main>
    <div>メインコンテンツ</div>
    </main>
    <footer>
    <p><small>コピーライト</small></p>
    </footer>
    </body>
    </html>


    <% include 'filename' %>
    の形でテンプレートを読み込みます。

    全ページ共通となる部品は
    layout.ect
    に読み込みます。
    (テンプレート化せず直接記述でも良いのですが、管理のしやすさの面で
    テンプレート化しています)

    全ページでは使わないものの、頻度の高いコードはテンプレート化し、継承ファイルの
    必要な箇所で読み込むようにします。





    部分

    ページによって変わる部分的な箇所を作ります。


    layout.ect
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title><% content 'title' %></title>
    </head>
    <body>
    <% include 'header.ect' %>
    <% content %>
    <% include 'footer.ect' %>
    </body>
    </html>

    illust.ect
    <% extend 'layout.ect' %>
    <% block 'title': %>イラストページ<% end %>
    <main>
    <div>イラスト</dvi>
    </main>

    コンパイル結果
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>イラストページ</title>
    </head>
    <body>
    <header>
    <h1>見出し</h1>
    </header>
    <main>
    <div>イラスト</div>
    </main>
    <footer>
    <p><small>コピーライト</small></p>
    </footer>
    </body>
    </html>


    継承ファイルの
    <% block 'name': %>source<% end %>
    で書いたものは
    継承元ファイルの
    <% content 'name' %>
    に挿入されます。

    継承元ファイルに
    <% content 'name' %>
    でcssやJavaScriptの追記場所を設けておき
    ページ固有のファイルを読み込む、等に利用できます。





    ECTで私が主に使う機能を紹介させていただきました。
    公式サイトには条件分岐やループの方法も書かれています。
    ECT公式

    コンパイルにはタスクランナーを使用しています。
    モジュールはgulp-ectです。
    gulp-ect


    またまた導入のハードルが少々高めですが、何か1つ、お気に入りの
    HTMLテンプレートエンジンを見つけて導入してみると快適コーデイングが
    実現できると思います!
  • 雑記

    独学エンジニア成長目録15

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    HTMLテンプレートエンジンって何?

    HTMLテンプレートエンジンはその名の通り、HTMLをテンプレート化するエンジンです。

    普段、全ページ共通のサイドバーで直さなければならない箇所ができたらどうしますか?
    10ページ前後ならなんとか手動で直せますね。
    それ以上となると、ファイルをまとめて置換できるソフトを使ったりするでしょうか?
    (私はその類のソフトを使ってました)

    HTMLテンプレートエンジンを使えば、サイドバーがテンプレート化されたファイルの
    1箇所を直すだけで、全ページ、もしも100ページのサイトであれば
    100ページのサイドバーがほんの数秒で修正できます。

    夢のような機能ですね!

    それでは、紹介に入っていきます。





    HTMLテンプレートエンジンの種類

    先日紹介したCSSプリプロセッサに比べ、HTMLテンプレートエンジンの種類は多いです。

    ・EJS
    ・Jade
    ・Haml
    ・Handlebars
    ・Underscore
    その他...

    まだまだたくさんあります。
    そして、どれがいいとも言えません。

    これは自身で各HTMLテンプレートエンジンを見て、書き方の好みや
    今書いている言語に近い等の理由から選ぶと良いでしょう。





    HTMLテンプレートエンジンで出来ること

    基本的にはどれも出来ることは同じです。
    よく使うパーツをテンプレート化することができます。
    以下のような形で作られることが多いです。

    → 枠を定義(htmlタグ、headタグ、bodyタグなどの基本固定箇所)
     → header、footer、sidebarをテンプレート化
      → 各ページのメインコンテンツを挿入


    テンプレート化以外には、簡単な条件分岐(if、else、unless等)
    ループ処理(each)が書けるものもあります。

    変数の定義とhtml内での展開も可能です。


    ※上で書いたJade、Hamlはhtmlをより綺麗に簡単に書くことに重きを置いている印象です。





    HTMLテンプレートエンジンの利用方法

    数が多いだけに、利用方法も様々です。


    ファイルの拡張子はそれぞれの名前もしくは略となります。
    EJSなら
    .ejs
    、Hamlなら
    .haml
    、Handlebarsなら
    .hbs
    といった具合です。


    記述の仕方もそれなりに違いがあります。
    オンラインでコンパイルしてくれるサービスがあるので、参考サイトを見ながら
    実際に試してみるのが良いでしょう。

    JadeのDEMOオンラインサービス
    HamlのDEMOオンラインサービス
    HandlebarsのDEMOオンラインサービス
    (肝心のテンプレート化はここでは試せませんね・・・)


    コンパイルに関してはインターネットにアップしてその場で
    コンパイルされるもの、事前にコンパイルしてからアップするものもあります。

    事前のコンパイルではここでもタスクランナーが活躍します。





    以上、HTMLテンプレートエンジンの紹介でした。

    書いてみたものの、HTMLテンプレートエンジンは本当に数が多く、私が
    実際に触れたものは2つだけです。
    なので、それぞれのHTMLテンプレートエンジンを検索しながら
    間違いのないように書きましたが、実は間違ったことを書いているかもしれません。
    ご承知ください。

    次の記事では、実際に私が使っているHTMLテンプレートエンジンの
    具体的な使い方を書いていこうと思います。

WEB講座

講座一覧

HTML講座
CSS講座
JavaScript講座
  • 基礎編
  • 中級編
  • 上級編
  • 特別編

新着記事

記事検索

検索範囲

検索結果

  • ここに検索結果が表示されます。

閉じる

パソ子