CSS

CSSのコンフリクトを解消する方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSのコンフリクトを解消する方法について解説しています。プログラムの間で競合が発生することをコンフリクトといいます。コンフリクトが起こる原因と解消の手順、またコンフリクトを予防する方法について学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

CSSのコンフリクトを解消する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

コンフリクトを解消する方法について詳しく説明していくね！

お願いします！

コンフリクトとは

プログラム言語のソースコードにて、「コンフリクト」は、コードの重複による資源の無駄使いや二重処理を表しています。CSSの「コンフリクト」も同様に、意図しない装飾が重なった場合やスタイルの適応の優先順位が意図した結果にならず、作業が差し支えている状態です。

なぜコンフリクトが起こるのか、起こりやすい場面

途中からソースコードの一部分を変更（修正）したことによって、処理の順序が変わってしまってしまう可能性があります。また、コードの追加や削除が行われた場合に、「コンフリクト」は、起こりやすいです。また、いろいろ試してみたり、いろいろ試された結果、意図しない処理になって「コンフリクト」にもなっていることが考えられます。

[PR] Webデザインで副業する方法とは

コンフリクトを解消する方法

確実に「コンフリクト」を解消するための黄金則はありませんが、「コンフリクト」していなかった状態に戻せることが重要な方法です。その実現方法として、まずは、ファイル管理システムとして「SVN」や「Git」にてファイルを管理します。そして、「コンフリクト」が生じた時には、「SVN」や「Git」などのファイル管理システムのファイルのリビジョン（修正履歴）から以前の保存内容の状態に戻す（復元する）ことが容易になっています。

AWS Cloud9では、メニューの「File」から「Show File Revision History」を選択することにて、過去のファイルの修正履歴を確認してから、「Revert」にて戻すことが可能です。

「Revert」を押した時点にファイルの内容を戻してからは、その時点以降の修正履歴が失われることになりますので、「Revert」による内容の巻き戻しはせずに、戻したい時点のソースコードの内容による最新のファイルへの上書き（コピーアンドペースト）をお勧めしておきます。

コンフリクトを起こさないための方法を知ろう

「コンフリクト」を起こさないためには、順序よく規則正しくて、法則性のあるソースコードの記述にて進めることです。また、一時的に作業を中断する時でも、何をしている途中だったのかを忘れずにメモに残しておくことにて、途中に必要なプロセスや手続きが欠落することを防止できます。

なお、複雑かつ複数のファイル関係は、全体像の把握や細部への気配りを困難にしますので、簡素なソースコードや数量を意識して、取り組んでみてください。複数人にて作業するときは、これらをコーディング規約にしてから、厳守することもあります。

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

転職・在宅ワークにも繋がる！Web制作の副業の仕事内容と収入を徹底解説

皆さんは本業の収入やお仕事に満足していますか？「転職するほど不満があるわけではないけど将来を考えた時にこのままで良いか、なんとなく不安」という方が多いのでは...

ピックアップ

SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】

SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

要素の表示の仕方を覚える！CSSのdisplayとvisibilityの使い方【初心者向け】

CSSで書くdisplayとvisibilityの使い方について解説しています。要素の表示を自在にコントロールするためには重要な知識になります。特に難し...

CSS

CSSのappearanceプロパティの使い方を現役エンジニアが解説【初心者向け】

CSSのappearanceプロパティの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSの全称セレクタの使い方を現役エンジニアが解説【初心者向け】

CSSの全認証セレクタの使い方を、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次全称セレクタ...

CSS

CSSで重なり順を指定するz-indexの正しい使い方を現役エンジニアが解説【初心者向け】

CSSで重なり順を指定するz-indexの正しい使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

CSS

あわせてよく読まれている記事

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。今回は、フォームからデータを受け取る方法について解説します。最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。その後、実際に動くコードを作成してデータの送受信を試していきます。フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。目次 GETとPOSTとは HTMLのフォーム送信されるデータフォームデータの受け取り方受信データのバリデーション実際にコードを書いてみよう開発環境はXAMPPを使っています。 GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエストと POSTリクエストを使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。大石ゆかりフォームを使ってデータを送信できるんですね。田島悠介そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。大石ゆかりいろいろなところで使われてそうですね。田島悠介そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] Webデザインで副業する方法とはHTMLのフォームサーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォームフォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータデータがURLの一部として含まれてサーバに送られます。送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後にパラメータ名=値のペアの形式で送られます。複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。そこで、PHPでデータを受け取るときは、この　$_GET を使います。先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性

PHP

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。デザイナーは不可能を可能にすることを期待されます。信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。デザイナーに不足しているのは、人についての知識新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。 UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むことデザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。適切な質問を選ぶことができる設定の操作について理解しているアイコン、マーク、ロゴの意味を知っているコンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う必要とするコンテンツの見つけ方を知っている問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。利用方法が全く分からないユーザーもいますユーザーの中には設定の操作が初めてという人もいますあなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません指示に従うのを拒むユーザーもいますほとんどのユーザーは、見ているコンテンツについて詳しく知っていませんこうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。 UXの間違い2：ユーザーのためのデザイン「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。 [PR] Webデザインで副業する方法とはUXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。しかし、全てのWebサイトにはフリクションが必要です。もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。）コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとするユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておくフリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。 UXの間違い4：上司の指示にいつも忠実であることこの間違いを回避するには勇気を要します。それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須ですその理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。自分の意見を声に出して伝えることが非常に重要です上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれないほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。この間違いに対処する手立てが何もない場合にはデザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次コンフリクトとはなぜコンフリクトが起こるのか、起こりやすい場面コンフリクトを解消する方法コンフリクトを起こさないための方法を知ろう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！大石ゆかりお願いします！ JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。実際にファイルを読み込んでみようファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。 1．input要素をHTMLに記述するファイルを読み込むには、まずHTMLに要素を追加する必要があります。追加する要素はinput要素で、type属性に”file”を指定します。また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file"> ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。 2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file'); 3．ファイルの読み込みを検知するファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。コールバック関数の関数の引数として、 e という変数が指定されていますね。引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。 4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。一連の処理を行ってみようそれでは、解説した1〜4の処理を実際に行ってみましょう。完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述

JavaScript

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

今回は、プログラミング初心者でも覚えておきたいUNIXコマンドを紹介します。プログラミングを学んでWeb開発する際に、WebサーバのOSとしてLinuxやUNIX系を利用することがあります。そのため、Web開発をするためにUNIXコマンドの知識が必要です。 Amazonが運営するAWSといったサービスやCloud9といったサービスでも、UbuntuやLinuxが利用されています。そのため、特定のOSで利用可能なコマンドです。また、Macのターミナルを扱う時も使用しますので、覚えておくと便利です。 WindowsでUNIXコマンドを利用できるので、コマンド操作に慣れることは実務においても技術的なレベルが上がります。そこでこの記事では、プログラミング初心者でも覚えておきたいUNIXコマンドを初心者向けに紹介します。目次コンフリクトとはなぜコンフリクトが起こるのか、起こりやすい場面コンフリクトを解消する方法コンフリクトを起こさないための方法を知ろう監修してくれたメンター UNIXコマンドとは UNIXコマンドとは、LinuxやUNIX系OSのWeb開発で利用するコマンドです。ウィンドウやボタン、アイコンといった視覚的なオブジェクトをマウスで操作するインターフェイスをGUI（Graphical User Interface）と呼びます。一方、文字入力によってコンピュータに命令を与えて操作するインターフェイスをCLI（Command Line Interface）、あるいはCUI（Character User Interface）と呼びます。「コマンド」とはコンピュータに指示する命令であり、CLI上で用いるプログラム／アプリケーションのことを指します。 UNIXに由来するコマンドを「UNIXコマンド」と呼称します。現在ではGUIがコンピュータを操作する手法として主流ですが、ある操作の結果を別の操作に用いたり、自動的に複数の操作を行ったりする場合など、CLIの方が適している作業が多く存在します。 Windows10でUNIXコマンドを利用する方法 2021年3月現在の最新バージョンのWindows10では、WSL（Windows Subsystem for Linux）を有効化することでUNIXコマンドを利用できます。コントロールパネルプログラムプログラムと機能 Windowsの機能の有効化または無効化上記の順に選択をして、「Linux用 Windows サブシステム」をチェックしてください。コントロールパネルを開いてプログラムを選択する画面プログラムを選択してWindowsの機能の有効化または無効化を選択する画面 Linux用Windowsサブシステムを選択してOKを押してください。 Microsoft StoreでUbuntuをインストール Microsoft StoreをWindowsで起動します。 Ubuntuを検索して出てきた表示の入手をクリックしてUbuntuをインストールします。インストールにはしばらく時間が必要です。インストールが完了したら起動ボタンを押してください。 Windows上で初期設定を行うための起動が始まります。初回のみ起動時間が必要です。ユーザー名とパスワードを設定すると完了です。パスワードは設定用と入力用に同じものを2回入力する必要があります。設定が完了したら、UNIXコマンドの入力が可能になります。 [PR] Webデザインで副業する方法とは覚えておきたいUNIXコマンド20 ここからは主要なUNIXコマンド20選を紹介します。いずれもMacのターミナルで入力した例を画像で表示しているので、ぜひ自分のPCでも試してみてください。ディレクトリとファイルの確認、移動に使うコマンド pwd 現在の作業ディレクトリの絶対パスを表示します。なお絶対パスとは、最上位階層から目的のファイルやフォルダまでの道筋を省略なく記述する方式のことです。一方の相対パスは、起点となる現在位置から目的のファイルやフォルダまでの道筋を記述する方式です。入力例： pwd 現在どのディレクトリにいるのかを確認するときに使います。 cd 作業ディレクトリを変更するコマンドです（ディレクトリを移動します）。入力例： cd (ディレクトリ名) cdだけで実行するとホームディレクトリへ移動します。「cd -」とすると、直前にいたディレクトリへ移動します。「cd ..」とすると親ディレクトリへ移動します。 ls ディレクトリの内容をリスト表示するコマンドです。入力例： ls (ディレクトリ名) lsだけで実行すると、現在のディレクトリに含まれるファイル名をリスト表示します。ディレクトリを指定すると、そのディレクトリに含まれるファイル名をリスト表示します。また、「ls -l」でパーミッションや所有者などの関連情報を付加して表示、「ls -a」で隠しファイル・隠しフォルダを含めて表示することが可能です。ディレクトリとファイルの操作で使うコマンド cp ファイルをコピーするコマンドです。入力例： cp (ファイルA) (ファイルB) この場合ファイルAをファイルBにコピーします。また「-f」オプションをつけた場合、コピー先に同名のファイルがあった場合上書きされます。「-i」オプションをつけた場合は上書きするかどうかをファイルごとに確認します。なおディレクトリを内容ごと（再帰的に）コピーするときは、「-R」オプションをつけます。 mv ファイルの移動およびリネームを行うコマンドです。入力例： mv (ファイルA) (ディレクトリB) mv (ファイルA) (ファイルB) 1つめの例では、ファイルAをディレクトリBに移動します。 2つめの例では、ファイルAからファイルBに名前を変えることができます。 cpコマンドと同じように、「-f」オプションをつけた場合、移動先に同名のファイルがあった場合は上書きされます。「-i」オプションをつけた場合は、上書きするかどうかを確認します。 rm ファイルを削除するコマンドです。入力例： rm (ファイル名) ディレクトリを削除する場合は「-d」オプションを指定しますが、削除できるのは空のディレクトリだけです。ディレクトリに内容物がある場合は「-r」オプションを指定することで、中に入っているファイルを含めてディレクトリを削除します。ゴミ箱へ入れるのではなく、即座に削除されることに注意してください。 mkdir ディレクトリを作成するコマンドです。入力例： mkdir (ディレクトリ名) 通常、指定したパスの途中のディレクトリが存在しない場合はエラーになります。「-p」オプションをつけると、途中のディレクトリが存在しない場合、それらを含めてディレクトリを作成することが可能です。 touch ファイルの変更日を更新するコマンドです。入力例： touch (ファイル名) 「touch file1.txt」とすると、「file1.txt」の変更日時が更新されます。存在しないファイル名を指定した場合、その名前で空のファイルが作成されます。 ln リンクを作成するコマンドです。入力例： ln -s (ファイル名) (リンク名) 「-s」オプションを付けることで、シンボリックリンクを作成します。シンボリックリンクは、ディレクトリやファイルのショートカットとして用いられます。 chmod ファイルのパーミッション（所有権）を変更します。入力例： chmod 750 (ファイル名) この入力例は、ファイル所有者にすべての権限を与え、グループに読み込みと実行権、その他のユーザーは権限なしにするコマンドです。パーミッションは「mode」引数に8進数字あるいは記号で指定します。上記の入力例は8進数字の指定です。 8進数字指定する場合は、3桁の値で指定します。 1桁目が「ファイル所有者」のアクセス権、2桁目が「グループ」のアクセス権、3桁目が「その他のユーザー」のアクセス権です。各桁の値は、読み込み権を表す4と、書き込み権を表す2と、実行権を表す1の和を指定します。例えば、読み込み権と実行権のみを与える場合には、4と1の和である「5」を指定します。それぞれの権限の組み合わせと値は、下記の表をご覧ください。アクセス権値 0 権限なし 1 実行権 2 書き込み権 3 書き込み権と実行権 4 読み込み権 5 読み込み権と実行権 6 読み込み権と書き込み権 7 すべての権限また、記号で指定する場合は、以下の記号を組み合わせてパーミッションを指定します。 chmod a+w (ファイル名) この入力例の場合、すべてのユーザーに書き込み権限を付加します。記号誰に a すべてのユーザ u 所有者 g グループ o 他のユーザ記号付加・除去 + 付加 – 除去 = 全クリア記号権限の種類 r 読み w 書き x 実行 chown ファイル・ディレクトリの所有者とグループを変更します。入力例： chown (ユーザー名) (ファイル名) この例では、指定したファイルの所有者を指定したユーザーに変更します。なお、ファイルの所有者とグループはファイルのパーミッション範囲に関係してきます（あるユーザーのみアクセス可能など）。所有者の変更はスーパーユーザーのみ可能です。 chgrp ファイルのグループを変更します。入力例： chgrp (グループ名) (ファイル名) この例では、指定したファイルの所属グループを変更します。 chownと同じく、グループはファイルのパーミッション範囲に関係してきます（あるグループに属しているユーザーのみアクセス可能など）。ファイル内容の表示、閲覧するときに使うコマンド cat ファイルの内容を結合し、表示するコマンドです。入力例： cat (ファイルA) (ファイルB) 複数ファイルの内容を結合して表示します。ファイルを1つだけ指定して、単にその内容を表示する場合にも使用可能です。 less ファイルの内容をスクロール可能な状態で表示するコマンドです。入力例： less (ファイル名) ファイル内容を一画面しか見ることができない（スクロールできない）catコマンドとは異なり、スクロール可能な状態で表示するコマンドです。 qを入力すると表示が終了します。ファイルの検索で使うコマンド find ファイルを検索するコマンドです。入力例： find (ディレクトリ名) find (ディレクトリ名) -name (文字列) 1つめの入力例では、ディレクトリ内にあるファイルを表示します。 -nameを付けることで、ディレクトリ内にある文字列を指定して検索できます。また「find . -ctime -1h」とすると、現在のディレクトリ以下で1時間以内に変更のあったファイルを検索します。 grep 指定パターンの文字列を検索するコマンドです。入力例： grep (検索文字列) (ファイル名) 例えばgrep ba

プログラミング

Laravelでリクエストを実行する方法【初心者向け】

Laravelでリクエストを実行する方法について解説します。 POST/GETで値を受け渡す流れを実際にプログラムを書いて理解しましょう。そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、Laravelに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Laravelでrequestを使う方法について詳しく説明していくね！大石ゆかりお願いします！ requestとはクライアント（Webブラウザなど）とサーバー（Webサーバー）はHTTPプロトコルで通信します。クライアントはサーバーにリクエスト（要求）を送り、サーバーはリクエストに応じたレスポンス（応答）を返します。 HTTPプロトコルには、リクエストを実行するための方法がいくつかあり、最も一般的なのはPOSTメソッドとGETメソッドです。 HTTPリクエストは2つの部分で構成されます。リクエストに関するデータを持つヘッダーと、サーバーに処理させるデータを持つ本文です。以降は、サーバーに処理させるデータの受渡し方法について説明します。 LaravelでのPOST/GETでの値の受渡し方法リクエストにはサーバーに処理させるデータを含めることができます。データは名前と値のペアです。例えばユーザー名なら `username=John` のような形式のデータになります。リクエストはHTMLのフォームから送信できます。 <form method="POST(またはGET)" … > … <input type="text" name="username" value="" … > … </form> inputなどの要素でname属性にデータの名前を指定します。ユーザーの入力値はvalue属性にセットされます。このフォームが送信されるとき、リクエストに各データが含まれます。 POSTメソッドの場合、リクエストの本文が以下のようになります。他のデータ&username=John&他のデータ GETメソッドの場合、URLに含まれるクエリ文字列が以下のようになります。 http://localhost:8000/users?他のデータ&username=John&他のデータまた、GETメソッドのリクエストは、HTMLのリンクから送信するのが一般的です。 a要素のhref属性にURLを指定しますが、そのクエリ文字列にデータを含めておきます。 <a href="/users?他のデータ&username=John&他のデータ">…</a> コントローラのアクションでは、Laravelのリクエストインスタンスからデータを取得します。リクエストインスタンスは、アクションの引数で受け取ったり、ヘルパ関数request( )の呼出しにより取得できます。以下のような方法で、リクエストインスタンスからデータを取得できます。 $request->all(); // 全データを連想配列で取得 $request->only([ 'username', 'password']); // 一部のデータのみを連想配列で取得 $request->except(['credit_card']); // 一部のデータのみ（指定したデータ以外）を連想配列で取得 $request->input('username'); // 個別のデータをinputメソッドにより取得 $request->username; // 個別のデータを動的プロパティにより取得 request('username'); // 個別のデータをヘルパ関数request()により取得 [PR] Webデザインで副業する方法とは実際にLaravelでリクエストを受け取ってみよう例として、GETメソッドのリクエストで複数のデータを受け取ってみましょう。 routes/web.phpファイルに以下のようなルートを追加します。 Route::get('/users', function () { $request = request(); // リクエストインスタンスを取得 $data

PHP

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。目次コンフリクトとはなぜコンフリクトが起こるのか、起こりやすい場面コンフリクトを解消する方法コンフリクトを起こさないための方法を知ろう監修してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回はCSVファイルをPHPで読み込む方法をやっていくよ。大石ゆかり田島メンター！その前にちょっといいですか？「CSV」って何ですか？田島悠介じゃあ、CSVとは何かを教えるね。ゆかりちゃんは表計算ソフト、例えば「Excel」とか「Google スプレッドシート」は使ったことあるかな？大石ゆかりそれならありますよ。大学時代にレポート作成でExcelを使ってましたし、仕事ではGoogle スプレッドシートを使っています。田島悠介もし、ゆかりちゃんが入力したデータをPHPのプログラムで読み込ませたいと思ったらどうしたらいいかな？大石ゆかりデータを保存したファイルをPHPで読み込めばいいんじゃないですか？ PHPってファイルの読み込みもできましたよね？田島悠介たしかに、PHPではファイルの読み込みができるんだけど、ExcelやGoogle スプレッドシートの専用ファイルはそのままでは読み込むのが難しいんだ。 PHPのファイル読み込みは、標準では文字だけで構成されたテキストファイルで作成されていることが前提だからね。大石ゆかりそうなんですね・・・。じゃあ、表計算ソフトで保存するときPHPでも読み込めるテキストファイルの形式で保存したらいいんですか？田島悠介その通り！さすがゆかりちゃん、理解が早い。そのPHPにも対応しているテキストファイルの形式の1つがCSVファイルというわけだね。大石ゆかりなるほどぉ。今Google スプレッドシートでCSVの形式にエクスポートしてみました。カンマ付きのシンプルな文字だけになるんですね。 Googleスプレッドシートの画面名前,年齢,血液型太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B CSVファイルの中身田島悠介そうだね。CSVファイルはカンマかタブ文字で区切られるんだ。ちなみにCSVファイルはほとんどのアプリが対応しているから、PHPなどのプログラムからの読み込みだけでなく、アプリ同士でデータをやり取りしたいときにもよく使われるよ。ただ、データの中身の文字だけしか保存されないから、罫線や文字色などの情報はなくなるけどね。大石ゆかり CSVについてはよく分かりました！今回はそのCSVファイルをPHPで読み込む方法を教えてもらえるんですね！田島悠介そういうことだね。 CSVは、読み込みと出力のそれぞれ書き方が違うから、今回は「読み込み」の方法について説明するね！大石ゆかりお願いしまーす！！ CSVファイルを読み込む関数「fgetcsv」 PHPでは、CSVファイルを読み込んで配列の形にしてくれる「fgetcsv関数」という関数があります。 fgetcsv関数を使うためには、まず対象のCSVファイルを開いておく必要があります。ファイルを開く「fopen」 CSVファイルを開くには、fopen関数を使います。 $file_handler = fopen("読み込むCSVファイルのパス", "r"); fopen関数の戻り値で、読み込んだファイルを管理している名前（ファイルハンドル）を取得します。 fopen関数の2つ目のパラメータはファイルにアクセスする形式、つまり開いたファイルの書き込みを可能にするかどうかなどのファイルをアクセスする状態を設定します。 “r“は読み取り専用、つまり書き込みしない状態でファイルを開きます。 ※もし、対象ファイルが存在しなかったりファイルのアクセス権がない場合には、fopenは失敗しwarningを発行してFALSEを戻り値として返します。 CSVファイルを1行ずつ配列で読み込む「fgetcsv」ファイルハンドルが取得できたら、fgetcsv関数でCSVファイルを1行ずつ読み込みます。 $data = fgetcsv($file_handler); 読み込まれた1行分のデータを項目（データ列）ごとに配列として戻り値で取得します。たとえば下記のようなCSVファイルなら、1回目にfgetcsv関数を呼び出したときは、1行目のデータである「名前」「年齢」「血液型」の文字列が配列に代入されます。名前,年齢,血液型太郎,21,O ・・・実際に書いてみようでは実際にプログラムを書いてみましょう。事前に、以下のように書いた「test.csv」ファイルを作成しておきます。名前,年齢,血液型太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B それでは、プログラムを書いてみましょう。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("./test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 読み込んだ結果を表示します。 var_dump($data); } // test.csvを閉じます。 fclose($f); ?> 簡単にソースコードの説明をします。最初に読み取り専用でtest.csvファイルを開き、while文で1行ずつファイルを読み込みます。読み込んだ結果の配列を、var_dump関数でCSVファイル1行分のデータを表示しています。以下、実行結果です。 1行ずつ読み込まれて、配列の形になっているのがわかります。まとめ CSVファイルを読み込むときは、まずfopen関数でファイルを開きます。そして、fgetcsv関数を使って1行ずつ配列にデータを読み込みます。タブ文字で区切られたファイル大石ゆかり田島メンター、教えてもらった方法でデータをPHPで読み込もうとしたんですがうまくいきません・・・田島悠介それは、データの区切り文字が違うからだよ。 CSVはカンマ区切りだけど、別の種類でタブ区切りのファイル形式が使われることがあるんだ。大石ゆかりそうなんですね。よく見るとファイルの拡張子が.tsvになっていました。田島悠介そうだね。タブ区切りのファイルはtxtやtsvといった拡張子が使われるね。タブ区切りのファイルを読み取るにはさっきと同じfgetcsv関数が使えるけど、パラメータを指定する必要があるよ。大石ゆかりタブ区切りのファイルでも読み込めるんですね。 PHPで読み込む方法を教えてください！ fgetcsv関数でタブ区切りのファイルを読み込む fgetcsv関数でタブ区切りのファイルを読み込むには、3つ目のパラメータseparatorで区切り文字を指定します。 $data = fgetcsv($f, 0, "t") 今回はタブ区切りのファイルを読み込みたいので、区切りとしてタブ文字「t」を指定します。 ※2つ目のパラメータはlengthで、分割しない1行の最大文字数（改行文字なども含む）を指定します。0を指定するか省略すると、最大行長は制限されません。 (PHP 5.1.0以降) まとめタブ区切りのファイルをfgetcsv関数で読み込むときは、3つ目のパラメータでタブ文字 “t” を指定します。 [PR] Webデザインで副業する方法とは空行がある場合大石ゆかり CSVファイルを読み込んだら、値が空の配列が混じっていました。田島悠介それは読み込んだCSVに空の行が入っていたからなんだ。 1行ずつ繰り返すループの中で、空行かどうか判定する式を追加するだけで解決できるよ。 CSVファイルの読み込み時に空行の判定をする CSVファイルに空の行が含まれている場合、PHPの条件式で判定を行うコードを追加すれば、余分な空っぽの値が配列に入るのを防げます。配列の1行分の要素すべてが空かどうか、配列の要素を文字列としてつなげて判定します。 1行分の配列の要素を文字列として結合するのに、implode関数を使います。空行判定のコード例配列に値があるかどうかで空行の判定をしています。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 1行分の要素すべてを文字列として結合しても空ではない、つまり空行でなければ出力します。 if(implode($data) != null){

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSのコンフリクトを解消する方法を現役デザイナーが解説【初心者向け】

コンフリクトとは

なぜコンフリクトが起こるのか、起こりやすい場面

コンフリクトを解消する方法

コンフリクトを起こさないための方法を知ろう

監修してくれたメンター

関連するキーワード

あわせてよく読まれている記事

PHPでフォームからデータを受け取る方法（GETとPOST）

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

Laravelでリクエストを実行する方法【初心者向け】

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

コンフリクトとは

なぜコンフリクトが起こるのか、起こりやすい場面

コンフリクトを解消する方法

コンフリクトを起こさないための方法を知ろう

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ