XcodeでUINavigationBarを追加する方法【初心者向け】

XcodeのUIパーツの1つである【UINavigationBar（ナビゲーションバー）】を追加する方法について初心者向けに解説した記事です。iPhoneアプリなどに、画面遷移のためのバーを表示させることができます。

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

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeでUINavigationBar（ナビゲーションバー）を追加する方法を初心者向けに解説します。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

UINavigationBarとは

iOSアプリでは画面遷移をするものが多々あります。通常、この遷移は一方向ではなくて、前の画面に戻れるようになっています。

そんなときに前の画面に戻るといった遷移をさせるために使うのがUINavigationBarです。

UINavigationBarの使い方

他のUIパーツと同様に、ストーリーボードからドラッグ&ドロップで設置が可能です。

UINavigationBar
XcodeScreenSnapz002

ただし、どの画面に遷移させるかを設定する必要があるので、このやり方は非効率です。

そこで改めて、Navigation Controllerを配置します。

XcodeScreenSnapz003

追加すると2つの画面が表示されます。
XcodeScreenSnapz004

この時、画面右側のViewが「Root View Controller」となっていることに注目してください。左側の「Navigation Controller」ではコードを書く必要はありません。

また、デフォルトではRoot View ContollerはUITableViewになっていますが、これを削除してView Controllerにすることもできます。

XcodeScreenSnapz005

やり方は、Navigation Controllerから右ドラッグでView Controllerへ線を引き、表示されるオプションからRoot View Controllerを選択するだけです。

XcodeScreenSnapz006

XcodeScreenSnapz007
この結果として、ViewContorllerにNavigatioin Barが付き、Segueもrootになりました。
XcodeScreenSnapz008

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

クラスの指定

追加したUIViewControllerにはクラスが割り当てられています。

これでは処理を記述できないので、元々プロジェクトを生成した時にUIViewControllerのクラスとして生成されたViewControllerを利用します。ただし、この後もSegueで画面が繋がることを想定してrootViewContorllerという名前にしておきます。

まず、ViewContoroller.hを選択し表示されるソースの

@interface ViewController : UIViewController

のViewControllerを選択します。
XcodeScreenSnapz009
さらに、メニューから「Edit」→「Refactor…」→「Rename」と選択します。

XcodeScreenSnapz010

このような入力画面が表示されますので、名前をrootViewContorllerにします。

XcodeScreenSnapz011
XcodeScreenSnapz012

すると、@interfaceのみならず、ファイル名や.mファイルの#importや@interface、@implementationまで修正されています。

さらにStoryboardでviewControllerを選択し、CustomClassにrootViewControllerを指定します。

XcodeScreenSnapz012

第2の画面の生成

第2の画面はTableViewとして生成します。StoryboardでTableView Controllerを配置してください。

XcodeScreenSnapz013

この状態ではTableViewContollerにクラスが割り当てられていませんので、SecondViewControllerという名称のクラスを生成して、割り当ててみます。

まずは、File→New→Fileと進みます。

XcodeScreenSnapz015

表示されるダイアログで、Objective-C classを選択します。

XcodeScreenSnapz016

Nextをクリックするとクラス名とスーパークラスの入力を求められます。クラス名はSecondViewControllerで、スーパークラスはUITableViewControllerになります。

さらにNextをクリックするとファイルの保存場所を尋ねるダイアログが表示されます。

XcodeScreenSnapz017

ここでは他のファイルと同じ場所を選択してください。

最後にCreateボタンを押すとSecondViewController.hとSecondViewController.mが生成されます。SecondViewControllerのコーディングは基本的に通常のUITableViewControllerと同じです。

Navigation Itemの追加

Navigation Barにタイトルやボタンを設定するために、RootViewControllerのNavigationBarにNavigation Itemを追加します。

XcodeScreenSnapz018

XcodeScreenSnapz019

ここでは、RootViewControllerのNavigation ItemにSecondViewControllerに遷移するためのBarButton Itemを追加します。

XcodeScreenSnapz020
XcodeScreenSnapz021
デフォルトで表示される文言が「Item」ですので、インスペクタを使ってTitleを「Next」にします。

XcodeScreenSnapz022

このボタンからSecondViewControllerへ向けて右ドラッグで線を引きます。

XcodeScreenSnapz023

ここで表示されるポップアップからpushを選択してください。
XcodeScreenSnapz024

これでRootViewControllerからSecondViewControllerへのpushのSegueが接続されました。

実行する

最後に実行して確認してみましょう。

まずは何もないViewが表示されます。

ここでNextをタップすると作成したTableViewに遷移します。

この時、TableViewには何もしていないのに「Title」と書かれたボタンが表示されています。これをbackBarButtonItemと呼びます。

ボタンのTitleとは「RootViewControllerのNavigation ItemのTitle」ですので、必要に応じて変えてください。

今回の記事は以上です。

ぜひ参考にしてみてください。

他のUIパーツも使いたい場合は、XcodeでUISearchBarを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

初心者も知っておきたい！Xcodeのショートカットキー10選

iPhoneアプリの開発など、iOSアプリの統合開発環境として「Xcode」があります。 Xcodeは無料でインストールできますが、初心者でまだまだ使いこ...

iPhoneアプリ開発

iPhone(iOS)アプリを実機でテストする方法【初心者向け】

Xcodeを使ってiPhoneアプリを開発して、シミュレーターでの確認が完了したら、実機でもテストしてみましょう。今回は、初心者向けにiPhoneアプリ...

iPhoneアプリ開発

XcodeでUISearchBarを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUISearchBar（サーチバー）を追加...

iPhoneアプリ開発

Realmを扱う！Swiftでデータベースを使う方法【初心者向け】

Swiftでデータベースを扱う方法について解説しています。データベースを導入、操作する流れをこの記事でまとめているので、やり方が分からない方は参考にして...

iPhoneアプリ開発

今さら聞けない！Xcodeをインストールする方法【iOSアプリの統合開発環境】現役エンジニアが解説

iPhone（iOS）用のネイティブアプリを開発するにはXcodeが必要です。しかし、Xcodeのインストール方法や開発環境の構築方法を知らなければ、i...

iPhoneアプリ開発

XcodeでUIImageViewを追加する方法【初心者向け】

iPhoneアプリの開発の際に便利な、UIパーツの使い方を初心者向けに紹介する記事です。今回は、XcodeでUIImageView（イメージビュー）を扱...

iPhoneアプリ開発

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

FuelPHPについて現役エンジニアが解説【初心者向け】

FuelPHPにについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 FuelPHPを利用することで、効率的にPHP開発が可能になります。実務でもFuelPHPの案件を探してみてください。目次UINavigationBarとはUINavigationBarの使い方クラスの指定第2の画面の生成Navigation Itemの追加実行するそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 FuelPHPについて詳しく説明していくね！大石ゆかりお願いします！この記事は、PHPのフレームワーク「FuelPHP」について、その特徴と導入方法などを記載した記事です。 PHPにまだあまり慣れていない方でも理解できる内容の記事になっています。 FuelPHPとは FuelPHPは、PHPのWebアプリケーションフレームワークの1つです。 CakePHP、Symfony、CodeIgniterなどのPHPフレームワークなどよりも後に作られた比較的新しいフレームワークです。過去のフレームワークのメリットを取り入れ、活かせるように設計されたフレームワークです。 FuelPHPの特徴 FuelPHPの特徴は一言で言うと「シンプル」です。 FuelPHPのコア機能の開発者がPHPフレームワーク「CodeIgniter」の開発に携わっていたこともあり、CodeIgniterの影響を大きく受けています。 CodeIgniterは、「軽量で速度重視」が特徴です。その影響を大きく受けているFuelPHPも、比較的軽量でシンプルなフレームワークの設計になっています。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中FuelPHPとCakePHPの比較 FuelPHPと比較されるフレームワークに「CakePHP」があります。 CakePHPの特徴「CakePHP」はプログラミング言語「Ruby」のフレームワーク「Ruby on Rails」のコンセプトを取り入れています。「Ruby on Rails」では「設定よりも規約」というコンセプトを取り入れたフレームワークです。つまり「Ruby on Rails」同様、「CakePHP」ではコーディング規約に沿って書けば、短いコーディング量で開発できるのが特徴です。しかし、多くの規約を覚えなければいけないため学習コストが高めなことと、規約から外れた記述をすることが難しく柔軟性が低いデメリットもあります。 CakePHPに対するFuelPHPの特徴 FuelPHPは、「規約よりも設定」というコンセプトを基に設計されています。そのため、規約が少ない分コーディング量は多くなってしまいますが、柔軟で自由度の高いコーディングをすることが可能です。また比較的に学習コストが低いのが特徴です。コーディング規約が少ない分、コードの統一性を取ることが難しいです。そのため、大規模ではなく「小・中規模システム」の開発に向いたフレームワークといえます。もちろん、FuelPHPでも大規模開発は可能です。 GoogleトレンドによるFuelPHPとCakePHPの比較 2021年7月時点のGoogleトレンドの情報によると、FuelPHPとCakePHPの検索量は同程度でした。 FuelPHPの実行環境構築手順それでは、FuelPHPの実行環境を構築する手順について解説します。 FuelPHPをインストールする方法は大きく分けて2つあります。コマンドラインを使用してインストールする方法手動でインストールする方法この記事では、「1.コマンドラインを使用してインストールする方法」について解説していきます。 GitHubからクローンしたり、Zipファイルをダウンロードする「2.手動でインストールする方法」については、FuelPHPの公式ページに記載がありますので、こちらを参照してください。ただし、実務を見据えたエンジニアが開発環境を整える場合は、1.コマンドラインを使用してインストールする方法に慣れていただく必要があります。今回、curlやoilやbrewコマンドを利用します。コマンドを利用してインストールするメリットとして、インストール時に必要な関連するライブラリの用意も自動でしてくれることがあります。コマンドを利用してインストールするデメリットとしては、コマンド操作に慣れる必要がある点です。 1.コマンドラインを使用してインストールする方法 curlのインストールコマンドラインでcurlと入力してエラーが出る場合は、curlのインストールが必要です。 Windowsの場合は、curlのダウンロードページからZipファイルをダウンロードして解凍し、インストーラからインストールしてください。 Macの場合は、Homebrewからインストールが可能です。下記のコマンドを入力してください。 $ brew install curl oilコマンドをインストール curlライブラリを使用して、oilコマンドをインストールします。 oilコマンドとは、FuelPHPが提供するコマンドラインツールです。 oilコマンドを使用することで、新規FuelPHPプロジェクトの作成したり、作成したプロジェクトに設定ファイルを作成できます。 $ curl https://get.fuelphp.com/oil | sh FuelPHPの新規プロジェクト作成インストールされたoilコマンドを使用して、FuelPHPの新規プロジェクトを作成します。コマンドラインでプロジェクトを作成したいディレクトリに移動して、下記のコマンドを実行してください。 <project-name>の部分には、作成する新規プロジェクト名を入力してください。実行した結果、<project-name>に入力したプロジェクトが作成されます。 $ oil create <project-name> 動作確認次に、作成したプロジェクトの起動確認を行います。作成したプロジェクトのrootディレクトリ（<project-name>の直下）に移動して、下記のコマンドを入力してください。 $ oil server このコマンドは、PHP5.4.0から入ったビルトインサーバを起動するコマンドです。ローカル環境下でテストする際などには、専用のWebサーバを用意しなくて済むのでお手軽です。しかし、このWebサーバは開発環境のテスト用に設計されたものなので、本番環境で使用するような高機能Webサーバではありません。本番環境など公開する環境では、Apacheなど高機能なWebサーバ上で、FuelPHPのアプリケーションを稼働させるようにしてください。表示結果ブラウザからhttp:localhost:8000にアクセスしてみましょう。次の画面が表示されたら、作成したFuelPHPプロジェクトが正常に稼働しています。サンプルコードを実行してみようそれでは、作成したFuelPHPプロジェクトを使って、「Hello World!」という文字列を画面に表示してみましょう。作成したFuelPHPプロジェクト内のfuel/app/classes/controllerにhello.phpというPHPファイルを用意しました。 fuel/app/classes/controller以下には、MVCモデルでいうControllerのプログラムを配置します。 FuelPHPはURLを入力することで、Controllerにあるプログラムにアクセスして実行し、Controllerが実行した結果をブラウザに返却します。今回は、ブラウザからControllerにアクセスして、Controllerに記載している「Hello World!」という文字列をブラウザに返却するサンプルプログラムを紹介します。 fuel/app/classes/controller/greeting.php：（サンプルコード） <?php class Controller_Greeting extends Controller { 　　public function action_greeting() 　　{ 　　　　return 'Hello World!'; 　　} } 解説 FuelPHPのControllerを作成するには、いくつかFuelPHPで決められたコーディング規約があります。このコーディング規約がFuelPHPのControllerとして機能させるには必須です。 1.ファイル名はすべて小文字 Controllerとして作成するPHPファイルの名前は小文字で作成してください。 2.Controllerとして作成するPHPのクラスは、FuelPHPが提供するControllerの機能を持ったクラスを継承するサンプルコードでは、FuelPHPが提供するクラス「Controller」をextendsキーワードを使用して継承しています。 extends Controllerでは、「Controller」を継承することで、継承したクラス「Controller_Greeting」がMVCモデルのControllerの機能を持ちます。クラス「Controller」以外にも、FuelPHPはRestAPI用のControllerクラス「Controller_Rest」などの様々な用途に応じたControllerクラスを提供しています。 3.Controllerとして作成するクラスはクラス名に「Controller_」というプレフィックスをつける controllerディレクトリ以下に作成するクラスの名前には、「Controller_」というプレフィクスをつける規約があります。プレフィックスとは、「_」というアンダースコアで名前をつけることです。 Controller_に続くクラス名には、任意のクラス名をつけることができます。また、Controller_に続く任意のクラス名は、そのControllerにアクセスする際のURLです。 4.メソッド名に「action_」のプレフィックスをつけるメソッド名に「action_」のプレフィックスをつけることによって、「Controllerクラスのアクションメソッドである」とアプリケーションに認識されます。「action_」に続くメソッド名には、任意の名前をつけることができます。 FuelPHPのControllerには「action_」以外にも、「get_」や「post_」といったHTTPリクエストメソッドに応じたプレフィックスが用意されています。また、action_に続く任意のメソッド名も、そのControllerにアクセスする際のURLです。以上が、上記サンプルコード内にあるFuelPHPのコーディング規約です。それでは、画面に実行結果を出力します。起動コマンド：このコマンドでPHPのビルトインサーバを起動させたら、サンプルコードに記載のコントローラーにブラウザからアクセスしてみましょう。 $ oil server URL：指定したコントローラーのメソッドにアクセスする際には、FuelPHPのURLの規約に従ってアクセスする必要があります。 URL規約： http://ホスト・ドメイン名/コントローラー名/メソッド名 URL規約に従い、次のURLにアクセスします。 http://localhost:8000/greeting/greeting ホスト・ドメイン名以下の階層では、任意に名付けたコントローラー名とメソッド名を使用します。コントローラー名の部分は、サンプルコードでいうと「Controller_Greeting」の「Greeting」の部分が使用されます。メソッド名の部分は、サンプルコードでいうと「action_greeting」の「greeting」の部分が使用されます。実行結果：まとめ以上、PHPのフレームワーク「FuelPHP」について、その導入部分を解説しました。今回の記事では、FuelPHPの規約の一部を紹介しましたが、より高度なアプリケーションを作成するには、他の規約を覚える必要があります。フレームワークの使いかたを習得するということは、そのフレームワークの規約を覚えることです。紹介した規約をとっかかりにFuelPHPの規約について調べてみることで、より高度なコーディングをすることができるようになると思います。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ PHPを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

PHP

Ruby on RailsのControllerの使い方【初心者向け】

RailsのControllerの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次UINavigationBarとはUINavigationBarの使い方クラスの指定第2の画面の生成Navigation Itemの追加実行する Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回はRailsのコントローラーについて解説しよう。大石ゆかり田島メンター！！コントローラーは何をするんですか〜？田島悠介そうだね、まずはRailsにおいてユーザーから送られてきたリクエストに対してどのようにデータが返されるかという手順から見てみよう。大石ゆかりお願いします！ Controllerとは Controllerの役割を説明するために、ユーザーがrailsアプリケーションで作られたサービスにアクセスしてきたときのリクエストの流れを説明します。ユーザーがブラウザ経由でrailsアプリケーションにリクエストを送ると、そのリクエストがControllerに渡されます。すると、Controllerはリクエストの内容に応じてモデルにデータを取ってくるように命令したり、データを作成・更新するように命令します。その後、Modelが実行したデータに関する処理結果を受け取ってViewに渡して画面が表示されるのです。このようにControllerとはModelとViewの仲介をする役割を担っており、railsアプリケーションの中核をなすともいえます。もう少し具体的な例で説明します。例えば、ユーザーがあるSNSで「Ruby on Rails」についての投稿を検索するとします。そうすると次のような流れで処理が実行されていきます。 Controllerに「Ruby on Rails」についての投稿を検索したいというリクエストが来る ControllerはModelに対して「Ruby on Rails」についての投稿のデータを取るように命令する Modelが取ってきたデータをControllerが受け取り、Viewに渡す Viewは受け取ったデータをもとに表示する内容を作成し、ユーザーに返します田島悠介コントローラーに関する一連の流れはこんな感じかな。大石ゆかりモデルがデータベースと情報をやり取りするためのもので、ビューがユーザーに見える部分でしたね。田島悠介そしてモデルから受け取ったデータをビューに渡すのがコントローラーなんだ。次は実際にコントローラーを作成してみよう。実際にControllerを作ってみようこれから実際にControllerを作成していきます。サンプルとして「Hello, World!!」と表示するControllerを作ってみます。まずは、サンプルアプリケーションを作成していくので、次のコマンドを実行してください。 rails new sample_app cd sample_app これでサンプルアプリケーションの準備が整いました。 Controllerファイルを作ろう Controllerの作成をするコマンドの書式は次の通りです。 rails generate controller コントローラー名今回はhello_controllerを作成したいと思います。コマンドは次のようになります。 rails generate controller hello 実行結果をみると「app/controllers/hello_controller.rb」が作成されています。これでControllerを作成することができたので、次にHelloControllerに「Hello, World!!」と表示する処理を書いていきます。テキストエディタで「app/controllers/hello_controller.rb」を開いて以下のコードを記述しましょう。 class HelloController < ApplicationController def index render plain: 'Hello, World!!' end end 「index」アクションを追加して、plainメソッドで「Hello, World!!」を出力するようにしています。これでHelloControllerのindexアクションにリクエストが来たら、「Hello, World!!」がブラウザ上に表示されるようになります。ルーティングの設定をしよう次にどのようなURLでアクセスが来たらHelloControllerのどのアクションを使うのかを設定する必要があります。これをルーティングの設定といいます。「config/routes.rb」ファイルに次のコードを追加してください。 Rails.application.routes.draw do get 'hello' => 'hello#index' end これで「http://ドメイン/hello」というURLでリクエストが来たときは「HelloControllerのindexアクションを使う」という設定をしています。つまり、ユーザーからのリクエストに対し、Controllerのどのアクションを使用するのか定義しているということになります。実際にブラウザで表示してみよう作ってみたサンプルアプリケーションを起動してブラウザで開いたときに「Hello, World!!」と表示されるのか確認してみましょう。次のコマンドでサンプルアプリケーションを起動させます。 rails server 起動したら「http://localhost:3000/hello」にアクセスしてみてください。ちゃんと「Hello, World!!」と表示されているのがわかると思います。今回はControllerの説明だったのでModelを作成しないサンプルでしたが、このようにControllerとは、アプリケーションの処理の中核をなす役割を担っていることがわかったと思います。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Controllerで利用される機能 Controllerで利用される機能として、４つの機能をご紹介します。 params redirect_to flash render それぞれの機能について以下で解説します。 params paramsはユーザーから送信されたパラメータが格納されている特殊な変数です。パラメータが格納されているか実際に確認してみましょう。「config/routes.rb」ファイルを以下のように修正します。 Rails.application.routes.draw do get 'hello' => 'hello#index' get 'hello/:id'

Ruby

JavaScriptでブラウザのリロードを判定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでブラウザのリロードを判定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでブラウザのリロードを判定する方法について詳しく説明していくね！大石ゆかりお願いします！目次リロードとは window.performance.navigation.typeとは window.performance.navigation.typeの使い方ブラウザのリロードを判定する方法実際に書いてみようまとめリロードとは再読み込みのことです。ブラウザの画面を更新すると、Webサイトを読み込み直しします。この動作をリロードと呼びます。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中window.performance.navigation.typeとは PerformanceNavigationオブジェクトのプロパティとしてtypeがあります。ここには、表示しているWebサイトがどのように表示されたかを表す値が格納されています。格納される値は4種類あり、それぞれ下記の表のような意味があります。 0 リンクやブックマーク、または、URLの直接入力でアクセス 1 画面更新ボタンなどのリロード（再読み込み）でアクセス 2 履歴からのアクセス 255 その他のアクセス window.performance.navigation.typeの使い方 windowオブジェクトは記述の省略が可能なので、performance.navigation.typeと記述するだけで使えます。 performanceオブジェクトはJavaScriptに標準で含まれているのでnewなどで生成する必要もありません。performance.navigation.typeには画面のアクセス方法を表す値が格納されています。この値で処理を分岐すればアクセス方法によって、表示内容を変更できます。ブラウザのリロードを判定する方法 performance.navigation.typeの値を確認します。値が1ならばリロードでの表示ということになります。実際に書いてみようアクセスした方法によって変わるPerformanceNavigationオブジェクトのtypeプロパティの値を確認するだけなので記述も下記の1行だけです。 performance.navigation.type 何かのサイトを表示して、コンソールで上記のコードを実行してみます。結果は実行するタイミングで変わります。サイトをリンクやURL入力で表示した時に実行すると、リンクやURLの直接入力などによるアクセスを意味する0が表示されます。画面をリロードしてもう一度上記のコードを実行すると、リロードによるアクセスを意味する1が表示されます。まとめ使い方は簡単ではあるものの、PerformanceNavigationはすでに非推奨の機能です。PerformanceNavigationTimingという機能に置き換わりつつあります。使用する際はブラウザの対応状況に注意してください。筆者プロフィール横山茂雄（よこやましげお）フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

Laravelでformを使う方法【初心者向け】現役エンジニアが解説

今回は、Laravel のFormを利用してフォームの作成を行っていきます。 LaravelのFormを利用することで、ブラウザ画面からフォームを利用してデータを送信することが可能になります。実務でもWebアプリケーションを開発する際、ユーザーがデータをフォーム入力して、データベースに登録する処理はよく利用しますので、非常に実践的な内容になっています。目次 Formとは Formの例 Laravelとは Laravel の始め方 tinker の使い方 Mysqlの設定 Mysqlの利用 Laravelの処理 Laravel Collectiveの使い方 Formとは WebアプリケーションでFormというと、企業ページへのお問い合わせフォームであったり、SNSの投稿フォームだったり、多岐にわたり多用されます。このFormという単語ですが、初学者の頃は、Fromと混同しやすくタイプミスが発生する点に注意していただくと、学習がスムーズです。今回は、LaravelのライブラリであるLaravel CollectiveというライブラリのFormファサードを利用して実装していきます。 Formファサードとはデザインパターンで言うところの、複数のクラスを利用する上で窓口となるクラスを利用して、依存関係を含めシンプルに処理を実装することができる仕組みです。デザインパターンというのは、プログラミングのアルゴリズムを定型化することで、誰でも高品質な処理を実装することができる考え方です。アルゴリズムというのは、プログラミングの処理の流れです。例えば、子供の頃、迷路の本などで入り口から出口までなぞり書きしたことがあるかと思います。入り口から出口まで後戻りせず、一筆書きで迷路をクリアする処理をアルゴリズムとイメージすると良いかもしれません。クラスとは、あるオブジェクトの設計図です。オブジェクトを作るためには設計図を設計した上で、設計図に基づいてオブジェクトの作成が必要です。オブジェクトとは、クラスという設計図から生成される製品です。家を例にすると、家という製品（オブジェクト）は、柱や壁や電気や水道やガスなどいろいろな部品によって、クラスという設計図に基づいて構成されています。つまり、家の設計図がクラスで、実際の家がオブジェクトというイメージになります。そして、実際の製品をインスタンスと呼びます。これは、生成する家が全く同じクラス（設計図）に基づくオブジェクト（製品）であっても、インスタンス（田中様の家）、インスタンス（鈴木様の家）というように、生成後は別の意味を持った家になるためです。家の設計図であるクラスを利用して、様々な家を集積するようなWebアプリケーションを実装する場合、家というクラスだけでなく、車というクラスや、お店というクラスもあるかもしれません。どの家とどの車が同じ所有者で、その所有者はお店も所有しているのか、お店を利用するだけなのか、というようにクラス同士が連動して動作する場合、最終的なWebアプリケーションがクラスでごちゃごちゃになりかねません。そこで、Formファサードのような依存関係をシンプルに実装してくれる機能を利用していくと、実務でも保守のしやすい素敵なアプリケーションを実装可能になります。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Formの例今回は次のようなFormタグを利用します。 Form::model Form::modelで、モデルデータと連動しながらForm処理を開始します。そうでない場合は、Form::openを利用することができます。 Form::label Form::labelで、ラベルの生成処理をします。 Form::text Form::textで、テキストボックスの生成処理をします。 Form::submit Form::submitで、送信表示の生成処理をします。 Form::close Form::closeで、Formタグの実装を終了します。今回利用するFormタグ以外にも、たくさんのFormタグが存在するので、Laravel Collectiveの公式ページを参考にしていただくと良いですよ。 LaravelCollective | HTML v6.x Laravelとは Laravelとは、PHPでWebアプリケーションを開発する際、セキュリティも高く、効率的な開発をすることができるフレームワークです。フレームワークとは、Web開発における共通処理であるライブラリを呼び出すことで、効率的にWebアプリケーションを開発することができるツールです。ライブラリとは、よく利用する便利な処理をまとめて実装しているプログラムです。同じような処理をしているライブラリが、世界中に存在するため、どのライブラリを呼び出し利用するかはプログラマーが考えて決定します。 Laravel の始め方今回解説する実装環境は、PHP7.2系とLaravel6系とMySQL5.6系です。 MySQLの最新バージョンはMySQL8系ですが、実行環境の都合でMySQL5.6系ですので、基本的にはMySQL8系でも同じ考え方をしていただくと良いです。今回はcomposerコマンドを利用して、techacademyというプロジェクト名で、Laravel6.x系最新版で立ち上げます。 ^6.0 と書けば、バージョン6.xの最新版が選択されます。コマンド composer create-project --prefer-dist laravel/laravel techacademy ^6.0 Laravelのインストール方法やcomposerのインストール・使い方についてはこちらの記事を参考にしてみてください。 Laravelのバージョン Laravelの現在の最新バージョンはLaravel8です。しかし、Laravel6を利用するのは、Laravel6がLTSというバージョンだからです。 LTSとは、長期に渡りサポートされるバージョンを意味します。最終的なサポート期間がLaravel6のほうがLaravel8よりも長いため、実務ではLaravel6を利用することが多いです。バージョン公開日セキュリティサポート 8.0 2020年9月8日 2021年9月8日まで 7.0 2020年3月3日 2021年3月3日まで 6.0 2019年9月3日 2022年9月3日まで tinker の使い方 Laravelでは php artisan tinker というコマンドを実行すると、Laravelの機能を実行するREPLが起動します。 REPLとは対話型コマンドでアプリケーションを操作する方法です。 tinkerの起動方法コマンドラインで次のコマンドを入力するとtinkerが起動します。 php artisan tinker tinkerの終了方法 REPLの実行中は、行頭に>>>が表示されています。その状態でexitと入力することでtinkerを終了することができます。 >> exit MySQLの設定いくつかMySQLの設定が必要です。代表的な設定を抜粋して解説します。 config/database.php 設定内容 'default' => env('DB_CONNECTION', 'mysql'), 解説ここでは、MySQLを利用するという指定をしています。 .env 設定内容 DB_DATABASE=techacademy 解説ここではtechacademyというデータベースを利用する指定をしています。 MySQLの利用 MySQLの起動コマンド sudo service mysql start sudo mysql -u root 解説 MySQLが未起動の場合、sudo service mysql startでMySQLを起動します。 sudo mysql -u rootでMySQLにログインします。今回は学習用なので、ユーザー名がrootでパスワードがないパターンのログインコマンドです。実務で利用する場合は、任意のログイン情報を設定していただく必要がございます。 techacademyデータベースを作成コマンド CREATE DATABASE `techacademy`; 解説 MySQLにログイン後CREATE DATABASE `techacademy`;というコマンドを実行することで、techacademyというデータベースを作成することができます。 Laravelの処理 Laravel側で実装する代表的な処理を抜粋して解説します。 tinkerでデータベース接続を確認する方法コマンド php artisan tinker >>>DB::reconnect(); 解説 php artisan tinkerというコマンドを実行することでtinkerを利用します。 tinkerを利用しているREPLの状態は、行頭に>>>が表示されている状態です。その状態で、DB::reconnect();を実行します。無事データベースへの接続が完了していれば、次のような表示がされます。 => IlluminateDatabaseMySqlConnection {#683} マイグレーションファイルの作成と実行マイグレーションファイルとは、テーブルの作成・削除、カラムの追加・削除に関するデータベースのテーブル管理を行うファイルです。コマンド php artisan make:migration create_techacademy_table --create=techacademies php

PHP

Pythonによるk-meansクラスタリングの実装方法を現役エンジニアが解説【初心者向け】

Pythonによるk-meansクラスタリングの実装方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次UINavigationBarとはUINavigationBarの使い方クラスの指定第2の画面の生成Navigation Itemの追加実行するそもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonによるk-meansクラスタリングの実装方法について詳しく説明していくね！大石ゆかりお願いします！ 1. k-meansとは？ k-meansとはクラスタリングの手法の一つで、非階層型クラスタリングのアルゴリズムです。クラスタの平均を用いて、与えられたクラスタ数 k個に分類することからこの名前が付けられました。k平均法と呼ばれることもあります。非階層型クラスタリングとは、異なる性質の集団の中から似た特徴を持ったものでクラスタを行う手法のことです。階層型と異なり、階層的な構造を持たず、予め決められたクラスタ数でサンプルを分類します。サンプルが大量にある正規分布のデータに対して、データをグループ分けを行う際に効果的です。また、クラスタリングは機械学習の手法一つでアルゴリズムから特徴を見つけて分類を行うことから、「教師なし学習」となります。 2. NumpyのインストールここからはPythonでクラスタリングを行うための環境をセッティングしていきます。まずは、配列の演算を扱うためのライブラリとしてNumpyをインストールしていきます。以下のコマンドを実行してインストールします。 pip install numpy [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中3. Pandasのインストール続いて、サンプルデータのファイルを読み込み、データフレームの形式に変換するためにPandasをインストールします。 pip install pandas 4. scikit-learnのインストール機械学習ライブラリのscikit-learnをインストールします。scikit-laernは機械学習のアルゴリズムやサンプルのデータが同梱されています。 pip install scikit-learn 5. matplotlibのインストールクラスタリングの結果をグラフにプロットするためにmatplotlibをインストールします。 pip install matplotlib 6. 各ライブラリの使い方必要なライブラリをインストールできたら、ライブラリのインポートを行います。各ライブラリのインポートは以下の通りです。 from matplotlib import pyplot as plt from sklearn import datasets, preprocessing from sklearn.cluster import KMeans import numpy as np import pandas as pd これで必要なライブラリのインポートは完了です。それでは、具体的にライブラリの使い方を手順を交えて説明します。データの読み込みまずはクラスタリングに使用するデータを用意します。ここではscikit-learnを使用してデータセットの読み込みを行います。scikit-learnには分類や回帰といった機械学習の問題に使うことができるデータセットが同梱されています。使用可能なデータセットは以下の公式ドキュメントにまとめられています。 7. Dataset loading utilities ここでは、この中からワインの種類のデータセットを使っていきます。以下の記述でデータを読み込みます。 wine_data = datasets.load_wine() 前処理データを読み込んだ後、データを解析するために必要な前処理を行います。 pandasを使用し、先程読み込んだデータをデータフレームに変換していきます。 df = pd.DataFrame(wine_data.data, columns=wine_data.feature_names) ここで、このデータセットの構造を確認してみます。以下の1行で変換したデータフレームの最初の5行を出力します。 print(df.head()) 結果は以下のように出力され、13列のカラムがあることが分かります。 alcohol malic_acid ash alcalinity_of_ash magnesium ... proanthocyanins color_intensity hue od280/od315_of_diluted_wines proline 0

Python

Javaのインナークラスの使い方を現役エンジニアが解説【初心者向け】

Javaのインナークラスの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Java講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介インナークラスの使い方について詳しく説明していくね！大石ゆかりお願いします！インナークラスとはクラスの中に定義されたクラスのことを内部クラスと言います。内部クラスを利用することで、クラス間の関係がわかりやすくなり、ソースコードがシンプルになり、可読性が増します。また、使用場所を限定し、その存在を外部から隠したい場合にも使用します。内部クラスは定義された場所によって、呼び出し方や動作が変わってきます。 staticで定義されたクラスインナークラス static以外で定義されたクラスメンバーインナークラス：クラスのメンバとして定義されたクラスローカルインナークラス：メソッド内で定義されたクラス無名インナークラス：ローカルインナークラスの中で名前をつけないものインナークラスの使い方と注意点それではそれぞれのインナークラスの使い方を解説していきます。メンバーインナークラスメンバーインナークラスとはクラスのメンバとして定義されたクラスです。クラスにはフィールドやメソッドがありますが、それらと同じようにクラスの一つの内側（mainメソッドや他のブロックの外側）に定義します。アクセス方法はインスタンスを作成する場所によって異なります。ローカルインナークラスローカルインナークラスはメソッドの中でクラスを宣言し、そのメソッド内のみで利用します。ローカルインナークラスの定義は、ローカル変数と同様に、メソッドブロック内に記述します。ローカルインナークラスを使用するには、そのインナークラスをインスタンス化する必要があり、そのインスタンス化のコードは、メソッド内のクラス定義の後に貴繻子しなければなりません。無名インナークラス無名インナークラスは匿名クラスとも呼ばれるローカルインナークラスの一つです。無名インナークラスは、その場限りのサブクラスを定義し、オーバーライドしたメソッドを利用するもので、再利用しないため、名前を付けない事から、無名インナークラスと呼ばれます。無名インナークラスでは、その定義とインスタンス化をまとめて行います。このクラスの定義を終えるには、中括弧で閉じてセミコロンを付けます。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中実際に書いてみよう・メンバーインナークラス class Outer{ Outer(){ System .out.println("Outerクラスがインスタンス化されました"); } class Inner{ Inner(){ System .out.println("Innerクラスがインスタンス化されました"); } } } public class NestSample { public static void main(String[]args){ Outer out = new Outer(); Outer.Inner in = out.new Inner(); } } 実行結果 Outerクラスがインスタンス化されました Innerクラスがインスタンス化されました・ローカルインナークラス public class LocalSample{ public static void main(String[] args){ foo(); } public static void foo(){ class LocalInner{ LocalInner(){ System.out.println("ローカルインナークラスがインスタンス化されました"); } } new LocalInner(); } } 実行結果ローカルインナークラスがインスタンス化されました・無名インナークラス class MySuper{ void foo(){ System.out.println("スーパクラスのfoo()が呼ばれました"); } } public class AnonymousSample { public static void main(String[] args) { MySuper sp = new MySuper(){ void foo(){ System.out.println("無名インナークラスのfoo()が呼ばれました"); } }; sp.foo(); } } 実行結果無名インナークラスのfoo()が呼ばれましたまとめインナークラスとは、クラスの中にstatic以外で定義されたクラスであり、定義された場所によって「メンバーインナークラス」「ローカルインナークラス」「無名インナークラス」があります。監修してくれたメンター松井紀明メーカー系で17年エンジニアとして勤務後、現在はフリーのエンジニアとしてリモートワークで働いています。 Java、Perl、COBOL、最近ではRuby、PHP等、様々な言語での開発を経験しています。TechAcademyではJavaコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、JavaやServletの技術を使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

Java

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

XcodeでUINavigationBarを追加する方法【初心者向け】

UINavigationBarとは

UINavigationBarの使い方

クラスの指定

第2の画面の生成

Navigation Itemの追加

実行する

関連するキーワード

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

FuelPHPについて現役エンジニアが解説【初心者向け】

Ruby on RailsのControllerの使い方【初心者向け】

JavaScriptでブラウザのリロードを判定する方法を現役エンジニアが解説【初心者向け】

Laravelでformを使う方法【初心者向け】現役エンジニアが解説

Pythonによるk-meansクラスタリングの実装方法を現役エンジニアが解説【初心者向け】

Javaのインナークラスの使い方を現役エンジニアが解説【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

UINavigationBarとは

UINavigationBarの使い方

クラスの指定

第2の画面の生成

Navigation Itemの追加

実行する

記事を検索

関連するキーワード

関連する記事

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

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

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