HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】現役エンジニアが解説

Windowsで使えるテキストエディタ「サクラエディタ」の使い方を初心者向けに解説した記事です。シンプルなエディタですので、すぐに使い始めることができます。インストール方法から、HTML/CSSファイルの表示方法まで紹介。

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

プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。

サクラエディタはとても高機能な、Windows上で動作する日本語テキストエディタです。

インストールから簡単な使い方までを紹介しますので、まだ利用したことのない方はぜひお試しください。

サクラエディタの特徴

サクラエディタは高機能でありながら、基本的な機能もわかりやすいので初めての方でも簡単という使いやすさが特徴です。

そのため、リリースされてからも長く多くの人に使われ続けています。

また、テキスト入力をより早くおこなうために支援する機能や、処理の自動化をおこなう機能を利用することも可能です。

Windows 2000/XP/2003/Vista/7/8/10での環境で動作し、画面解像度800×600以上が推奨となっています。

ただし、Windows 2000/XP/2003/Vista/7/8/8.1で動かすには、バージョン 2.3.2.0 以前のバージョンを使用する必要があります。

またWindows標準のテキストエディタにない多くの機能を持っています。

その一部がこれらです。

カラー強調表示（特定のキーワードの自動的に色分け）ができます
キー操作を覚えて同じ操作を自動実行できます
さまざまな文字コードに対応しています
アウトライン解析（見出しのツリー表示）が可能

それでは実際に使っていきましょう。

[PR] プログラミングで挫折しない学習方法を動画で公開中

サクラエディタのインストール方法

まずはインストール方法について解説します。

※記事のインストール環境はWindows10です。

1.ダウンロードページへアクセス

オフィシャルサイトのリンクから、インストーラーパッケージをダウンロードしてください。

次の画面の赤い枠で囲まれている、sakura-tag-v2.4.1-build2849-ee8234f-Win32-Release-Installer.zipというところをクリックするとzipファイルに圧縮されたインストラーがダウンロード可能です。

32bit版ですが64bitのwindows10でもご利用可能です。

もし、64bit版をご利用されたい場合はSAKURA Editor / Wiki / 64bit (sourceforge.net)からダウンロード可能です。

赤枠の部分をクリックしていただければzipファイルに圧縮されたファイルがダウンロード可能です。

ただし、動作保証はされていないため、64bit版と機能が同じ32bit版をご利用される方が安全です。

2.インストール

ダウンロードしたzipファイルを右クリックして、全てを展開を選択することで、zipファイルを解凍します。

展開を選択します。

自動的に展開されたフォルダが開かれますので、sakura_install2-4-1-2849-x86.exeのようなexeファイルをダブルクリックしてください。

インストール中に使用する言語は日本語にしてOKをクリックしてください

次へをクリックしてください

内容に同意できる場合次へをクリックしてください

インストール先が聞かれるため、標準設定のまま次へをクリックしてください。

コンポーネントの選択も、標準状態で良いので次へをクリックしてください。

設定保存方法の選択も、標準状態で良いので次へをクリックしてください。

プログラムグループの設定も、標準状態で良いので次へをクリックしてください。

追加タスクの選択は、ディスクトップ上にアイコンを作成するをクリックしてください。

インストール準備画面ではインストールをクリックしてください。

インストールが完了されますので完了をクリックしてください。

インストールが完了するとディスクトップ上にサクラエディタのアイコンが表示されます。

使用したい場合は、このアイコンをダブルクリックしてみてください。

サクラエディタの使い方

起動ができたら、まずは基本的な使い方を覚えていきましょう。

今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。

ファイルの新規作成

ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。

ファイルの保存

ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。

上書き保存

ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。

以下のような画面になるので、保存先のフォルダやファイル名を指定して保存します。

基本的な使い方はこれだけです。

HTML/CSSを入力してブラウザに表示させる方法

最後に、実際にサクラエディタを使って、HTMLファイルとCSSファイルを作成してみましょう。

1．サクラエディタの起動

デスクトップにあるサクラエディタのアイコンをダブルクリックして起動します。

2．HTMLファイルの作成と保存

［ファイル］メニュー →［名前を付けて保存］を選択して、ファイル名を［index.html］として保存してください。

下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。

ここで上書き保存をしてください。図では、c:sampleのフォルダに保存しています。

3．ブラウザで確認

入力した内容をブラウザで確認しましょう。保存したindex.htmlをダブルクリックすると、デフォルトのブラウザで開くことができ、内容を確認することができます。

また、保存したファイルをドラッグ＆ドロップでブラウザに持って行くと確認することができます。

4．CSSファイルの作成と保存

CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。

サクラエディタに戻り、［ファイル］メニュー →［新規作成］を選択します。

［ファイル］メニュー →［名前を付けて保存］を選択し、ファイル名を［style.css］として保存してください。

※保存場所は、［index.html］と同じ場所にする必要があります

※CSSのコードを記述し、上書き保存をします。図では、c:sampleに保存しています。

※この例では背景を水色にします。

5．HTMLファイルにCSSファイルへのリンクを追記

［index.html］に戻り、HTMLファイルに下記のように追記し、上書き保存をします。

<link href=”style.css” rel=”stylesheet” type=”text/css”>

（※CSSファイル［style.css］へリンクするという内容の記述）

6．再度、ブラウザで確認

先ほど保存した、index.htmlのファイルをダブルクリックしてください。

CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。

今回の記事は以上です。

ぜひ実際にインストールして使ってみてください。

他のWindows対応のテキストエディタを使ってみたい場合は、TeraPadの使い方も合わせてご覧ください。

プログラミングを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、Ruby on Railsを使ったWebアプリケーション開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

基礎を固める！プログラミング入門におすすめの書籍10冊【超初心者向け】

プログラミング関連の書籍は数多くありますが、初心者が勉強をはじめるときに、どこから読めばいいのかわからないということはないでしょうか。そこで今回は、プロ...

プログラミング

仙台のIT・情報系専門学校6選｜自分に合った学校の選び方も解説

仙台のIT・情報系専門学校を6校ピックアップしました。田島悠介今回は、なにか相談受けたんだって？大石ゆか...

プログラミング

【連載企画！】週末集中型でプログラミングを身につける方法とは！

本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に転職や起業など、様々なテーマに沿って紹介していくシリーズです。...

プログラミング

BASE上級執行役員藤川真一｜誰かの人生が豊かになることに介在できる楽しさ

「誰から、何を、学ぶべきなのか。」を業界トップの現役エンジニアから聞く「MASTER OF ENGINEER」。今回は、急成長中のネットショップ作成サ...

プログラミング

非エンジニアがWebプログラミングで勉強すべき10のこと

まったくのプログラミング未経験の非エンジニアだと、「いったい何を勉強をすればいいのか」がわからないということもあるでしょう。そこで今回は、現役のエンジニアから、...

プログラミング

池澤あやかが語る！プログラミングの面白さとは【特別インタビュー】

タレント業をしながらプログラミングの仕事も請け負う池澤あやかさんのインタビュー記事です。池澤さんがどうやってプログラミングの学習を始めたのか、どんな人が...

プログラミング

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

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。 01. コンテンツが整理されるグリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。 02. あなたの仕事を高速化する常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。 [PR] プログラミングで挫折しない学習方法を動画で公開中03. 文章の居心地が良くなるようなレイアウトを実現できる少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。 04.　他のデザイナーとの共同作業をもっと容易にしてくれるあなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。 05. バランスの整ったデザインを創りやすいグリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。 06. マルチページのレイアウトに統一感を与えるグリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。 07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。 08. 散らかったレイアウトと、さよならできるグリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。以下の例では、マージンがグレーの色でマークされています。グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。 09. 心地よいデザインの世界が開ける芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。 10.　グリッドのルールを破ってインパクト効果を狙うグリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向にページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。 11. 柔軟性に富むグリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。 12. 対角線のデザインに役立つ文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。 13. 万能に使えるグリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。 14. 余白のデザインに役立つあなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。 15. 読者の目に優しいデザイン活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。次はあなたの番です：グリッドデザインを早速実践しましょうあなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

テキストエディタ「Notepad++」の使い⽅【初⼼者向け】

プログラミングに使えるテキストエディタは数多くありますが、今回はNotepad++（ノートパッド・プラス・プラス）の使い方を初心者向けに解説します。Notepad++はWindows上で動作する初心者にも使いやすい日本語での利用が可能なテキストエディタです。インストールから、htmlを記述する簡単な例までを紹介しますので、ぜひ一度試してみてください。なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。目次本記事は以下の流れでご紹介します。 Notepad++の特徴 Notepad++ のインストール方法 Notepad++ の使い方 HTML/CSSを入力してブラウザに表示させる方法 Notepad++の特徴使い始める前に、Notepad++の特徴を知っておきましょう。 Notepad++はWindowsのメモ帳と同じような操作方法ですので、初心者でも直感的に使うことができます。その後、使い方に慣れてきて自分なりの使い勝手を求めるようになった場合にも応用力が高く、さまざまなカスタマイズが可能です。また、高機能でありながら動作も軽く、ノートパソコンでも軽快に使用することができます。 Microsoft Windows (95/98/NT/2000/XP/Vista/7), Windows, Windows 95/98/ME, Windows NT/2000, Windows XP)の32bit版で動作するとなっていますが、Windows7の64bit環境でも問題なく動作しました。他には下記のような特徴があります。さまざまな文字コードへの対応ブックマーク拡張子ごとの強調文字指定（さらに括弧なども強調表示可能）画面分割（2画面同期スクロールも可能）ズーム自動アップデートではインストールから始めて実際に使用してみましょう。 [PR] プログラミングで挫折しない学習方法を動画で公開中Notepad++のインストールここからは、インストール方法について解説します。 ※本記事のインストール環境はWindows7です 1.ダウンロードページへアクセスダウンロードサイトのリンクから、インストーラーパッケージをダウンロードしてください。画面を下にスクロールすると現れる緑のバーの｢ダウンロードファイル一覧｣をクリックして、全てのファイルを表示させてください。このなかから、npp.5.9.installer.exeをクリックしてダウンロードしてください。ファイル名の数字はバージョンアップされると変化します。 2.インストールダウンロードしたexeファイルをダブルクリックします。このようなメッセージが出るので｢実行(R)｣をクリックします。ここで下記のようなメッセージが出るので、日本語表示のメニューになるようにインストールしたい場合はJapaneseになっていることを確認して、｢はい(Y)｣をクリックします。下記のような画面が出るので｢次へ(N)>｣をクリックします。｢次へ(N)>｣と進んでいくとこのような画面が出るので、リストを下にスクロールし｢Create Shortcut on Desktop｣にチェックを入れて｢次へ(N)>｣をクリックします。これでインストールが始まります。インストールが終わるとデスクトップにショートカットが作成されます。インストールが終わると下記の画面になります。この画面のまま｢完了(F)｣をクリックしてください。初期設定と起動がおこなわれます。プラグイン(後から追加する機能)のアップデート画面が開きます。インターネットに繋がっている場合は、｢Update Selected｣をクリックしてください。インターネットに繋がっていない場合はアップデートできないので、｢Cancel｣を押してください。アップデートが終了し、Notepad++の再起動を確認する画面です。｢はい（Y)｣をクリックしてください。Notepad++が自動的に再起動します。再起動が完了するとNotepad++が自動的に起動します。下記のように簡単な説明が最初に表示されます。これでインストールは終了です。この画面は一度閉じてください。また、デスクトップに下記のショートカットが作成されます。次回からは、このアイコンをダブルクリックするとNotepad++を起動することができます。 Notepad++の使い方 Notepad++のインストールができたら、基本的な使い方を覚えていきましょう。今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。ファイルの新規作成ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。ファイルの保存ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。画面では、c:sample というフォルダに保存しようとしている例になります。上書き保存ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。まずはこれらの使い方だけおさえておきましょう。 HTML/CSSを入力してブラウザに表示する少し応用編です。実際にNotepad++を使って、HTMLファイルとCSSファイルを作成してみましょう。 1．Notepad++の起動デスクトップにあるNotepad++のアイコンをダブルクリックして起動します。 2．HTMLファイルの作成と保存［ファイル］メニュー →［名前を付けて保存］を選択して、ファイル名を［index.html］として保存してください。下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。また、htmlのタグで四角の記号が現れるので、どのように区切られているのかわかりやすく表示されます。ここで上書き保存をしてください。図では、c:sampleのフォルダに保存しています。 3．ブラウザで確認入力した内容をブラウザで確認しましょう。保存したindex.htmlをダブルクリックすると、デフォルトのブラウザで開くことができ、内容を確認することができます。また、保存したファイルをドラッグ＆ドロップでブラウザに持っていくと確認することができます。 4．CSSファイルの作成と保存 CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。 Notepad++に戻り、［ファイル］メニュー →［新規作成］を選択します。一つの画面内にタブが新しく作られ、何も書かれていない空の画面が開きます。［ファイル］メニュー →［名前を付けて保存］を選択し、ファイル名を［style.css］として保存してください。 ※保存場所は、［index.html］と同じ場所にする必要があります。 ※CSSのコードを記述し、上書き保存をします。図では、c:sampleに保存しています。 ※この例では背景を水色にします。 5．HTMLファイルにCSSファイルへのリンクを追記［index.html］に戻り、HTMLファイルに下記のように追記し、上書き保存をします。（※CSSファイル［style.css］へリンクするという内容の記述） <link href=”style.css” rel=”stylesheet” type=”text/css”> 6．再度、ブラウザで確認先ほど保存した、index.htmlのファイルをダブルクリックしてください。 CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。今回の記事は以上です。ぜひ実際にインストールして使ってみてください。他のWindows対応のテキストエディタを使ってみたい場合は、TeraPadの使い方も合わせてご覧ください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なしでプログラミングを学ぶことができます。

プログラミング

プログラミングにも使える！TeraPadの使い方【初心者向け】

プログラミングに使えるテキストエディタは複数ありますが、そのうちの1つであるTeraPad（テラパッド）について初心者向けにご紹介します。インストール方法から簡単な使い方まで紹介しているので、ぜひ使ってみてください。目次本記事は下記の流れでご紹介します。 TeraPadの特徴 TeraPadのインストール方法 TeraPadの使い方 HTML/CSSを入力してブラウザに表示させる方法 TeraPadの特徴 TeraPadは、Windows上で動くフリーのテキストエディタで、Microsoft Windows 95/98/Me/NT4/2000/XP/Vista/7/8の動作する環境で使用可能です。 Windows標準搭載の『メモ帳』にはない、多くの機能を備えています。 HTMLファイルのタグが自動的に色分け表示される行番号が表示される元に戻すの回数が多い (標準で64回可能。メモ帳は、やり直しが1回しか効かない。) ブラウザでのプレビュー機能がある [PR] プログラミングで挫折しない学習方法を動画で公開中TeraPadのインストール方法次に、インストール方法について解説していきます。 ※記事のインストールする環境のOSはWindows7です 1．ダウンロードページにアクセスダウンロードページにアクセスし、下図を参考に枠内をクリックし、ファイルをダウンロードします。このようなメッセージが表示されたら、『実行』をクリックします。ここで『はい』をクリックします。 2．インストールダウンロードができたらインストールを行います。［次へ］をクリックしてください。さらに、［次へ］をクリックします。インストール先を確認し、［次へ］をクリックします。 (※インストール先を変更する場合は、ここで「参照」をクリックします) 「はい」を選択し、フォルダを作成します。さらに、［次へ］をクリックしてください。これでインストール完了です。「Readme.txt」のファイルが表示され、デスクトップに次のようなTeraPadのアイコンが表示されます。 TeraPadの使い方ここからは基本的な使い方について紹介します。今回は基本となる、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。ファイルの新規作成ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。ファイルの保存ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。上書き保存ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。なお、HTMLやJavaScriptなどを入力する際は、「全角スペース」を区別できるように設定することをおすすめします。表示 > オプション > 表示にある「全角空白」にチェックを入れると、全角スペースを入力した際に、四角のマークが表示されるようになります。 HTML/CSSを入力してブラウザに表示する最後に、実際にTeraPadを使って、HTMLファイルとCSSファイルを作成してみましょう。 1．TeraPadの起動デスクトップにあるTeraPadのアイコンをダブルクリックして起動します。 2．HTMLファイルの作成と保存［ファイル］メニュー →［名前を付けて保存］を選択して、ファイル名を［index.html］として保存してください。上のように記述すると、タグが色分け表示されました。上書き保存をします。 3．ブラウザで確認入力した内容をブラウザで確認しましょう。ツールバーの［InternetExplorer］ボタンをクリックすると、ブラウザが起動します。ブラウザが開き、きちんと反映されたことがわかりますね。 4．CSSファイルの作成と保存続いてCSSファイルも作成しましょう。 TeraPadに戻り、［ファイル］メニュー →［新規作成］を選択します。［ファイル］メニュー →［名前を付けて保存］を選択し、ファイル名を［style.css］として保存してください。（※保存場所は、［index.html］と同じ場所にする必要があります） CSSのコードを記述し、上書き保存をします。（※Webページ全体の背景色を『水色』にするという内容の記述） 5．HTMLファイルにCSSファイルへのリンクを追記［index.html］に戻り、HTMLファイルに上のように追記し、上書き保存をします。（※CSSファイル［style.css］へリンクするという内容の記述） 6．再度、ブラウザで確認再度ツールバーの［InternetExplorer］ボタンをクリックして、ブラウザを起動しましょう。 CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。今回の記事は以上です。他のテキストエディタを使ってみたい場合は、Sublime Textの使い方も合わせてご覧ください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境がなくてもプログラミングを学ぶことができます。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

誰でもできる！MAMPのインストール方法【初心者向け】

.post-body img{border: solid 1px #eee;} プログラミングの勉強を始める人にとって最初の難関は、開発環境の構築ではないでしょうか。そんな方でも使える開発環境のMAMPのインストール方法を初心者向けに解説した記事です。 MAMP（マンプ）はPHPの開発環境として使われます。XAMPPと同じように、MySQLも一緒に使えるので便利です。本記事では、MAMPをインストールする方法と、PHPの最初のプログラムが書けるまでを解説しています。本記事の目次本記事は下記の流れで解説します。 MAMPとは？ MAMPのインストール方法 PHPでプログラミング MAMPとは？ MAMPとは「macOS」「Apache」「MySQL」「PHP」の頭文字をとったものです。 MAMPは、これらを一括で使うことができ、PHPとMySQLの開発環境として使用できます。無料ホームページでもそれらを対応したサービスはあるのですが、データ送信に使うFTPソフトが必要だったり、SQLデーターベースの準備が必要で、初心者にとっては難しいこともあります。なお、名前からMacでのみの利用と思われそうですが、WindowsとMacの両方のOSで使用することが可能です。また、無料で使えるMAMPと有料版のMAMP PROがあります。違いとして、例えばlocalhostの代わりにユニークなエイリアスを与えることができるなど高機能になっています。ただし、初心者は無料版で十分でしょう。本記事では、無料版のMAMPのインストール方法のみ紹介します。 [PR] プログラミングで挫折しない学習方法を動画で公開中MAMPのインストール方法それでは早速、MAMPをインストールしてみましょう。 MAMPのダウンロードサイトにアクセスしてください。アクセスすると、このように表示されるので、一番上の画像内にある「Free Download」ボタンをクリックしてください。 Macの場合次の画面で、MacのPCの場合は種類によってクリックする場所が違います。新しいPC（M1やM2など）の場合は、「Apple M1/M2 CPU」と書かれた部分をクリックします。インテルのCPU（i7やi5など）を搭載したPCの場合は、「Intel x86 CPU」と書かれた部分をクリックします。 Windowsの場合一番上に表示されている「Windows 10+」と書かれた部分をクリックします。上記のそれぞれのPCに対応した部分をクリックするとブラウザでダウンロードが始まります。ブラウザの下にダウンロードの進行状況が表示されます。 Mac Windows アプリのサイズがかなり大きいので、ダウンロードに時間がかかります。 macOSでインテルのCPUかどうかを見分けるには？左上のりんごのアップルメニューから「このMacについて」をクリックします。開いた画面に「プロセッサ」と書かれていればインテルのCPUが搭載されていて、「チップ」と書かれていればApple M1などの新しいPCです。 Downloadボタンが見つからないときは？もしDownloadボタンが見当たらないときは、MAMPのトップページを下にスクロールして「Free MAMP download >」リンクをクリックします。 Windowsでダウンロードが始まらないときは？ Windowsで下記の画像が表示されたときは、「保存」をクリックします。ここからは、WindowsとMacそれぞれのインストール方法を紹介します。 Windowsでのインストール Windowsの場合は、実行すると次のようなメッセージが表示される場合があります。この画面は不正なプログラムが自動でインストールされるのを防ぐ機能です。はいを押して、MAMPのインストール画面を表示してください。 Nextをクリックしてください。一緒にインストールするアプリを指定します。今回は無料のMAMPだけインストールするので、チェックは2つとも外してから、Nextをクリックします。使用許諾契約が英語で表示されます。同意してインストールを続ける場合は「I accept the agreement」をクリックして選択し、Nextをクリックします。次はプログラムをインストールするフォルダを指定する画面です。そのままNextをクリックしましょう。次に表示される画面は、スタートメニューに登録する場所の指定です。そのまま「Next」をクリックします。デスクトップにアイコンを作成するかどうかを決める画面が表示されます。そのまま「Next」をクリックします。最後に、今まで入力した情報を確認します。内容に問題なければ「Install」をクリックします。インストールが完了するまで、時間がかかる場合があるので気長に待ちましょう。インストールが完了した画面が表示されます。「Finish」をクリックしたらMAMPのインストールは完了です。 Macでのインストール続いてMacのインストール方法です。ダウンロードしたファイルを開くと、「はじめに」の画面が表示されます。「続ける」をクリックします。「大切な情報」が英語で表示されます。「続ける」をクリックします。「使用許諾契約」の画面が英語で表示されます。「続ける」をクリックすると表示されている使用許諾契約に同意するか尋ねられます。使用許諾契約に同意できるなら「同意する」をクリックします。続いて「インストールの種類」画面が表示され、インストールに必要な記憶装置の空き容量が表示されます。インストールするのに必要な空き容量は、使用しているPCやMAMPのバージョンによって変わるので、よく確認しておきましょう。インストール先の空き容量に問題がなければ、「インストール」をクリックします。インストールの確認を求められるので、パスワードかTouch IDの指紋認証などで許可しましょう。さらにインターネットからダウンロードしたアプリをインストールする確認画面が出ます。「OK」をクリックしてインストールを許可します。インストールが始まります。インストールには時間がかかるので、完了するまで待ちます。インストールが完了したら「閉じる」ボタンをクリックします。インストールが完了すると、ダウンロードしたインストーラのファイルを削除するか尋ねる画面が表示されます。インストールできていれば、インストーラは不要なので「ゴミ箱に入れる」をクリックして削除します。これでMacにMAMPをインストールする作業は完了です。 PHPでプログラミング MAMPがインストールできたら、MAMPを使ってPHPのプログラミングを実行してみましょう。今回は、ブラウザに「PHPのテスト表示成功!」と出力するプログラムを作成します。 PHPのプログラムを動作させるために、WebサーバであるMAMPを起動しておきます。 ※XAMPPなどの他のサーバアプリがすでにインストールされて起動している場合、ポート番号などが競合してMAMPのサーバが起動できない場合があります。サーバを起動する MacでMAMPのサーバを起動するまずは、画面下のDockからMAMPをクリックして開いてください。 MAMPのウィンドウと同時に黄色の「Standard View」の画面が表示されたときは「Show this window when starting application」のチェックを外してから、左上の×で閉じます。 MAMPのコントロールパネルが表示されます。右上にある「Start」をクリックして、サーバを起動します。しばらくしてサーバの起動が完了すると、クリックした「Start」ボタンが「Stop」に変わって、サーバが起動中であることを表す緑色になります。 WindowsでMAMPのサーバを起動する Windowsの場合は、デスクトップ画面に作成されたMAMPアイコンをダブルクリックして起動します。 MAMPをDropboxとリンクするページが表示されますが、Dropboxとのリンクは必須ではないのでそのままページを閉じて大丈夫です。起動時にWindows標準セキュリティ機能などにより、ファイアウォールの確認画面が表示されることがあります。「プライベートネットワーク」だけにチェックを入れて「アクセスを許可する」ボタンを押します。 MAMPが起動してコントロールパネルが表示されます。既定の設定では、Apache Server（Webサーバ）がMAMPの起動時に自動的に開始されます。緑の丸がついていたら起動が完了しています。サーバを停止するには「Stop Severs」、開始するには「Start Servers」をクリックします。停止や開始には少し時間がかかります。反応がないからといってサーバの開始・停止ボタンを短時間に連続してクリックしないようにしましょう。 MAMPのサーバからWebページを表示させるここからはWindows・Mac共通の操作になります。 MAMPのコントロールパネルの「WebStart」をクリックするとブラウザが開き、MAMPのサーバが表示させたWebページが表示されます。（画面はMacで表示した場合です）表示されているページのURLの最初の部分が、自分で配置したWebページを表示させるときに必要になります。自分のPCで表示されているURLの赤枠で囲った部分を覚えておきましょう。これからPHPのプログラムを書いていきますが、MAMPは開いたままにしておいてください。プログラムを書くには、書式情報を含まない文字だけの情報を保存できるテキストエディタが必要です。 Winodwsには「メモ帳」、Macには「テキストエディット」が標準搭載されていますので、今回はそちらを使います。メモ帳（Windows）テキストエディット（Mac）テキストエディット起動後、「新規書類」をクリックします。書式情報のないPHPのコードとして保存するために、メニューバーから「フォーマット」->「標準テキストにする」を選択します。もし、「標準テキストに変換しますか？」と確認画面が出た場合は「OK」をクリックします。 Windows・Macともに、テキストエディタが開けたら次のようにコードを入力します。 <?php print ('PHPのテスト表示成功!') ?> ※「‘PHPのテスト表示成功!’」以外は半角（漢字オフで入力する英数字や記号）で入力します。 Mac Windows 入力できたら、ファイル名をtest1.phpにして、htdocsというフォルダ上に保存します。メモ帳（Windows）メニューバーの「ファイル」->「名前を付けて保存」Cドライブ > MAMP > htdocs テキストエディット（Mac）メニューバーの「ファイル」->「保存」アプリケーション > MAMP > htdocs ここまでできたら、MAMPのコントロールパネルの「WebStart」をクリックし、ブラウザのURLを以下の例のように後半部分を「test1.php」に修正します。このように http://localhost:ポート番号/htdocs以降のファイルパスという形でMAMPで起動させたサーバから、WebページやPHPのプログラムを読み込めます。なお、先ほど保存したファイルを更新すると、この出力結果も更新されます。おわりに MAMPのインストール方法は以上です。もう少しPHPの基礎を知りたい場合は、PHPで文字列を出力する方法やPHPの変数を使う方法をまずはご覧ください。 PHPを勉強していて、・もっと効率的に勉強したい・誰かに聞きながら学びたい・自分でWebサービスを作りたいと思ったことはないでしょうか？そんな方のために、TechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルWebサービスを開発することが可能です。独学に限界を感じている場合はご検討ください。

PHP

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

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次サクラエディタの特徴サクラエディタのインストール方法サクラエディタの使い方HTML/CSSを入力してブラウザに表示させる方法プログラミングを学習中の方へそもそも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

今すぐ設定できる！Javaの開発環境の構築方法(Windows編)【初心者向け】

Javaの開発環境の構築方法について解説しています。Eclipseを使ってJavaでのプログラミングができるように設定していきましょう。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説している記事をまずご覧ください。なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。田島悠介今回は、Eclipseを使ったJavaの開発環境の構築手順を見てみよう。大石ゆかり田島メンター！！Eclipseというのは何ですか～？田島悠介 Eclipseは総合開発環境(IDE)のひとつで、Javaやそれ以外のたくさんの言語に対応しているんだ。今回はWindowsでのインストール方法を解説していくよ。大石ゆかりよろしくお願いします！目次事前準備 Javaのインストール Eclipseのインストール Eclipseを日本語化初期設定の手順入れておくと便利なツール事前準備 Eclipseを動作させるためには、JRE1.7以上が必要です。JREが17.以上がインストールされている場合は、「Javaのインストール」を読み飛ばしてもかまいません。今回は、コマンドでのJavaの実行もできるように、JDKをインストールしておきます。また、Windows10を使用していますが、Windows7、8でも同様の手順でインストール可能です。 ※ライセンスについて Java自体はオープンソースであり、オープンソース版のJDKとして無償で利用できるOpenJDKが存在しています。 Javaのライセンス自体はOracle社が保有しており、Oracle社が提供するJDKはOpenJDKと区別できるよう、OracleJDKと呼ばれています。OracleJDKは2019年4月16日以降「個人的な使用や開発目的に限り無償」、企業での使用などそれ以外は「有償」に変更となりました。 OpenJDKとOracleJDKは基本的には「同一」であり、セキュリティパッチの提供期間がOpenJDKの方が短い、という違いがあります。本記事では機能が同一であり、個人使用や開発では無償で利用できることから、OracleJDKのインストール方法を紹介しています。 OpenJDKを利用したい場合は、以下の公式サイトからダウンロードします。 jdk.java.net [PR] プログラミングで挫折しない学習方法を動画で公開中Javaのインストール事前準備まずは、32bitと64bitでダウンロードするファイルが異なるので、パソコンのビット数を確認しておきましょう。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。システムの種類のビット数をメモしておきます。 JDKのダウンロード Javaの開発環境であるJDK(Java SE Development Kit)をダウンロードします。 ※以下の手順では最新版のJDKがダウンロードされます。過去のバージョンのJDKは以下のサイトからダウンロードできます。過去のバージョンのJDKをダウンロードする： Oracle Java Archive それでは最新版のJDKをダウンロードしましょう。Javaのページにアクセスして、「無償で試す」をクリックします。「JDK Download」をクリックします。 Windows x64 Installerの右側にある「jdk-14.0.1_windows-x64_bin.exe」をクリックします。「I reviewed and…」にチェックを付けてダウンロードボタンをクリックします。 JDKのインストールダウンロードしたインストーラを実行し、次へをクリックします。後でパスを設定するときに必要なので、インストール先をメモしましょう。次へをクリックします。インストールが実行されます。閉じるをクリックしてインストール完了です。環境変数の設定次は、インストールしたJavaを使うための、環境変数を設定します。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。システムの詳細設定をクリックします。環境変数をクリックします。システム環境変数のPathを選択して、編集をクリックします。新規をクリックし、インストール時にメモしたパスに「bin」を追記して入力します。入力が終わったらOKをクリックします。環境変数の画面に戻るので、OKをクリックします。システムのプロパティの画面もOKをクリックして、設定を完了します。動作確認最後に、動作確認を行いましょう。動作確認はコマンドプロンプトでjavacを使い、バージョンを表示することで確認できます。デスクトップの左下のWindowsのマークを右クリックして、ファイル名を指定して実行をクリックします。「cmd」と入力し、OKをクリックします。コマンドプロンプトの画面に、「javac -version」と入力し、Enterキーを押します。以下のように「javac 14.0.1」などとバージョンが表示されれば、JDKのインストール確認完了です。 ※表示されるバージョンはインストールしたJDKのバージョンにより異なります。大石ゆかり EclipseじゃなくてJDKというのをダウンロードするんですか？田島悠介 JDKはJavaの開発環境なんだ。総合開発環境の前にこちらをインストールしておくよ。大石ゆかり分かりました！次はどうしたらいいんでしょう？田島悠介今度はEclipseの方をダウンロード・インストールするよ。手順を見てみよう。 Eclipseのインストール Eclipseのダウンロードページにアクセスして、インストーラをダウンロードします。 Download の「Windows 64bit」をクリックします。もう一度、Downloadをクリックすると、ダウンロードが始まります。ダウンロードしたインストーラ(eclipse-inst-win64.exe)を実行します。 Eclipse IDE for java Developersをクリックします。後で日本語化する時に使うので、Installation Folder(インストールフォルダ)をメモしておいてください。メモをとったら「INSTALL」をクリックします。 Accept Nowをクリックします。インストールが完了するまで数分待ちましょう。以下のような画面になったらインストール完了です。 LAUNCHをクリックしてEclipseを起動します。ワークスペースを指定します。特に指定がなければ、そのままLaunchをクリックします。 Eclipseが起動しました。英語のメニューになっていますので、次は日本語化してみましょう。一旦、Eclipseは終了しておいてください。 Eclipseを日本語化日本語化するためにPleiadesというプラグインを導入します。 Pleiadesのダウンロードページにアクセスして、Windowsをクリックします。以下のリンクをクリックします。ダウンロードしたzipを解凍します。解凍により出てきたsetup.exeを実行します。選択ボタンを押し、Eclipseをインストールしたフォルダの中にある「eclipse.exe」を選択します。選択が終わったら「日本語化する」をクリックしましょう。日本語化が完了したら、Eclipseをインストールしたフォルダに有る「eclipse.exe -clean.cmd」を実行します。以下のように、日本語化されたEclipseが起動します。次回以降は、デスクトップのEclipseのショートカットから起動すれば、日本語化された状態で起動します。初期設定の手順それではEclipseを使ったJavaプロジェクトの作成と実行方法について確認しましょう。「ようこそ」のタブは閉じます。 Eclipseではプロジェクトと呼ばれるまとまりを作成し、その中にパッケージやソースコードを作成していくことでプログラミングを行います。ファイルメニューから新規>Javaプロジェクトをクリックします。プロジェクト名を適宜設定します。半角英数字で指定しましょう。漢字などの日本語は使用できません。入力したら「完了」をクリックします。以下のような画面になります。次に「src」を右クリックし、新規 > パッケージをクリックします。パッケージ名を適宜設定します。こちらも半角英数字で指定しましょう。入力したら「完了」をクリックします。作成したパッケージを右クリックし、新規>クラスをクリックします。名前を適宜設定します。また「public static void main(String[] args)(V)」にチェックを付けます。入力したら「完了」をクリックします。以下のような画面になります。「MyProject1」の中に「mypkg」というパッケージを作成し、さらにパッケージの中にJavaのソースコード「MyClass1.java」を作成した状態です。「.java」の部分は拡張子と呼ばれ、ファイルの種類を表しています。 Javaのプログラムの拡張子は「.java」となります。それでは簡単なソースコードを入力しましょう。 MyClass1の「// TODO 自動生成された…」の下に以下のように入力します。 System.out.println("こんにちは！Javaプログラミング！"); 入力が終わったら実行してみましょう。ツールバーの実行ボタンをクリックします。以下のように実行結果が表示されれば成功です！正しく動作しない場合、入力ミスなどが無いか確認しましょう。入れておくと便利なツール Eclipseには「プラグイン」と呼ばれる機能拡張の仕組みが存在します。例えば、前述した日本語化もPleiadesというプラグインを導入することで実現しています。以前は機能毎に後からプラグインを導入する必要がありましたが、最近のEclipseではあらかじめ主なプラグインが導入済となっています。ここでは導入しておくと便利な設定の1つとしてダークモードを紹介します。またプラグインのインストール、インストール済プラグインの確認方法についても見ていきましょう。ダークモード最近はOSや多くのエディタなどでも取り入れられているダークモードですが、Eclipseでも対応しています。 Eclipseでダークモードを設定するにはウィンドウメニューから設定を選択し、一般>外観でルック＆フィールを「ダーク」に選択します。設定後はEclipseを再起動すると良いでしょう。起動すると以下のようにダークモードが適用されます。プラグインの導入方法新たなプラグインを導入するには、ヘルプの「新規ソフトウェアのインストール…」をクリックします。作業対象を「すべての使用可能なサイト」とし、名前からプラグインを選択します。今回はデータベースPostgreSQL用のプラグインを選択しました。確認画面が表示されます。次へをクリックします。ライセンスに同意し、完了をクリックします。しばらくするとプラグインのインストールが完了します。導入済プラグインの確認方法導入済のプラグインを確認するには、ヘルプから「Eclipse IDE について」をクリックします。表示された画面の「インストール詳細」をクリックします。以下のようにインストール済のソフトウェアやプラグインを確認することが出来ます。以上、WindowsでJavaのEclipseを使った開発環境の構築と動作確認ができました。実際にJavaでプログラミングをしようと思ったら準備するものが多いと感じるかもしれませんが、一連の作業を終えれば実際にプログラミングをすることができます。田島悠介以上でJavaの開発環境構築とEclipseの日本語化は完了だよ。大石ゆかり Pleiadesの導入がちょっと難しそうですね…… 田島悠介このような環境構築はバージョンが変わったりするとやり方も変化する場合があるので、うまくいかない場合は新しい情報もチェックしてみよう。大石ゆかり調べながらやるのが大事ってことですね。ありがとうございました！ Javaの学習サイトもまとめているので、合わせてご覧ください。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 [お知らせ]オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートします。

Java

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】現役エンジニアが解説

目次

サクラエディタの特徴