<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>プログラミング アーカイブ - エンジニアスタート</title>
	<atom:link href="https://engineer-start.com/category/programming/feed/" rel="self" type="application/rss+xml" />
	<link>https://engineer-start.com/category/programming/</link>
	<description>Web制作のフロントエンドエンジニア初心者向け。いち早く初学者を抜け出すために、効率的に無駄なくプログラミング学習をすすめるため情報ブログ。</description>
	<lastBuildDate>Sun, 23 Oct 2022 13:08:45 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.2</generator>

<image>
	<url>https://engineer-start.com/wp-content/uploads/2022/03/cropped-favicon-32x32.png</url>
	<title>プログラミング アーカイブ - エンジニアスタート</title>
	<link>https://engineer-start.com/category/programming/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>レンタルサーバーやWordPressの最初にやるべきセキュリティ対策を紹介【初学者向けです】</title>
		<link>https://engineer-start.com/programming/security-beginner/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Tue, 05 Jul 2022 15:38:49 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=380</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 Webサイト制作のエンジニアの方で、セキュリティにあまり詳しくない方 これからWordpressやサーバーを使いたい方 サイト制作において、最低限のセキュリティ対策をして安心したい方 最近はサイ [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/security-beginner/">レンタルサーバーやWordPressの最初にやるべきセキュリティ対策を紹介【初学者向けです】</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>Webサイト制作のエンジニアの方で、セキュリティにあまり詳しくない方</li><li>これからWordpressやサーバーを使いたい方</li><li>サイト制作において、最低限のセキュリティ対策をして安心したい方</li></ul>



<p>最近はサイバー攻撃など、よく耳にしますよね。</p>



<p>今からエンジニアを始めたい方は特に、不安になられている方もいるかと思います。</p>



<p>セキュリティに詳しく、対策のできるエンジニアは、</p>



<p>Webサービスを展開している企業だと、必須で必要になるかと思います。</p>



<p>とはいえ、個人でブログをやっている方や、メディアを作っている方は、</p>



<p>セキュリティに強いサーバー構築から制作・開発までをこなすのは至難の業ですよね。</p>



<p>そこで今回は、そういった制作や開発において、セキュリティ面で最低限やるべきことや、</p>



<p>サイバー攻撃にやられないための知識を、初心者向けに紹介していきます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">レンタルサーバーの最初にやるべきセキュリティ対策</a><ol><li><a href="#toc2" tabindex="0">WAF</a></li><li><a href="#toc3" tabindex="0">IP制限</a></li><li><a href="#toc4" tabindex="0">パーミッションの設定</a></li></ol></li><li><a href="#toc5" tabindex="0">WordPressの最初にやるべきセキュリティ対策</a><ol><li><a href="#toc6" tabindex="0">プラグイン</a></li><li><a href="#toc7" tabindex="0">ログインのユーザー名、パスワード</a></li></ol></li><li><a href="#toc8" tabindex="0">もちろん、100%サイバー攻撃を防げるわけではない</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">レンタルサーバーの最初にやるべきセキュリティ対策</span></h2>



<p>まとめると、下記の対策をしましょう。</p>



<ul><li><span class="marker">WAFの設定</span></li><li><span class="marker">IP制限</span></li><li><span class="marker">パーミッションの設定</span></li></ul>



<h3 class="wp-block-heading"><span id="toc2">WAF</span></h3>



<p>WAFとは、「Web Application Firewall」のことで、</p>



<p>Webアプリケーションへの攻撃を守るための機能です。</p>



<p>レンタルサーバーの多くは、このWAFの設定が「レンタルサーバーのコントロールパネル上」でできまして、</p>



<p>WordPressなどへの「脆弱性をついた攻撃」からサイトを守ることができます。</p>



<p>特にWordpressに関しては、多くのWebサイトがWordpressで構築されていることもあり、</p>



<p>WordPressを狙うハッカーは多いそうです。</p>



<p>理由は、「多く使われているツールを狙ったほうが、多くの情報を搾取できる」からだとか。</p>



<p>なので狙われる可能性は結構高いです。</p>



<p>お問い合わせフォームやログイン機能を持ったサイトを構築するときは、個人情報・機密にすべき情報を取り扱うことになるので、</p>



<p>情報漏えいを防ぐために、ぜひ設定しておきましょう。</p>



<h3 class="wp-block-heading"><span id="toc3">IP制限</span></h3>



<p>IP制限とは、ざっくりいうと「あるネットワークのIPアドレスからアクセスできないようにする」制限です。</p>



<p>レンタルサーバーだと「国外IP制限」という設定があったりします。</p>



<p>「国外IP制限」は海外からアクセスできないようにする設定です。</p>



<p>国外には、なんとなくイメージつくかと思うんですが、凄腕のハッカーがいます。</p>



<p>そこからの攻撃をさせないための設定ですね。</p>



<p>これは（海外向けのサイトを構築するわけでなければ、）設定しておいたほうがいいかと。</p>



<p>IP制限の設定方法は他にも色々ありまして、</p>



<p>「あるサイトは、自分が使っているIPのみアクセス可能にする」だったりの設定もできます。</p>



<p>この方法は、例えば、他会社の案件をコーディングしているときに役立つかもしれません。</p>



<p>テスト用のサーバーで他会社の案件のWordpressサイトを構築するときは、なるべく他の人が閲覧できないようにしておくべきですよね。</p>



<p>なぜかというと、リリース前の知られたくない情報が載っていたりするので、サイトを見られてはいけない場合があったり、</p>



<p>そもそもコーディング途中の表示崩れが起こっているサイトを見ることができる状態が好ましくないです。</p>



<p>こちらも設定方法を知っておくと、良いかもしれません。</p>



<h3 class="wp-block-heading"><span id="toc4">パーミッションの設定</span></h3>



<p>パーミッションとは、「ファイルに対する制限」になります。</p>



<p>レンタルサーバーにファイルを上げたあと、そのファイルに対して、設定することができます。</p>



<p>具体的には、「読み」「書き」「実行」の制限が、ユーザーの種類ごとにできます。</p>



<p>「読み」とはファイルの内容などを表示する権限</p>



<p>「書き」とはファイルを上書き削除したりする権限</p>



<p>「実行」とはファイルのプログラムを実行する権限</p>



<p>になります。</p>



<p>ユーザーの種類によって分けることができて、</p>



<p>「自分」「他者」「グループ」といったユーザーの種類に対して、どこまでの権限を与えるか？</p>



<p>みたいな感じで設定できます。</p>



<p>FTPソフトを使うと、より簡単に設定できるかと思いますので、ぜひやってみてください！</p>



<h2 class="wp-block-heading"><span id="toc5">WordPressの最初にやるべきセキュリティ対策</span></h2>



<h3 class="wp-block-heading"><span id="toc6">プラグイン</span></h3>



<p>セキュリティのプラグインを入れてください。</p>



<p>個人的によく使っているのは、Siteguardというプラグインです。</p>



<p>ざっくりなにができるのか、といいますと、</p>



<ul><li>不正アクセスの防止</li><li>不正ログインの防止</li></ul>



<p>ですね。（それ以外もあるけど主な目的はこれ。）</p>



<p>WordPressのURLを変更できる機能がありまして、</p>



<p>第三者がWordpressの管理画面に不正にアクセスすることを防ぎます。</p>



<p>具体的には、Wordpressの管理画面にアクセスするとき、デフォルトの状態だと、</p>



<p>【サイトのURL】/wp-admin/</p>



<p>になります。これだと、サイトのURLが分かる時点で、第三者がアクセスできてしまいますよね。</p>



<p>もちろんログイン情報を持っていないと管理画面の中身までみることはできませんが、あまり好ましくありません。</p>



<p>ですが、siteguardを使用すると、</p>



<p>【サイトのURL】/login_任意の5桁の数字/</p>



<p>にURLを変更してくれます。つまりURLを隠す機能があります。</p>



<p>不正ログインの防止については、ログイン画面の画像認証という機能がついてます。</p>



<p>「コンピュータからの攻撃を防ぐ」ための判別するための機能です。</p>



<p>コンピュータだと、ログイン情報を自動で打ち込んで管理画面に入ったりという動作も可能ですので、</p>



<p>画像認証があると、コンピュータからの攻撃を受けにくくなるそうです。</p>



<h3 class="wp-block-heading"><span id="toc7">ログインのユーザー名、パスワード</span></h3>



<p>これに関しては、それぞれ「24桁のランダムな文字列」がよいかなと。</p>



<p>少なくとも、簡単な意味のある文字列「admin」などは設定しない方が無難です。</p>



<p>WordPressを設置する際にユーザー名とパスワードを設定することになるので、その際に設定してください。</p>



<p>ちなみに、「パスワードを自動で生成してくれるツール」もあるので、</p>



<p>こういったツールを使ったほうが楽です。</p>



<h2 class="wp-block-heading"><span id="toc8">もちろん、100%サイバー攻撃を防げるわけではない</span></h2>



<p>今回は初心者向けに、セキュリティ対策を紹介してきました。</p>



<p>もちろんこれらの設定をおこなったからといって、100%サイバー攻撃を防げるわけではない、ということを忘れずにしておきましょう。</p>



<p>ただ、最低限の設定をしておくことで、防御力は確実に上がるかと思いますので、設定してみてください！</p>



<p>それでは〜</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/security-beginner/">レンタルサーバーやWordPressの最初にやるべきセキュリティ対策を紹介【初学者向けです】</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>フロントエンドエンジニアとバックエンドエンジニアの違いとは？作業の違いを解説【適正や将来性についても解説】</title>
		<link>https://engineer-start.com/programming/engineer-kinds/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Sun, 05 Jun 2022 15:57:45 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[転職]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=372</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 フロントエンドエンジニアとバックエンドエンジニアの違いを知りたい方 エンジニアになりたい方で、どういう種類があるのか知りたい方 Web業界で働いている方 Web制作やアプリ開発で、フロントエンド [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/engineer-kinds/">フロントエンドエンジニアとバックエンドエンジニアの違いとは？作業の違いを解説【適正や将来性についても解説】</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>フロントエンドエンジニアとバックエンドエンジニアの違いを知りたい方</li><li>エンジニアになりたい方で、どういう種類があるのか知りたい方</li><li>Web業界で働いている方</li></ul>



<p>Web制作やアプリ開発で、フロントエンドエンジニアとバックエンドエンジニアが存在します。</p>



<p>フロントエンドエンジニアは、Webサイトやアプリケーションの「見た目を整える」ことが主な仕事になります。</p>



<p>ここで、フロントエンドエンジニアとWebデザイナーって一緒じゃないの？って思った方、別記事で違いを説明しているので御覧ください。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/frontend/design-coding-difference/" title="【よくある疑問】デザインとコーディングの違いとは？" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="120" height="90" src="https://engineer-start.com/wp-content/uploads/2022/04/1198594_s.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" decoding="async" srcset="https://engineer-start.com/wp-content/uploads/2022/04/1198594_s.jpg 640w, https://engineer-start.com/wp-content/uploads/2022/04/1198594_s-300x225.jpg 300w" sizes="(max-width: 120px) 100vw, 120px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【よくある疑問】デザインとコーディングの違いとは？</div><div class="blogcard-snippet internal-blogcard-snippet">この記事を読んでほしい方Web制作業務で、どの業務に興味があるかを知りたい方デザインとコーディングの違いを知りたい方以前、この記事に「制作の流れ」を書きました。この「制作の流れ」に、デザイン、コーディン...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.04.15</div></div></div></div></a>
</div></figure>



<p>バックエンドエンジニアは、データのやりとりなど、Webサイトやアプリケーションの「システムを構築する」ことが仕事です。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">フロントエンドエンジニアとバックエンドエンジニアの違いとは？</a><ol><li><a href="#toc2" tabindex="0">フロントエンド</a></li><li><a href="#toc3" tabindex="0">バックエンド</a></li></ol></li><li><a href="#toc4" tabindex="0">どんな人が適正か？</a><ol><li><a href="#toc5" tabindex="0">フロントエンド</a></li><li><a href="#toc6" tabindex="0">バックエンド</a></li></ol></li><li><a href="#toc7" tabindex="0">将来性は？</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">フロントエンドエンジニアとバックエンドエンジニアの違いとは？</span></h2>



<h3 class="wp-block-heading"><span id="toc2">フロントエンド</span></h3>



<p>フロントエンドでよく使う言語は下記のとおりです。</p>



<ul><li>HTML</li><li>CSS</li><li>Javascript</li><li>PHP</li></ul>



<p>HTMLやCSSは厳密にはプログラミング言語ではなく、「マークアップ言語」と呼ばれます。</p>



<p>そして本来、JavascriptやPHPは、バックエンド言語となります。</p>



<p>これらを覚えておくと、</p>



<ul><li>ホームページやランディングページなど、Webサイトを制作できる。</li><li>Javascriptを覚えておけば、動きのあるサイトや、データのやり取りの一部が実装できる。</li><li>PHPを覚えておけば、Wordpressなどでの実装ができるようになる。</li></ul>



<p>こんな感じです。</p>



<p>Web制作の場合、Wordpressを使うことが多いかと。</p>



<p>WordPressは本来はブログ向けに作られたツールなんですが、</p>



<p>ホームページ制作などにも使われており、PHPが使われています。</p>



<p>アプリ制作では、ReactやVueといったJSのフレームワークを使った開発があります。</p>



<h3 class="wp-block-heading"><span id="toc3">バックエンド</span></h3>



<p>バックエンドでよく使う言語は多岐に渡ります。</p>



<ul><li>PHP</li><li>Javascript</li><li>Go</li><li>Python</li><li>C言語</li></ul>



<p>などなど、、、</p>



<p>フロントエンドよりも学習コストが高いな〜という印象です。。。</p>



<p>その代わり、平均年収はフロントエンドよりも高くなるイメージです。</p>



<p>バックエンドエンジニアがどんなことをやるかといいますと、</p>



<ul><li>ログイン機能の実装</li><li>ECサイトの購入フローのシステム構築</li></ul>



<p>などですね。</p>



<p>フロントエンドよりも、パズルのような頭の使い方をすることが多いと思うので、</p>



<p>ハマる人はハマるかなと思います！</p>



<h2 class="wp-block-heading"><span id="toc4">どんな人が適正か？</span></h2>



<h3 class="wp-block-heading"><span id="toc5">フロントエンド</span></h3>



<p>フロントエンドエンジニアは、下記のような人に適正があるかなと思います。</p>



<ul><li>Webサイトの見た目の部分に興味がある人</li><li>Webデザイナーやディレクターもやってみたい人</li><li>いち早くエンジニアとして独立したい人</li></ul>



<p>やはり、Webサイトの見た目を構築するのがフロントエンドエンジニアなので、</p>



<p>見た目や動きを実装したい！という方におすすめです。</p>



<p>「見た目や動き」をもっと奥深く説明すると、作りたいサイトを実装する際、</p>



<p>どこに何のコンテンツを入れるか？今後運用する中で不都合がでないか？</p>



<p>などをWebデザイン視点で考えられるフロントエンドエンジニアは強いと思います。</p>



<p>例えば、あるホームページで、キャンペーン用の別サイトを作る、となった場合、</p>



<p>ホームページの中に別サイトの導線としてバナーを作りたい、となった場合に、</p>



<p>バナーを入れ込んでサイトの表示に崩れだったりデザインの不都合が出ないか？</p>



<p>といった感じですね。</p>



<p>またフロントエンドエンジニアは、いち早く独立するためには最適かなと思います。</p>



<p>フロントエンドエンジニアとして業務ができるレベルまでになれれば、</p>



<p>その後に色々なパターンのことに携われる可能性が出てきます。</p>



<ul><li>APIを使ってバックエンドが必要な機能を実装する</li><li>SEOやマーケティングにこだわったサイトを制作して集客する</li><li>自らのブランディングのためにサイトを作る</li></ul>



<p>などですね。</p>



<p>実は、バックエンドの機能は、「API」という連携機能のようなもので実装するという方法もあります。</p>



<p>フロントエンドのエンジニアでも使える機能になりまして、有名どころはFirebaseですかね。</p>



<p>フロントエンドにも「ノーコード」というツールがありますが、見た目の実装が何でもできるかといったら、そうではないので、フロントエンドエンジニア自体はまだ必要かと。</p>



<p>同じくバックエンドエンジニアもFirebaseのようなAPI機能があるからといって、まだ汎用性に欠けるかと。</p>



<h3 class="wp-block-heading"><span id="toc6">バックエンド</span></h3>



<p>バックエンドエンジニアは、下記のような人に適正があるかなと思います。</p>



<ul><li>Webサイトやアプリなどのシステムに興味がある人</li><li>一般の人が読めないコードをガンガン書いていきたい人</li><li>パズルみたいな感覚が好きな人</li><li>一人で全部構築したい人</li><li>コードを書くこと単体で年収を上げていきたい人</li></ul>



<p>バックエンドエンジニアはフロントエンドエンジニアよりもコーディングスキルが必要、というのが一般的な意見かなと思います。</p>



<p>特にコーディングを数年後もガンガンやっていきたい人や、基本的に人とコミュニケーションをとらずに一人でサービスやサイトを構築していきたい人にはおすすめです。</p>



<p>スキルが求められるということは、やはり年収は高いイメージがありますね。</p>



<p>もちろん会社が求める人材にもよりけりでしょうが、需要はあるかと思います。</p>



<p>フロントエンドもそうなんですが、特にバックエンド言語はエラー対処能力や運用のしやすさはかなり求められるかなと思います。</p>



<p>また、そういった言語が使えると、</p>



<p>業務を効率化させるためのコードを書いたり、</p>



<p>単純作業を自動化させるなどの実装もできるようになってくるので、</p>



<p>Webサイトやアプリを構築する以外にも、色んな付加価値があるかな〜と思います！</p>



<p>システム側は個人情報やクレジット情報を扱ったりすることもあるので、フロントエンドもそうですが、責任感が強い人は向いているかと。</p>



<p>例えば、ECサイトではお支払いの画面で、クレジット情報を扱ったりしますね。</p>



<p>お問い合わせフォームでは、ユーザーに個人情報を打ち込んでもらうので</p>



<p>そういったものが外に漏れないようにしておく知識とかも必要になってきます。</p>



<h2 class="wp-block-heading"><span id="toc7">将来性は？</span></h2>



<p>フロントエンド、バックエンドと、それぞれのエンジニアについて紹介してきましたが将来性でいうとどうなのか、解説していきます。</p>



<p>といっても、未来予測みたいなことなので、確実ではないです。</p>



<p>ただ、今までWeb業界で働いてきた中で、こうなりそうだなというのを書いていきます。</p>



<p>結論としては、どちらのエンジニアの作業も、今後はより簡単になっていくかと。</p>



<p>一番の例としては、ノーコードツールの発展ですかね。</p>



<p>コーダーやプログラマーがいなくても、つまりコードを書かなくとも</p>



<p>Webサイトの見た目を作ったり、システムの構築ができたりします。</p>



<p>ではなぜ、まだまだエンジニアが必要なのか？といいますと、</p>



<p>それらのツールがまだ汎用的に使うことができず、思ったデザインを再現できなかったり、</p>



<p>使いたい機能が実装できなかったりするところかなと思います。</p>



<p>とはいえ、IT自体が需要が高まっている傾向にありますので、エンジニアになることで損はないかと！</p>



<p>リモートで働きやすいのも一つのメリットですね。</p>



<p>デメリットもあるけど、現状では夢のある仕事だと思います！</p>



<p>ちょっとだけ補足すると、フロントエンド、バックエンドどちらをやるにしても、別の付加価値のある人材は強いイメージです。</p>



<p>エンジニア × マーケティング能力<br>エンジニア × Webデザイン<br>エンジニア × Webディレクション</p>



<p>以上です。興味のある方はぜひエンジニア目指してみてください〜！</p>



<p>それでは！</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/engineer-kinds/">フロントエンドエンジニアとバックエンドエンジニアの違いとは？作業の違いを解説【適正や将来性についても解説】</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>パソコン作業はどこでする？集中できる場所を紹介！</title>
		<link>https://engineer-start.com/programming/work-place/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Mon, 23 May 2022 22:53:45 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=345</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 自宅でのパソコン作業に集中できない方 プログラミングやコーディングを勉強中の方 コーヒーとか飲みながら作業したい方 コーディング学習をしている方、今集中的に取り組んで息抜きの最中にこの記事を読ん [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/work-place/">パソコン作業はどこでする？集中できる場所を紹介！</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>自宅でのパソコン作業に集中できない方</li><li>プログラミングやコーディングを勉強中の方</li><li>コーヒーとか飲みながら作業したい方</li></ul>



<p>コーディング学習をしている方、今集中的に取り組んで息抜きの最中にこの記事を読んでいる方、</p>



<p>ちょっと環境を変えて作業してみませんか？</p>



<p>自宅だと、</p>



<ul><li>まわりに誘惑が多い</li><li>人の目がないのでスローペースになってしまう</li><li>ベッドで作業してたらいつの間にか寝てしまう</li></ul>



<p>こんな感じで作業進まなかったりします。</p>



<p>僕自身もコーディング作業するときに、場所を変えたりすることが多いんですが、</p>



<p>今回は、パソコン作業に向いている環境を紹介します！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">パソコン作業はどこでする？集中できる場所を紹介！</a><ol><li><a href="#toc2" tabindex="0">カフェ・喫茶店</a></li><li><a href="#toc3" tabindex="0">ネットカフェ</a><ol><li><a href="#toc4" tabindex="0">ネットカフェの隠れたメリット</a></li></ol></li></ol></li><li><a href="#toc5" tabindex="0">環境を変えての作業は、短期集中型のコーディング初心者、プログラミング初心者におすすめです。</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">パソコン作業はどこでする？集中できる場所を紹介！</span></h2>



<h3 class="wp-block-heading"><span id="toc2">カフェ・喫茶店</span></h3>



<p>カフェや喫茶店、めっちゃおすすめです。</p>



<p>僕はカフェのおかげでエンジニアとして成長できたといっても過言ではないです。</p>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="640" height="427" src="https://engineer-start.com/wp-content/uploads/2022/05/23512668_s.jpg" alt="" class="wp-image-350" srcset="https://engineer-start.com/wp-content/uploads/2022/05/23512668_s.jpg 640w, https://engineer-start.com/wp-content/uploads/2022/05/23512668_s-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></figure>



<p>メリットは、</p>



<ul><li>コーヒーを飲みながら作業できる</li><li>周りに人がいるので、作業以外の行動を制限できる</li><li>ソファーなど、座ってて疲れない椅子がある</li></ul>



<p>このあたりですね。</p>



<p>ご存じの方もいらっしゃるとは思いますが、コーヒーに含まれるカフェインには、</p>



<p>頭がスッキリして作業に集中できる効果があるみたいなので、</p>



<p>特に集中力が切れている人や、どこかの作業が解決できない人には、</p>



<p>飲みながら作業できるのでおすすめです。</p>



<p>カフェだと周りに人がいるため、自宅で作業しているときとは違い、ある程度の緊張感を保つことができます。</p>



<p>緊張感を保てるので、作業中にうっかり寝てしまったり、別の作業をしてしまったりすることは減っていくかと。</p>



<p>あとは、家に作業用の椅子がない人にとっては、</p>



<p>ソファーが使えるのも大きなメリットですね。</p>



<p>ただ、カフェや喫茶店で作業する場合に気をつけておきたいこととしては、</p>



<p>「セキュリティが保たれたネット環境を使用できない」ことが一般的であることですね。</p>



<p>特に仕事で使う重要な資料とかはなるべく扱わないようにすることを推奨します。</p>



<h3 class="wp-block-heading"><span id="toc3">ネットカフェ</span></h3>



<p>カフェかぶりなんですが、ネットカフェもおすすめです！</p>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="640" height="353" src="https://engineer-start.com/wp-content/uploads/2022/05/355510_s.jpg" alt="" class="wp-image-354" srcset="https://engineer-start.com/wp-content/uploads/2022/05/355510_s.jpg 640w, https://engineer-start.com/wp-content/uploads/2022/05/355510_s-300x165.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></figure>



<p id="block-8686ae5c-d0c9-46ef-a4bb-26bc646553fa">メリットは、</p>



<ul id="block-4eaedfda-6ff9-48b9-8768-c09ec20904d4"><li>個室の空間で作業できる</li><li>パソコン作業に最適な環境が一通りそろっている</li><li>自分の好きなタイミングで飲食できて、息抜きもしやすい</li></ul>



<p>ネットカフェであれば、個室で集中して作業ができます。</p>



<p>自宅以外で、個室の空間で作業できるところって意外とないんですよね。。</p>



<p>気分を変えたい人におすすめかなと思います！</p>



<p>あとは、パソコン作業に最適な環境が一通りそろっているかなと。</p>



<p>大きめのディスプレイやヘッドフォンが用意されていることも多いですし、</p>



<p>リクライニングソファとかも使えるところがあります。</p>



<p>それ以外ですと、自分の好きなタイミングで飲食ができるので、</p>



<p>ネットカフェに着いてしまえば、パソコン作業以外の事で時間を取られることがないかなと思います。</p>



<p>デメリットとしては、誘惑が多いことですかね。</p>



<p>漫画とかもそろっているし、パソコンから動画を見ることもできるので、そこに気を取られない方であればおすすめです。</p>



<h4 class="wp-block-heading"><span id="toc4">ネットカフェの隠れたメリット</span></h4>



<p>そして、これは隠れたメリットだと思うんですが、</p>



<p>「自分のものとは違うパソコンで作業する」ことができます。</p>



<p>コーディングやプログラミングのチーム開発でよく使われているgitや、</p>



<p>その他データのやり取りなど、</p>



<p>自分のパソコンで行っている作業を、他のパソコンでも試すことができるか</p>



<p>が実践できます。</p>



<p>この点は、試すことができる機会も少なく、実際に業務で意外と行き詰まるところだったりするんですよね。</p>



<p>コーディング初心者の方など、ネットカフェで作業する機会があれば、是非試してみてほしいです！</p>



<h2 class="wp-block-heading"><span id="toc5">環境を変えての作業は、短期集中型のコーディング初心者、プログラミング初心者におすすめです。</span></h2>



<p>パソコン作業に集中できる場所を紹介しました！</p>



<p>もちろん、自宅で集中できる方は、お金もかからないし自宅で作業するのがいいかなと思いますが、</p>



<p>今はいろんな環境でパソコン作業できるので、せっかくなら環境を変えて、気分を変えつつ作業するのもいいかなと！</p>



<p>是非試してみてください〜</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/work-place/">パソコン作業はどこでする？集中できる場所を紹介！</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>web業界の完全未経験者向け：エンジニア転職の方法を解説【失敗しない為のおすすめは、「無料から始める」です。】</title>
		<link>https://engineer-start.com/web-create/beginner-study/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Mon, 16 May 2022 22:52:47 +0000</pubDate>
				<category><![CDATA[Web制作]]></category>
		<category><![CDATA[フロントエンド]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[転職]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=321</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 エンジニア転職を目指してる方 どうすればエンジニアになれるか知りたい方 転職までの行動で、失敗したくない方 こんにちは、Joeです。 今の業務をやっていて、楽しさを感じることができていない方、ぜ [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/web-create/beginner-study/">web業界の完全未経験者向け：エンジニア転職の方法を解説【失敗しない為のおすすめは、「無料から始める」です。】</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>エンジニア転職を目指してる方</li><li>どうすればエンジニアになれるか知りたい方</li><li>転職までの行動で、失敗したくない方</li></ul>



<p>こんにちは、Joeです。</p>



<p>今の業務をやっていて、楽しさを感じることができていない方、ぜひWeb業界へのエンジニア転職がおすすめです。</p>



<p>僕は<span class="marker-under-blue">Web業界に入って、仕事が楽しい</span>と思えるようになりました。</p>



<p>プログラミング、コーディングの楽しさについて、具体的に書いてる記事があるので、見てみてください。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/programming/programming-enjoy/" title="【プログラミングが続かない人に見てほしい】プログラミング・コーディングの楽しさとは？" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="135" height="90" src="https://engineer-start.com/wp-content/uploads/2022/04/22306717_s.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://engineer-start.com/wp-content/uploads/2022/04/22306717_s.jpg 640w, https://engineer-start.com/wp-content/uploads/2022/04/22306717_s-300x200.jpg 300w" sizes="(max-width: 135px) 100vw, 135px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【プログラミングが続かない人に見てほしい】プログラミング・コーディングの楽しさとは？</div><div class="blogcard-snippet internal-blogcard-snippet">この記事を読んでほしい方コーディングやプログラミング独学中で、挫折しかけている人プログラミングに楽しさが見いだせず、学習をやめてしまっている人プログラミングやコーディングは、PCとひたすら向き合う作業です。ずっと続...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.04.09</div></div></div></div></a>
</div></figure>



<p><span class="marker-under-blue">Web業界で働くメリット</span>はなにかというと、</p>



<ul><li>色々な業界から必要とされるスキルが身につくので無駄にならない</li><li>無料からはじめられる</li><li>作業はハマると楽しいし、割とすぐ結果が出やすいので自己肯定感が上がる</li><li>やり方次第でガッツリお金が稼げる</li><li>リモート業務が可能なので、色んな場所で働ける</li><li>コーディングにおいては、コミュニケーション能力に左右されずに業務できる</li><li>ゆくゆくはフリーランスになることも可能</li></ul>



<p>などなど様々なメリットがあります。</p>



<p><span class="marker-under-red">デメリットももちろんありまして</span>、</p>



<ul><li>効率よく勉強しないと、すぐに結果が出なかったりする</li><li>一時期、ガンガン作業する期間が必要</li><li>コツコツが苦手な方には合わないかも</li></ul>



<p>個人的にこんなイメージです。</p>



<p>なので、エンジニア転職には、性に合えば<span class="marker-under-blue">「楽しく仕事しながらお金を稼ぐ」</span>ことができる可能性があると思います。</p>



<p>ただ、自分の性に合っているかが分からないままお金を使ってエンジニア転職を目指すよりも、</p>



<p>無料から始めつつ、自分に合っているかを見極めて、転職を目指すのがおすすめです。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-8" checked><label class="toc-title" for="toc-checkbox-8">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">web業界の完全未経験者におすすめしたい、エンジニア転職の方法</a><ol><li><a href="#toc2" tabindex="0">プログラミングスクールを利用する</a></li><li><a href="#toc3" tabindex="0">ポートフォリオを作る</a></li><li><a href="#toc4" tabindex="0">転職エージェントを使ってエンジニア転職する</a></li></ol></li><li><a href="#toc5" tabindex="0">エンジニア転職は、より豊かに生きていく可能性を秘めている</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">web業界の完全未経験者におすすめしたい、エンジニア転職の方法</span></h2>



<p>流れとしては、</p>



<ol><li>プログラミングスクールを利用する</li><li>ポートフォリオを作る</li><li>転職エージェントを使ってエンジニア転職する</li></ol>



<p>こんな感じです。</p>



<h3 class="wp-block-heading"><span id="toc2">プログラミングスクールを利用する</span></h3>



<p>プログラミングスクールはおすすめです。</p>



<p>なぜかと言いますと、下記のとおりです。</p>



<ul><li>プログラミングの1分野について網羅的に学べて、分からないところをメンター（先生）に聞ける</li><li>期限を設けて作業ができる</li><li>最終的に転職活動がスムーズになる</li><li>面接の際に話がしやすい</li></ul>



<p>ただ、大半のプログラミングスクールは高額です。</p>



<p>高額だけど、「楽しく仕事しながらお金を稼ぐ」つまり、転職してお給料をいただくか、</p>



<p>フリーランスになる、までいけたら、すぐに元が取れると思います。</p>



<p>転職するつもりはないけど副業でプログラミングしたい、という方も同じくですね。</p>



<p>とはいえ、性に合うかどうか判断するために無料から始めることがおすすめです。</p>



<p>無料体験できるプログラミングスクールはこちら。</p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N1LYZ+9HQU0I+3GWO+6BU5U">テックアカデミー無料体験</a></p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N85OQ+FP0DV6+3XAE+5ZMCI">受講者満足度も90%以上！【WEBCAMP】</a></p>



<p>あとは、無料でもスクールでもないんですが、オンラインの学習サイトのUdemyも、安くで学習できるのでおすすめです。</p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N85OW+4S2ALU+3L4M+6L9O2">世界最大級のオンライン学習サイトUdemy</a></p>



<h3 class="wp-block-heading"><span id="toc3">ポートフォリオを作る</span></h3>



<p>学習が終わったら、ポートフォリオは作りましょう。</p>



<p>エンジニア転職であれば、企業側としてどのくらいのスキルがあるか、見たいと思うので。</p>



<p>ポートフォリオの作り方の詳細は、また別記事にまとめてます〜</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/job-change/portfolio-beginner/" title="Web制作のフロントエンド転職で使うポートフォリオの作り方とは？【おすすめは1から制作です】" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="160" height="90" src="https://engineer-start.com/wp-content/uploads/2022/04/23372556_s-160x90.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://engineer-start.com/wp-content/uploads/2022/04/23372556_s-160x90.jpg 160w, https://engineer-start.com/wp-content/uploads/2022/04/23372556_s-300x169.jpg 300w, https://engineer-start.com/wp-content/uploads/2022/04/23372556_s-120x68.jpg 120w, https://engineer-start.com/wp-content/uploads/2022/04/23372556_s-320x180.jpg 320w, https://engineer-start.com/wp-content/uploads/2022/04/23372556_s.jpg 640w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">Web制作のフロントエンド転職で使うポートフォリオの作り方とは？【おすすめは1から制作です】</div><div class="blogcard-snippet internal-blogcard-snippet">Web制作のフロントエンドエンジニアとして転職したい方向けに、ポートフォリオサイトの制作についての内容を書いてます。結論としては「1からサイト制作」することをおすすめしてまして、その理由などを含めて概要をお伝えします。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.04.23</div></div></div></div></a>
</div></figure>



<h3 class="wp-block-heading"><span id="toc4">転職エージェントを使ってエンジニア転職する</span></h3>



<p>エンジニア転職であれば、転職エージェントを利用するのが良いと思います！</p>



<p>僕も一度利用したことがありまして、履歴書の添削をしてくれたり、</p>



<p>複数の企業さんと繋げていただいたりしまして、</p>



<p>現在はありがたいことに、レバテックキャリアにご紹介いただいた企業に務めてます。</p>



<p>ただ、業務未経験だと、なかなかマッチする企業が見つからない可能性もありますので、</p>



<p>レバテックルーキーに登録がいいかもしれませんね。</p>



<p>どちらも無料で登録できます。</p>



<p><a rel="noopener" href="https://ac.ebis.ne.jp/tr_set.php?argument=2uzLfYxA&amp;ai=a5c983a1213412" target="_blank">ITエンジニアになりたい就活生のための就活エージェント【レバテックルーキー】</a></p>



<p><a rel="noopener" href="http://ac.ebis.ne.jp/tr_set.php?argument=2uzLfYxA&amp;ai=a538be7bd6648e" target="_blank">Webエンジニアの転職なら【レバテックキャリア】</a></p>



<h2 class="wp-block-heading"><span id="toc5">エンジニア転職は、より豊かに生きていく可能性を秘めている</span></h2>



<p>こんな感じで、エンジニア転職を目指す、もしくはエンジニアの仕事を知りたい場合、</p>



<p>無料で試しながら、エンジニアとしての能力を身に着けたり、知見をつけることができます。</p>



<p>もちろん、エンジニア転職にもメリット・デメリットがあるのですが、</p>



<p><span class="marker-under-blue">人によってはエンジニアになることで、今までよりも豊かに生きていくことができる</span>可能性があります。</p>



<p>たとえば僕の場合だと、</p>



<ul><li>リモート勤務が可能になった</li><li>エンジニアの業務が楽しいので、興味を持って仕事ができるからストレスがない</li><li>コーディングの話ができる人同士の会話が面白く、人脈が増えてきた</li><li>WordPressを主に使うエンジニアなので、ブログを書くなどエンジニア以外の仕事ができる</li><li>初心者を抜け出したあとも、無料で色々試しつつ勉強しているのでコスパが良い</li></ul>



<p>こんなメリットがありました！</p>



<p>個人的に、「自分はコツコツ作業することができそう」とか「PC技術に興味がある！」と思う人には</p>



<p>ぜひぜひ試してみてほしいなと思います！</p>



<p>それでは〜</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/web-create/beginner-study/">web業界の完全未経験者向け：エンジニア転職の方法を解説【失敗しない為のおすすめは、「無料から始める」です。】</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【Webサイトやアプリの表側】フロントエンドにも色々な種類があるよ、という話</title>
		<link>https://engineer-start.com/frontend/frontend-production-app/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Sun, 17 Apr 2022 10:24:56 +0000</pubDate>
				<category><![CDATA[フロントエンド]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=267</guid>

					<description><![CDATA[<p>この記事を読んでほしい人 これから何をすれば、フロントエンドエンジニアになれるの？と悩んでる方 Webサイトなどの見た目に興味がある方 フロントエンドにも、色々な種類があります。 「サイトやアプリの見た目や動きを実装する [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/frontend/frontend-production-app/">【Webサイトやアプリの表側】フロントエンドにも色々な種類があるよ、という話</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい人</p>



<ul><li>これから何をすれば、フロントエンドエンジニアになれるの？と悩んでる方</li><li>Webサイトなどの見た目に興味がある方</li></ul>



<p>フロントエンドにも、色々な種類があります。</p>



<p>「サイトやアプリの見た目や動きを実装する」のがフロントエンドエンジニアの主な仕事なんですが、</p>



<p>サイトを作るのか？アプリを作るのか？だけでも、</p>



<p>どういった方法でコーディングしていくのかが変わってきます。</p>



<p>今回は、フロントエンド業務の種類について、書いていこうと思います！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-10" checked><label class="toc-title" for="toc-checkbox-10">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">フロントエンドエンジニア業務の種類</a><ol><li><a href="#toc2" tabindex="0">Web制作とWebアプリ開発で、使用するツールやフレームワークが異なる</a></li></ol></li><li><a href="#toc3" tabindex="0">Web制作寄りフロントエンドの場合、SEOやデザインにも興味を持ったほうが良い</a></li><li><a href="#toc4" tabindex="0">Webアプリ開発寄りフロントエンドの場合、UI/UXやコードそのものに興味を持てたほうが良い</a></li><li><a href="#toc5" tabindex="0">面白み自体は共通</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">フロントエンドエンジニア業務の種類</span></h2>



<p>Web制作・Webアプリ開発のフロントエンドエンジニアが共通してよく使うのは、下記の言語です。</p>



<ul><li>HTML</li><li>CSS</li><li>Javascript</li><li>PHP</li></ul>



<p>このあたりの言語は、１から書けて損はないでしょう。</p>



<h3 class="wp-block-heading"><span id="toc2">Web制作とWebアプリ開発で、使用するツールやフレームワークが異なる</span></h3>



<p>Web制作とWebアプリ開発で違うところで言えば、</p>



<p>これらの言語を使って、より良くコーディングするために<strong>「使われるツールやフレームワークが違う」</strong></p>



<p>というイメージです。</p>



<p>ちなみにフレームワークとは、</p>



<p>「開発に必要な機能をあらかじめ用意した枠組み」ですね。</p>



<p>Web制作でよく使われるのは、</p>



<ul><li>WordPress</li><li>jQuery</li><li>ノーコードツール</li></ul>



<p>Webアプリ開発でよく使われるのは、</p>



<ul><li>Javascriptのフレームワーク（Vue.jsやReact.jsなど）</li><li>PHPのフレームワーク（LaravelとかCakephpなど）</li></ul>



<p>例えば、Web制作でLaravelやVue.jsを使うこともありますが、あまり一般的ではないです。</p>



<p>今後もしかしたら流行る可能性はありますが、</p>



<p>現在ではWordpress、jQueryが使われることが多いかなと。</p>



<p>なぜツールやフレームワークが違うかといいますと、</p>



<p>作ることにおいて、「重点とする部分が違う」というのが一般的な考え方かなと思います。</p>



<ul><li>Web制作ではSEOやCSSでのスタイル調整、サイトの動き実装が重点的</li><li>Webアプリ開発では、アプリのUI/UXなど使い方が重点的</li></ul>



<p>たとえば、フレームワークを使ってサイトを構築すると、</p>



<p>SEOにこだわった制作をする上で効率的でなかったり、</p>



<p>WordPressでアプリ開発をするのが一般的でない、みたいなイメージです。</p>



<p>※あくまで「重点的」に考えることが多い、ということなので、Web制作でもUI/UXにこだわることはありますし、アプリ開発でスタイルにこだわることもあります。</p>



<h2 class="wp-block-heading"><span id="toc3">Web制作寄りフロントエンドの場合、SEOやデザインにも興味を持ったほうが良い</span></h2>



<p>Web制作をやりたい場合、</p>



<p>SEOやデザインに興味を持ったほうが良いと思います。</p>



<p>理由は単純で、作れるだけだと良いものができないからですね。</p>



<p>SEOを知っておけば、そのルールにある程度従ってコーディングできますし、</p>



<p>デザインについて知っておけば、どういうコーディング設計にすればよいか、スムーズに答えが出てきます。</p>



<p>あとは、Web制作のコーディング作業は、比較的難易度は低いです。</p>



<p>本気で頑張れば3ヶ月くらいで一通りHTMLやCSSで最低限コーディングできるようになるでしょう。</p>



<p>その分競合が多いため、その他のSEOやデザインに興味を持てれば、</p>



<p>フロントエンドエンジニアの人材として重宝されるんじゃないかなと思います。</p>



<p>またデザインやSEOなど、コーディング以外の作業を一人でできるようになれば、</p>



<p>フリーランスになる道も見えてきます。</p>



<p>ちなみにWordpressがWeb制作でよく使われるのは、</p>



<p>SEOに強い制作ができること、が一つの理由として挙げられます。</p>



<p>他にも制作をより効率よくするための機能がついてます。</p>



<p>また、最近ではノーコードツールも流行ってきていまして、制作する時間だけで考えると、ノーコードツールを使って制作するのもアリだと思いますが、</p>



<p>より細かくデザインを整えたり、SEOにこだわっていくには、</p>



<p>基本的なHTMLやCSS、Javascriptの使い方を覚えておくべきでしょう。</p>



<h2 class="wp-block-heading"><span id="toc4">Webアプリ開発寄りフロントエンドの場合、UI/UXやコードそのものに興味を持てたほうが良い</span></h2>



<p>Webアプリ開発をやりたい場合、</p>



<p>UI/UXには興味を持てたほうが良いかなと思います。</p>



<p>使いやすいアプリやツールを開発することが目的なので、</p>



<p>「ここはどういった機能で実装すれば、ユーザーが使いやすいか」を</p>



<p>知っておいたほうが良いかなと思います。</p>



<p>またアプリ開発では、より複雑なコーディングを行います。</p>



<p>JavascriptやPHPのフレームワークを使うとき、</p>



<p>それぞれのマークアップ言語・プログラミング言語を応用させて使うイメージです。</p>



<p>なので、JavascriptやPHPを１から書けておいたほうが良い、というのはもちろん、</p>



<p>HTMLやCSSの使い方もフレームワーク上で書くときは、基本の書き方と若干異なりますので、各言語の基礎力は身につけていった方が良いと思います。</p>



<h2 class="wp-block-heading"><span id="toc5">面白み自体は共通</span></h2>



<p>フロントエンドの面白みは、実装した見た目や機能が、ブラウザ上で直ぐに反映されてくれるので、</p>



<p>達成感を味わいやすいことが一つの醍醐味でしょう。</p>



<p>また、お客さんがサイトやアプリを見て、使いやすさを認めていただいたり、</p>



<p>デザイン面を評価していただいたときは嬉しいです。</p>



<p>僕はWeb制作寄りのフロントエンドでして、</p>



<p>以前勤めていた会社で、</p>



<p>結構動きがついていて、短納期のサイトをコーディングする案件があったんですが、</p>



<p>お客さんから「モーダルの動きがいい」というお言葉をいただいて、</p>



<p>「頑張って作ってよかったな〜」と思った経験があります。</p>



<p>（もちろん、上流工程を担当するディレクターやデザイナーにも感謝しました。）</p>



<p>そういった、「他の人からデザインや使いやすさの共感を得る」という経験を積み重ねていくと、</p>



<p>いいものが作れるフロントエンドエンジニアになれるのではないかなと思います！</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/frontend/frontend-production-app/">【Webサイトやアプリの表側】フロントエンドにも色々な種類があるよ、という話</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【プログラミング学習をしていて不安な方へ】不安をなくすための考え方や行動</title>
		<link>https://engineer-start.com/job-change/way-to-think/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Mon, 11 Apr 2022 16:07:12 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[転職]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=240</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 コーディング学習中だけど、このまま続けていて成長できるか不安な方 プログラミングで稼ぎたいけど、本当に稼げるか不安な方 何かの目的をもってプログラミングを始めた方、多いと思います。 お金を沢山稼 [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/job-change/way-to-think/">【プログラミング学習をしていて不安な方へ】不安をなくすための考え方や行動</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>コーディング学習中だけど、このまま続けていて成長できるか不安な方</li><li>プログラミングで稼ぎたいけど、本当に稼げるか不安な方</li></ul>



<p>何かの目的をもってプログラミングを始めた方、多いと思います。</p>



<p>お金を沢山稼ぎたい、やっていて楽しいと思えることを仕事にしたい、今の仕事が嫌なので転職するために試しているなどなど…</p>



<p>ただ、プログラミングの学習を進めていくうちに、そういった目的を達成できるか不安になることがあると思います。</p>



<p>そんな方々が身につけておきたい、考え方や行動の仕方を書いていこうと思います。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-12" checked><label class="toc-title" for="toc-checkbox-12">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">プログラミングは何かしら役に立つと考えて作業する</a></li><li><a href="#toc2" tabindex="0">学習に挫折しそう、もしくは飽きてきたら、ちょっと寄り道してみる</a></li><li><a href="#toc3" tabindex="0">本屋で技術書をざっくり読んで見る</a></li><li><a href="#toc4" tabindex="0">ひとつだけでもいいので、解決困難なエラーについて調べまくる</a></li><li><a href="#toc5" tabindex="0">学習が中途半端でも、転職活動に挑んで見る</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">プログラミングは何かしら役に立つと考えて作業する</span></h2>



<p>プログラミングを学習する中で行う作業は、いろんな業務で使えます。</p>



<p>プログラマーやエンジニアのみならず、仕事でパソコン作業を行うことは多いです。</p>



<p>プログラミング学習で、仕事に役立つことは例えば、</p>



<ul><li>タイピングが身につく。</li><li>パソコンの使い方について慣れることができる。</li></ul>



<p>これだけ身につけることができるだけでも、すごく意味があることだと思います。</p>



<p>パソコンについて知っているかいないかで、仕事ができる幅が大きく広がると考えることができます。</p>



<p>なので、無駄にならないという考え方で作業を進めましょう。</p>



<p>「向いていなかったら損してしまう」と考えるとなかなか作業がすすまないですからね。</p>



<p>またプログラミングを学んでいると、「効率化したい」という考えが、いつか出てくると思います。</p>



<p>パソコン作業を効率化する無料ツールなど、探して使ってみるだけでも、役に立つと思います！</p>



<p>プログラミングがもし仮に向いていなかったとしても、パソコン作業は何かの仕事で使えるので、お金が稼げないことはない、くらいで考えておくことがおすすめです。</p>



<h2 class="wp-block-heading"><span id="toc2">学習に挫折しそう、もしくは飽きてきたら、ちょっと寄り道してみる</span></h2>



<p>同じエラーに対して、たくさん調べすぎて作業が進まないときや、ちょっと単純作業になってきて飽きてきたときは、ちょっとだけ違う作業をしましょう。</p>



<p>例えば、今までで解決できていなかったエラーについてもう一度調べてみるとか、</p>



<p>他に面白そうなコーディングの技術や手法がないか探してみる、とかですね。</p>



<p>意外とそういったときに、以前迷っていた部分がすんなり解決したり、自分が知らなかった範囲で役に立ちそうな技術が見つかったりするんですよね。</p>



<p>パソコンで作業していれば、ネットワークに繋がっている限り、調べ物ができます。</p>



<p>どんどん解決していけば、同時にプログラミングも楽しくなっていくので、</p>



<p>今やっている作業から離れたいときは、他の事柄で調べ物をしてみることをおすすめします！</p>



<h2 class="wp-block-heading"><span id="toc3">本屋で技術書をざっくり読んで見る</span></h2>



<p>技術書は、技術を体系的に、網羅的に学びたいときにおすすめです。</p>



<p>初学者のうちは、ひとつひとつのことにつまづきがちですが、</p>



<p>技術書であれば、それを乗り越えた先にある、「プログラミングでできること」を先取りできます。</p>



<p>もちろん、自分が現状でつまづいている部分の解決策を見つけることもできます。</p>



<p>深く読んで身につけることもできるかと思いますが、まずはざっくり読んで、プログラミングでどんなことができるか、だけでも知ることができれば、</p>



<p>今つまづいている作業の対処も、乗り越えやすいのではと思います。</p>



<h2 class="wp-block-heading"><span id="toc4">ひとつだけでもいいので、解決困難なエラーについて調べまくる</span></h2>



<p>やはりプログラミング初心者の方が挫折しやすい事柄としては、「エラーによって作業が進まないこと」かなと。</p>



<p>ひとつだけでもよいので、エラーについてたくさん調べて、たくさん失敗してください。</p>



<p>そして、解決できるまで粘ってみてください。</p>



<p>なぜかというと、</p>



<ul><li>失敗した分だけ、次にエラーにぶつかったときに要点を絞ることができる。</li><li>ひとつだけでも解決困難なエラーを解決できたとき、エラーへの拒否感が少なくなる。</li></ul>



<p>主にこれらが理由です。</p>



<p>個人的には、すぐに人に聞くよりも、</p>



<p>初学者のうちは自分で調べまくった方がいいのかなと考えてます。</p>



<p>次に同じようなエラーが出たときに、感覚で「どの辺が怪しい」というのが見えてくるからです。</p>



<p>また一人で解決できたほうが、他の人の時間をとらないし、なにより自分の身になります。</p>



<p>小さなことではありますが、このエラーに対する調査や対処は、エンジニアとして重要な部分だと思います！</p>



<h2 class="wp-block-heading"><span id="toc5">学習が中途半端でも、転職活動に挑んで見る</span></h2>



<p>何も学習が進まない、、不安だらけ、、の人は、</p>



<p>学習が中途半端でも、転職活動に挑んで見るのはいかがでしょうか？</p>



<p>会社によっては、能力や知識ではなく、人柄やコミュニケーション能力を重点的に見ている会社もありますし、</p>



<p>実際、自分自身が業務未経験で独学中だったときより、Web業界に入ってから業務を回すことで圧倒的に成長できたという実感があります。</p>



<p>（業務未経験だったころの小さな下積みがなければ、その成長すら達成できなかったと思いますが。）</p>



<p>採用さえもらえてしまえば、業務をせざるを得ない状況に身を置くことができますし、</p>



<p>一番ゴールに近い動き方かもしれませんね。</p>



<p>最近では、エンジニア転職を支援してくれるサービスもあります。</p>



<p>ぜひ会員登録してみてください！</p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N1PVW+TRP0Y+2JK4+ZUAMA">IT・Web業界での転職なら【レバテックキャリア】</a></p>



<p>それでは〜<br></p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/job-change/way-to-think/">【プログラミング学習をしていて不安な方へ】不安をなくすための考え方や行動</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【学習フローの紹介】フロントエンドとして成長するためのおすすめ学習手順</title>
		<link>https://engineer-start.com/programming/frontend-growth/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Sun, 10 Apr 2022 10:08:23 +0000</pubDate>
				<category><![CDATA[Web制作]]></category>
		<category><![CDATA[フロントエンド]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=212</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 フロントエンドエンジニア初学者の方 Web制作をする上で、どのようにプログラミング学習していけばいいか迷っている方 学習中だけど、何もかも分からず困惑してる方。 以前、おすすめの勉強法として「目 [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/frontend-growth/">【学習フローの紹介】フロントエンドとして成長するためのおすすめ学習手順</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>フロントエンドエンジニア初学者の方</li><li>Web制作をする上で、どのようにプログラミング学習していけばいいか迷っている方</li><li>学習中だけど、何もかも分からず困惑してる方。</li></ul>



<p>以前、おすすめの勉強法として「目標設定の方法や、写経の実践」をおすすめしました。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/programming/study-recommendation/" title="【プログラミング初学者向け】おすすめの勉強方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="120" height="90" src="https://engineer-start.com/wp-content/uploads/2022/01/glasses-gf008ab7bc_1280.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://engineer-start.com/wp-content/uploads/2022/01/glasses-gf008ab7bc_1280.jpg 1280w, https://engineer-start.com/wp-content/uploads/2022/01/glasses-gf008ab7bc_1280-300x225.jpg 300w, https://engineer-start.com/wp-content/uploads/2022/01/glasses-gf008ab7bc_1280-1024x768.jpg 1024w, https://engineer-start.com/wp-content/uploads/2022/01/glasses-gf008ab7bc_1280-768x576.jpg 768w" sizes="(max-width: 120px) 100vw, 120px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【プログラミング初学者向け】おすすめの勉強方法</div><div class="blogcard-snippet internal-blogcard-snippet">この記事を読んでほしい方コーディング・プログラミングを学びたいが、方法が分からない。独学中だが、最近手が止まっている。特にコーディングを学びたてで独学しているときは、どこにフォーカスして勉強するのが効率的なのか、目標に着実...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.01.06</div></div></div></div></a>
</div></figure>



<p>この記事に書いたことを自分が実践しているときは、「この方法で本当にうまくいくだろうか。。」とか</p>



<p>「間違った方法なのでは？」と考えることが多かったです。（結果的にうまくいったので記事で紹介してます。）</p>



<p>なるべくそういった迷いをなくしたいので、今回はおすすめの学習手順の全体像を紹介します。</p>



<p>プログラミング（フロントエンド）の学習で迷ったときは、ぜひ思い出してください。</p>



<p>※今回はあくまでWeb制作のフロントエンドをしたい方に向けて書きます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-14" checked><label class="toc-title" for="toc-checkbox-14">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">まずは迷いながらも模写サイトをつくってみる。コードをそのまま丸パクリするのもOK。</a></li><li><a href="#toc2" tabindex="0">HTML、CSSを学習する。</a><ol><li><a href="#toc3" tabindex="0">学習概要</a></li><li><a href="#toc4" tabindex="0">具体的には…</a></li><li><a href="#toc5" tabindex="0">最終的には…</a></li></ol></li><li><a href="#toc6" tabindex="0">jQueryを勉強する。※Javascriptより先に学習することをおすすめします。</a><ol><li><a href="#toc7" tabindex="0">学習概要</a></li><li><a href="#toc8" tabindex="0">具体的には…</a></li></ol></li><li><a href="#toc9" tabindex="0">（学習するかは人によるけど）Wordpressを学習する。</a><ol><li><a href="#toc10" tabindex="0">学習概要</a></li></ol></li><li><a href="#toc11" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">まずは迷いながらも模写サイトをつくってみる。コードをそのまま丸パクリするのもOK。</span></h2>



<p>まずは一サイト写経しましょう。</p>



<p>目安としては</p>



<ul><li>仕事をしている方 →「3ヶ月で一サイト完成させる。」</li><li>一日作業ができる方 → 「1ヶ月で一サイト完成させる。」</li></ul>



<p>くらいを目標においておくといいかなと。</p>



<p>ここで学習しておきたいポイントは下記の通り。</p>



<ul><li>HTML、CSS、Javascriptをどのように連携させるかを学ぶ。</li><li>実際にHTMLやCSSを書いてみて、Webサイトに反映されるかを確認。</li><li>HTMLとCSSの記述方法で、「ここは大事！」と思うところだけ重点的に使って慣れる。</li></ul>



<p>以前書いた下記の記事に、もう少し具体的なやり方が書いてます。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/programming/html-basic/" title="【プログラミングの第一歩】書いたコードが反映されているかを確認する方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img src="https://engineer-start.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class=" internal-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【プログラミングの第一歩】書いたコードが反映されているかを確認する方法</div><div class="blogcard-snippet internal-blogcard-snippet">この記事を読んでほしい方プログラミングで書いたコードが実際に反映されているか、動作しているかを確認したい方。HTMLの勉強を始めたばかりの方。プログラミング、コーディングは、「コンピューターに命令して、人が意図する動作をし...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.01.10</div></div></div></div></a>
</div></figure>



<p>「HTMLとCSSの記述方法で、「ここは大事！」と思うところだけ重点的に使って慣れる。」についてですが、</p>



<p>「では大事と思わないところは飛ばして良いか？」というとそうではなく、</p>



<p>検索で調べて直ぐに反映できる状態にできていれば良い、</p>



<p>くらいの感覚で学習を進めていってください。</p>



<p>模写サイトが一つ作れてしまえば、正直、（非効率だけれども）Web制作のコーディング業務はできるようになると思います。</p>



<p>最悪調べればなんとかなる！くらいのレベルまで持っていきましょう。</p>



<p>なのでまずは、それぞれの言語の書き方があやふやだったり、</p>



<p>学習のやり方が闇雲に感じても、模写サイトを一つ作ってしまうことをおすすめします。</p>



<h2 class="wp-block-heading"><span id="toc2">HTML、CSSを学習する。</span></h2>



<h3 class="wp-block-heading"><span id="toc3">学習概要</span></h3>



<p>模写が終わったら、HTML、CSS、Javascriptと、「焦点を当てて勉強する」のがいいでしょう。</p>



<p>順番としては、一番基本となるHTML、CSSを最初に学習することがおすすめです！</p>



<p>目安としては</p>



<ul><li>仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」</li><li>一日作業ができる方 → 「15日くらいで慣れつつ、コーディングしていく中で慣れていく。」</li></ul>



<p>こんな感じの目標設定で良いと思います。</p>



<p>ここで学習しておきたいポイントは下記の通り。</p>



<ul><li>HTMLのタグにはどんな種類があって、それぞれどんなタイミングで使うかを学習。</li><li>リセットCSSについて学ぶ。</li><li>CSSはスタイルやレイアウトの組み方が色々あるので、それぞれ使っていく。（できれば検索無しで書けるようになる。）</li><li>HTMLに使用する「クラス名」は、どのようなクラスを使うのがベストなのかを考慮してコーディングする。</li></ul>



<p>このあたりになってくるかなと。</p>



<h3 class="wp-block-heading"><span id="toc4">具体的には…</span></h3>



<p>HTMLのタグについては、意外とつまづきポイントかもしれません。</p>



<p>タグによっては思ったとおりレイアウトを組めないことがありますので、意識してみてください。</p>



<p>リセットCSSは、「ブラウザ特有のスタイルを打ち消したり、元々のCSS設定を統一する」という目的があります。</p>



<p>ちなみにブラウザとは、Webサイトを閲覧するためのものですね。</p>



<p>Google Chrome、Firefox、Safari、Edgeとかあります。</p>



<p>ここまである程度理解できたら、作業する中でCSSに慣れていきましょう。</p>



<p>そして、HTMLに使用する「クラス名」について、どんなクラスを使うのが適切か、まで学べると良いかなと思います。</p>



<p>業務で実際にコーディングをしている方は、クラス名の意味合いをなるべく統一しましょう。</p>



<p>バラバラにしても組めるっちゃ組めるんですが、<strong>「他の人が見たときに分からない」ということをなるべく防ぐのが目的です。</strong></p>



<p>ここ、コーダー、フロントエンドエンジニアとして差をつけるために結構重要です。</p>



<p>例えば、ページのセクションにあるテキストに「section01-text」というクラス名をつけた場合、次のセクションのテキストは「section02-text」とつけたり、</p>



<p>「これは何を表すクラス名なのか？」がひと目でわかるようなクラス名にすることから始めてみてください。</p>



<p>逆に他の方がコーディングしたHTML、CSSに手を加えるときは、その人がつけたクラス名に従って、コーディングするのがいいと思います。</p>



<h3 class="wp-block-heading"><span id="toc5">最終的には…</span></h3>



<p>最終的には「コーディング設計」を勉強できるとなお良いんですが、初学者を抜け出すという意味では、まだそこには触れなくてよいかと思います。</p>



<h2 class="wp-block-heading"><span id="toc6">jQueryを勉強する。※Javascriptより先に学習することをおすすめします。</span></h2>



<h3 class="wp-block-heading"><span id="toc7">学習概要</span></h3>



<p>HTML、CSSの学習が終わったら、jQueryを学習しましょう。</p>



<p>jQueryは、「Javascriptのライブラリ」でして、ざっくり言うと、Javascriptを簡単に書くためのものです。</p>



<p>このjQueryを使えば、Javascriptを使うよりも簡単に「Webサイトに動きをつけたり、UIを向上させる」ことができます。</p>



<p>目安としては</p>



<ul><li>仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」</li><li>一日作業ができる方 → 「一ヶ月くらいで慣れつつ、コーディングしていく中で慣れていく。」</li></ul>



<p>こんな感じの目標設定で良いと思います。</p>



<p>ここで学習しておきたいポイントは下記の通り。</p>



<ul><li>jQueryの実装を行うときに、身につけておく要点を知る。</li><li>jQueryを使った動きの実装を、「サイトから真似るかたちでもよいので」できるようになる。</li></ul>



<p>こんな感じです。</p>



<h3 class="wp-block-heading"><span id="toc8">具体的には…</span></h3>



<p>jQueryでサイトの動きを実装する際、「何故か動かない」ということが僕はよくありました。。</p>



<p>たとえば、他の人が作ったサイトを修正するときに、</p>



<p>すでにjQueryが読み込まれているのに、自分もそのサイトにjQueryを読み込ませて、二重に読み込まれていて動かない、とか</p>



<p>jQueryの書き方はHTMLやCSSに比べて、少しだけですが複雑なので、書き方が間違ってて動かない、とかですね。。</p>



<p>ここに関しては、コードを見て、書いて、実装してみて、慣れるしかないかなと。</p>



<p>ただ慣れたら実装できて、サイトに動きを付ける作業なので、結構達成感はあるかなと思います。</p>



<p>結構エラーが出やすかったりするので、「検証ツールでコンソール確認」の方法を知っておけば、</p>



<p>そのエラーをググって解決することができるので、コンソール確認の方法も合わせて学んでいってください！</p>



<h2 class="wp-block-heading"><span id="toc9">（学習するかは人によるけど）Wordpressを学習する。</span></h2>



<h3 class="wp-block-heading"><span id="toc10">学習概要</span></h3>



<p>WordPressを使うと、HTML、CSS、Javascriptで実装することが難しいこと（もしくは実装できないこと）を実装することができるようになってきます。</p>



<p>PHPというバックエンド寄りの言語が使われてます。</p>



<p>ちなみにこのサイトもWordpressを使って実装されています。</p>



<p>WordPressは、パターンが色々ありますが、HTMLの記述がPHPファイルに書いてあって、機能実装のために、そのHTMLの記述にPHPの記述が組み込まれているようなイメージです。</p>



<p>たとえば、Webサイトについている「お問い合わせフォームの実装」だったり、「共通しているパーツを一元化」だったりを実装できます。</p>



<p>学習目安としては</p>



<ul><li>仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」</li><li>一日作業ができる方 → 「2ヶ月で一通り学ぶ。」</li></ul>



<p>こんな感じの目標設定で良いと思います。</p>



<p>WordPressは、サイト制作を目的とするならば、HTML、CSS、jQueryを学んでから手をつけるのをおすすめします！</p>



<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<p>いかがだったでしょうか？</p>



<p>学習手順を体系的に紹介しました。</p>



<p>今回はあくまで「Web制作をしたい方」に向けて書きましたので、</p>



<p>アプリ開発やバックエンド寄りのことを学びたい方に実践いただいても効果はあるかと思いますが、あまりおすすめはしないです。</p>



<p>今回紹介した方法と併用して、プログラミングスクールに通ったり、本で勉強すると、相乗効果が生まれてさらに網羅的に学習ができると思います！</p>



<p>プログラミングスクールは何社かありまして、値段感やそれぞれの強みが違うので、よく吟味してから申し込むことをおすすめします。</p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N1LYZ+9HQU0I+3GWO+5YJRM">TechAcademy [テックアカデミー]</a></p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N85OQ+F9J44Y+3GOM+63WO2">プログラミングのオンラインスクールCodeCamp</a></p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N85OQ+FP0DV6+3XAE+5ZMCI">受講者満足度も90%以上！【WEBCAMP】</a></p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N85OQ+FMMNG2+4X9Y+5YJRM">Freeks(フリークス)｜月額10,780円のサブスク型プログラミングスクール</a></p>



<p>本での学習を考えている方、今度おすすめの本を紹介しようと思うので、お待ち下さい！</p>



<p>それでは！</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/frontend-growth/">【学習フローの紹介】フロントエンドとして成長するためのおすすめ学習手順</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【プログラミングが続かない人に見てほしい】プログラミング・コーディングの楽しさとは？</title>
		<link>https://engineer-start.com/programming/programming-enjoy/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Fri, 08 Apr 2022 16:28:39 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=208</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 コーディングやプログラミング独学中で、挫折しかけている人 プログラミングに楽しさが見いだせず、学習をやめてしまっている人 プログラミングやコーディングは、PCとひたすら向き合う作業です。 ずっと [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/programming-enjoy/">【プログラミングが続かない人に見てほしい】プログラミング・コーディングの楽しさとは？</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>コーディングやプログラミング独学中で、挫折しかけている人</li><li>プログラミングに楽しさが見いだせず、学習をやめてしまっている人</li></ul>



<p>プログラミングやコーディングは、PCとひたすら向き合う作業です。</p>



<p>ずっと続けていると楽しさが見いだせなかったり、</p>



<p>プログラムのエラーで行き詰まってしまい学習がストップしてしまうことがよくあります。</p>



<p>こういった作業は、本質的に何が楽しいのでしょうか？自分なりの解釈を書いていこうと思います。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-16" checked><label class="toc-title" for="toc-checkbox-16">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">何かを作り出したとき</a></li><li><a href="#toc2" tabindex="0">エラーを解消させるために長時間調べて、うまくいったとき</a></li><li><a href="#toc3" tabindex="0">PC作業を効率化できる</a></li><li><a href="#toc4" tabindex="0">色々な方法の中から、一番いい方法を見つける力が身につく</a></li><li><a href="#toc5" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">何かを作り出したとき</span></h2>



<p>やはりプログラミングで楽しいところは、プログラミング作業をすることで、</p>



<p>「自分が何かを作った、実装した」という達成感でしょう。</p>



<p>「何か」とは、Web制作でいうとホームページやサイト、もっというとサイトの見た目・動き・目に見えない部分（データのやり取りとか）の機能などですね。</p>



<p>この一部だけでも、自分が作業できるようになれば、達成感を味わえると思います。</p>



<p>もっと掘り下げると、プログラミングで大きく稼いでいる方は世の中に結構いるイメージです。</p>



<p>サイトやアプリケーションを一部だけでもよいので、ひとつひとつ実装できるようになれば、</p>



<p>「いつか大きく稼げる」ということを考えながら作業すると、達成感もより大きくなるかと思います。</p>



<p>もちろん、実装することが楽しい方、作業自体が楽しい方、色々いるかと思いますが。</p>



<h2 class="wp-block-heading"><span id="toc2">エラーを解消させるために長時間調べて、うまくいったとき</span></h2>



<p>プログラマーやコーダー業務をしていると、何かしらのエラーに必ずと言っていいほどぶつかることでしょう。</p>



<p>そしてその解消方法は、Webサイト上に載っていることがほとんどです。</p>



<p>以前、「検索力の鍛え方」という記事を上げたんですが、</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/programming/search-power/" title="【PC業務に全般に使える】検索力の鍛え方" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="160" height="58" src="https://engineer-start.com/wp-content/uploads/2022/03/8fccf458b906bbcfe902bd9410264c23.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://engineer-start.com/wp-content/uploads/2022/03/8fccf458b906bbcfe902bd9410264c23.png 1680w, https://engineer-start.com/wp-content/uploads/2022/03/8fccf458b906bbcfe902bd9410264c23-300x108.png 300w, https://engineer-start.com/wp-content/uploads/2022/03/8fccf458b906bbcfe902bd9410264c23-1024x368.png 1024w, https://engineer-start.com/wp-content/uploads/2022/03/8fccf458b906bbcfe902bd9410264c23-768x276.png 768w, https://engineer-start.com/wp-content/uploads/2022/03/8fccf458b906bbcfe902bd9410264c23-1536x552.png 1536w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【PC業務に全般に使える】検索力の鍛え方</div><div class="blogcard-snippet internal-blogcard-snippet">この記事を読んでほしい方パソコン作業を効率化させていきたい方プログラミング・コーディングでの課題を解決する最適な方法が知りたい方。web制作やwebサービスの開発に携わっている方、またはその初学者パソコンに携わって業務をし...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.03.26</div></div></div></div></a>
</div></figure>



<p>この検索力を鍛える意味でも、エラーの解消を諦めないで実行していくと、</p>



<p>だんだん「どういった文言で検索すればよいか？」が見えていくとともに、</p>



<p>同じようなエラーを見たときに何となく対応方法が分かってきます。</p>



<p>最終的には自分の身についていきます。</p>



<p>自分は、なかなかエラーの解決できなければできないほど、解決できたときの達成感は大きくなるとともに、エラーを解決するのが楽しいと感じるまでになりました。</p>



<p>エラーに関しては、自分なりに調べて、最後までやり抜くことをおすすめします。ここができるかできないかは、エンジニアとして差が出るポイントだと考えてます。</p>



<h2 class="wp-block-heading"><span id="toc3">PC作業を効率化できる</span></h2>



<p>PC作業は、今だとどんな業界でもよく使われていますよね。</p>



<p>エンジニアとして作業するに当たり、そのPC作業を効率化したい・早く終わらせたいと思うことがよくあります。</p>



<p>たとえば、PC内のファイルやアプリを探すときとかに楽したいと思ったり、Web制作なら案件管理を簡単にしたいと思ったり。（これについても検索力の記事にちょっとだけ書いてます。）</p>



<p>そういったPC作業効率化が身につくと思います。</p>



<p>人によっては、効率化するツールだったりをプログラミングで作ったりすることもできるようになれば、色々な業界でスキルとして役立つと思います。</p>



<p>仮にエンジニア、プログラマーが向いていないとして、他の業界で働こうと思った場合でも、損がないのがいいところですね。</p>



<h2 class="wp-block-heading"><span id="toc4">色々な方法の中から、一番いい方法を見つける力が身につく</span></h2>



<p>プログラミングやコーディングを続けていくと、色々な方法を知ることができます。</p>



<p>なかには、最終的に制作するものが同じでも、コードやプログラムの書き方は複数パターンあることがあります。</p>



<p>ただ、その複数パターン書き方があるなかから、「どの書き方が一番良いか？」を検討することができるようになると、プログラミング・コーディングはもっと楽しくなってきます。</p>



<p>先程の「作業を効率化」の部分と被るんですが、</p>



<p>複数パターンの書き方があっても、「今後コードの修正が一番楽になる方法はどれか？」だったり、「他の人が見ても伝わる書き方はどれか？」など、検討できます。</p>



<p>そこまでできると、作業はどんどん早くなっていくでしょうし、チームでコーディングを行うときもスムーズに対応できたりします。</p>



<p>最終的には人材としての価値が上がり、仕事で必要とされるのではと思います！</p>



<h2 class="wp-block-heading"><span id="toc5">まとめ</span></h2>



<p>いかがだったでしょう？今まで僕がコーディングしてきて、「この部分が楽しい！」と思ったところを書きました。</p>



<p>もし共感していただける方がいたら嬉しいです！プログラミング学習で挫折しそうになったとき、ぜひ「どの部分が楽しいか？」に目を向けてみてはと思います。それでは！</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/programming-enjoy/">【プログラミングが続かない人に見てほしい】プログラミング・コーディングの楽しさとは？</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【webサイト制作】フロントエンドエンジニアとは？</title>
		<link>https://engineer-start.com/programming/frontend-beginner/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Sat, 26 Mar 2022 03:47:58 +0000</pubDate>
				<category><![CDATA[フロントエンド]]></category>
		<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=167</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 フロントエンドエンジニアとは何か知りたい方。 フロントエンドエンジニアに興味があるが、自分に向いているかを知りたい方。 web制作の業務に興味がある方。 サイト制作を行う場合、工程ごとに担当する [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/frontend-beginner/">【webサイト制作】フロントエンドエンジニアとは？</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>フロントエンドエンジニアとは何か知りたい方。</li><li>フロントエンドエンジニアに興味があるが、自分に向いているかを知りたい方。</li><li>web制作の業務に興味がある方。</li></ul>



<p>サイト制作を行う場合、工程ごとに担当する人が変わることが一般的です。</p>



<p>企画 → ディレクション → デザイン → コーディング</p>



<p>この流れで制作するパターンが多いかなと思います。一人で複数工程を担うパターンや、全行程を担うパターンもあったりします。</p>



<p>Web制作の全体的な業務内容</p>



<p>この工程のなかで、「コーディングの一部分」を担うのがフロントエンドエンジニアです。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-18" checked><label class="toc-title" for="toc-checkbox-18">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">Web制作の全体的な業務内容</a></li><li><a href="#toc2" tabindex="0">フロントエンドエンジニアの業務内容</a><ol><li><a href="#toc3" tabindex="0">基本的な業務内容</a></li><li><a href="#toc4" tabindex="0">その他の業務内容</a></li></ol></li><li><a href="#toc5" tabindex="0">フロントエンドエンジニアに向いている人とは？</a></li><li><a href="#toc6" tabindex="0">制作をしたいのであれば、フロントエンドエンジニアはおすすめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">Web制作の全体的な業務内容</span></h2>



<p>ざっくりそれぞれの工程について説明すると</p>



<ul><li>企画 → 何をどのように制作するかを決める。</li><li>ディレクション → 企画されたものを満たすワイヤーフレームを作り、デザイン・コーディングを指揮する。</li><li>デザイン → ワイヤーフレームをもとに装飾やレイアウトの見た目を組んでいく。</li><li>コーディング → デザインをもとにwebサイトとして反映・機能を実装する。</li></ul>



<p>こんな感じです。</p>



<p>コーディングについては色々範囲があるのですが、</p>



<ul><li>フロントエンド → Web上で可視化できる部分のコーディング。</li><li>バックエンド → Web上で見えない、「データのやり取り」だったり、「見る人や時間によって表示を変える設定」の部分をコーディング。</li></ul>



<p>このあたりが定義になってきます。</p>



<p>フロントエンドエンジニアにも、開発するモノによって必要なスキルが変わってくるのですが、</p>



<p>今回はWeb制作でページを作る場合についての話をしようと思います。</p>



<h2 class="wp-block-heading"><span id="toc2">フロントエンドエンジニアの業務内容</span></h2>



<h3 class="wp-block-heading"><span id="toc3">基本的な業務内容</span></h3>



<p>フロントエンドエンジニアは、コードを書いてデザインをwebサイトに反映させていきます。</p>



<p>どんなコードを使うかといいますと、</p>



<ul><li>HTML → テキストを反映させる</li><li>CSS → 装飾だったりレイアウトを整えたりする。</li><li>Javascript → サイトに動きをつける。</li></ul>



<p>すごくざっくりですが、こんな感じです。</p>



<p>以前、コードをwebサイトにどのように反映させるかを書いた記事があるので、参考にしてください。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-エンジニアスタート wp-block-embed-エンジニアスタート"><div class="wp-block-embed__wrapper">
<a href="https://engineer-start.com/programming/html-basic/" title="【プログラミングの第一歩】書いたコードが反映されているかを確認する方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img src="https://engineer-start.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class=" internal-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【プログラミングの第一歩】書いたコードが反映されているかを確認する方法</div><div class="blogcard-snippet internal-blogcard-snippet">この記事を読んでほしい方プログラミングで書いたコードが実際に反映されているか、動作しているかを確認したい方。HTMLの勉強を始めたばかりの方。プログラミング、コーディングは、「コンピューターに命令して、人が意図する動作をし...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://engineer-start.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">engineer-start.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.01.10</div></div></div></div></a>
</div></figure>



<p>HTMLとCSSを知っておけば、最低限サイトは作れるかなと思いますが、</p>



<p>動きのついたサイトや、CSSで実装できないレイアウトを達成するためにJavascriptを使ったりしますね。</p>



<p>Javascriptについては、jQueryという、Javascriptをより簡単にかける「ライブラリ」がありますので、</p>



<p>Javascriptより先にjQueryを学んでおくと、初学者からいち早く抜け出せるのではと思います。</p>



<p></p>



<h3 class="wp-block-heading"><span id="toc4">その他の業務内容</span></h3>



<p>プログラミングやコーディングでは、</p>



<p>webサイトを閲覧する「ブラウザ」ごとで見え方が違ったり、ブラウザ特有の不具合が出たりします。</p>



<p>たとえば、あるブラウザではJavascriptのコードが問題なく動作しているのに、他のあるブラウザで動かない、とか。</p>



<p>その他にも「PCやスマホの機種」ごとでも見え方が違います。</p>



<p>不具合の起こっているブラウザや機種に対してエラー対処していくことも、フロントエンドエンジニアの領域になってきます。</p>



<h2 class="wp-block-heading"><span id="toc5">フロントエンドエンジニアに向いている人とは？</span></h2>



<p>これは完全に個人的な経験をもとに話しますが、</p>



<ul><li>「技術に興味があって、コツコツ作業ができる人」</li><li>「webデザインやその機能に興味がある人」</li><li>「人に聞くより、まずは調べて実践する人」</li><li>「作業を効率化させたいという考えがある人」</li></ul>



<p>このあたりではないかと考えてます。多くてすみません。</p>



<p>一部でも当てはまって、やってみるか迷った方は、VSCodeをインストールしてコードを書いてみてください！</p>



<h2 class="wp-block-heading"><span id="toc6">制作をしたいのであれば、フロントエンドエンジニアはおすすめ</span></h2>



<p>フロントエンドエンジニアとして業務をすれば、</p>



<p>Web制作の他工程を行うときにも役に立ったりします。</p>



<ul><li>コードに反映させる上で、どこに時間がかかるかを把握できるため、ワイヤーフレームやデザインを作るときにより良い方法を選ぶことができる。</li><li>バックエンドエンジニアを担うときには、表示面のコードを読めるので作業の難易度が下がる。</li></ul>



<p>もし「フロントエンドが自分に向いていない」と感じても、その他の工程に役立つので、Web制作一歩目としておすすめですし、</p>



<p>フロントエンドができれば、一人で全工程をを担うことができる可能性も高まると考えてます。</p>



<p>フロントエンドエンジニアについて書いてみました。初学者をいち早く抜け出したい方に、プログラミングスクールもオススメします。</p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N1LYZ+9HQU0I+3GWO+68MF6">テックアカデミー　フロントエンドコース</a></p>



<p>また、エンジニア転職を考えている方、転職エージェントを活用すると転職周りのことをサポートしていただけます。</p>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N1PVW+TRP0Y+2JK4+ZQ80I">【レバテックキャリア】</a></p>



<p>それでは〜</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/frontend-beginner/">【webサイト制作】フロントエンドエンジニアとは？</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【PC業務に全般に使える】検索力の鍛え方</title>
		<link>https://engineer-start.com/programming/search-power/</link>
		
		<dc:creator><![CDATA[Joe]]></dc:creator>
		<pubDate>Fri, 25 Mar 2022 17:29:29 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<guid isPermaLink="false">https://engineer-start.com/?p=147</guid>

					<description><![CDATA[<p>この記事を読んでほしい方 パソコン作業を効率化させていきたい方 プログラミング・コーディングでの課題を解決する最適な方法が知りたい方。 web制作やwebサービスの開発に携わっている方、またはその初学者 パソコンに携わっ [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/search-power/">【PC業務に全般に使える】検索力の鍛え方</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>この記事を読んでほしい方</p>



<ul><li>パソコン作業を効率化させていきたい方</li><li>プログラミング・コーディングでの課題を解決する最適な方法が知りたい方。</li><li>web制作やwebサービスの開発に携わっている方、またはその初学者</li></ul>



<p>パソコンに携わって業務をしていると、殆どの場合、なにか課題やエラーにぶつかること、ありますよね。。</p>



<p>よく使われるMicrosoft officeの使い方で例えると、「エクセルでこのような機能を実装したいけどやり方がわからない」とか、「そもそもどんな機能があるのか？」とか、</p>



<p>使い慣れていない方だとそのような点でつまづいて、</p>



<p>最終的な目的にたどり着くまでに、なかなか作業が進まなかったりするのではないかと思います。</p>



<p>また、今までの使い方よりも効率的な使用方法があるのに、</p>



<p>それが使えていない場合もあって、もったいないパターンもあったりします。</p>



<p>特にプログラミングやコーディングを学習中の、初学者の方の場合、</p>



<p>そのようなエラーや課題にぶつかって、解決策を模索するときに時間がかかってしまいます。</p>



<p>そんな方々におすすめしたい方法として、「検索力をきたえる」ということが挙げられます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-20" checked><label class="toc-title" for="toc-checkbox-20">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">検索力があれば何ができる？</a></li><li><a href="#toc2" tabindex="0">検索力を鍛えるには？</a><ol><li><a href="#toc3" tabindex="0">ファイルを探すとき</a></li><li><a href="#toc4" tabindex="0">アプリケーションを探すとき</a></li><li><a href="#toc5" tabindex="0">情報を探すとき</a><ol><li><a href="#toc6" tabindex="0">完全一致の検索「&#8221;&#8221;」</a></li><li><a href="#toc7" tabindex="0">除外検索「-」</a></li></ol></li></ol></li><li><a href="#toc8" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">検索力があれば何ができる？</span></h2>



<p>検索力とは、その名の通り「自分の知りたい情報を検索して調べる力」ですね。</p>



<p>代表的には、google検索です。</p>



<p>かんたんな事柄であれば、googleにアクセスして、知りたい情報について、</p>



<p>単語や知りたい内容を検索窓に打ち込んで検索すれば、情報が載っているサイト一覧が出てきて調べることができます。</p>



<p>しかし、少し専門性の高い事柄などを調べるときは、単純に検索窓に打ち込んでも、自分の知りたい情報が出てこなかったりします。</p>



<p>他には、自分のPC内に入っているファイルを探すときとかですね。</p>



<p>PCに入っているファイルが多いと、探すのが手間だったりします。</p>



<p>そんなときに検索で一工夫することができれば、いち早く必要な情報やファイルにたどり着くことができます。</p>



<h2 class="wp-block-heading"><span id="toc2">検索力を鍛えるには？</span></h2>



<p>まずはツールをつかいましょう。</p>



<h3 class="wp-block-heading"><span id="toc3">ファイルを探すとき</span></h3>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="843" height="400" src="https://engineer-start.com/wp-content/uploads/2022/03/Web-1920-–-1.png" alt="" class="wp-image-159" srcset="https://engineer-start.com/wp-content/uploads/2022/03/Web-1920-–-1.png 843w, https://engineer-start.com/wp-content/uploads/2022/03/Web-1920-–-1-300x142.png 300w, https://engineer-start.com/wp-content/uploads/2022/03/Web-1920-–-1-768x364.png 768w" sizes="(max-width: 843px) 100vw, 843px" /><figcaption>finderの画面</figcaption></figure>



<p>macの場合だとファイルはfinderで見ることができますよね。</p>



<p>finderの右上から虫眼鏡のマークをクリックすると、ファイル名が検索できます。</p>



<p>手動で探すよりもかんたんにファイルを見つけることができます。</p>



<h3 class="wp-block-heading"><span id="toc4">アプリケーションを探すとき</span></h3>



<a rel="noopener" href="https://www.alfredapp.com/" title="Alfred - Productivity App for macOS" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.alfredapp.com%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Alfred - Productivity App for macOS</div><div class="blogcard-snippet external-blogcard-snippet">Alfred is a productivity application for macOS, which boosts your efficiency with hotkeys, keywords and text expansion. Search your Mac and the web, and control...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://www.alfredapp.com/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.alfredapp.com</div></div></div></div></a>



<p>これめちゃくちゃオススメです。</p>



<p>アルフレッドというアプリなんですが、これを使えばアプリケーションをすぐに検索できまして、command + スペースキーですぐに探したいアプリ名を打ち込むことができます。ちなみにファイル検索もできたりします。</p>



<p>よく使ってます。</p>



<h3 class="wp-block-heading"><span id="toc5">情報を探すとき</span></h3>



<p>google検索はひと手間を加えると色々なことができます。</p>



<h4 class="wp-block-heading"><span id="toc6">完全一致の検索「&#8221;&#8221;」</span></h4>



<p> ダブルクォーテーションマークで検索する文言をくくってあげると、その文言が入ったサイトを検索することができます。</p>



<p>くくらないで検索すると、語句を分けて認識されてしまうため、検索した文言の一部だけが引っかかることもあるのですが、</p>



<p>完全に一致した文言が入っているサイトを検索したいときにいち早くたどり着くことができます。</p>



<h4 class="wp-block-heading"><span id="toc7">除外検索「-」</span></h4>



<p>検索にひっかけたくない文言がある場合は、その文言の手前に「-」をつけると除外できます。</p>



<p>「検索したい文言 -検索にひっかけたくない文言」みたいな感じで検索します。</p>



<h2 class="wp-block-heading"><span id="toc8">まとめ</span></h2>



<p>今回紹介した方法以外にも、やり方はありますが、特に覚えておきたい検索方法の紹介でした。</p>



<p>読んでいただき、ありがとうございました〜。</p>
<p>投稿 <a rel="nofollow" href="https://engineer-start.com/programming/search-power/">【PC業務に全般に使える】検索力の鍛え方</a> は <a rel="nofollow" href="https://engineer-start.com">エンジニアスタート</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
