ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年6月16日webcode編集部FacebookTwitterはてブPocketFeedlyWebデザイナー、Webエンジニア、フロントエンドエンジニアと、Web周りは肩書が非常に多く存在します。今回は、フロントエンド周辺の差を説明しつつ、それぞれに必要なスキルを説明していこうと思います。フロントエンドプログラミングに関するまとめフロントエンドとは?まず、フロントエンドとはどういう意味かということを説明していきます。WebサイトやWebサービスなどの設計に絞って説明をすると、「フロントエンド」はユーザーとの接点のある部分のことを指します。逆に、ユーザーとの接点のない部分(後ろで行われている処理)などは、「バックエンド」と呼ばれます。ログインフォームなどを用いて考えるとします。ログインに使う、inputタグなどの設計をするのは、フロントエンド側の仕事になります。一方でデータが送られてから、既存会員かどうかなどのチェックをする処理をするのはバックエンド側の仕事になります。フロントエンドプログラミングの例フロントエンドプログラミングとはその言葉の通りで、フロントエンドで使われるプログラミングです。そのため、ユーザーとの接点がある部分のプログラミング言語を書くのが、フロントエンドプログラミングと言えます。iOSアプリやAndroidアプリなどを含めると、非常に多岐に渡るため、web周りで有名な言語を解説しておくとHTMLCSSJavaScriptPHPRubyなどがあります。これらは、Web開発に使う言語とも表現されたりしています。詳しくは下の記事を読んでみてください。https://webcodezero.com/web-language/フロントエンドエンジニアの例では、「フロントエンドエンジニア」とは誰を指すのでしょうか。言葉の通り表現すれば、フロントエンドに携わるエンジニアを指します。これは会社によっても表現が変わるので、一概には言えませんが、一般的には「Webデザイナー」と区別するためにWebデザイナー:フロントエンドのデザイン部分を担当フロントエンドエンジニア:フロントエンドの処理部分を担当のように分類して表現されることが多いみたいです。先程のログインフォームの例で言うと、inputタグなどのレイアウトを決定・配置するだけならwebデザイナーでも可能です。そこに細かな入力規制やバックエンドへのデータの受け渡しなどが必要となると、フロントエンドエンジニアの出番となります。Webデザイナーとの違いほとんど説明してしまいましたが、これが一番良く聞かれるので細かく解説しておきます。Webデザイナーとフロントエンドエンジニアの明確な違いは「デザイン」がメインか「プログラム」がメインかの違いになります。ここで言う「プログラム」とは、JavaScriptやPHPなどで開発されたシステムのことを指しています。仕事で使う割合が大きいものを説明すると比較的分かりやすいと思います。Webデザイナー:HTML,CSS,JavaScript,Adobe関連フロントエンドエンジニア:JavaScript,PHP,Ruby※1例です。実際のところ、プログラムが書けるWebデザイナーは何の名称になるのかなど、曖昧なところが多いのがWeb周りの肩書の問題です。似たような肩書が複数あるので、一つ一つ細かく分類してみます。Webデザイナー:Webサイト・サービスのデザインを担当するWebプログラマー:Webサイト・サービスのプログラミングを担当するWebクリエイター:WebデザイナーとWebプログラマーを兼任するWebエンジニア:フロントエンドエンジニアとバックエンドエンジニアを兼任フロントエンドエンジニア:ユーザーとの接点部分を担当するバックエンドエンジニア:サーバーサイドを担当するバックエンドエンジニアは、サーバーサイドエンジニアとも言われます。上の一覧を見ると、お互いに仕事内容が被っている肩書があります。事実、肩書は同じでも会社毎に仕事内容が違ったりします。大雑把なまとめとしては、これを覚えておきましょう。Webサービスには、ユーザーとの接点になるフロント側とサーバー側があるフロント側には、デザインを作る仕事とプログラムを作る仕事があるそれぞれ兼任してはいけないという決まりはないエンジニア別に求められるスキルそれでは、それぞれの肩書に求められるスキルを説明していきます。参考程度に見てみてください。フロントエンドエンジニアJavaScriptPHPRubyなどのサーバー側と連携するための言語。バックエンドエンジニアPHPMySQL(セキュリティ関連の知見)個人的には、フロント側が多いので対応経験は少ないです。WebデザイナーHTMLCSSJavaScriptAdobe(Photoshop,Illustratorとか)プラスアルファでUX周りの知見があるとかなり良いですね。WebプログラマーJavaScriptPHPRubyフロントエンドエンジニアと被らせています。フロントエンドプログラミングに関するまとめいかがでしたか?要点をもう一度まとめておくと。Webサービスには、ユーザーとの接点になるフロント側とサーバー側があるフロント側には、デザインを作る仕事とプログラムを作る仕事があるそれぞれ兼任してはいけないという決まりはないになります。最後まで読んでいただき、ありがとうございました。今回は筆者のワードプレスでのサイト運営経験や、プログラミングスクール...ホームページ作成ツールPAGEKit(ページキット)の評判は?ホームページの超初心者向けサービスを利用した感想サービス開始から12周年が立ち、述べ19,000名以上に利用されているのが、PAGEKit(ページキット)です。今回は、html文字化けの原因や対...WordPress(ワードプレス)グーペとワードプレスを比較!初心者にオススメはどっち?初心者がホームページを作成したい時に使うツールとして、グーペやワードプレス(WordPress)があります。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。